[SOK-15] Login Page

packages/client/src/pages/Profile/Profile.scss

@@ -24,7 +24,7 @@
   display: flex;
 
   &__profile-container {
-    background-image: $img_profile_background_left;
+    background-image: $img_page_background_left;
     background-repeat: no-repeat;
     background-position: right bottom;
     position: relative;

packages/client/src/pages/SignIn/SignIn.scss

@@ -0,0 +1,6 @@
+@import '../../scss/form-mixin';
+
+.login-page {
+  @include page-background-layout();
+  @include form-styles();
+}

packages/client/src/pages/SignIn/SignIn.tsx

@@ -1,70 +1,86 @@
-import { useState } from 'react'
+import './SignIn.scss'
+import React, { useState } from 'react'
 import { useAppDispatch } from '@/store'
 import { signInUser } from '@/store/reducers/auth-reducer'
 import { Button } from '@/components/ui/Button/Button'
-import { useSearchParams } from 'react-router-dom'
+import { Link, useSearchParams } from 'react-router-dom'
 import { useNavigate } from 'react-router-dom'
-import { toast } from 'react-toastify'
+import { Form } from '@/components/ui/Form/Form'
+import { Input } from '@/components/ui/Input/Input'
+import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
+import SiteLogo from '@/assets/images/site-logo.svg'
 
 export const SignIn = () => {
-  const [form, setForm] = useState({ login: '', password: '' })
+  const [userData, setUserData] = useState({ login: '', password: '' })
+  const [error, setError] = useState<string | null>(null)
   const [searchParams] = useSearchParams()
   const [query] = useState(searchParams.get('redirectUrl'))
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
 
-  const handleForm = (name: string, value: string) => {
-    setForm({ ...form, [name]: value })
-  }
+  const handleInputChange =
+    (field: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setUserData(prevData => ({
+        ...prevData,
+        [field]: event.target.value,
+      }))
+    }
 
   const handleSubmit = () => {
-    dispatch(signInUser({ form: form, query: query }))
+    dispatch(signInUser({ form: userData, query: query }))
       .unwrap()
       .then(() => {
         navigate('/game')
       })
       .catch((error?: any, code?: any) => {
-        toast.error(error.reason)
+        setError('Ошибка! Не правильный логин или пароль.')
       })
   }
 
   return (
-    <>
-      <form
-        onSubmit={e => {
-          e.preventDefault()
-        }}>
-        <label>
-          <span>Логин</span>
-          <input
-            onChange={e => handleForm('login', e.target.value)}
-            type="text"
-            name={'login'}
-            value={form.login}
-          />
-        </label>
-        <label>
-          <span>Пароль</span>
-          <input
-            onChange={e => handleForm('password', e.target.value)}
-            type="password"
-            name={'password'}
-            value={form.password}
-          />
-        </label>
-        <Button
-          text={'войти'}
-          useFixWidth={true}
-          onClick={() => handleSubmit()}
+    <div className={'login-page'}>
+      <Link className="login-page__link" to="/">
+        <img
+          src={SiteLogo}
+          className="login-page__link__image"
+          alt="Falcon Tanks Logo"
+          draggable="false"
         />
-      </form>
-      <Button
-        text={'Регистрация'}
-        useFixWidth={true}
-        onClick={() => {
-          navigate('/sign-up')
-        }}
-      />
-    </>
+      </Link>
+      <div className="container">
+        <div className={'row'}>
+          <div className={'column col-6'}>
+            <CustomPageTitle className={'login-page__title'} text={'Вход'} />
+            <Form className={'login-page__login-form'}>
+              <Input
+                className={'login'}
+                name={'login'}
+                placeholder={'Логин'}
+                onChange={handleInputChange('login')}
+              />
+              <Input
+                className={'password'}
+                name={'password'}
+                type={'password'}
+                placeholder={'Пароль'}
+                onChange={handleInputChange('password')}
+              />
+              {error && (
+                <div className={'login-page__error-message'}>{error}</div>
+              )}
+            </Form>
+            <Button text={'Войти'} useFixWidth={true} onClick={handleSubmit} />
+            <Button
+              className={'link-button'}
+              text={'Регистрация'}
+              useFixWidth={true}
+              onClick={() => {
+                navigate('/sign-up')
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }

packages/client/src/scss/form-mixin.scss

@@ -0,0 +1,85 @@
+@import 'vars';
+
+@mixin page-background-layout(
+  $background-image: (
+    $img_login-background,
+    $img_page_background_left,
+  ),
+  $background-repeat: (
+    no-repeat,
+    no-repeat,
+  ),
+  $background-size: (
+    contain,
+    auto,
+  ),
+  $background-position: (
+    left bottom,
+    right bottom,
+  )
+) {
+  background-image: $background-image;
+  background-repeat: $background-repeat;
+  background-size: $background-size;
+  background-position: $background-position;
+}
+
+@mixin form-styles {
+  height: 100vh;
+  display: flex;
+  justify-content: flex-end;
+
+  .container {
+    margin-top: auto;
+    margin-bottom: auto;
+    width: 768px;
+
+    .row {
+      justify-content: end;
+
+      .column {
+        .custom-button {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+
+  &__link {
+    position: absolute;
+    left: 0;
+
+    &__image {
+      margin-left: 25%;
+      width: 150px;
+    }
+  }
+
+  &__title {
+    margin-bottom: 48px;
+  }
+
+  .form-fields {
+    display: flex;
+    flex-direction: column;
+    width: 301px;
+    margin: 0 auto 48px;
+
+    .input-wrapper {
+      margin-bottom: 16px;
+
+      .input-default {
+        width: 100%;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__error-message {
+    color: $error-color;
+    text-wrap: wrap;
+  }
+}

packages/client/src/scss/vars.scss

@@ -6,7 +6,8 @@ $f_default-font-family: 'Roboto', sans-serif;
 // images
 $img_default-background: url('@/assets/images/page-background.png');
 $img_profile_background_right: url('@/assets/images/profile-background-right.png');
-$img_profile_background_left: url('@/assets/images/tank-dead.png');
+$img_page_background_left: url('@/assets/images/tank-dead.png');
+$img_login-background: url('@/assets/images/login-page-sidebar.png');
 
 // main colors
 $primary-color: #839d22;