Merge branch 'lebihae/1224' into 'main'

fix(emails): impossible de faire une demande de changement d'email (closes #1224) Closes #1224 See merge request churros/churros!277
inp-net · Nov 19, 2024 · 5f47a42 · 5f47a42
2 parents e885c3c + f09cd52
commit 5f47a42
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 21 deletions.
diff --git a/.changeset/fifty-bees-count.md b/.changeset/fifty-bees-count.md
@@ -0,0 +1,6 @@
+---
+'@churros/api': minor
+'@churros/app': minor
+---
+
+fix and improve email change request flow (wording in email, appearance of error state, and making request creating actually work)
diff --git a/.changeset/flat-lamps-stare.md b/.changeset/flat-lamps-stare.md
@@ -0,0 +1,5 @@
+---
+'@churros/api': major
+---
+
+Change arguments for Mutation.requestEmailChange: email is now newEmail and there's an additional user argument
diff --git a/packages/api/src/mail-templates/verify-mail.mjml b/packages/api/src/mail-templates/verify-mail.mjml
@@ -1,6 +1,6 @@
 <mjml>
   <mj-head>
-    <mj-title>Validation de votre adresse e-mail</mj-title>
+    <mj-title>Validation de ton adresse e-mail</mj-title>
     <mj-include path="./_head.mjml"></mj-include>
   </mj-head>
   <mj-body>
@@ -9,7 +9,7 @@
     <mj-section>
       <mj-column>
         <mj-text>
-          <h1>Validation de votre adresse e-mail</h1>
+          <h1>Validation de ton adresse e-mail</h1>
         </mj-text>
       </mj-column>
     </mj-section>

diff --git a/packages/api/src/modules/users/resolvers/mutation.request-email-change.ts b/packages/api/src/modules/users/resolvers/mutation.request-email-change.ts
@@ -1,5 +1,5 @@
 import { builder, log, prisma, sendMail } from '#lib';
-import { Email, URLScalar } from '#modules/global';
+import { Email, UIDScalar, URLScalar } from '#modules/global';
 import { EmailChangeType } from '#modules/users/types';
 import type { Prisma } from '@churros/db/prisma';
 import { GraphQLError } from 'graphql';
@@ -9,21 +9,22 @@ builder.mutationField('requestEmailChange', (t) =>
     type: EmailChangeType,
     errors: {},
     args: {
-      email: t.arg({ type: Email }),
+      newEmail: t.arg({ type: Email, description: 'Nouvelle addresse e-mail' }),
+      user: t.arg({ type: UIDScalar, description: "Personne à qui changer l'adresse email" }),
       callbackURL: t.arg({
         type: URLScalar,
         description:
           "URL vers laquelle faire pointer le lien de validation de la nouvelle adresse email. [token] sera remplacé par le token d'activation.",
       }),
     },
     authScopes: { loggedIn: true },
-    async resolve(query, _, { email, callbackURL }, { user }) {
+    async resolve(query, _, { newEmail, callbackURL, user: targetUser }, { user }) {
       if (!user) throw new GraphQLError('Not logged in');
       const subject = await prisma.user.findUniqueOrThrow({
-        where: { email },
+        where: { uid: targetUser },
       });
-      await log('users', 'request-email-change', { email, callbackURL }, user.id, user);
-      return requestEmailChange(query, email, subject.id, callbackURL);
+      await log('users', 'request-email-change', { newEmail, user, callbackURL }, user.id, user);
+      return requestEmailChange(query, newEmail, subject.id, callbackURL);
     },
   }),
 );

