Tasks_App/frontend/src/pages/SignUpPage.tsx

import React from 'react';
import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
import { LoadingButton } from "@mui/lab";
import { useForm } from "react-hook-form";
import { useSignInMutation, useSignUpMutation } from "../graphql/tscode";
import { Link, useNavigate } from "react-router-dom";
import SetTitle from "../components/SetTitle";

type SignUpPageProps = {}

type Inputs = {
    username: string,
    password: string,
}

const SignUpPage = ({}: SignUpPageProps) => {
    const navigate = useNavigate();

    const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();

    const [ signUpFunction, {
        data,
        loading,
        error
    } ] = useSignUpMutation({ onCompleted: (result) => {
        navigate('/signin', { state: 'signup_success' });
    } });

    const onSubmit = async (data: Inputs) => {
        try {
            await signUpFunction({ variables: data });
        } catch (e) {
            console.log(e);
        }
    }

    return (
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
            <SetTitle>Signing Up</SetTitle>
            <Paper
                onSubmit={handleSubmit(onSubmit)}
                component='form'
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    padding: 2,
                    width: {
                        xs: '90vw',
                        md: 400,
                    }
                }}
            >
                <TextField
                    label='Username'
                    variant='standard'
                    error={!!errors.username}
                    helperText={errors.username?.message}
                    {...register('username', { required: 'Username is required' })}
                />
                <TextField
                    label='Password'
                    type='password'
                    variant='standard'
                    margin='normal'
                    sx={{ mb: 3 }}
                    error={!!errors.password}
                    helperText={errors.password?.message}
                    {...register('password', { required: 'Password is required' })}
                />
                {error && <Alert sx={{ mb: 2, maxWidth: '199px' }} variant='filled' severity='error'>{error?.message}</Alert>}
                <LoadingButton loading={loading} variant='outlined' type='submit' sx={{mb: 1}}>Sign Up</LoadingButton>
            </Paper>
        </Box>
    )
};

export default SignUpPage;