Next pass at bootstrap conversion

Author: carlbennett

src/templates/User/Verify.phtml

@@ -1,72 +1,48 @@
-<?php
-
+<?php /* vim: set colorcolumn= expandtab shiftwidth=2 softtabstop=2 tabstop=4 smarttab: */
 namespace BNETDocs\Templates\User;
-
 use \CarlBennett\MVC\Libraries\Common;
 use \CarlBennett\MVC\Libraries\Pair;
-
-$title       = 'Verify Account';
+$title = 'Verify Account';
 $description = 'This form allows an individual to verify their account with a token.';
 $this->opengraph->attach( new Pair( 'url', '/user/verify' ));
-
-switch ( $this->getContext()->error ) {
-  case 'INVALID_TOKEN':
-    $message = 'The token is expired or invalid and therefore cannot be used.';
-    break;
-  case 'INTERNAL_ERROR':
-    $message = 'An internal error occurred while processing your request. '
-      . 'Our staff have been notified of the issue. Try again later.';
-    break;
-  default:
-    $message = $this->getContext()->error;
+$error = $this->getContext()->error;
+switch ($error)
+{
+  case 'INVALID_TOKEN': $message = 'The token is expired or invalid and therefore cannot be used.'; break;
+  case 'INTERNAL_ERROR': $message = 'An internal error occurred while processing your request. Our staff have been notified of the issue. Try again later.'; break;
+  default: $message = $error;
 }
-
-require('./header.inc.phtml');
-?>
-      <article>
-<?php if ($this->getContext()->error !== false) { ?>
-        <header>Verify Account</header>
-<?php if (!empty($message)) { ?>
-        <section class="red">
-          <p><?php echo $message; ?></p>
-        </section>
-<?php } ?>
-        <form method="GET" action="?">
-          <section>
-            <label for="u">User Id:</label><br/>
-            <input
-              type="text"
-              name="u"
-              id="user_id"
-              value="<?php echo filter_var($this->getContext()->user_id, FILTER_SANITIZE_FULL_SPECIAL_CHARS); ?>"
-              tabindex="1"
-              required
-            /><br/>
-            <label for="t">Token:</label><br/>
-            <input
-              type="text"
-              name="t"
-              id="token"
-              value="<?php echo filter_var($this->getContext()->token, FILTER_SANITIZE_FULL_SPECIAL_CHARS); ?>"
-              tabindex="2"
-              required
-              autofocus="autofocus"
-            />
-          </section>
-          <section>
-            <input
-              type="submit"
-              value="Verify Account"
-              tabindex="3"
-            />
-          </section>
-        </form>
-<?php } else { ?>
-        <header class="green">Account Verified</header>
-        <section class="green">
-          <p>Your account has been verified successfully!</p>
-          <p>Use the navigation to the left to move to another page.</p>
-        </section>
-<?php } ?>
-      </article>
-<?php require('./footer.inc.phtml'); ?>
+$token = filter_var($this->getContext()->token, FILTER_SANITIZE_FULL_SPECIAL_CHARS);
+$user_id = filter_var($this->getContext()->user_id, FILTER_SANITIZE_FULL_SPECIAL_CHARS);
+require('./header.inc.phtml'); ?>
+<div class="container">
+<? if ($this->getContext()->error !== false) { ?>
+  <h1>Verify Account</h1>
+<? if (!empty($message)) { ?>
+  <div class="alert alert-danger">
+    <p class="mb-0"><?=$message?></p>
+  </div>
+<? } ?>
+  <form method="GET" action="?">
+    <div class="form-group">
+      <label class="font-weight-bold" for="u">User Id:</label>
+      <input class="bg-dark border border-primary form-control text-light" type="text" name="u" id="user_id" placeholder="Enter the user id here" value="<?=$user_id?>" tabindex="1"
+        required
+      /><br/>
+    <div class="form-group">
+    </div>
+      <label class="font-weight-bold" for="t">Token:</label>
+      <input class="bg-dark border border-primary form-control text-light" type="text" name="t" id="token" placeholder="Enter the token here" value="<?=$token?>" tabindex="2" required autofocus="autofocus"/>
+    </div>
+    <div class="form-group">
+      <input class="btn btn-success" type="submit" value="Verify Account" tabindex="3"/>
+    </div>
+  </form>
+<? } else { ?>
+  <h1 class="text-success">Account Verified</h1>
+  <div class="alert alert-success">
+    <p class="mb-0">Your account has been verified successfully!</p>
+  </div>
+<? } ?>
+</div>
+<? require('./footer.inc.phtml'); ?>