diff --git a/packages/app/schema.graphql b/packages/app/schema.graphql
@@ -2549,7 +2549,14 @@ type Mutation @rateLimit(limit: 1200, duration: 600) {
     URL vers laquelle faire pointer le lien de validation de la nouvelle adresse email. [token] sera remplacé par le token d'activation.
     """
     callbackURL: URL!
-    email: Email!
+    """
+    Nouvelle addresse e-mail
+    """
+    newEmail: Email!
+    """
+    Personne à qui changer l'adresse email
+    """
+    user: UID!
   ): MutationRequestEmailChangeResult!
   resetPassword(
     disconnectAll: Boolean!

diff --git a/packages/app/src/routes/(app)/users/[uid]/edit/email/+page.svelte b/packages/app/src/routes/(app)/users/[uid]/edit/email/+page.svelte
@@ -15,8 +15,8 @@
   $: ({ PageUserEditEmail } = data);
 
   const RequestChange = graphql(`
-    mutation RequestEmailChange($email: Email!, $callbackURL: URL!) {
-      requestEmailChange(email: $email, callbackURL: $callbackURL) {
+    mutation RequestEmailChange($email: Email!, $callbackURL: URL!, $user: UID!) {
+      requestEmailChange(newEmail: $email, callbackURL: $callbackURL, user: $user) {
         ...MutationErrors
         ... on MutationRequestEmailChangeSuccess {
           data {
@@ -37,6 +37,7 @@
       on:submit|preventDefault={async () => {
         const result = await mutate(RequestChange, {
           email: newEmail,
+          user: $page.params.uid,
           callbackURL: new URL(route('/validate-email/[token]', '[token]'), $page.url),
         });
         toasts.mutation(

diff --git a/packages/app/src/routes/(app)/validate-email/[token]/+page.svelte b/packages/app/src/routes/(app)/validate-email/[token]/+page.svelte
@@ -14,10 +14,29 @@
 
   async function rerequestValidation() {
     loading = true;
+
+    // Data required to potentially re-request an email change: we need to know for who the email change is. We assume its the logged-in user.
+    const meResult = await graphql(`
+      query ValidateEmailFailure {
+        me: assertMe {
+          uid
+        }
+      }
+    `).fetch();
+
+    if (!meResult.data) {
+      toasts.error(
+        "Impossible de re-demander une validation d'email",
+        meResult.errors?.map((e) => e.message).join('; ') ?? 'Erreur inconnue',
+      );
+      loading = false;
+      return;
+    }
+
     toasts.mutation(
       await graphql(`
-        mutation RequestEmailChangeAgain($email: Email!, $callbackURL: URL!) {
-          requestEmailChange(email: $email, callbackURL: $callbackURL) {
+        mutation RequestEmailChangeAgain($email: Email!, $callbackURL: URL!, $user: UID!) {
+          requestEmailChange(newEmail: $email, callbackURL: $callbackURL, user: $user) {
             ...MutationErrors
             ... on MutationRequestEmailChangeSuccess {
               data {
@@ -26,7 +45,11 @@
             }
           }
         }
-      `).mutate({ email, callbackURL: new URL(route('/validate-email/[token]', '[token]')) }),
+      `).mutate({
+        email,
+        callbackURL: new URL(route('/validate-email/[token]', '[token]')),
+        user: meResult.data.me.uid,
+      }),
       'requestEmailChange',
       "Si l'adresse fournie existe, tu devrais recevoir un e-mail de validation dans quelques instants.",
       "Erreur lors de l'envoi de l'e-mail de validation",
@@ -36,11 +59,8 @@
 </script>
 
 <div class="content">
-  <h1>Oops!</h1>
-
-  <p>Ce lien de validation d'adresse e-mail n'est plus valide.</p>
-
   <Alert theme="danger">
+    <h1>Oops!</h1>
     {data.message}
   </Alert>
 
@@ -55,7 +75,9 @@
 
 <style>
   .content {
-    max-width: 600px;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem 0;
     margin: 0 auto;
   }
 

diff --git a/packages/app/src/routes/(app)/validate-email/[token]/+page.ts b/packages/app/src/routes/(app)/validate-email/[token]/+page.ts
@@ -1,6 +1,6 @@
 import { graphql } from '$houdini';
-import { redirectToLogin } from '$lib/session';
 import { toasts } from '$lib/toasts';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, url, fetch }) => {
@@ -29,7 +29,7 @@ export const load: PageLoad = async ({ params, url, fetch }) => {
 
   if (validateEmail.__typename === 'MutationValidateEmailSuccess') {
     toasts.success(`Adresse e-mail validée`, '', { lifetime: 5000 });
-    throw redirectToLogin(url.searchParams.get('next')?.toString() ?? '/');
+    redirect(302, url.searchParams.get('next')?.toString() ?? '/');
   }
 
   return validateEmail;