Merge pull request #68 from marmelab/fix/form-wording

Fix(forms): Improve form wording
marmelab · Aug 12, 2024 · 2ae0dcc · 2ae0dcc
2 parents d958df9 + bff7335
commit 2ae0dcc
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 6 deletions.
diff --git a/packages/ra-supabase-language-english/src/index.ts b/packages/ra-supabase-language-english/src/index.ts
@@ -10,6 +10,14 @@ export const raSupabaseEnglishMessages = {
                 'Your password has been reset. You will receive an email containing a link to log in.',
             missing_tokens: 'Access and refresh tokens are missing',
         },
+        reset_password: {
+            forgot_password: 'Forgot password',
+            forgot_password_details:
+                'Enter your email to receive a reset password link.',
+        },
+        set_password: {
+            new_password: 'Enter a new password',
+        },
         validation: {
             password_mismatch: 'Passwords do not match',
         },

diff --git a/packages/ra-supabase-language-french/src/index.ts b/packages/ra-supabase-language-french/src/index.ts
@@ -11,6 +11,14 @@ export const raSupabaseFrenchMessages = {
             missing_tokens:
                 "Les jetons d'accès et de rafraîchissement sont manquants",
         },
+        reset_password: {
+            forgot_password: 'Mot de passe oublié',
+            forgot_password_details:
+                'Veuilez saisir votre email pour recevoir un lien de réinitialisation du mot de passe.',
+        },
+        set_password: {
+            new_password: 'Veuillez saisir un nouveau mot de passe',
+        },
         validation: {
             password_mismatch: 'Les mots de passe ne correspondent pas',
         },

diff --git a/packages/ra-supabase-ui-materialui/src/ForgotPasswordForm.tsx b/packages/ra-supabase-ui-materialui/src/ForgotPasswordForm.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { CardActions, Stack, styled, Typography } from '@mui/material';
 import { Form, required, useNotify, useTranslate } from 'ra-core';
-import { CardActions, styled } from '@mui/material';
-import { TextInput, SaveButton } from 'ra-ui-materialui';
 import { useResetPassword } from 'ra-supabase-core';
+import { SaveButton, TextInput } from 'ra-ui-materialui';
+import * as React from 'react';
 
 /**
  * A component that renders a form for resetting the user password.
@@ -42,6 +42,26 @@ export const ForgotPasswordForm = () => {
     return (
         <Root onSubmit={submit}>
             <div className={SupabaseLoginFormClasses.container}>
+                <Stack spacing={1}>
+                    <Typography variant="h1" fontSize="150%">
+                        {translate(
+                            'ra-supabase.reset_password.forgot_password',
+                            {
+                                _: 'Forgot password',
+                            }
+                        )}
+                    </Typography>
+
+                    <Typography variant="body2" color="GrayText">
+                        {translate(
+                            'ra-supabase.reset_password.forgot_password_details',
+                            {
+                                _: 'Enter your email to receive a reset password link.',
+                            }
+                        )}
+                    </Typography>
+                </Stack>
+
                 <div className={SupabaseLoginFormClasses.input}>
                     <TextInput
                         source="email"

diff --git a/packages/ra-supabase-ui-materialui/src/SetPasswordForm.tsx b/packages/ra-supabase-ui-materialui/src/SetPasswordForm.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { CardActions, styled, Typography } from '@mui/material';
 import { Form, required, useNotify, useTranslate } from 'ra-core';
-import { CardActions, styled } from '@mui/material';
-import { PasswordInput, SaveButton } from 'ra-ui-materialui';
 import { useSetPassword, useSupabaseAccessToken } from 'ra-supabase-core';
+import { PasswordInput, SaveButton } from 'ra-ui-materialui';
+import * as React from 'react';
 
 /**
  * A component that renders a form for setting the current user password through Supabase.
@@ -73,6 +73,12 @@ export const SetPasswordForm = () => {
     return (
         <Root onSubmit={submit} validate={validate}>
             <div className={SupabaseLoginFormClasses.container}>
+                <Typography variant="h1" fontSize="150%">
+                    {translate('ra-supabase.set_password.new_password', {
+                        _: 'Forgot password',
+                    })}
+                </Typography>
+
                 <div className={SupabaseLoginFormClasses.input}>
                     <PasswordInput
                         source="password"