refactor(login): use css modules

client/src/pages/login/api/action.ts

@@ -1,5 +1,5 @@
 import { ActionFunction } from "react-router-dom";
-import { parseForm } from "../model/parseForm";
+import { parseLoginForm } from "./../model/parse-login-form";
 import { BasicLoginApi } from "generated/api/basic-login-api";
 
 export interface LogInAction {
@@ -11,7 +11,7 @@ const basicLoginApi = new BasicLoginApi();
 export const action: ActionFunction = async ({
   request,
 }): Promise<LogInAction> => {
-  const { login, password, errors } = parseForm(await request.formData());
+  const { login, password, errors } = parseLoginForm(await request.formData());
 
   if (errors.length !== 0) {
     return {

client/src/pages/login/model/parseForm.ts → client/src/pages/login/model/parse-login-form.ts

@@ -1,6 +1,6 @@
 import { MINIMAL_PASSWORD_LENGTH } from "shared/config/frontend";
 
-export function parseForm(data: FormData) {
+export function parseLoginForm(data: FormData) {
   const errors = [];
 
   const login = data.get("login");

client/src/pages/login/ui/LoginPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./styles/LoginPage.css";
+import styles from "./styles/LoginPage.module.css";
 import { HeaderWidget } from "widgets/header";
 import { FooterWidget } from "widgets/footer";
 import { Form, useActionData, useNavigate } from "react-router-dom";
@@ -15,29 +15,31 @@ export function LoginPage() {
   };
 
   return (
-    <div id="login-page">
+    <>
       <HeaderWidget />
+
       {actionData?.errors.length === 0 && (
-        <div className="successfull-login">✅ Welcome!</div>
+        <div className={styles.login__ok}>✅ Welcome!</div>
       )}
 
-      <Form method="post">
+      <Form method="post" className={styles.login__form}>
         <input type="text" name="login" placeholder={"Login"} />
         <input type="password" name="password" placeholder={"Password"} />
-        <input type="submit" value="Log In" />
+        <input type="submit" value="Login" />
         <input
           type="button"
           value="Registration"
           onClick={handleRegisterRedirect}
         />
         {actionData?.errors.length > 0 && (
-          <div className="erroneous-login">
+          <div className={styles.login__error}>
             {actionData?.errors.map((error) => <div key={error}>{error}</div>)}
           </div>
         )}
       </Form>
+
       <FooterWidget />
-    </div>
+    </>
   );
 }
 

client/src/pages/login/ui/styles/LoginPage.module.css

@@ -0,0 +1,24 @@
+.login__form {
+  max-width: 640px;
+  display: flex;
+  flex-direction: column;
+
+  margin: 50px auto;
+
+  input {
+    font-size: 32px;
+  }
+}
+
+.login__ok {
+  background-color: green;
+  font-size: 32px;
+  padding: 0 10px;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.login__error {
+  background-color: red;
+  padding: 20px 10px;
+}