Merge pull request #1 from 001elijah/auth

create welcome Page

package.json

@@ -2,7 +2,7 @@
   "name": "react-homework-template",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://001elijah.github.io/bc48-node-team-project-frontend/",
+  "homepage": "https://001elijah.github.io/bc48-node-team-project-frontend/welcome",
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.3",

src/assets/styles/_mixins.scss

@@ -44,13 +44,13 @@
 }
 
 @mixin mobile {
-  @media screen and (min-width: 375px) and (max-width: 767px) {
+  @media screen and (min-width: 375px) {
     @content;
   }
 }
 
 @mixin tablet {
-  @media screen and (min-width: 768px) and (max-width: 1279px) {
+  @media screen and (min-width: 768px) {
     @content;
   }
 }

src/components/App.jsx

@@ -1,18 +1,18 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { HomePage } from 'pages/HomePage';
-import { LoginPage } from 'pages/LoginPage';
-import { RegisterPage } from 'pages/RegisterPage';
 import { BoardPage } from 'pages/BoardPage';
+import { WelcomePage } from 'pages/WelcomePage/WelcomePage';
+import AuthPage from '../pages/AuthPage/AuthPage';
 
 export const App = () => {
   return (
     <>
       {/* <SharedLayout /> */}
       <Routes>
-        <Route path="/" element={<HomePage />}>
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/register" element={<RegisterPage />} />
-        </Route>
+        <Route path="/welcome" element={<WelcomePage />} />
+        <Route path="auth/:id" element={<AuthPage />} />
+
+        <Route path="/" element={<HomePage />} />
         <Route path="/board" element={<BoardPage />} />
 
         <Route path="*" element={<Navigate to="/" />} />

src/components/AuthForm/ButtonAuth/ButtonAuth.jsx

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+import s from './ButtonAuth.module.scss';
+
+export const ButtonAuth = ({ title }) => {
+  return (
+    <button type="submit" className={s.button}>
+      {title}
+    </button>
+  );
+};
+
+ButtonAuth.propTypes = {
+  title: PropTypes.string.isRequired,
+};

src/components/AuthForm/ButtonAuth/ButtonAuth.module.scss

@@ -0,0 +1,21 @@
+@import '../../../assets/styles/vars';
+
+.button {
+  min-width: 344px;
+  width: 100%;
+  height: 49px;
+  margin-top: 24px;
+
+  background-color: $accent-color;
+  color: $black-text-color;
+
+  text-align: center;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.5;
+
+  border: none;
+  border-radius: 8px;
+
+  cursor: pointer;
+}

src/components/AuthForm/Login/Login.jsx

@@ -0,0 +1,50 @@
+import { useFormik } from 'formik';
+
+import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
+import { validationSchemaLogin } from '../schemaValidation';
+
+import y from './Login.module.scss';
+
+export const Login = () => {
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: validationSchemaLogin,
+    onSubmit: values => {
+      console.log(values);
+    },
+  });
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <label htmlFor="email">
+        <input
+          id="email"
+          name="email"
+          type="email"
+          onChange={formik.handleChange}
+          value={formik.values.email}
+          placeholder="Enter your email"
+        />
+        {formik.touched.email && formik.errors.email && (
+          <p className={y.error}>{formik.errors.email}</p>
+        )}
+      </label>
+      <label htmlFor="password">
+        <input
+          id="password"
+          name="password"
+          type="text"
+          onChange={formik.handleChange}
+          value={formik.values.password}
+          placeholder="Confirm a password"
+        />
+        {formik.touched.password && formik.errors.password && (
+          <p className={y.error}>{formik.errors.password}</p>
+        )}
+      </label>
+      <ButtonAuth title="Log In Now" />
+    </form>
+  );
+};

src/components/AuthForm/Login/Login.module.scss

@@ -0,0 +1,6 @@
+.error {
+  position: absolute;
+  margin: 0;
+  color: red;
+  font-size: 12px;
+}

src/components/AuthForm/Register/Register.jsx

@@ -0,0 +1,64 @@
+import { useFormik } from 'formik';
+
+import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
+import { validationSchemaRegister } from '../schemaValidation';
+
+import y from '../Login/Login.module.scss';
+
+export const Register = () => {
+  const formik = useFormik({
+    initialValues: {
+      name: '',
+      email: '',
+      password: '',
+    },
+    validationSchema: validationSchemaRegister,
+    onSubmit: values => {
+      console.log(values);
+    },
+  });
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <label htmlFor="name">
+        <input
+          id="name"
+          name="name"
+          type="text"
+          onChange={formik.handleChange}
+          value={formik.values.name}
+          placeholder="Enter your name"
+        />
+        {formik.touched.name && formik.errors.name && (
+          <p className={y.error}>{formik.errors.name}</p>
+        )}
+      </label>
+      <label htmlFor="email">
+        <input
+          id="email"
+          name="email"
+          type="email"
+          onChange={formik.handleChange}
+          value={formik.values.email}
+          placeholder="Enter your email"
+        />
+        {formik.touched.email && formik.errors.email && (
+          <p className={y.error}>{formik.errors.email}</p>
+        )}
+      </label>
+      <label htmlFor="password">
+        <input
+          id="password"
+          name="password"
+          type="text"
+          onChange={formik.handleChange}
+          value={formik.values.password}
+          placeholder="Create a password"
+        />
+        {formik.touched.password && formik.errors.password && (
+          <p className={y.error}>{formik.errors.password}</p>
+        )}
+      </label>
+      <ButtonAuth title="Register Now" />
+    </form>
+  );
+};

