From 6a6bc3b81115a3728571499751806bc9f2e0d077 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Wed, 25 Sep 2024 13:08:51 +0530
Subject: [PATCH] feat: register ui

---
 src/pages/Register.tsx | 115 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 src/pages/Register.tsx

diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
new file mode 100644
index 00000000..0293e27c
--- /dev/null
+++ b/src/pages/Register.tsx
@@ -0,0 +1,115 @@
+import { useState, useContext, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import axios from 'axios';
+import { AuthContext } from '../context/auth';
+import { TextField, Button, CircularProgress, Typography, Box, Container } from '@mui/material';
+import { useGlobalInfoStore } from "../context/globalInfo";
+
+const Register = () => {
+  const [form, setForm] = useState({
+    email: '',
+    password: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const { notify } = useGlobalInfoStore();
+  const { email, password } = form;
+
+  const { state, dispatch } = useContext(AuthContext);
+  const { user } = state;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user !== null) navigate('/');
+  }, [user, navigate]);
+
+  const handleChange = (e: any) => {
+    const { name, value } = e.target;
+    setForm({ ...form, [name]: value });
+  };
+
+  const submitForm = async (e: any) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const { data } = await axios.post('http://localhost:8080/auth/register', {
+        email,
+        password,
+      });
+      dispatch({
+        type: 'LOGIN',
+        payload: data,
+      });
+      notify('success', 'Welcome to Maxun!');
+      window.localStorage.setItem('user', JSON.stringify(data));
+      navigate('/');
+    } catch (err: any) {
+      notify('error', err.response.data.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container maxWidth="sm" sx={{ mt: 8 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography component="h1" variant="h5">
+          Register
+        </Typography>
+        <Typography sx={{ mt: 2, mb: 2 }}>OR</Typography>
+        <Box component="form" onSubmit={submitForm} sx={{ mt: 1 }}>
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label="Email Address"
+            name="email"
+            value={email}
+            onChange={handleChange}
+            autoComplete="email"
+          />
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            value={password}
+            onChange={handleChange}
+            autoComplete="current-password"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={loading ||  !email ||  !password }
+          >
+            {loading ? (
+              <CircularProgress size={24} sx={{ color: '#fff' }} />
+            ) : (
+              'Register'
+            )}
+          </Button>
+          <Typography variant="body2" align="center">
+            Already have an account?{' '}
+            <Link to="/login" style={{ textDecoration: 'none', color: '#1976d2' }}>
+              Login
+            </Link>
+          </Typography>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default Register;