Skip to content

Commit b78ffce

Browse files
rebeccadumazertrebeccadumazert
committed
chore(ui): update front 2fa
1 parent c4ac8b5 commit b78ffce

File tree

2 files changed

+25
-241
lines changed

2 files changed

+25
-241
lines changed

‎src/controllers/main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const getConnectionAndAccountController = async (
146146
email,
147147
totp_key_verified_at,
148148
force_2fa: force2fa,
149+
encrypted_password,
149150
} = getUserFromAuthenticatedSession(req);
150151

151152
const passkeys = await getUserAuthenticators(email);
@@ -184,6 +185,7 @@ export const getConnectionAndAccountController = async (
184185
csrfToken: csrfToken(req),
185186
is2faCapable,
186187
force2fa,
188+
encrypted_password,
187189
});
188190
} catch (error) {
189191
next(error);

‎src/views/connection-and-account.ejs‎

Lines changed: 23 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -5,270 +5,53 @@
55
<h2>Compte et connexion</h2>
66
<section class="fr-mb-6w">
77
<h3>Identifiants</h3>
8-
<div class="fr-notice notice--email fr-mb-3w">
9-
<div class="fr-container">
10-
<div class="fr-notice__body">
11-
<p>
12-
L’email rattaché à votre compte est <strong><%= email; %></strong>
13-
</p>
14-
</div>
15-
</div>
8+
<div class="fr-input-group fr-input-group--disabled">
9+
<label class="fr-label" for="text-input-disabled">Adresse email</label>
10+
<input class="fr-input" disabled type="text" id="text-input-disabled" name="text-input-disabled" value="<%=email%>">
11+
</div>
12+
<div class="fr-input-group fr-input-group--disabled fr-mb-1w">
13+
<label class="fr-label" for="text-input-disabled">Mot de passe</label>
14+
<input class="fr-input" disabled type="password" id="text-input-disabled" name="text-input-disabled" value="<%=encrypted_password%>">
1615
</div>
17-
<p>
18-
Vous avez oublié votre mot de passe ou souhaitez en changer, merci de cliquer sur le bouton ci-après.
19-
</p>
2016
<form action="/users/reset-password" method="post">
2117
<input type="hidden" name="_csrf" value="<%= csrfToken; %>">
22-
23-
<button class="fr-btn fr-btn--secondary" type="submit">
24-
Recevoir un lien de réinitialisation de mot de passe
18+
<button class="fr-btn btn--fullwidth fr-btn--secondary" type="submit">
19+
Réinitialiser votre mot de passe
2520
</button>
2621
</form>
2722
</section>
2823

2924
<section class="fr-mb-6w">
30-
<h3>Configurer un code à usage unique</h3>
31-
<p>
32-
Recevez un code à usage unique via une appli d’authentification, même si votre téléphone est hors
33-
connexion.
34-
</p>
35-
<p>
36-
Pour l’obtenir, vous devez utiliser une application mobile. Si vous n’avez pas encore d’application,
37-
nous vous conseillons d’utiliser l’outil opensource FreeOTP Authenticator téléchargeable sur le
38-
<a
39-
class="fr-link" target="_blank" rel="noopener noreferrer"
40-
href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&pcampaignid=web_share"
41-
>Google Play Store</a>
42-
ou l’
43-
<a
44-
class="fr-link" target="_blank" rel="noopener noreferrer"
45-
href="https://apps.apple.com/us/app/freeotp-authenticator/id872559395"
46-
>App Store iOS</a>.
47-
</p>
48-
25+
<h3>Double authentification</h3>
4926
<% if (isAuthenticatorConfigured) { %>
50-
<div class="fr-grid-row fr-grid-row--gutters">
51-
<div class="fr-col-12">
52-
<div class="fr-tile fr-tile--horizontal">
53-
<div class="fr-tile__body">
54-
<h4 class="fr-tile__title">Votre méthode d’authentification</h4>
55-
<p class="fr-tile__desc fr-pb-0">FreeOTP Authenticator</p>
56-
<p class="fr-tile__desc">Ajout : <%= totpKeyVerifiedAt; %></p>
57-
<div class="card-button-container">
58-
<a
59-
class="fr-btn fr-btn--secondary fr-btn--sm"
60-
href="/authenticator-app-configuration"
61-
type="submit"
62-
>
63-
Changer d’application d’authentification
64-
</a>
65-
<form action="/delete-authenticator-app-configuration" method="post">
66-
<input
67-
type="hidden"
68-
name="_csrf"
69-
value="<%= csrfToken; %>"
70-
>
71-
<button
72-
class="fr-btn fr-btn--secondary fr-btn--sm js-confirm"
73-
data-confirm="Cette action est irreversible."
74-
type="submit"
75-
>
76-
Supprimer l’application d’authentification
77-
</button>
78-
</form>
79-
</div>
80-
</div>
81-
<div class="fr-tile__header">
82-
<div class="fr-tile__pictogram">
83-
<svg
84-
aria-hidden="true"
85-
class="fr-artwork"
86-
viewBox="0 0 80 80"
87-
width="80px"
88-
height="80px"
89-
>
90-
<use
91-
class="fr-artwork-decorative"
92-
href="/dist/application.svg#artwork-decorative"
93-
></use>
94-
<use class="fr-artwork-minor" href="/dist/application.svg#artwork-minor"></use>
95-
<use class="fr-artwork-major" href="/dist/application.svg#artwork-major"></use>
96-
</svg>
97-
</div>
98-
</div>
99-
</div>
100-
</div>
101-
</div>
27+
<p>Bravo vous êtes un.e concitoyen.ne très conscient des questions de cybersécurité car vous avez activé la 2FA.</p>
10228
<% } else { %>
29+
<p>
30+
Vous n'avez pas encore configuré la double authentification (2FA).
31+
</p>
10332
<a
33+
class="fr-btn fr-btn--secondary"
34+
href="/authenticator-app-configuration"
35+
>
36+
Configurer la 2FA
37+
</a>
38+
<!-- <a
10439
class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-line"
10540
href="/authenticator-app-configuration"
10641
>
10742
Configurer un code à usage unique
108-
</a>
43+
</a> -->
10944
<% } %>
11045
</section>
11146
112-
<section class="fr-mb-6w">
113-
<h3>Configurer vos clés d’accès</h3>
114-
<div class="fr-alert fr-alert--error fr-mb-1w" id="webauthn-alert-error" hidden></div>
115-
116-
<% if (passkeys.length <= 0) { %>
117-
<div class="fr-callout fr-icon-information-line" id="webauthn-register">
118-
<h4 class="fr-callout__title">Créer une clé d'accès sur cet appareil</h4>
119-
<p class="fr-callout__text">
120-
Connectez-vous plus vite la prochaine fois en créant une clé d'accès sur cet appareil
121-
</p>
122-
<button class="fr-btn" id="webauthn-btn-begin-registration">
123-
Créer une clé d’accès
124-
</button>
125-
</div>
126-
<% } %>
127-
<div class="fr-callout fr-icon-alert-line" id="webauthn-not-supported" hidden>
128-
<h4 class="fr-callout__title">
129-
Impossible de créer une clé d’accès sur cet appareil
130-
</h4>
131-
<p class="fr-callout__text">
132-
Assurez-vous que le système d’exploitation de votre appareil est à jour, que le verrouillage de
133-
l’écran
134-
et le Bluetooth sont activés, et que vous utilisez un navigateur compatible.
135-
</p>
136-
</div>
137-
<p>
138-
Les clés d’accès vous permettent de vous connecter de façon sécurisée à votre compte ProConnect
139-
en utilisant votre empreinte digitale, votre visage, le verrouillage de l’écran ou une clé de
140-
sécurité physique. Ne configurez des clés d’accès que sur les appareils dont vous êtes
141-
propriétaire.
142-
<a
143-
class="fr-link" target="_blank" rel="noopener noreferrer"
144-
aria-label="En savoir plus sur les clés d'accès"
145-
href="https://fr.wikipedia.org/wiki/Cl%C3%A9_d%27acc%C3%A8s"
146-
>En savoir plus</a>
147-
</p>
148-
<% if (passkeys.length > 0) { %>
149-
<div class="fr-grid-row fr-grid-row--gutters">
150-
<% passkeys.forEach(({
151-
credential_id,
152-
usage_count,
153-
display_name,
154-
created_at,
155-
last_used_at,
156-
shows_second_factor_only_label
157-
}) => { %>
158-
<div class="fr-col-12 fr-col-lg-10">
159-
<div class="fr-tile fr-tile--horizontal">
160-
<div class="fr-tile__body">
161-
<% if (shows_second_factor_only_label) { %>
162-
<div class="fr-tile__start">
163-
<p class="fr-badge fr-badge--sm fr-badge--yellow-tournesol">
164-
Second facteur uniquement
165-
</p>
166-
</div>
167-
<% } %>
168-
<h4 class="fr-tile__title">
169-
<%= display_name; %>
170-
</h4>
171-
<p class="fr-tile__desc fr-pb-0">Création : <%= created_at; %></p>
172-
<p class="fr-tile__desc fr-pb-0">
173-
Dernière utilisation : <%= last_used_at; %>
174-
</p>
175-
<p class="fr-tile__desc">Nombre d’utilisations : <%= usage_count; %></p>
176-
<form action="/delete-passkeys/<%= credential_id; %>" method="post">
177-
<input
178-
type="hidden"
179-
name="_csrf"
180-
value="<%= csrfToken; %>"
181-
>
182-
<button
183-
aria-label="Supprimer la clé d'accès <%= display_name; %>"
184-
class="fr-btn fr-btn--secondary fr-btn--sm js-confirm"
185-
data-confirm="Cette action est irreversible."
186-
type="submit"
187-
>
188-
Supprimer cette clé d’accès
189-
</button>
190-
</form>
191-
</div>
192-
</div>
193-
</div>
194-
<% }); %>
195-
<div class="fr-col-12">
196-
<button
197-
class="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-line"
198-
id="webauthn-btn-begin-registration"
199-
>
200-
Créer une clé d’accès sur cet appareil
201-
</button>
202-
</div>
203-
</div>
204-
<% } %>
205-
<form id="webauthn-registration-response-form" action="/passkeys/verify-registration" method="post" hidden>
206-
<input type="hidden" name="_csrf" value="<%= csrfToken; %>">
207-
<input type="hidden" name="webauthn_registration_response_string">
208-
209-
<button type="submit" class="fr-btn"></button>
210-
</form>
211-
212-
<script type="module" src="<%= js('webauthn-registration.js') %>"></script>
213-
</section>
214-
215-
<% if (locals.is2faCapable) { %>
216-
<section class="fr-mb-6w">
217-
<h3>Validation en deux étapes</h3>
218-
<% if (locals.force2fa) { %>
219-
<p>
220-
La validation en deux étapes vous est demandée à chaque connexion pour
221-
protéger votre compte des pirates informatique.
222-
</p>
223-
<p>
224-
Si vous désactivez cette fonctionnalité,
225-
elle vous sera demandée exclusivement pour les services sensibles.
226-
</p>
227-
228-
<form class="fr-mt-4w" action="/disable-force-2fa" method="post">
229-
<input type="hidden" name="_csrf" value="<%= csrfToken; %>">
230-
231-
<button
232-
class="fr-btn btn--danger js-confirm"
233-
data-confirm="Pour protéger votre compte, nous vous recommandons de laisser cette fonctionnalité activée.&#10;&#10;Voulez vous la désactiver ?"
234-
type="submit"
235-
>
236-
Désactiver la validation en deux étapes
237-
</button>
238-
</form>
239-
<% } else { %>
240-
<p>
241-
La validation en deux étapes vous est demandée exclusivement pour les services sensibles.
242-
</p>
243-
<p>
244-
Pour protéger votre compte des pirates informatique,
245-
nous vous recommandons d'activer cette fonctionnalité pour tous les services.
246-
</p>
247-
248-
<form class="fr-mt-4w" action="/enable-force-2fa" method="post">
249-
<input type="hidden" name="_csrf" value="<%= csrfToken; %>">
250-
251-
<button
252-
class="fr-btn"
253-
type="submit"
254-
>
255-
Activer la validation en deux étapes
256-
</button>
257-
</form>
258-
<% } %>
259-
</section>
260-
<% } %>
26147
26248
<section class="fr-mb-6w">
263-
<h3>Suppression</h3>
264-
49+
<h3>Suppression de mon compte</h3>
26550
<p>
266-
Si vous n'utilisez plus ce compte, vous pouvez le supprimer.
51+
Pour des raisons légales, vos données sont sauvegardées pendant 3 ans après la suppression de votre compte.
26752
</p>
268-
26953
<form class="fr-mt-4w" action="/users/delete" method="post">
27054
<input type="hidden" name="_csrf" value="<%= csrfToken; %>">
271-
27255
<button
27356
class="fr-btn btn--danger js-confirm"
27457
data-confirm="Si vous avez changé d’organisation, vous pouvez les modifier sur votre espace personnel.&#10;&#10;Si vous n’utilisez plus ProConnect avec cette adresse email, vous pouvez supprimer ce compte.&#10;&#10;Voulez vous continuer ?"
@@ -278,7 +61,6 @@
27861
</button>
27962
</form>
28063
</section>
281-
28264
<script type="module" src="<%= js('confirm.js') %>"></script>
28365
</div>
28466
</div>

0 commit comments

Comments
 (0)