Improve UI of set password & reset password pages

packages/ra-supabase-language-english/src/index.ts

@@ -9,14 +9,14 @@ export const raSupabaseEnglishMessages = {
             password_reset:
                 'Your password has been reset. You will receive an email containing a link to log in.',
             missing_tokens: 'Access and refresh tokens are missing',
+            back_to_login: 'Back to login',
         },
         reset_password: {
-            forgot_password: 'Forgot password',
-            forgot_password_details:
-                'Enter your email to receive a reset password link.',
+            forgot_password: 'Forgot password?',
+            forgot_password_details: 'Enter your email for instructions.',
         },
         set_password: {
-            new_password: 'Enter a new password',
+            new_password: 'Choose your password',
         },
         validation: {
             password_mismatch: 'Passwords do not match',

packages/ra-supabase-language-french/src/index.ts

@@ -10,14 +10,14 @@ export const raSupabaseFrenchMessages = {
                 'Votre mot de passe a été réinitialisé. Vous recevrez un email contenant un lien pour vous connecter.',
             missing_tokens:
                 "Les jetons d'accès et de rafraîchissement sont manquants",
+            back_to_login: 'Retour à la page de connexion',
         },
         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.',
+            forgot_password: 'Mot de passe oublié ?',
+            forgot_password_details: 'Obtenez les instructions par email.',
         },
         set_password: {
-            new_password: 'Veuillez saisir un nouveau mot de passe',
+            new_password: 'Nouveau mot de passe',
         },
         validation: {
             password_mismatch: 'Les mots de passe ne correspondent pas',

packages/ra-supabase-ui-materialui/src/ForgotPasswordForm.tsx

@@ -1,7 +1,7 @@
 import { CardActions, Stack, styled, Typography } from '@mui/material';
 import { Form, required, useNotify, useTranslate } from 'ra-core';
 import { useResetPassword } from 'ra-supabase-core';
-import { SaveButton, TextInput } from 'ra-ui-materialui';
+import { Link, SaveButton, TextInput } from 'ra-ui-materialui';
 import * as React from 'react';
 
 /**
@@ -43,16 +43,18 @@ export const ForgotPasswordForm = () => {
         <Root onSubmit={submit}>
             <div className={SupabaseLoginFormClasses.container}>
                 <Stack spacing={1}>
-                    <Typography variant="h1" fontSize="150%">
+                    <Typography variant="h5" textAlign="center">
                         {translate(
                             'ra-supabase.reset_password.forgot_password',
-                            {
-                                _: 'Forgot password',
-                            }
+                            { _: 'Forgot password?' }
                         )}
                     </Typography>
 
-                    <Typography variant="body2" color="GrayText">
+                    <Typography
+                        variant="body2"
+                        color="GrayText"
+                        textAlign="center"
+                    >
                         {translate(
                             'ra-supabase.reset_password.forgot_password_details',
                             {
@@ -74,7 +76,7 @@ export const ForgotPasswordForm = () => {
                     />
                 </div>
             </div>
-            <CardActions>
+            <CardActions sx={{ flexDirection: 'column', gap: 1 }}>
                 <SaveButton
                     variant="contained"
                     type="submit"
@@ -84,6 +86,11 @@ export const ForgotPasswordForm = () => {
                     })}
                     icon={<></>}
                 />
+                <Link to="/login" variant="body2">
+                    {translate('ra-supabase.auth.back_to_login', {
+                        _: 'Back to login page',
+                    })}
+                </Link>
             </CardActions>
         </Root>
     );
@@ -106,7 +113,7 @@ const Root = styled(Form, {
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     [`& .${SupabaseLoginFormClasses.container}`]: {
-        padding: '0 1em 1em 1em',
+        padding: '0 1em 0 1em',
     },
     [`& .${SupabaseLoginFormClasses.input}`]: {
         marginTop: '1em',

packages/ra-supabase-ui-materialui/src/LoginForm.tsx

@@ -75,7 +75,7 @@ export const LoginForm = ({
                     icon={<></>}
                 />
                 {!disableForgotPassword ? (
-                    <Link to={ForgotPasswordPage.path}>
+                    <Link to={ForgotPasswordPage.path} variant="body2">
                         {translate('ra-supabase.auth.forgot_password', {
                             _: 'Forgot password?',
                         })}

packages/ra-supabase-ui-materialui/src/SetPasswordForm.tsx

@@ -73,9 +73,9 @@ export const SetPasswordForm = () => {
     return (
         <Root onSubmit={submit} validate={validate}>
             <div className={SupabaseLoginFormClasses.container}>
-                <Typography variant="h1" fontSize="150%">
+                <Typography variant="h5" textAlign="center" gutterBottom>
                     {translate('ra-supabase.set_password.new_password', {
-                        _: 'Forgot password',
+                        _: 'Choose your password',
                     })}
                 </Typography>
 
@@ -131,7 +131,7 @@ const Root = styled(Form, {
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     [`& .${SupabaseLoginFormClasses.container}`]: {
-        padding: '0 1em 1em 1em',
+        padding: '0 1em 0 1em',
     },
     [`& .${SupabaseLoginFormClasses.input}`]: {
         marginTop: '1em',