mason/site/login_dialog.mas

   1
   2 <!-- Login Dialog -->
   3
   4 <%args>
   5 $goto_url => '/'
   6 </%args>
   7
   8 <%init>
   9     my $join_breeding_programs = eval{ $c->get_conf('user_registration_join_breeding_programs') };
  10 </%init>
  11
  12 <div class="modal fade" id="site_login_dialog" name="site_login_dialog" tabindex="-1" role="dialog" aria-labelledby="site_login_dialog_title">
  13     <div class="modal-dialog modal-sm" role="document">
  14         <div class="modal-content">
  15             <div class="modal-header" style="text-align:center">
  16 %  if (!$c->config->{require_login}) {
  17                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  18 %  }
  19                 <h3 class="modal-title" id="site_login_dialog_title">Login</h3>
  20             </div>
  21             <div class="modal-body">
  22                 <form id="login_form" name="login_form">
  23                     <div class="container-fluid">
  24
  25 % if ($c->config->{default_login_janedoe}) {
  26                         <input class="form-control" style="width:240px" id="username" name="username" placeholder="Username" type="text" value="janedoe"/>
  27                         <br />
  28                         <input class="form-control" style="width:240px" id="password" name="password" placeholder="Password" type="password" value="secretpw"/>
  29 % } else {
  30                         <div class="input-group">
  31                             <input class="form-control" id="username" name="username" placeholder="Username" type="text" tabindex="1" />
  32                             <span class="input-group-btn">
  33                                 <button id="forgot_username_modal_show" class="btn btn-default" type="button" tabindex="4">&nbsp;<span class="glyphicon glyphicon-question-sign"></span>&nbsp;</button>
  34                             </span>
  35                         </div>
  36                         <br />
  37                         <div class="input-group">
  38                             <input class="form-control" id="password" name="password" placeholder="Password" type="password" tabindex="2" />
  39                             <span class="input-group-btn">
  40                                 <button id="reset_password_modal_show" class="btn btn-default" type="button" tabindex="5">&nbsp;<span class="glyphicon glyphicon-question-sign"></span>&nbsp;</button>
  41                             </span>
  42                         </div>
  43 % }
  44                         <br />
  45
  46                         <input type="hidden" value="<% $goto_url %>" id="goto_url" name="goto_url" />
  47
  48                         <div>
  49                             <button class="btn btn-default" id="new_user_modal_show" style="float:left" tabindex="6">New User</button>
  50                             <button class="btn btn-primary" id="submit_password" name="submit_password" type="submit" style="float:right" tabindex="3">Login</button>
  51                         </div>
  52                     </div>
  53                 </form>
  54             </div>
  55             <div class="modal-footer">
  56 %  if (!$c->config->{require_login}) {
  57                 <button id="close_site_login_dialog_button" type="button" class="btn btn-default" data-dismiss="modal" style="float:left">Close</button>
  58 %  }
  59             </div>
  60         </div>
  61     </div>
  62 </div>
  63
  64 <div class="modal fade" id="site_login_forgot_username_dialog" name="site_login_forgot_username_dialog" tabindex="-1" role="dialog" aria-labelledby="site_login_forgot_username_dialog_title">
  65     <div class="modal-dialog" role="document">
  66         <div class="modal-content">
  67             <div class="modal-header" style="text-align:center">
  68                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  69                 <h3 class="modal-title" id="site_login_forgot_username_dialog_title">Forgot Username</h3>
  70             </div>
  71             <div class="modal-body">
  72                 <div>
  73                     If you've forgotten your username, enter your email address below. An email will be sent with any account username(s) associated with your email address.
  74                 </div>
  75                 <br />
  76                 <div style="white-space:nowrap">
  77                     <form id="forgot_username_form" name="forgot_username_form" style="white-space:nowrap">
  78                         <div style="white-space:nowrap; align:center">
  79                             <label class="textlabel">Email Address</label>
  80                             <input class="form-control" style="width:200px; white-space:nowrap; float:center" id="forgot_username_email" name="forgot_username_email" /><br />
  81                             <button type="submit" class="btn btn-primary" id="submit_forgot_username_email" style="float:center" >Get Username(s)</button>
  82                         </div>
  83                     </form>
  84                 </div>
  85             </div>
  86             <div class="modal-footer">
  87                 <button id="close_site_login_forgot_username_dialog_button" type="button" class="btn btn-default" data-dismiss="modal" style="float:left">Close</button>
  88             </div>
  89         </div>
  90     </div>
  91 </div>
  92
  93 <div class="modal fade" id="site_login_reset_password_dialog" name="site_login_reset_password_dialog" tabindex="-1" role="dialog" aria-labelledby="site_login_reset_password_dialog_title">
  94     <div class="modal-dialog" role="document">
  95         <div class="modal-content">
  96             <div class="modal-header" style="text-align:center">
  97                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  98                 <h3 class="modal-title" id="site_login_reset_password_dialog_title">Reset Password</h3>
  99             </div>
 100             <div class="modal-body">
 101                 <div>
 102                     To reset your password, please enter your email address. A link will be sent to that address with a link that will enable you to reset your password.
 103                 </div>
 104                 <br />
 105                 <div style="white-space:nowrap">
 106                     <form id="password_reset_form" name="password_reset_form" style="white-space:nowrap">
 107                         <div style="white-space:nowrap; align:center">
 108                             <label class="textlabel">Email Address</label>
 109                             <input class="form-control" style="width:200px; white-space:nowrap; float:center" id="password_reset_email" name="password_reset_email" /><br />
 110                             <button type="submit" class="btn btn-primary" id="submit_password_reset_email" style="float:center" >Get link</button>
 111                         </div>
 112                     </form>
 113                 </div>
 114             </div>
 115             <div class="modal-footer">
 116                 <button id="close_site_login_reset_password_dialog_button" type="button" class="btn btn-default" data-dismiss="modal" style="float:left">Close</button>
 117             </div>
 118         </div>
 119     </div>
 120 </div>
 121
 122 <div class="modal fade" id="site_login_new_user_dialog" name="site_login_new_user_dialog" tabindex="-1" role="dialog" aria-labelledby="site_login_new_user_dialog_title">
 123     <div class="modal-dialog modal-lg" role="document">
 124         <div class="modal-content">
 125             <div class="modal-header" style="text-align:center">
 126                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 127                 <h3 class="modal-title" id="site_login_new_user_dialog_title">Create New User</h3>
 128             </div>
 129             <div class="modal-body">
 130                 <div class="row">
 131                     <div class="col-sm-10 col-sm-offset-1">
 132
 133                         <form id="new_account_form">
 134                             <div class="container-fluid">
 135                                 <div class="panel panel-danger">
 136                                     <div class="panel-heading">Notice</div>
 137                                     <div class="panel-body">
 138                                         <ul>
 139                                             <li><b>Before</b> creating a new account, please check if you <b>already have an account</b> using the <a href="/search/direct_search.pl?search=directory">directory search</a>. </li>
 140                                             <li>A link will be emailed to you. Please click on it to activate the account.</li>
 141                                             <li><b>All fields are required.</b></li>
 142                                         </ul>
 143                                     </div>
 144                                 </div>
 145
 146                                 <div class="form-horizontal">
 147                                     <div class="form-group">
 148                                         <label class="col-sm-3 control-label">First Name: </label>
 149                                         <div class="col-sm-9">
 150                                             <input class="form-control" type="text" name="first_name" value="" />
 151                                         </div>
 152                                     </div>
 153                                     <div class="form-group">
 154                                         <label class="col-sm-3 control-label">Last Name: </label>
 155                                         <div class="col-sm-9">
 156                                             <input class="form-control" type="text" name="last_name" value="" />
 157                                         </div>
 158                                     </div>
 159 % if ( $join_breeding_programs ) {
 160                                     <div class="form-group">
 161                                         <label class="col-sm-3 control-label">Breeding Program(s): </label>
 162                                         <div class="col-sm-9">
 163                                             <div id="breeding_programs_div"></div>
 164                                       </div>
 165                                     </div>
 166 % } else {
 167                                     <div class="form-group">
 168                                         <label class="col-sm-3 control-label">Organization: </label>
 169                                         <div class="col-sm-9">
 170                                             <input class="form-control" type="text" name="organization" value="" />
 171                                         </div>
 172                                     </div>
 173 % }
 174                                     <div class="form-group">
 175                                         <label class="col-sm-3 control-label">Username: </label>
 176                                         <div class="col-sm-9">
 177                                             <input class="form-control" type="text" name="username" value="" />
 178                                             <p class="help-block">Username must be at least 7 characters long.</p>
 179                                         </div>
 180                                     </div>
 181                                     <div class="form-group">
 182                                         <label class="col-sm-3 control-label">Password: </label>
 183                                         <div class="col-sm-9">
 184                                             <input class="form-control" type="password" name="password" value="" />
 185                                             <p class="help-block">Password must be at least 7 characters long and different from your username.</p>
 186                                         </div>
 187                                     </div>
 188                                     <div class="form-group">
 189                                         <label class="col-sm-3 control-label">Confirm Password: </label>
 190                                         <div class="col-sm-9">
 191                                             <input class="form-control" type="password" name="confirm_password" value="" />
 192                                             <p class="help-block">Password must be at least 7 characters long and different from your username.</p>
 193                                         </div>
 194                                     </div>
 195                                     <div class="form-group">
 196                                         <label class="col-sm-3 control-label">Email Address: </label>
 197                                         <div class="col-sm-9">
 198                                             <input class="form-control" type="text" name="email_address" value="" />
 199                                             <p class="help-block">An email will be sent to this address requiring you to confirm its receipt to activate your account.</p>
 200                                         </div>
 201                                     </div>
 202
 203                                     <div align="right">
 204                                         <button class="btn btn-default btn-lg" type="reset" >Reset</button>
 205                                         <button class="btn btn-primary btn-lg" type="submit" name="create_account" >Create Account</button>
 206                                     </div>
 207                                 </div>
 208                             </div>
 209                         </form>
 210
 211                     </div>
 212                 </div>
 213             </div>
 214             <div class="modal-footer">
 215                 <button id="close_site_login_new_user_dialog_button" type="button" class="btn btn-default" data-dismiss="modal" style="float:left">Close</button>
 216             </div>
 217         </div>
 218     </div>
 219 </div>
 220
 221 <script>
 222 jQuery(document).ready( function() {
 223
 224     jQuery("#site_login_dialog").on('shown.bs.modal', function() {
 225         jQuery("#username").focus();
 226     });
 227
 228     jQuery('#forgot_username_modal_show').click(function() {
 229         jQuery('#site_login_forgot_username_dialog').modal('show');
 230     });
 231
 232     jQuery('#forgot_username_form').submit(function(event) {
 233         event.preventDefault();
 234         var form_data = jQuery('#forgot_username_form').serialize();
 235         jQuery.ajax( {
 236             url: '/ajax/user/forgot_username',
 237             data: form_data,
 238             error: function(r) { alert('An error occurred! Sorry!');  },
 239             success: function(r) {
 240                 if (r.error) { alert(r.error); }
 241                 else {
 242                     alert(r.message);
 243                     jQuery('#site_login_forgot_username_dialog').modal('hide');
 244                 }
 245             }
 246         });
 247     });
 248
 249     jQuery('#reset_password_modal_show').click(function(){
 250         event.preventDefault();
 251         jQuery('#site_login_reset_password_dialog').modal('show');
 252     });
 253
 254     jQuery('#password_reset_form').submit( function(event) {
 255         event.preventDefault();
 256         var form_data = jQuery('#password_reset_form').serialize();
 257         jQuery.ajax( {
 258             url: '/ajax/user/reset_password',
 259             data: form_data,
 260             error: function(r) { alert('An error occurred! Sorry!');  },
 261             success: function(r) {
 262                 if (r.error) { alert(r.error); }
 263                 else {
 264                     alert(r.message);
 265                     jQuery('#site_login_reset_password_dialog').modal('hide');
 266                 }
 267             }
 268         });
 269     });
 270
 271     jQuery('#new_user_modal_show').click(function(){
 272         event.preventDefault();
 273         jQuery('#site_login_new_user_dialog').modal('show');
 274     });
 275     jQuery("#site_login_new_user_dialog").on('shown.bs.modal', function() {
 276         get_select_box('breeding_programs', 'breeding_programs_div', { 'name': 'breeding_programs', 'id': 'breeding_programs', 'default': -1, 'multiple': 1 });
 277     });
 278
 279     jQuery('#new_account_form').submit(function(event) {
 280         event.preventDefault();
 281         var form_data = jQuery('#new_account_form').serialize();
 282         //alert(JSON.stringify(form_data));
 283         jQuery.ajax({
 284             url: '/ajax/user/new',
 285             beforeSend: function(){
 286                 jQuery('#working_modal').modal('show');
 287             },
 288             data: form_data,
 289             success: function(r) {
 290                 jQuery('#working_modal').modal('hide');
 291                 console.log(r);
 292                 if (r.error) { alert(r.error); }
 293                 else {
 294                     let message = r.message || 'New account added. Check your email for the confirmation link - you must confirm your account before you can login.';
 295                     alert(message);
 296                     jQuery('#site_login_new_user_dialog').modal('hide');
 297                     jQuery('#site_login_dialog').modal('hide');
 298                 }
 299             }
 300         });
 301     });
 302
 303     jQuery("#username, #password").keydown(function(event) {
 304         var key = event.keyCode ? event.keyCode : event.which;
 305         if ( key === 13 ) {
 306             jQuery("#login_form").submit();
 307             event.preventDefault();
 308         }
 309     });
 310     jQuery('#login_form').submit( function(event) {
 311         event.preventDefault();
 312         var form_data = jQuery('#login_form').serialize();
 313         if (!jQuery('#username').val() || !jQuery('#password').val()) {
 314             alert('Please enter a username and password');
 315             return;
 316         }
 317         jQuery.ajax( {
 318             url: '/ajax/user/login',
 319             data: form_data,
 320             error: function(r) { alert('An error occurred! Sorry!');  },
 321             success: function(r) {
 322                 if (r.error) {
 323                     alert(r.error);
 324                     return;
 325                 }
 326                 if (r.goto_url.match('login')) {
 327                     location.href='/';
 328                 } else if (r.goto_url && r.goto_url !== "" ) {
 329                     location.href=r.goto_url;
 330                 } else {
 331                     location.href='/';
 332                 }
 333             }
 334         });
 335     });
 336
 337     // Display New User Dialog if `new_user` query param set
 338     url = new URL(window.location.href);
 339     if ( url.searchParams.get('new_user') ) {
 340         jQuery('#site_login_new_user_dialog').modal('show');
 341     }
 342 });
 343 </script>
 344
 345
 346 <!-- End login dialog -->