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>