Improve forms

1 files changed, 57 insertions, 36 deletions

diff --git a/index.html b/index.html
index c7fdf92..eb8f093 100644
--- a/index.html
+++ b/index.html
@@ -114,23 +114,25 @@
                                 </a>
                             </div>
                             <span data-tkey="signin_or">or</span>
-                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
+                            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-form">
                                 <div class="form-group">
                                     <label class="sr-only" for="username" data-tkey="username">Username</label>
-                                    <input type="text" class="form-control" id="username" data-tkey-placeholder="username" placeholder="Username" required>
+                                    <input type="text" class="form-control" id="username"
+                                           data-tkey-placeholder="username" placeholder="Username"
+                                           required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" id="password" data-tkey-placeholder="password" placeholder="Password" required>
-                                </div>
-                                <div class="form-group">
-                                    <button class="btn btn-primary btn-block" type="button" id="submit" data-tkey="signin_button">Sign in</button>
+                                    <input type="password" class="form-control" id="password"
+                                           data-tkey-placeholder="password" placeholder="Password"
+                                           required="required" />
                                 </div>
                                 <!--div class="checkbox">
                                     <label>
                                         <input type="checkbox"> keep me logged-in
                                     </label>
                                 </div-->
+                                <button type="submit" class="btn btn-primary btn-block" id="submit" data-tkey="signin_button">Sign in</button>
                                 <div class="login-failed" data-tkey="login_failed" style="display: none;">Login failed.</div>
                             </form>
                         </div>
@@ -171,32 +173,45 @@
                             <form id="formSignUp" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="username">Username</label>
-                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text" data-tkey-placeholder="username_placeholder" placeholder="Desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters." required="">
+                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text"
+                                           data-tkey-placeholder="username_placeholder" placeholder="Desired username"
+                                           data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters."
+                                           pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="name">Display name</label>
-                                    <input class="form-control" name="name" id="modalSignUpName" type="text" data-tkey-placeholder="name_placeholder" placeholder="Desired display name" data-tkey-title="name_title" title="Choose a display name.">
+                                    <input class="form-control" name="name" id="modalSignUpName" type="text"
+                                           data-tkey-placeholder="name_placeholder" placeholder="Desired display name"
+                                           data-tkey-title="name_title" title="Choose a display name." />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="email">E-mail</label>
-                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email" data-tkey-placeholder="email" placeholder="E-mail" data-tkey-title="email_title" title="Enter a valid email address." required="">
+                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email"
+                                           data-tkey-placeholder="email" placeholder="E-mail"
+                                           data-tkey-title="email_title" title="Enter a valid email address."
+                                           required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password">Password</label>
-                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password" data-tkey-placeholder="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password"
+                                           data-tkey-placeholder="password" placeholder="Password"
+                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
+                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password"
+                                           data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
+                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
+                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
+                                </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="exit_signup_btn" data-tkey="cancel">Cancel</button>
+                                    <button type="submit" class="btn btn-primary" id="btnSignUp" data-tkey="signup_button">Sign up</button>
                                 </div>
                             </form>
                         </div>
                         <div class="panel-footer">
-                            <div class="text-center">
-                                <button class="btn btn-default" data-tkey="cancel" id="exit_signup_btn">Cancel</button>
-                                <input form="formSignUp" class="btn btn-primary" id="btnSignUp" type="submit" data-tkey-value="signup_button" value="Sign up">
-                            </div>
-                            <br>
                             <div class="text-center small">
                                 <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                 <a href="#" class="lang-select" role="button" data-lang="en">English</a>
@@ -219,24 +234,29 @@
                             <form id="formChangePassword" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_new">New Password</label>
-                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password" data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password"
+                                           data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password"
+                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
+                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password" data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters." required="">
+                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password"
+                                           data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
+                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
+                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
+                                </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="cancel_change_pass_button" data-tkey="cancel">Cancel</button>
+                                    <button type="submit" class="btn btn-primary" id="btnPasswdChange" data-tkey="change_password_button">Change password</button>
                                 </div>
                             </form>
                         </div>
-                        <div class="panel-footer text-center">
-                            <button class="btn btn-default" data-tkey="cancel" id="cancel_change_pass_button">Cancel</button>
-                            <input form="formChangePassword" class="btn btn-primary" id="btnPasswdChange" type="submit" data-tkey-value="change_password_button" value="Change password"></button>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
 
-
         <!-- upgrade account to AAI screen -->
         <div class="container" id="screen_upgrade_to_aai" style="display: none;">
             <div class="row">
@@ -253,19 +273,19 @@
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword" data-tkey-placeholder="password" placeholder="Password" required>
+                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword"
+                                           data-tkey-placeholder="password" placeholder="Password" />
                                 </div>
                                 <div data-tkey="upgrade_to_aai_body_text_2">
                                     <p>Select <span class="badge">No</span> to do a separate account.</p>
                                 </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
+                                    <button type="submit" class="btn btn-primary" id="btnUpgradeToAAIYes" data-tkey="upgrade_to_aai_yes_button">Yes, upgrade to AAI</button>
+                                </div>
                             </form>
                         </div>
                         <div class="panel-footer text-center">
-                            <div>
-                                <button class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
-                                <input form="formUpgradeToAAI" class="btn btn-primary" id="btnUpgradeToAAIYes" type="submit" data-tkey-value="upgrade_to_aai_yes_button" value="Yes, upgrade to AAI"></button>
-                            </div>
-                            <br>
                             <div class="text-center small">
                                 <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                 <a href="#" class="lang-select" role="button" data-lang="en">English</a>
@@ -473,7 +493,10 @@
                                 <div class="form-group">
                                     <span class="small" data-tkey="robot_address">Robot’s address</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <input type="text" class="form-control" id="robot_address_input" data-tkey-placeholder="robot_address_placeholder" placeholder="IP address" pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address.">
+                                    <input type="text" class="form-control" id="robot_address_input"
+                                           data-tkey-placeholder="robot_address_placeholder" placeholder="IP address"
+                                           data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."
+                                           pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" />
                                 </div>
                                 <div class="form-group" id="gui_layout_select_form_group">
                                     <span class="small" data-tkey="layout_select" >Layout</span>
@@ -482,19 +505,17 @@
                                         <option value="square-layout"  data-tkey="square_layout">Square</option>
                                     </select>
                                 </div>
+                                <div class="text-center">
+                                    <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
+                                    <button type="submit" class="btn btn-primary" id="settings_save_btn" data-tkey="save">Save</button>
+                                </div>
                             </form>
                         </div>
-                        <div class="panel-footer text-center">
-                            <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
-                            <input form="settingsForm" type="submit" class="btn btn-primary" id="settings_save_btn" data-tkey-value="save" value="Save"/>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- Modals -->
-
         <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
              Used as a wait screen; must be the last element in the DOM.
              It is active after load, javascript turns it off after initialization. -->