From f8be8ba9a3fb42c9ee21169228fb17475f19f917 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Thu, 20 Oct 2022 09:04:44 +0200
Subject: [PATCH] added prettierrc.yaml and reformatted the code

---
 .prettierrc.yaml                  |  3 +++
 src/components/App.tsx            |  7 +++---
 src/components/ErrorPage.tsx      | 20 ++++++++++++++++
 src/components/ForgotPassword.tsx | 39 ++++++++++++++++++++++++-------
 src/components/Login.tsx          |  6 ++---
 5 files changed, 59 insertions(+), 16 deletions(-)
 create mode 100644 .prettierrc.yaml
 create mode 100644 src/components/ErrorPage.tsx

diff --git a/.prettierrc.yaml b/.prettierrc.yaml
new file mode 100644
index 0000000..1a629d4
--- /dev/null
+++ b/.prettierrc.yaml
@@ -0,0 +1,3 @@
+trailingComma: "es5"
+tabWidth: 4
+arrowParens: "avoid"
diff --git a/src/components/App.tsx b/src/components/App.tsx
index d599834..bc2b5ca 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import Login from "@components/Login"
-import ForgotPassword from "@components/ForgotPassword"
-import variables from "@scss/variables.module.scss"
+// import variables from "@scss/variables.module.scss"
 import "@scss/style.scss"
 
 export default function App() {
     return (
-        <ForgotPassword />
+        <Login />
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
new file mode 100644
index 0000000..44abf21
--- /dev/null
+++ b/src/components/ErrorPage.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useRouteError } from "react-router-dom";
+import "@scss/error.scss"
+
+export default function ErrorPage() {
+    const error: any = useRouteError();
+    console.error(error);
+
+    return (
+        <main id="root">
+            <div id="error-page">
+                <h1>Oops!</h1>
+                <p>Sorry, an unexpected error has occurred.</p>
+                <p>
+                    <i>{error.statusText || error.message}</i>
+                </p>
+            </div>
+        </main>
+    );
+}
diff --git a/src/components/ForgotPassword.tsx b/src/components/ForgotPassword.tsx
index b613ed4..ab39e31 100644
--- a/src/components/ForgotPassword.tsx
+++ b/src/components/ForgotPassword.tsx
@@ -1,6 +1,6 @@
 import React, { useState, ChangeEvent, MouseEvent } from "react";
-import { Card, Button, TextField } from "@mui/material"
-import "@scss/forgot_password.scss"
+import { Card, Button, TextField } from "@mui/material";
+import "@scss/forgot_password.scss";
 
 export default function ForgotPassword() {
     const [email, setEmail] = useState("");
@@ -12,20 +12,41 @@ export default function ForgotPassword() {
 
     function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
         e.preventDefault();
-        console.log(`Sumbitting email "${email}" to which send a link.`)
+        console.log(`Sumbitting email "${email}" to which send a link.`);
     }
 
     return (
         <main id="root">
             <Card className="card">
                 <h3>Forgot Passowrd</h3>
-                <p>If you have forgot your password, we can send you an email with a link to reset it.</p>
-                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
+                <p>
+                    If you have forgot your password, we can send you an email
+                    with a link to reset it.
+                </p>
+                <TextField
+                    className="textfield"
+                    id="email"
+                    label="Email"
+                    value={email}
+                    onChange={handleEmail}
+                />
                 <div className="buttons">
-                    <Button id="cancel" variant="outlined" onClick={buttonSubmit}>Cancel</Button>
-                    <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
+                    <Button
+                        id="cancel"
+                        variant="outlined"
+                        onClick={buttonSubmit}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        id="submit"
+                        variant="contained"
+                        onClick={buttonSubmit}
+                    >
+                        Login
+                    </Button>
                 </div>
             </Card>
         </main>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index bb1ec8c..fa94b44 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -29,11 +29,11 @@ export default function Login() {
         <main id="root">
             <Card className="card">
                 <h3>Login</h3>
-                <TextField id="email" label="Email" value={email} onChange={handleEmail} />
-                <TextField id="password" label="Password" type="password" value={password} onChange={handlePassword}/>
+                <TextField className="textfield" id="email" label="Email" value={email} onChange={handleEmail} />
+                <TextField className="textfield" id="password" label="Password" type="password" value={password} onChange={handlePassword}/>
                 <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
                 <p>Forgot your <a href="/">password</a>?</p>
             </Card>
         </main>
     )
-}
\ No newline at end of file
+}