Merge pull request #2 from 001elijah/auth

add auth page
001elijah · Jun 17, 2023 · a762de6 · a762de6
2 parents 7c41c78 + 6733a3b
commit a762de6
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 47 deletions.
diff --git a/src/assets/icons/sprite.svg b/src/assets/icons/sprite.svg
diff --git a/src/components/AuthForm/ButtonAuth/ButtonAuth.module.scss b/src/components/AuthForm/ButtonAuth/ButtonAuth.module.scss
@@ -1,7 +1,7 @@
 @import '../../../assets/styles/vars';
+@import '../../../assets/styles/mixins';
 
 .button {
-  min-width: 344px;
   width: 100%;
   height: 49px;
   margin-top: 24px;
@@ -18,4 +18,12 @@
   border-radius: 8px;
 
   cursor: pointer;
+
+  @include mobile {
+    min-width: 288px;
+  }
+
+  @include tablet {
+    min-width: 344px;
+  }
 }
diff --git a/src/components/AuthForm/Login/Login.jsx b/src/components/AuthForm/Login/Login.jsx
@@ -1,11 +1,17 @@
 import { useFormik } from 'formik';
+import { useState } from 'react';
 
 import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
 import { validationSchemaLogin } from '../schemaValidation';
 
+import icons from '../../../assets/icons/sprite.svg';
 import y from './Login.module.scss';
 
 export const Login = () => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const toggleShowPassword = () => setShowPassword(!showPassword);
+
   const formik = useFormik({
     initialValues: {
       email: '',
@@ -35,11 +41,16 @@ export const Login = () => {
         <input
           id="password"
           name="password"
-          type="text"
+          type={showPassword ? 'text' : 'password'}
           onChange={formik.handleChange}
           value={formik.values.password}
           placeholder="Confirm a password"
         />
+        <svg className={y.eye} onClick={toggleShowPassword}>
+          <use
+            href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}
+          ></use>
+        </svg>
         {formik.touched.password && formik.errors.password && (
           <p className={y.error}>{formik.errors.password}</p>
         )}

diff --git a/src/components/AuthForm/Login/Login.module.scss b/src/components/AuthForm/Login/Login.module.scss
@@ -1,6 +1,19 @@
 .error {
   position: absolute;
-  margin: 0;
-  color: red;
+  color: #ff0000;
   font-size: 12px;
 }
+
+.eye {
+  position: absolute;
+  width: 19px;
+  height: 19px;
+
+  stroke: currentColor;
+  fill: currentColor;
+
+  right: 18px;
+  bottom: 15px;
+
+  opacity: 0.4;
+}
diff --git a/src/components/AuthForm/Register/Register.jsx b/src/components/AuthForm/Register/Register.jsx
@@ -1,11 +1,17 @@
 import { useFormik } from 'formik';
+import { useState } from 'react';
 
 import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
 import { validationSchemaRegister } from '../schemaValidation';
 
+import icons from '../../../assets/icons/sprite.svg';
 import y from '../Login/Login.module.scss';
 
 export const Register = () => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const toggleShowPassword = () => setShowPassword(!showPassword);
+
   const formik = useFormik({
     initialValues: {
       name: '',
@@ -49,11 +55,16 @@ export const Register = () => {
         <input
           id="password"
           name="password"
-          type="text"
+          type={showPassword ? 'text' : 'password'}
           onChange={formik.handleChange}
           value={formik.values.password}
           placeholder="Create a password"
         />
+        <svg className={y.eye} onClick={toggleShowPassword}>
+          <use
+            href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}
+          ></use>
+        </svg>
         {formik.touched.password && formik.errors.password && (
           <p className={y.error}>{formik.errors.password}</p>
         )}

diff --git a/src/pages/AuthPage/AuthPage.jsx b/src/pages/AuthPage/AuthPage.jsx
@@ -1,38 +1,41 @@
 import { NavLink, useParams } from 'react-router-dom';
+import clsx from 'clsx';
+
 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>
+      <div className="container">
+        <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.wrapForm}>
+            {id === 'login' ? <Login /> : <Register />}
+          </div>
+        </section>
+      </div>
     </BackdropHome>
   );
 };

diff --git a/src/pages/AuthPage/AuthPage.module.scss b/src/pages/AuthPage/AuthPage.module.scss
@@ -1,37 +1,42 @@
 @import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
 
 .wrap {
   display: flex;
   flex-direction: column;
 
   background: #151515;
   border-radius: 8px;
-  padding: 40px;
+  padding: 24px;
+  margin: 0 auto;
+
+  @include mobile {
+    width: 335px;
+  }
+
+  @include tablet {
+    padding: 40px;
+    width: 424px;
+  }
 }
 
 .list {
   display: flex;
   gap: 14px;
-
+  flex-wrap: wrap;
   margin-bottom: 40px;
 
   font-weight: 500;
   font-size: 18px;
   line-height: 1.5;
-
   letter-spacing: -0.02em;
 }
 
 .link {
-  text-decoration: none;
   color: rgba(255, 255, 255, 0.3);
 }
 
-.form {
-  width: 424px;
-}
-
-.form label {
+.wrapForm label {
   position: relative;
   display: block;
 
@@ -40,26 +45,28 @@
   }
 }
 
-.form input {
-  box-sizing: border-box;
-  background: $dark-color;
-  outline: none;
-  opacity: 0.4;
+.wrapForm input {
   width: 100%;
   height: 49px;
   padding: 14px 18px;
-  color: #fff;
 
-  border: 1px solid #bedbb0;
-  box-shadow: 0px 4px 16px #16161614;
+  background: $dark-color;
+  color: $white-text-color;
+
+  border: 1px solid $accent-color;
   border-radius: 8px;
 
+  outline: none;
+  opacity: 0.4;
+  box-shadow: 0px 4px 16px rgba(22, 22, 22, 0.08);
+
+  cursor: pointer;
+
   &:placeholder-shown {
     font-weight: 400;
     font-size: 14px;
     line-height: 1.5;
     letter-spacing: -0.02em;
-    color: $white-text-color;
   }
 
   &:focus {