Refactored styles and started working on the app pages

src/components/App.tsx

@@ -1,28 +1,11 @@
 import React from 'react'
-import { Button, Box } from "@mui/material"
+import Login from "@components/Login"
+import ForgotPassword from "@components/ForgotPassword"
 import variables from "@scss/variables.module.scss"
 import "@scss/style.scss"
 
 export default function App() {
-    let boxStyle = {
-        width: "50%",
-        height: "50%",
-        border: '1px dashed grey',
-        backgroundColor: variables.boxBg,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-    }
-
     return (
-        <main id="root">
-            <h1>React with Webpack</h1>
-            <Button variant="contained">Hello world</Button>
-            <div id="container">
-                <Box sx={boxStyle}>
-                    This box should be centered <br />(and also this this text)
-                </Box>
-            </div>
-        </main>
+        <ForgotPassword />
     );
 }

src/components/ForgotPassword.tsx

@@ -0,0 +1,31 @@
+import React, { useState, ChangeEvent, MouseEvent } from "react";
+import { Card, Button, TextField } from "@mui/material"
+import "@scss/forgot_password.scss"
+
+export default function ForgotPassword() {
+    const [email, setEmail] = useState("");
+
+    function handleEmail(e: ChangeEvent<HTMLInputElement>) {
+        setEmail(e.target.value);
+        console.log(email);
+    }
+
+    function buttonSubmit(e: MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        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} />
+                <div className="buttons">
+                    <Button id="cancel" variant="outlined" onClick={buttonSubmit}>Cancel</Button>
+                    <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
+                </div>
+            </Card>
+        </main>
+    )
+}

src/components/Login.tsx

@@ -1,10 +1,39 @@
-import React from "react";
-import { Card } from "@mui/material"
+import React, { useState, ChangeEvent, MouseEvent } from "react";
+import { Card, Button, TextField } from "@mui/material"
+import "@scss/login.scss"
+
+export default function Login() {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+
+    function hash(s: string){
+        return s;
+    }
+
+    function handleEmail(e: ChangeEvent<HTMLInputElement>){
+        setEmail(e.target.value);
+        console.log(email);
+    }
+
+    function handlePassword(e: ChangeEvent<HTMLInputElement>){
+        setPassword(e.target.value);
+        console.log(hash(password));
+    }
+
+    function buttonSubmit(e: MouseEvent<HTMLButtonElement>){
+        e.preventDefault();
+        console.log(`Sumbitting username "${email}" and password "${hash(password)}"`)
+    }
 
-export default function Login(){
     return (
         <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}/>
+                <Button id="submit" variant="contained" onClick={buttonSubmit}>Login</Button>
+                <p>Forgot your <a href="/">password</a>?</p>
+            </Card>
         </main>
     )
 }