Open-ILS/src/templates/staff/t_login.tt2

   1 <div class="container">
   2   <div class="row">
   3     <div class="col-md-3"></div><!-- offset? -->
   4       <div class="col-md-6">
   5         <fieldset>
   6           <legend><h1>[% l('Sign In') %]</h1></legend>
   7           <!--
   8             login() hangs off the page $scope.
   9             Values entered by the user are put into 'args',
  10             which is is autovivicated if needed.
  11             The input IDs are there to match the labels.
  12             They are not referenced in the Login controller.
  13           -->
  14           <form ng-submit="login(args)" id="login_form" name="login-form" class="form-horizontal" role="form">
  15             <div class="form-group">
  16               <label class="col-md-4 control-label" for="login-username">[% l('Username') %]</label>
  17               <div class="col-md-8">
  18                 <input type="text" id="login-username" class="form-control"
  19                   focus-me="focusMe" select-me="focusMe"
  20                   placeholder="Username" ng-model="args.username"/>
  21               </div>
  22             </div>
  23
  24             <div class="form-group">
  25               <label class="col-md-4 control-label" for="login-password">[% l('Password') %]</label>
  26               <div class="col-md-8">
  27                 <div class="input-group">
  28                   <input type="password" id="login-password" class="form-control"
  29                     placeholder="Password" autocapitalize="none" spellcheck="false" autocomplete="false" aria-description="[% l('Your password is not visible.') %]"
  30                          ng-model="args.password"/>
  31                   <span class="input-group-addon">
  32                     <button id="show_password" type="button" role="switch" aria-label="password visibility" aria-checked="false" ><i class="glyphicon glyphicon-eye-close"></i></button>
  33                   </span>
  34                 </div>
  35               </div>
  36             </div>
  37
  38             <div class="form-group" ng-show="workstations.length > 0">
  39               <label class="col-md-4 control-label"
  40                 for="login-workstation">[% l('Workstation') %]</label>
  41               <div class="col-md-8">
  42                 <select class="form-control" ng-model="args.workstation"
  43                   ng-options="ws for ws in workstations"
  44                   id="login-workstation" name="select">
  45                   <option>[% l('Select Workstation') %]</option>
  46                 </select>
  47               </div>
  48             </div>
  49
  50             <div class="form-group">
  51               <div class="col-md-offset-4 col-md-2">
  52                 <button type="submit" class="btn btn-default">[% l('Sign in') %]</button>
  53               </div>
  54               <div class="col-md-2">
  55                 <span ng-show="loginFailed" class="label label-warning">[% l('Login Failed') %]</span>
  56               </div>
  57             </div>
  58
  59             <div class="form-group" ng-if="pendingXacts">
  60               <div class="col-md-offset-4 col-md-8">
  61                 <div class="alert alert-warning">
  62                   [% | l('{{pendingXacts | date:"short"}}') %]
  63                   Unprocessed offline transactions waiting for upload.
  64                   Last transaction added at [_1].
  65                   [% END %]
  66                 </div>
  67               </div>
  68             </div>
  69
  70           </form>
  71         </fieldset>
  72       </div>
  73     <div class="col-md-3"></div><!-- offset? -->
  74   </div>
  75 </div>
  76 <script>
  77     // password visibility eye
  78     let btn = document.getElementById('show_password');
  79     let input = document.getElementById('login-password');
  80     let icon = btn.querySelector('i');
  81     btn.addEventListener('click', () => {
  82       if(input.type == 'password'){
  83         input.type = 'text';
  84         icon.setAttribute('class', 'glyphicon glyphicon-eye-open');
  85         btn.setAttribute('aria-checked', 'true');
  86         input.setAttribute('aria-description', "[% l('Your password is visible!') %]");
  87       }else {
  88         input.type = 'password';
  89         icon.setAttribute('class', 'glyphicon glyphicon-eye-close');
  90         btn.setAttribute('aria-checked', 'false');
  91         input.setAttribute('aria-description', "[% l('Your password is not visible.') %]");
  92       }
  93       input.focus();
  94     });
  95     $('#login_form').submit(()=>{
  96         input.type='password';
  97     });
  98 </script>