refactor: add translation for texts in sign up page

packages/backend/src/graphql/schema.graphql

@@ -429,7 +429,6 @@ input StepInput {
 type User {
   id: String
   fullName: String
-  password: String
   email: String
   role: String
   createdAt: String

packages/web/src/components/LoginForm/index.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link as RouterLink } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import Paper from '@mui/material/Paper';
+import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
 
@@ -10,7 +11,6 @@ import * as URLS from 'config/urls';
 import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
-import { Link } from './style.ee';
 
 function renderFields(props: { loading: boolean }) {
   const { loading = false } = props;
@@ -52,8 +52,10 @@ function renderFields(props: { loading: boolean }) {
         </LoadingButton>
 
         <Typography variant="body1" align="center" mt={3}>
-          Don't have an Automatisch account yet?
+          Don't have an Automatisch account yet?&nbsp;
-          <Link to={URLS.SIGNUP}>Sign Up</Link>
+          <Link component={RouterLink} to={URLS.SIGNUP} underline="none">
+            Sign up
+          </Link>
         </Typography>
       </>
     );

packages/web/src/components/LoginForm/style.ee.ts

@@ -1,7 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { Link as RouterLink } from 'react-router-dom';
-
-export const Link = styled(RouterLink)(({theme}) => ({
-  textDecoration: 'underline',
-  marginLeft: theme.spacing(0.5)
-}));

packages/web/src/components/SignUpForm/index.ee.tsx

@@ -13,15 +13,16 @@ import Form from 'components/Form';
 import TextField from 'components/TextField';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { LOGIN } from 'graphql/mutations/login';
+import useFormatMessage from 'hooks/useFormatMessage';
 
 const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required(),
+  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
-  email: yup.string().trim().email().required(),
+  email: yup.string().trim().email().required('signupForm.mandatoryInput'),
-  password: yup.string().required(),
+  password: yup.string().required('signupForm.mandatoryInput'),
   confirmPassword: yup
     .string()
-    .required()
+    .required('signupForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'Passwords must match'),
+    .oneOf([yup.ref('password')], 'signupForm.passwordMustMatch'),
 });
 
 const initialValues = {
@@ -34,6 +35,7 @@ const initialValues = {
 function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
+  const formatMessage = useFormatMessage();
   const [createUser] = useMutation(CREATE_USER);
   const [login, { loading }] = useMutation(LOGIN);
 
@@ -75,7 +77,7 @@ function SignUpForm() {
         }}
         gutterBottom
       >
-        Sign Up
+        {formatMessage('signupForm.title')}
       </Typography>
 
       <Form
@@ -86,7 +88,7 @@ function SignUpForm() {
         render={({ formState: { errors, touchedFields } }) => (
           <>
             <TextField
-              label="Full Name"
+              label={formatMessage('signupForm.fullNameFieldLabel')}
               name="fullName"
               fullWidth
               margin="dense"
@@ -94,44 +96,63 @@ function SignUpForm() {
               data-test="fullName-text-field"
               error={touchedFields.fullName && !!errors?.fullName}
               helperText={
-                (touchedFields.fullName && errors?.fullName?.message) || ''
+                touchedFields.fullName && errors?.fullName?.message
+                  ? formatMessage(errors?.fullName?.message, {
+                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
+                    })
+                  : ''
               }
             />
 
             <TextField
-              label="Email"
+              label={formatMessage('signupForm.emailFieldLabel')}
               name="email"
               fullWidth
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
               error={touchedFields.email && !!errors?.email}
-              helperText={(touchedFields.email && errors?.email?.message) || ''}
-            />
-
-            <TextField
-              fullWidth
-              name="password"
-              label="Password"
-              margin="dense"
-              type="password"
-              error={touchedFields.password && !!errors?.password}
               helperText={
-                (touchedFields.password && errors?.password?.message) || ''
+                touchedFields.email && errors?.email?.message
+                  ? formatMessage(errors?.email?.message, {
+                      inputName: formatMessage('signupForm.emailFieldLabel'),
+                    })
+                  : ''
               }
             />
 
             <TextField
+              label={formatMessage('signupForm.passwordFieldLabel')}
+              name="password"
               fullWidth
+              margin="dense"
+              type="password"
+              error={touchedFields.password && !!errors?.password}
+              helperText={
+                touchedFields.password && errors?.password?.message
+                  ? formatMessage(errors?.password?.message, {
+                      inputName: formatMessage('signupForm.passwordFieldLabel'),
+                    })
+                  : ''
+              }
+            />
+
+            <TextField
+              label={formatMessage('signupForm.confirmPasswordFieldLabel')}
               name="confirmPassword"
-              label="Confirm Password"
+              fullWidth
               margin="dense"
               type="password"
               error={touchedFields.confirmPassword && !!errors?.confirmPassword}
               helperText={
-                (touchedFields.confirmPassword &&
+                touchedFields.confirmPassword &&
-                  errors?.confirmPassword?.message) ||
+                errors?.confirmPassword?.message
-                ''
+                  ? formatMessage(errors?.confirmPassword?.message, {
+                      inputName: formatMessage(
+                        'signupForm.confirmPasswordFieldLabel'
+                      ),
+                    })
+                  : ''
               }
             />
 
@@ -144,7 +165,7 @@ function SignUpForm() {
               fullWidth
               data-test="signUp-button"
             >
-              Sign Up
+              {formatMessage('signupForm.submit')}
             </LoadingButton>
           </>
         )}

packages/web/src/locales/en.json

@@ -94,5 +94,13 @@
   "webhookUrlInfo.title": "Your webhook URL",
   "webhookUrlInfo.description": "You'll need to configure your application with this webhook URL.",
   "webhookUrlInfo.helperText": "We've generated a custom webhook URL for you to send requests to. <link>Learn more about webhooks</link>.",
-  "webhookUrlInfo.copy": "Copy"
+  "webhookUrlInfo.copy": "Copy",
+  "signupForm.title": "Sign up",
+  "signupForm.fullNameFieldLabel": "Full name",
+  "signupForm.emailFieldLabel": "Email",
+  "signupForm.passwordFieldLabel": "Password",
+  "signupForm.confirmPasswordFieldLabel": "Confirm password",
+  "signupForm.submit": "Sign up",
+  "signupForm.passwordMustMatch": "Passwords must match.",
+  "signupForm.mandatoryInput": "{inputName} is required."
 }