create_account.html

 1   <div class="container">
 2       <div class="row">
 3           <div class="col-sm-12 col-md-4 offset-md-4">
 4           <#if error_code?has_content >
 5               <#assign typeClass = " is-invalid" />
 6               <#if error_code = "error_mandatory_fields">
 7               <div class="alert alert-danger" role="alert">
 8                   <div class="d-flex">
 9                       <div>
 10                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 11                       </div>
 12                       <div class="ms-2">#i18n{module.mylutece.database.message.account.errorMandatoryFields}</div>
 13                   </div>
 14               </div>
 15               <#if !(user.login?has_content)>
 16               <#assign classLogin = typeClass />
 17               </#if>
 18               <#if !(user.password?has_content)>
 19               <#assign classPassword = typeClass />
 20               </#if>
 21               <#if !(user.confirmation?has_content)>
 22               <#assign classConfirmation = typeClass />
 23               </#if>
 24               <#if !(user.lastName?has_content)>
 25               <#assign classLastName = typeClass />
 26               </#if>
 27               <#if !(user.firstName?has_content)>
 28               <#assign classFirstName = typeClass />
 29               </#if>
 30               <#if !(user.email?has_content)>
 31               <#assign classEmail = typeClass />
 32               </#if>
 33               </#if>
 34               <#if error_code = "error_confirmation_password">
 35               <div class="alert alert-danger" role="alert">
 36                   <div class="d-flex">
 37                       <div>
 38                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 39                       </div>
 40                       <div class="ms-2">#i18n{module.mylutece.database.message.account.errorConfirmation}</div>
 41                   </div>
 42               </div>
 43               <#assign classPassword = typeClass />
 44               <#assign classConfirmation = typeClass />
 45               </#if>
 46               <#if error_code = "error_login_already_exists">
 47               <div class="alert alert-danger" role="alert">
 48                   <div class="d-flex">
 49                       <div>
 50                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 51                       </div>
 52                       <div class="ms-2">#i18n{module.mylutece.database.message.create_account.errorLogin}</div>
 53                   </div>
 54               </div>
 55               <#assign classLogin = typeClass />
 56               </#if>
 57               <#if error_code = "error_syntax_email">
 58               <div class="alert alert-danger" role="alert">
 59                   <div class="d-flex">
 60                       <div>
 61                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 62                       </div>
 63                       <div class="ms-2">#i18n{module.mylutece.database.message.account.errorBadEmail}</div>
 64                   </div>
 65               </div>
 66               <#assign classEmail = typeClass />
 67               </#if>
 68               <#if error_code = "error_sending_email">
 69               <div class="alert alert-danger" role="alert">
 70                   <div class="d-flex">
 71                       <div>
 72                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 73                       </div>
 74                       <div class="ms-2">#i18n{module.mylutece.database.message.account.errorSendingEmail}</div>
 75                   </div>
 76               </div>
 77               </#if>
 78               <#if error_code = "error_captcha">
 79               <div class="alert alert-danger" role="alert">
 80                   <div class="d-flex">
 81                       <div>
 82                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 83                       </div>
 84                       <div class="ms-2">#i18n{module.mylutece.database.message.create_account.errorCaptcha}</div>
 85                   </div>
 86               </div>
 87               </#if>
 88               <#if error_code = "password_minimum_length">
 89               <div class="alert alert-danger" role="alert">
 90                   <div class="d-flex">
 91                       <div>
 92                           <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 93                       </div>
 94                       <div class="ms-2">${password_minimum_length!}</div>
 95                   </div>
 96               </div>
 97               <#assign classPassword = typeClass />
 98               <#assign classConfirmation = typeClass />
 99               </#if>
 100               <#if error_code = "password_format">
 101                   <div class="alert alert-danger" role="alert">
 102                       <div class="d-flex">
 103                           <div>
 104                               <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>
 105                           </div>
 106                           <div class="ms-2">${password_format_message!}</div>
 107                       </div>
 108                   </div>
 109                   <#assign classPassword = typeClass />
 110                   <#assign classConfirmation = typeClass />
 111               </#if>
 112           </#if>
 113           <#if action_successful?has_content>
 114               <h2>#i18n{module.mylutece.database.xpage.create_account.pageTitle}</h2>
 115               <form role="form" id="createAccount" name="createAccount" action="${action_successful}" method="post">
 116                   <p class="fs-3"><span class="ti ti-circle-check text-success"></span> #i18n{module.mylutece.database.message.create_account.success}</p>
 117                   <button class="btn btn-primary" id="button-return" type="submit" name="BtnBack" value="#i18n{module.mylutece.database.xpage.account.btnBack}">#i18n{module.mylutece.database.xpage.account.btnBack}</button>
 118               </form>
 119           <#elseif action_validation_email?has_content>
 120               <h2>#i18n{module.mylutece.database.xpage.create_account.pageTitle}</h2>
 121               <form id="createAccount" name="createAccount" action="${action_validation_email}" method="post">
 122                   <p class="fs-3"><span class="ti ti-alert-circle"></span>#i18n{module.mylutece.database.message.create_account.validation.email}</p>
 123                   <button class="btn btn-primary" id="button-return" type="submit" name="BtnBack" value="#i18n{module.mylutece.database.xpage.account.btnBack}">#i18n{module.mylutece.database.xpage.account.btnBack}</button>
 124               </form>
 125           <#elseif action_validation_success?has_content>
 126               <h2>#i18n{module.mylutece.database.xpage.create_account.pageTitle}</h2>
 127               <form id="createAccount" name="createAccount" action="${action_validation_success}" method="post">
 128                   <p class="fs-3"><span class="ti ti-circle-check text-success"></span>#i18n{module.mylutece.database.message.create_account.validation.success}</p>
 129                   <button class="btn btn-primary" id="button-return" type="submit" name="BtnBack" value="#i18n{module.mylutece.database.xpage.account.btnBack}" />#i18n{module.mylutece.database.xpage.account.btnBack}</button>
 130               </form>
 131           <#else>
 132               <h2>#i18n{module.mylutece.database.xpage.create_account.pageTitle}</h2>
 133               <form  id="createAccount" name="createAccount" action="jsp/site/plugins/mylutece/modules/database/DoCreateAccount.jsp" method="post">
 134               <input type="hidden" name="plugin_name" value="${plugin_name}">
 135               <#if show_input_login>
 136               <div class="form-floating">
 137                   <input class="form-control${classLogin?if_exists}"  type="text" name="login" maxlength="100" value="${(user.login)?if_exists}" />
 138                   <label for="login">#i18n{module.mylutece.database.xpage.create_account.login} *</label>
 139               </div>
 140               </#if>
 141               <div class="form-floating">
 142                   <input class="form-control${classEmail?if_exists}" type="text" name="email" maxlength="100" value="${(user.email)?if_exists}" />
 143                   <label for="email">#i18n{module.mylutece.database.xpage.create_account.eMail} *</label>
 144               </div>
 145               <div class="form-floating">
 146                   <div class="input-group">
 147                       <input class="form-control${classPassword?if_exists}" type="password" id="password" name="password" maxlength="100" value="" />
 148                       <label for="password">#i18n{module.mylutece.database.xpage.create_account.password} *</label>
 149                       <span class="input-group-text">
 150                       <a href="#" class="btn btn-light" id="lutece-password-toggler" title="Afficher / masquer le mot de passe">
 151                           <i class="ti ti-eye" aria-hidden="true"></i>
 152                       </a>
 153                       </span>
 154                       <span class="input-group-text">
 155                           <a href="#" class="btn btn-light" title="Générer un mot de passe" id="generate_password">
 156                               <i class="ti ti-settings me-1" aria-hidden="true"></i>
 157                               <span class="d-none">Générer un mot de passe</span>
 158                           </a>
 159                       </span>
 160                   </div>
 161               </div>
 162               <div class="form-row py-3">
 163        
 164                   <div id="status">#i18n{portal.users.create_user.passwordComplexity}</div>
 165                   <div class="progress">
 166                       <div id="progress_bar_first_password" class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 0%;" aria-valuenow="0">0%</div>
 167                   </div>
 168               </div>
 169               <div class="form-floating">
 170                   <input class="form-control${classConfirmation?if_exists}" type="password" id="confirmation" name="confirmation_password" maxlength="100" value="" />
 171                   <label for="confirmation">#i18n{module.mylutece.database.xpage.create_account.confirmation} *</label>
 172               </div>
 173               <div class="form-floating">
 174                   <input class="form-control ${classFirstName?if_exists}" type="text" name="first_name" maxlength="100" value="${(user.firstName)?if_exists}" />
 175                   <label for="first_name">#i18n{module.mylutece.database.xpage.create_account.firstName} *</label>
 176               </div>
 177               <div class="form-floating">
 178                   <input class="form-control${classLastName?if_exists}" type="text" name="last_name" maxlength="100" value="${(user.lastName)?if_exists}" />
 179                   <label for="last_name">#i18n{module.mylutece.database.xpage.create_account.lastName} *</label>
 180               </div>
 181               <#if jcaptcha?exists>
 182               <div class="form-row">
 183                   ${jcaptcha}
 184               </div>
 185               </#if>				
 186               <div class="form-row pt-3">
 187                   <button class="btn btn-primary" id="button-subscribe" type="submit" name="createAccountBtn" >
 188                      <span class="ti ti-user-check"></span> #i18n{module.mylutece.database.xpage.create_account.btnCreateAccount}
 189                   </button>
 190                   <button class="btn btn-secondary" id="button-return" type="button" name="back" onclick="javascript:history.go(-1)" >
 191                       <span class="ti ti-circle-x"></span> #i18n{module.mylutece.database.xpage.account.btnBack}
 192                   </button>
 193               </div>
 194               </form>
 195           </#if>
 196           </div>
 197       </div>
 198   </div>
 199   <script type="module">
 200   import { LutecePassword } from './themes/shared/modules/lutecePassword.js';
 201   const password = new LutecePassword();
 202   const generator = document.getElementById('generate_password');
 203   const newPassword = document.getElementById('password');
 204   const confirmNewPassword = document.getElementById('confirmation');
 205   const progressBar = document.getElementById('progress_bar_first_password');
 206   
 207   generator.addEventListener('click', (e) => {
 208       e.preventDefault()
 209       const newPassValue = password.generatePassword();
 210       newPassword.value = newPassValue
 211       confirmation.value = newPassValue
 212       newPassword.dispatchEvent(new Event('input'));
 213   });
 214   
 215   password.passwordInput = '#password'
 216   password.progressBar = '#progress_bar_first_password'
 217   password.initPassToggler( );
 218   password.getComplexity( );
 219   
 220   </script>