Merge pull request #3 from moevm/LoginPage

Routes and Login Page

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.tsx

@@ -1,12 +1,16 @@
 // import { useState } from 'react'
 import './App.css'
+import {BrowserRouter} from "react-router-dom";
+import AppRouter from "./Router/AppRouter.tsx";
 
 
 function App() {
 
   return (
     <>
-      <h1 className="rounded">Header</h1>
+      <BrowserRouter>
+        <AppRouter />
+      </BrowserRouter>
     </>
   )
 }

frontend/src/Components/FormInput/FormInput.tsx

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from "react";
+
+interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+function FormInput({...props}: FormInputProps) {
+
+  return (
+    <>
+      <input {...props}
+        className="w-full border-b  border-black border-opacity-30
+          bg-base2  text-black p-3 outline-0 text-opacity-75 text-lg
+          h-10 placeholder:text-opacity-30 placeholder:text-black
+        "
+      />
+    </>
+  )
+}
+
+export default FormInput

frontend/src/Components/LoginButton/LoginButton.tsx

@@ -12,7 +12,7 @@ function LoginButton({theme, children, ...props}: LoginButtonProps) {
   }
 
   return (
-    <button {...props} className={`${styles[theme]} font-poppins rounded-3xl w-full p-2`}>
+    <button {...props} className={`${styles[theme]} font-poppins rounded-3xl w-8/12 p-2 text-lg`}>
       {children}
     </button>
   )

frontend/src/Config/routeConfig.ts

@@ -0,0 +1,31 @@
+// Перечисление роутов
+export enum AppRoutes {
+  WELCOME = "welcome",
+  // REGISTER = "register",
+  LOGIN = "login",
+  // FEED = "feed",
+  // POST = "post",
+  // NOT_FOUND = "notFound",
+}
+
+// Перечисление параметров предлагаю
+// использовать чтобы не хардкодить шаблонную строку,
+// а так же ссылаться на RoutePaths и c помощью
+// метода replace менять на параметр сущности.
+// Пример:
+// RoutePaths.user.replace(RouteParams.USERNAME, username)
+export enum RouteParams {
+  POST_ID = ":id",
+  USERNAME = ":username",
+}
+
+export const RoutePaths: Record<AppRoutes, string> = {
+  // Будем отрисовывать профиль в зависимости от параметра.
+  // Если на беке не найдётся юзер, то кинем на 404.
+  [AppRoutes.WELCOME]: '/' + AppRoutes.WELCOME,
+  // [AppRoutes.REGISTER]: "/register",
+  [AppRoutes.LOGIN]: "/login",
+  // [AppRoutes.FEED]: "/feed",
+  // [AppRoutes.POST]: "/post/" + RouteParams.POST_ID,
+  // [AppRoutes.NOT_FOUND]: "*",
+};

frontend/src/Pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,50 @@
+import Header from "../../Widgets/Header/Header.tsx";
+import LoginButton from "../../Components/LoginButton/LoginButton.tsx";
+import FormCard from "../../Components/FormCard/FormCard.tsx";
+import FormInput from "../../Components/FormInput/FormInput.tsx";
+import { FormEvent } from "react";
+
+
+function LoginPage() {
+
+  function onSubmit(event: FormEvent) {
+    event.preventDefault()
+    const target: any = event.target
+    console.log(target.username.value)
+    console.log(target.password.value)
+  }
+  return (
+    <>
+      <Header />
+      <div className="
+         w-full h-auto py-28
+         font-poppins text-center font-bold
+         flex justify-evenly items-center
+       "
+      >
+        <FormCard>
+          <h2 className="leading-relaxed text-6xl text-base1 font-semibold">
+            LOG IN
+          </h2>
+          <form action="/welcome" onSubmit={onSubmit} className="flex h-64 flex-col justify-between mt-16">
+            <FormInput name={"username"}
+                       placeholder={"Username"}
+                       required={true}
+                       autoComplete={"off"} />
+            <FormInput name={"password"}
+                       placeholder={"Password"}
+                       required={true}
+                       autoComplete={"off"} />
+            <div>
+              <LoginButton theme="primary" children="Log in" type="submit"></LoginButton>
+            </div>
+          </form>
+        </FormCard>
+        <img className="bg-base1 rounded-full " src="src/assets/doctor-img1.png" alt=""/>
+      </div>
+    </>
+  )
+}
+
+
+export default LoginPage;

