Modernize Layout
diff --git a/templates/register.htm b/templates/register.htm
index 624a0cf..e1dab8f 100644
--- a/templates/register.htm
+++ b/templates/register.htm
@@ -2,10 +2,10 @@
<?php echo $SERVICE_NAME;?>
</h1>
-<form class="needs-validation" novalidate action="" method="POST">
+<form class="row g-3 needs-validation" novalidate action="" method="POST">
<!-- Username input -->
- <div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="form3Example3">Username*</label>
+ <div class="col-md-4">
+ <label class="form-label font-weight-bold" for="form3Example3">Username</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_username.','.$VAL_USER->max_username;?>}" required
title="At least 5 not whitespace characters" name="username" type="text" id="form3Example0"
class="form-control <?php if(isset($error) && $error && !isset($_POST['username'])){echo 'border-danger';}?>"
@@ -16,10 +16,9 @@
</div>
</div>
<!-- 2 column grid layout with text inputs for the first and last names -->
- <div class="row mb-3">
- <div class="col">
+ <div class="col-md-4">
<div class="form-outline">
- <label class="form-label font-weight-bold" for="form3Example1">First name*</label>
+ <label class="form-label font-weight-bold" for="form3Example1">First name</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_first_name.','.$VAL_USER->max_first_name;?>}" required
title="At least 2 not whitespace characters" name="name" type="text" id="form3Example1"
class="form-control <?php if(isset($error) && $error && !isset($_POST['name'])){echo 'border-danger';}?>"
@@ -30,9 +29,9 @@
</div>
</div>
</div>
- <div class="col">
+ <div class="col-md-4">
<div class="form-outline">
- <label class="form-label font-weight-bold" for="form3Example2">Last name*</label>
+ <label class="form-label font-weight-bold" for="form3Example2">Last name</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_last_name.','.$VAL_USER->max_last_name;?>}" required
title="At least 2 not whitespace characters" name="last_name" type="text" id="form3Example2"
class="form-control <?php if(isset($error) && $error && !isset($_POST['last_name'])){echo 'border-danger';}?>"
@@ -43,11 +42,10 @@
</div>
</div>
</div>
- </div>
<!-- Email input -->
- <div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="form3Example3">Email address*</label>
+ <div class="form-outline md-6">
+ <label class="form-label font-weight-bold" for="form3Example3">Email address</label>
<input required name="email" type="email" id="form3Example3"
class="form-control <?php if(isset($error) && $error && !isset($_POST['email'])){echo 'border-danger';}?>"
placeholder="myemail@example.com"
@@ -58,18 +56,24 @@
</div>
<!-- Password input -->
- <div id="password-div" class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="pw1">Password*</label>
+ <div id="password-div" class="col-md-8">
+ <label class="form-label font-weight-bold" for="pw1">Password</label>
<input required
title="Combination of upper and lowercase letters, numbers, punctuation, and special symbols" name="password" type="password" id="pw1"
class="form-control"
placeholder="********" oninput="check_password_match()"
value="<?php echo isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '' ?>" />
+ </div>
+ <div class="col-md-4">
+ <label for="pwqinfo">Rating</label>
+ <input class="form-control" type="text" name="pwqinfo" id="pwqinfo" readonly>
+ </div>
+ <div class="col-md-12">
<div class="progress mt-2">
<div class="progress-bar bg-danger" role="progressbar" id="pwqbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
- <input class="form-control" type="text" name="pwqinfo" id="pwqinfo" readonly>
+
</div>
<!--
<div class="form-group">
@@ -82,8 +86,8 @@
</div>
-->
<!-- Password confirmation input -->
- <div id="pwconfirm" class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="pw2">Confirm your Password*</label>
+ <div id="pwconfirm" class="form-outline col-md-8">
+ <label class="form-label font-weight-bold" for="pw2">Confirm your Password</label>
<input required
name="password_confirm" type="password" id="pw2"
class="form-control <?php if(isset($error) && $error && !isset($_POST['password_confirm'])){echo 'border-danger';}?>"
@@ -92,9 +96,8 @@
Passwords do not match.
</div>
</div>
- <hr class="mt-2 mb-3" />
<div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="eula">End User License Agreement*</label>
+ <label class="form-label font-weight-bold" for="eula">End User License Agreement</label>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="eula" required
title="You need to agree to the EULA in order to proceed">
@@ -109,9 +112,8 @@
</div>
</div>
</div>
- <hr class="mt-2 mb-3" />
<div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="privacy_policy">Privacy Policy*</label>
+ <label class="form-label font-weight-bold" for="privacy_policy">Privacy Policy</label>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="privacy_policy" id="privacy_policy" required
title="You need to agree to the privacy policy in order to proceed">
@@ -125,17 +127,14 @@
</div>
</div>
</div>
-
- <hr class="mt-2 mb-3" />
<!--captcha here-->
<div class="form-outline mb-3">
-
- <label class="form-label font-weight-bold" for="form3Example4">Captcha:</label>
+ <label class="form-label font-weight-bold" for="form3Example4">Captcha</label>
<div class="container mb-2 offset-md-2">
<img id="captcha" src="<?php echo $BASE_URL.'/captcha.php?token='.$_SESSION['captcha_token']; ?>" />
<div id="reload_captcha">
- <button id="reload" class="btn btn-outline-info" type="button"> <span
- class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
+ <button id="reload" class="btn btn-outline-info" type="button"> <span class="glyphicon glyphicon-refresh"
+ aria-hidden="true"></span></button>
</div>
</div>
<input pattern="[^\s]{<?php echo $CAPTCHA_LENGTH; ?>,}" required