change_password.html

 1   <div class="row">
 2       <div class="col-12 col-md-4 offset-md-3">
 3       	<h2>#i18n{module.mylutece.database.xpage.change_password.pageTitle}</h2>
 4   	    <#if action_successful?has_content>
 5               <h3>#i18n{module.mylutece.database.message.change_password.success}</h3>
 6               <form role="form" id="changePassword" name="changePassword" action="${action_successful}" method="post">
 7               <button class="btn btn-primary" id="button-return" type="submit" name="btnBack">
 8                   #i18n{module.mylutece.database.xpage.account.btnBack}
 9               </button>
 10               </form>
 11   	    <#else>
 12               <#if error_code?has_content >
 13                   <#assign typeClass = " is-invalide" />
 14                   <#if error_code = "error_mandatory_fields">
 15                       <div class="alert alert-warning">#i18n{module.mylutece.database.message.account.errorMandatoryFields}</div>
 16                       <#assign classOldPassword = typeClass />
 17                       <#assign classNewPassword = typeClass />
 18                       <#assign classConfirmation = typeClass />
 19                   </#if>
 20                   <#if error_code = "error_old_password">
 21                       <div class="alert alert-warning">#i18n{module.mylutece.database.message.change_password.badOldPassword}</div>
 22                       <#assign classOldPassword = typeClass />
 23                   </#if>
 24                   <#if error_code = "error_confirmation_password">
 25                       <div class="alert alert-warning">#i18n{module.mylutece.database.message.account.errorConfirmation}</div>
 26                       <#assign classNewPassword = typeClass />
 27                       <#assign classConfirmation = typeClass />
 28                   </#if>
 29                   <#if error_code = "error_same_password">
 30                       <div class="alert alert-warning">#i18n{module.mylutece.database.message.change_password.errorSamePassword}</div>
 31                       <#assign classOldPassword = typeClass />
 32                       <#assign classNewPassword = typeClass />
 33                       <#assign classConfirmation = typeClass />
 34                   </#if>
 35                   <#if error_code = "password_minimum_length">
 36                       <div class="alert alert-error">${password_minimum_length!}</div>
 37                       <#assign classNewPassword = typeClass />
 38                       <#assign classConfirmation = typeClass />
 39                   </#if>
 40                   <#if error_code = "password_format">
 41                       <div class="alert alert-error">#i18n{mylutece.message.password.format}</div>
 42                       <#assign classNewPassword = typeClass />
 43                       <#assign classConfirmation = typeClass />
 44                   </#if>
 45                   <#if error_code = "password_already_used">
 46                       <div class="alert alert-error">#i18n{mylutece.message.password.passwordAlreadyUsed}</div>
 47                       <#assign classNewPassword = typeClass />
 48                       <#assign classConfirmation = typeClass />
 49                   </#if>
 50                   <#if error_code = "max_password_change">
 51                       <div class="alert alert-error">#i18n{mylutece.message.password.maxPasswordChange}</div>
 52                       <#assign classNewPassword = typeClass />
 53                       <#assign classConfirmation = typeClass />
 54                   </#if>
 55               </#if>	
 56               <form id="changePassword" name="changePassword" action="jsp/site/plugins/mylutece/modules/database/DoChangePassword.jsp" method="post">
 57               <input type="hidden" name="plugin_name" value="${plugin_name}" >
 58               <div class="form-floating">
 59                   <div class="input-group">
 60                       <input class="form-control${classOldPassword?if_exists}" type="password" name="old_password" id="old_password" maxlength="100" value="" >
 61                       <label for="old_password">#i18n{module.mylutece.database.xpage.change_password.oldPassword} *</label>
 62                       <span class="input-group-text">
 63                           <a href="#" class="btn btn-light" id="lutece-password-toggler-old" title="Afficher / masquer le mot de passe">
 64                               <i class="ti ti-eye" aria-hidden="true"></i>
 65                           </a>    
 66                       </span>
 67                   </div>
 68               </div>
 69               <div class="form-floating">
 70                   <div class="input-group">
 71                       <input class="form-control${classPassword?if_exists}" type="password" id="new_password" name="new_password" maxlength="100" value="" >
 72                       <label for="new_password">#i18n{module.mylutece.database.xpage.create_account.password} *</label>
 73                       <span class="input-group-text">
 74                       <a href="#" class="btn btn-light" id="lutece-password-toggler" title="Afficher / masquer le mot de passe">
 75                           <i class="ti ti-eye" aria-hidden="true"></i>
 76                       </a>
 77                       </span>
 78                       <span class="input-group-text">
 79                           <a href="#" class="btn btn-light" title="Générer un mot de passe" id="generate_password">
 80                               <i class="ti ti-settings me-1" aria-hidden="true"></i>
 81                               <span class="d-none">Générer un mot de passe</span>
 82                           </a>
 83                       </span>
 84                   </div>
 85                   <div class="position-absolute" style="top:5px;left: 105%;width:50%">
 86                       <div id="status">#i18n{portal.users.create_user.passwordComplexity}</div>
 87                       <div class="progress">
 88                           <div id="progress_bar_first_password" class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 0%;" aria-valuenow="0">0%</div>
 89                       </div>
 90                   </div>
 91               </div>
 92               <div class="form-floating">
 93                   <input class="form-control${classConfirmation?if_exists}" type="password" id="confirmation_password" name="confirmation_password" maxlength="100" value="">
 94                   <label for="confirmation_password">#i18n{module.mylutece.database.xpage.change_password.confirmationPassword} * : </label>
 95               </div>
 96               <div class="form-row pt-3">
 97                   <button class="btn btn-primary" id="button-subscribe" type="submit" name="changePassword"> 
 98                       <span class="ti ti-check"></span> #i18n{module.mylutece.database.xpage.change_password.btnValidate}
 99                   </button>
 100                   <button class="btn btn-secondary" id="button-return" type="button" name="back" onclick="javascript:history.go(-1)">
 101                       <span class="ti ti-circle-x"></span> #i18n{module.mylutece.database.xpage.account.btnBack} 
 102                   </button>
 103               </div>
 104               </form>
 105           </#if>
 106       </div>
 107   </div>
 108   <script type="module">
 109   import { LutecePassword } from './themes/shared/modules/lutecePassword.js';
 110   const password = new LutecePassword();
 111   const oldPassword = new LutecePassword();
 112   
 113   const generator = document.getElementById('generate_password');
 114   const newPassword = document.getElementById('new_password');
 115   const confirmNewPassword = document.getElementById('confirmation_password');
 116   const progressBar = document.getElementById('progress_bar_first_password');
 117   
 118   generator.addEventListener('click', (e) => {
 119       e.preventDefault()
 120       const newPassValue = password.generatePassword();
 121       newPassword.value = newPassValue
 122       confirmNewPassword.value = newPassValue
 123       newPassword.dispatchEvent(new Event('input'));
 124   });
 125   
 126   oldPassword.passwordInput = '#old_password'
 127   oldPassword.passTogglerBtn = '#lutece-password-toggler-old'
 128   oldPassword.initPassToggler( );
 129   password.passwordInput = '#new_password'
 130   password.progressBar = '#progress_bar_first_password'
 131   password.initPassToggler( );
 132   password.getComplexity( );
 133   </script>