frontend/src/Pages/Welcome/Welcome.tsx → frontend/src/Pages/WelcomePage/WelcomePage.tsx

@@ -1,15 +1,13 @@
 import Header from "../../Widgets/Header/Header.tsx";
-import SignOutButton from "../../Components/SignOutButton/SignOutButton.tsx";
-import ProfileButton from "../../Components/ProfileButton/ProfileButton.tsx";
 import LoginButton from "../../Components/LoginButton/LoginButton.tsx";
 import FormCard from "../../Components/FormCard/FormCard.tsx";
 
 
-function Welcome() {
+function WelcomePage() {
 
   return (
     <>
-      <Header signOutButton={SignOutButton()} profileButton={ProfileButton()}></Header>
+      <Header />
       <div className="
          w-full h-auto py-28
          font-poppins text-center font-bold
@@ -24,8 +22,8 @@ function Welcome() {
           <p className="my-10 text-white text-2xl">
             Discover a brighter, healthier smile with us. Our experienced team is dedicated to providing top-quality dental care in a comfortable environment. We offer a range of services tailored to your unique needs. Schedule your appointment today and let us take care of your smile.
           </p>
-          <div className="flex flex-col justify-evenly h-32">
-            <LoginButton theme="primary" children="Login"></LoginButton>
+          <div className="flex flex-col justify-evenly h-32 items-center">
+            <LoginButton theme="primary" children="Log in"></LoginButton>
             {/*<LoginButton theme="secondary" children="Sign Up"></LoginButton>*/}
           </div>
         </FormCard>
@@ -38,4 +36,4 @@ function Welcome() {
 }
 
 
-export default Welcome;
+export default WelcomePage;

frontend/src/Router/AppRouter.tsx

@@ -0,0 +1,41 @@
+import WelcomePage from "../Pages/WelcomePage/WelcomePage.tsx";
+import {AppRoutes, RoutePaths} from "../Config/routeConfig.ts";
+import { Route, Routes, RouteProps } from "react-router-dom";
+import LoginPage from "../Pages/LoginPage/LoginPage.tsx";
+
+const routes: Record<AppRoutes, RouteProps> = {
+  [AppRoutes.WELCOME]: {
+    path: RoutePaths.welcome,
+    element: <WelcomePage />,
+  },
+  // [AppRoutes.REGISTER]: {
+  //   path: RoutePaths.register,
+  //   element: <>Register page</>,
+  // },
+  [AppRoutes.LOGIN]: {
+    path: RoutePaths.login,
+    element: <LoginPage />,
+  },
+  // [AppRoutes.FEED]: {
+  //   path: RoutePaths.feed,
+  //   element: <>Feed</>,
+  // },
+  // [AppRoutes.POST]: {
+  //   path: RoutePaths.post,
+  //   element: <>Post page</>,
+  // },
+  // [AppRoutes.NOT_FOUND]: {
+  //   path: RoutePaths.notFound,
+  //   element: <>404 not found</>,
+  // },
+};
+
+export default function AppRouter() {
+  return (
+    <Routes>
+      {Object.values(routes).map(({ path, element }) => (
+        <Route key={path} path={path} element={element} />
+      ))}
+    </Routes>
+  );
+}

frontend/src/main.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 // import App from './App.tsx'
 import './index.css'
-import Welcome from "./Pages/Welcome/Welcome.tsx";
+import App from "./App.tsx";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Welcome />
+    <App />
   </React.StrictMode>,
 )

frontend/tailwind.config.js

@@ -16,7 +16,8 @@ export default {
       base3: "#5CC9A8",
       white: "#FFFFFF",
       darkPurple: "#202660",
-      additional: "#A7D7C5"
+      additional: "#A7D7C5",
+      black: "#000000"
     }
   },
   plugins: [],