feat: initial commit and template import

2025-02-05 16:40:00 -03:00
commit 8123a94fcf
37 changed files with 12414 additions and 0 deletions
--- a/src/pages/Auth/Register.jsx
+++ b/src/pages/Auth/Register.jsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { Box, Stack, Typography, TextField, Button, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import AuthOutlet from './AuthOutlet';
+
+function Register() {
+  const ad = React.useRef(null);
+  const soyad = React.useRef(null);
+  const email = React.useRef(null);
+  const password = React.useRef(null);
+  const passwordConf = React.useRef(null);
+  const navigate = useNavigate();
+
+  const registerHandler = async (e) => {
+    e.preventDefault();
+    const FirstName = ad.current.value.replace(/\s+/g, '');
+    const LastName = soyad.current.value.replace(/\s+/g, '');
+    const Email = email.current.value.replace(/\s+/g, '');
+    const Password = password.current.value.replace(/\s+/g, '');
+    const pwdConf = passwordConf.current.value.replace(/\s+/g, '');
+    if (FirstName === '') {
+      // 'Please enter name.'
+      ad.current.focus();
+    } else if (LastName === '') {
+      // 'Please enter surname.'
+      soyad.current.focus();
+    } else if (Email === '') {
+      // 'Please enter email.'
+      email.current.focus();
+    } else if (!/^[\w-.]+@([\w-]+\.)+[\w-]{1,20}$/.test(Email)) {
+      // 'Please enter real email.'
+      email.current.focus();
+    } else if (Password === '') {
+      // 'Please enter password.'
+      password.current.focus();
+    } else if (pwdConf === '') {
+      // 'Please enter password again.'
+      passwordConf.current.focus();
+    } else if (Password !== pwdConf) {
+      // 'Passwords do not match.'
+      password.current.focus();
+    } else if (Password.length < 6) {
+      // 'Password must be at least 6 characters.'
+      password.current.focus();
+    } else if (
+      !/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{6,}$/.test(Password)
+    ) {
+      // 'Password must contain at least one uppercase letter, one lowercase letter and one number.',
+      password.current.focus();
+    } else {
+      // do register stuff
+    }
+  };
+
+  /** Focus name input when component mounted. */
+  React.useEffect(() => {
+    ad.current.focus();
+  }, []);
+
+  return (
+    <AuthOutlet>
+      <Stack direction="row" gap={3} sx={{ alignItems: 'center' }}>
+        <TextField
+          inputRef={ad}
+          label="Name"
+          type="text"
+          variant="outlined"
+          autoComplete="off"
+        />
+        <TextField
+          inputRef={soyad}
+          label="Surname"
+          type="text"
+          variant="outlined"
+          autoComplete="off"
+        />
+      </Stack>
+      <TextField
+        inputRef={email}
+        type="email"
+        label="E-mail"
+        variant="outlined"
+        autoComplete="off"
+      />
+      <TextField
+        inputRef={password}
+        type="password"
+        autoComplete="new-password"
+        label="Password"
+        variant="outlined"
+      />
+      <TextField
+        inputRef={passwordConf}
+        hidden
+        type="password"
+        autoComplete="new-password"
+        label="Password (again)"
+        variant="outlined"
+      />
+
+      <Button variant="contained" onClick={registerHandler}>
+        Sign Up
+      </Button>
+
+      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Typography variant="body2" component="p">
+          Alredy have an account?
+        </Typography>
+        <Link
+          variant="body2"
+          sx={{ display: 'inline', ml: 1 }}
+          onClick={() => navigate('/login')}
+        >
+          Sign In
+        </Link>
+      </Box>
+    </AuthOutlet>
+  );
+}
+
+export default Register;