feat: make email and password updatable

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

@@ -7,14 +7,26 @@ type FormProps = {
   defaultValues?: UseFormProps['defaultValues'];
   onSubmit?: SubmitHandler<FieldValues>;
   render?: (props: UseFormReturn) => React.ReactNode;
+  resolver?: UseFormProps["resolver"];
+  mode?: UseFormProps["mode"];
 };
 
 const noop = () => null;
 
 export default function Form(props: FormProps): React.ReactElement {
-  const { children, onSubmit = noop, defaultValues, render, ...formProps } = props;
+  const {
+    children,
+    onSubmit = noop,
+    defaultValues,
+    resolver,
+    render,
+    mode,
+    ...formProps
+  } = props;
   const methods: UseFormReturn = useForm({
     defaultValues,
+    resolver,
+    mode,
   });
 
   React.useEffect(() => {

packages/web/src/graphql/mutations/update-user.ts

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const UPDATE_USER = gql`
+  mutation UpdateUser($input: UpdateUserInput) {
+    updateUser(input: $input) {
+      id
+      email
+      updatedAt
+    }
+  }
+`;

packages/web/src/graphql/queries/get-current-user.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_CURRENT_USER = gql`
+  query GetCurrentUser {
+    getCurrentUser {
+      id
+      email
+      createdAt
+      updatedAt
+    }
+  }
+`;

packages/web/src/hooks/useCurrentUser.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@apollo/client';
+import { IUser } from '@automatisch/types';
+
+import { GET_CURRENT_USER } from 'graphql/queries/get-current-user';
+
+export default function useCurrentUser(): IUser {
+  const { data } = useQuery(GET_CURRENT_USER, { fetchPolicy: 'cache-and-network' });
+
+  return data?.getCurrentUser;
+}

packages/web/src/locales/en.json

@@ -43,9 +43,11 @@
   "flows.title": "Flows",
   "executions.title": "Executions",
   "profileSettings.title": "My Profile",
-  "profileSettings.email": "E-mail",
-  "profileSettings.updateEmail": "Update e-mail",
+  "profileSettings.email": "Email",
+  "profileSettings.updateEmail": "Update email",
   "profileSettings.newPassword": "New password",
   "profileSettings.confirmNewPassword": "Confirm new password",
+  "profileSettings.updatedEmail": "Your email has been updated.",
+  "profileSettings.updatedPassword": "Your password has been updated.",
   "profileSettings.updatePassword": "Update password"
 }

packages/web/src/pages/ProfileSettings/index.tsx

@@ -1,13 +1,28 @@
 import * as React from 'react';
+import { useMutation } from '@apollo/client';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
+import { useSnackbar } from 'notistack';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from "yup";
 
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
+import { UPDATE_USER } from 'graphql/mutations/update-user';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useCurrentUser from 'hooks/useCurrentUser';
+
+const emailValidationSchema = yup.object({
+  email: yup.string().email().required(),
+}).required();
+
+const passwordValidationSchema = yup.object({
+  password: yup.string().required(),
+  confirmPassword: yup.string().required().oneOf([yup.ref('password')], 'Passwords must match'),
+}).required();
 
 const StyledForm = styled(Form)`
   display: flex;
@@ -16,11 +31,54 @@ const StyledForm = styled(Form)`
 `;
 
 function ProfileSettings() {
+  const [passwordDefaultValues, setPasswordDefaultValues] = React.useState({});
+  const { enqueueSnackbar } = useSnackbar();
+  const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
+  const [updateUser] = useMutation(UPDATE_USER);
+
+  const handleEmailUpdate = async (data: any) => {
+    const email = data.email;
+
+    await updateUser({
+      variables: {
+        input: {
+          email,
+        }
+      },
+      optimisticResponse: {
+        updateUser: {
+          __typename: 'User',
+          email,
+        }
+      }
+    });
+
+    enqueueSnackbar(formatMessage('profileSettings.updatedEmail'), { variant: 'success' });
+  }
+
+  const handlePasswordUpdate = async (data: any) => {
+    const password = data.password;
+
+    setPasswordDefaultValues({
+      password,
+      confirmPassword: data.confirmPassword,
+    })
+
+    await updateUser({
+      variables: {
+        input: {
+          password,
+        }
+      },
+    });
+
+    enqueueSnackbar(formatMessage('profileSettings.updatedPassword'), { variant: 'success' });
+  }
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
-      <Grid container item xs={12} sm={9} md={6}>
+      <Grid container item xs={12} sm={9} md={8} lg={6}>
         <Grid item xs={12} sx={{ mb: [2, 5] }} >
           <PageTitle>
             {formatMessage('profileSettings.title')}
@@ -28,46 +86,71 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end">
-          <StyledForm>
-            <TextField
-              fullWidth
-              name="email"
-              label={formatMessage('profileSettings.email')}
-              margin="normal"
-            />
+          <StyledForm
+            defaultValues={currentUser}
+            onSubmit={handleEmailUpdate}
+            resolver={yupResolver(emailValidationSchema)}
+            mode="onChange"
+            sx={{ mb: 2 }}
+            render={({ formState: { errors, isDirty, isValid, isSubmitting } }) => (
+              <>
+               <TextField
+                  fullWidth
+                  name="email"
+                  label={formatMessage('profileSettings.email')}
+                  margin="normal"
+                  error={!!errors?.email}
+                  helperText={errors?.email?.message || ' '}
+                />
 
-            <Button
-              variant="contained"
-              sx={{ mt: 2 }}
-              type="submit"
-            >
-              {formatMessage('profileSettings.updateEmail')}
-            </Button>
-          </StyledForm>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  disabled={!isDirty || !isValid || isSubmitting}
+                >
+                  {formatMessage('profileSettings.updateEmail')}
+                </Button>
+              </>
+            )}
+          />
 
-          <StyledForm>
-            <TextField
-              fullWidth
-              name="password"
-              label={formatMessage('profileSettings.newPassword')}
-              margin="normal"
-            />
+          <StyledForm
+            defaultValues={passwordDefaultValues}
+            onSubmit={handlePasswordUpdate}
+            resolver={yupResolver(passwordValidationSchema)}
+            mode="onChange"
+            render={({ formState: { errors, isDirty, isValid, isSubmitting } }) => (
+              <>
+                <TextField
+                  fullWidth
+                  name="password"
+                  label={formatMessage('profileSettings.newPassword')}
+                  margin="normal"
+                  type="password"
+                  error={!!errors?.password}
+                  helperText={errors?.password?.message || ' '}
+                />
 
-            <TextField
-              fullWidth
-              name="confirmPassword"
-              label={formatMessage('profileSettings.confirmNewPassword')}
-              margin="normal"
-            />
+                <TextField
+                  fullWidth
+                  name="confirmPassword"
+                  label={formatMessage('profileSettings.confirmNewPassword')}
+                  margin="normal"
+                  type="password"
+                  error={!!errors?.confirmPassword}
+                  helperText={errors?.confirmPassword?.message || ' '}
+                />
 
-            <Button
-              variant="contained"
-              sx={{ mt: 2 }}
-              type="submit"
-            >
-              {formatMessage('profileSettings.updatePassword')}
-            </Button>
-          </StyledForm>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  disabled={!isDirty || !isValid || isSubmitting}
+                >
+                  {formatMessage('profileSettings.updatePassword')}
+                </Button>
+              </>
+            )}
+          />
         </Grid>
       </Grid>
     </Container>