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>