add components register and login

SurveyFrontend/src/App.tsx

@@ -1,17 +1,19 @@
 import './App.css'
-import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
 import {SurveyCreateAndEditingPage} from "./pages/SurveyCreateAndEditingPage/SurveyCreateAndEditingPage.tsx";
 import Survey from "./components/Survey/Survey.tsx";
 import SettingSurvey from "./components/SettingSurvey/SettingSurvey.tsx";
 import {MySurveysPage} from "./pages/MySurveysPage/MySurveysPage.tsx";
 import {Results} from "./components/Results/Results.tsx";
 import {MySurveyList} from "./components/MySurveyList/MySurveyList.tsx";
+import LoginForm from "./components/LoginForm/LoginForm.tsx";
+import AuthForm from "./pages/AuthForm/AuthForm.tsx";
 
 const App = () => {
     return(
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Navigate to="/survey/create/questions" replace />} />
+                <Route path="/" element={<LoginForm />} />
 
                 <Route path="survey/create" element={<SurveyCreateAndEditingPage />}>
                     <Route path="questions" element={<Survey />} />
@@ -27,6 +29,10 @@ const App = () => {
                     <Route path="settings" element={<SettingSurvey />} />
                     <Route path="results" element={<Results />} />
                 </Route>
+
+                <Route path="*" element={<AuthForm />} />
+                <Route path="/login" element={<AuthForm />} />
+                <Route path="/register" element={<AuthForm />} />
             </Routes>
         </BrowserRouter>
     );

SurveyFrontend/src/components/LoginForm/LoginForm.module.css

@@ -0,0 +1,85 @@
+.loginContainer{
+    width: 31%;
+    background-color: #FFFFFF;
+    padding: 42.5px 65px;
+    margin: auto;
+    border-radius: 43px;
+    margin-bottom: 0;
+}
+
+.title{
+    text-align: center;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 88%;
+    padding: 0;
+    margin-bottom: 80px;
+    margin-top: 0;
+}
+
+.form{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    margin-bottom: 80px;
+}
+
+.input {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000; /* Цвет текста по умолчанию */
+    outline: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
+    padding: 5px 0;
+    opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
+}
+
+.input::placeholder {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000;
+    opacity: 0.2; /* Прозрачность placeholder */
+}
+
+.input:focus::placeholder {
+    opacity: 0; /* Убираем placeholder при фокусе */
+}
+
+/* Отключаем стиль для input, когда в нём есть данные */
+.input:not(:placeholder-shown) {
+    color: black;
+    opacity: 1;
+}
+
+.input:focus {
+    border-bottom: 1px solid black; /* Чёрная граница при фокусе */
+}
+
+.signIn{
+    margin: auto;
+    padding: 26.5px 67px;
+    width: fit-content;
+    border-radius: 24px;
+    background-color: #3788D6;
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 120%;
+    border: none;
+    outline: none;
+}
+
+.recommendation{
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.recommendationLink{
+    color: #3788D6;
+    margin-left: 5px;
+}

SurveyFrontend/src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import styles from './LoginForm.module.css';
+import { useState } from 'react';
+
+const RegisterForm = () => {
+    const [focused, setFocused] = useState({
+        email: false,
+        password: false
+    });
+    return (
+        <div className={styles.loginContainer}>
+            <h2 className={styles.title}>С возвращением!</h2>
+            <form className={styles.form}>
+                <input
+                    className={`${styles.input} ${styles.email}`}
+                    type={'email'}
+                    placeholder='Почта'
+                    onFocus={() => setFocused({ ...focused, email: true })}
+                    onBlur={() => setFocused({ ...focused, email: false })}
+                    style={{ color: focused.email ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.password}`}
+                    type='password'
+                    placeholder='Пароль'
+                    onFocus={() => setFocused({ ...focused, password: true })}
+                    onBlur={() => setFocused({ ...focused, password: false })}
+                    style={{ color: focused.password ? 'black' : 'inherit' }}
+                />
+                <button className={styles.signIn}>Войти</button>
+            </form>
+            <p className={styles.recommendation}>Еще не с нами?
+                <Link className={styles.recommendationLink} to='/register'>Зарегистрируйтесь!</Link>
+            </p>
+        </div>
+    );
+}
+
+export default RegisterForm;

SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css

@@ -0,0 +1,84 @@
+.registerContainer{
+    width: 31%;
+    background-color: #FFFFFF;
+    padding: 94px 80px;
+    margin: auto;
+    border-radius: 43px;
+}
+
+.title{
+    text-align: center;
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 88%;
+    padding: 0;
+    margin-bottom: 80px;
+    margin-top: 0;
+}
+
+.form{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+    margin-bottom: 80px;
+}
+
+.input {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000; /* Цвет текста по умолчанию */
+    outline: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* Нижняя граница с прозрачностью */
+    padding: 5px 0;
+    opacity: 1; /* Установите opacity в 1 для input, а для placeholder используйте opacity */
+}
+
+.input::placeholder {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 88%;
+    color: #000000;
+    opacity: 0.2; /* Прозрачность placeholder */
+}
+
+.input:focus::placeholder {
+    opacity: 0; /* Убираем placeholder при фокусе */
+}
+
+/* Отключаем стиль для input, когда в нём есть данные */
+.input:not(:placeholder-shown) {
+    color: black;
+    opacity: 1;
+}
+
+.input:focus {
+    border-bottom: 1px solid black; /* Чёрная граница при фокусе */
+}
+
+.signUp{
+    margin: auto;
+    padding: 25.5px 16px;
+    width: fit-content;
+    border-radius: 24px;
+    background-color: #3788D6;
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 120%;
+    border: none;
+    outline: none;
+}
+
+.recommendation{
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.recommendationLink{
+    color: #3788D6;
+    margin-left: 5px;
+}

SurveyFrontend/src/components/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,57 @@
+import { Link } from "react-router-dom";
+import styles from './RegisterForm.module.css';
+import { useState } from 'react';
+
+const RegisterForm = () => {
+    const [focused, setFocused] = useState({
+        name: false,
+        surname: false,
+        email: false,
+        password: false
+    });
+    return (
+        <div className={styles.registerContainer}>
+            <h2 className={styles.title}>Регистрация</h2>
+            <form className={styles.form}>
+                <input
+                    className={`${styles.input} ${styles.name}`}
+                    type={'text'}
+                    placeholder='Имя'
+                    onFocus={() => setFocused({ ...focused, name: true })}
+                    onBlur={() => setFocused({ ...focused, name: false })}
+                    style={{ color: focused.name ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.surname}`}
+                    type={'text'}
+                    placeholder='Фамилия'
+                    onFocus={() => setFocused({ ...focused, surname: true })}
+                    onBlur={() => setFocused({ ...focused, surname: false })}
+                    style={{ color: focused.surname ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.email}`}
+                    type={'email'}
+                    placeholder='Почта'
+                    onFocus={() => setFocused({ ...focused, email: true })}
+                    onBlur={() => setFocused({ ...focused, email: false })}
+                    style={{ color: focused.email ? 'black' : 'inherit' }}
+                />
+                <input
+                    className={`${styles.input} ${styles.password}`}
+                    type='password'
+                    placeholder='Пароль'
+                    onFocus={() => setFocused({ ...focused, password: true })}
+                    onBlur={() => setFocused({ ...focused, password: false })}
+                    style={{ color: focused.password ? 'black' : 'inherit' }}
+                />
+                <button className={styles.signUp}>Зарегистрироваться</button>
+            </form>
+            <p className={styles.recommendation}>Уже с нами?
+                <Link className={styles.recommendationLink} to='/login'>Войдите!</Link>
+            </p>
+        </div>
+    );
+}
+
+export default RegisterForm;

SurveyFrontend/src/pages/AuthForm/AuthForm.module.css

@@ -0,0 +1,12 @@
+.page{
+    width: 100%;
+    min-height: 100vh;
+    background-color: #F6F6F6;
+    padding: 61.5px 0;
+}
+
+.pageLogin{
+    width: 100%;
+    background-color: #F6F6F6;
+    padding: 157px 0;
+}

SurveyFrontend/src/pages/AuthForm/AuthForm.tsx

@@ -0,0 +1,18 @@
+import styles from './AuthForm.module.css';
+import LoginForm from "../../components/LoginForm/LoginForm.tsx";
+import RegisterForm from "../../components/RegisterForm/RegisterForm.tsx";
+import {useLocation} from "react-router-dom";
+
+
+const AuthForm = () => {
+    const location = useLocation();
+    const isLogin = location.pathname === '/login';
+
+    return (
+        <div className={`${isLogin ? styles.pageLogin : styles.page}`}>
+            {isLogin ? <LoginForm /> : <RegisterForm/>}
+        </div>
+    );
+}
+
+export default AuthForm;