src/components/AuthForm/schemaValidation.jsx

@@ -0,0 +1,50 @@
+import * as yup from 'yup';
+
+export const validationSchemaLogin = yup.object().shape({
+  email: yup
+    .string()
+    .matches(
+      /^[\w.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      'Invalid email address. Example: [email protected]',
+    )
+    .required('Email required'),
+  password: yup
+    .string()
+    .matches(/^\S*$/, 'Must not contain spaces')
+    .matches(
+      /^[a-zA-Z0-9]+$/,
+      'Can only contain Latin letters, numbers and signs',
+    )
+    .min(8, 'Minimum length 8 characters')
+    .max(64, 'Maximum length 64 characters')
+    .required('Password required'),
+});
+
+export const validationSchemaRegister = yup.object().shape({
+  name: yup
+    .string()
+    .matches(
+      /^[a-zA-Z0-9]+$/,
+      'Can only contain Latin letters, numbers and signs',
+    )
+    .min(2, 'Minimum length 2 characters')
+    .max(32, 'Maximum length 32 characters')
+    .required('Name required'),
+  email: yup
+    .string()
+    .matches(
+      /^[\w.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      'Invalid email address. Example: [email protected]',
+    )
+    .required('Email required'),
+  password: yup
+    .string()
+    .matches(/^\S*$/, 'Must not contain spaces')
+    .matches(
+      /^[a-zA-Z0-9]+$/,
+      'Can only contain Latin letters, numbers and signs',
+    )
+    .min(8, 'Minimum length 8 characters')
+    .max(64, 'Maximum length 64 characters')
+    .required('Password required'),
+});

src/components/BackdropHome/BackdropHome.jsx

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+
+import s from './BackdropHome.module.scss';
+
+export const BackdropHome = ({ children }) => {
+  return <main className={s.background}>{children}</main>;
+};
+
+BackdropHome.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/BackdropHome/BackdropHome.module.scss

@@ -0,0 +1,12 @@
+@import '../../assets/styles/vars';
+
+.background {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  background: $start-background-color;
+}

src/index.scss

@@ -1,4 +1,4 @@
-@import-normalize; /* bring in normalize.css styles */
+// @import-normalize; /* bring in normalize.css styles */
 @import './assets/styles/reset';
 @import './assets/styles/vars';
 @import './assets/styles/mixins';
@@ -32,8 +32,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
   color: $white-text-color;
-
-  background-color: $dark-color;
 }
 
 body.no-scroll {

src/pages/AuthPage/AuthPage.jsx

@@ -0,0 +1,40 @@
+import { NavLink, useParams } from 'react-router-dom';
+import { Login } from 'components/AuthForm/Login/Login';
+import { Register } from 'components/AuthForm/Register/Register';
+import { BackdropHome } from 'components/BackdropHome/BackdropHome';
+import clsx from 'clsx';
+
+import s from './AuthPage.module.scss';
+
+const AuthPage = () => {
+  const { id } = useParams();
+  return (
+    <BackdropHome>
+      <section className={s.wrap}>
+        <ul className={s.list}>
+          <li>
+            <NavLink
+              to="/auth/register"
+              className={({ isActive }) => clsx(s.link, isActive && s.active)}
+            >
+              Registration
+            </NavLink>
+          </li>
+          <li>
+            <NavLink
+              to="/auth/login"
+              className={({ isActive }) => clsx(s.link, isActive && s.active)}
+            >
+              Log In
+            </NavLink>
+          </li>
+        </ul>
+        <div className={s.form}>
+          {id === 'login' ? <Login /> : <Register />}
+        </div>
+      </section>
+    </BackdropHome>
+  );
+};
+
+export default AuthPage;