differenciated non auth and auth routes in apps.tsx and added login UI with variable assignment

src/App.tsx

@@ -18,9 +18,10 @@ import { IProfile } from "./structure/profile";
 import { ALL_WORDS } from "./data/all-words";
 import { WordDetails } from "./components/word-details/WordDetails";
 import { Calendar } from "./components/calendar/Calendar";
+import { Login } from "./components/auth/Login";
 
 
-export var userProfileData : IProfile = {
+export var userProfileData: IProfile = {
     name: 'Neymar Jr',
     image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU',
     medal: {
@@ -68,23 +69,28 @@ export var userProfileData : IProfile = {
 };
 
 function App() {
-    return (
-        <BrowserRouter>
-            <Switch>
-                <Route path="/home" component={Home} />
-                <Route path="/add-word" component={AddWord} />
-                <Route path="/add-shelf" component={AddShelf} />
-                <Route path="/categories" component={Categories} />
-                <Route path="/category-details/" component={CategoryDetails} />
-                <Route path="/shelf-details/" component={ShelfDetails} />
-                <Route path="/word-details/" component={WordDetails} />
-                <Route path="/revise" component={Revise} />
-                <Route path="/calendar" component={Calendar} />
-                <Redirect from="/" to="/home" />
-            </Switch>
-            <Tabs />
-        </BrowserRouter>
-    );
+    const borwserRouter = localStorage.anamnesisToken ? <BrowserRouter>
+        <Switch>
+            <Route path="/home" component={Home} />
+            <Route path="/add-word" component={AddWord} />
+            <Route path="/add-shelf" component={AddShelf} />
+            <Route path="/categories" component={Categories} />
+            <Route path="/category-details/" component={CategoryDetails} />
+            <Route path="/shelf-details/" component={ShelfDetails} />
+            <Route path="/word-details/" component={WordDetails} />
+            <Route path="/revise" component={Revise} />
+            <Route path="/calendar" component={Calendar} />
+            <Redirect from="/" to="/home" />
+        </Switch>
+        <Tabs />
+    </BrowserRouter> : <BrowserRouter>
+        <Switch>
+            <Route path="/login" component={Login} />
+            <Redirect from="/" to="/login" />
+        </Switch>
+    </BrowserRouter>
+
+    return borwserRouter;
 }
 
 export default App;

src/assets/icons/eye-off-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><path d="M432,448a15.92,15.92,0,0,1-11.31-4.69l-352-352A16,16,0,0,1,91.31,68.69l352,352A16,16,0,0,1,432,448Z"/><path d="M255.66,384c-41.49,0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91l0-.08c19.94-28.57,41.78-52.73,65.24-72.21a2,2,0,0,0,.14-2.94L93.5,161.38a2,2,0,0,0-2.71-.12c-24.92,21-48.05,46.76-69.08,76.92a31.92,31.92,0,0,0-.64,35.54c26.41,41.33,60.4,76.14,98.28,100.65C162,402,207.9,416,255.66,416a239.13,239.13,0,0,0,75.8-12.58,2,2,0,0,0,.77-3.31l-21.58-21.58a4,4,0,0,0-3.83-1A204.8,204.8,0,0,1,255.66,384Z"/><path d="M490.84,238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349,110.55,302,96,255.66,96a227.34,227.34,0,0,0-74.89,12.83,2,2,0,0,0-.75,3.31l21.55,21.55a4,4,0,0,0,3.88,1A192.82,192.82,0,0,1,255.66,128c40.69,0,80.58,12.43,118.55,37,34.71,22.4,65.74,53.88,89.76,91a.13.13,0,0,1,0,.16,310.72,310.72,0,0,1-64.12,72.73,2,2,0,0,0-.15,2.95l19.9,19.89a2,2,0,0,0,2.7.13,343.49,343.49,0,0,0,68.64-78.48A32.2,32.2,0,0,0,490.84,238.6Z"/><path d="M256,160a95.88,95.88,0,0,0-21.37,2.4,2,2,0,0,0-1,3.38L346.22,278.34a2,2,0,0,0,3.38-1A96,96,0,0,0,256,160Z"/><path d="M165.78,233.66a2,2,0,0,0-3.38,1,96,96,0,0,0,115,115,2,2,0,0,0,1-3.38Z"/></svg>

src/assets/icons/eye-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><path d="M255.66,112c-77.94,0-157.89,45.11-220.83,135.33a16,16,0,0,0-.27,17.77C82.92,340.8,161.8,400,255.66,400,348.5,400,429,340.62,477.45,264.75a16.14,16.14,0,0,0,0-17.47C428.89,172.28,347.8,112,255.66,112Z" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="256" r="80" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>

src/components/auth/Auth.module.scss

@@ -0,0 +1,78 @@
+.pageHeader {
+    background-color: var(--orange);
+    text-align: center;
+    height: 30vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        transform: scale(1.5);
+    }
+}
+
+.form {
+    border-radius: 20px;
+    margin: 30px;
+}
+
+.inputHolder {
+    margin: 0px auto 20px;
+    width: 100%;
+    position: relative;
+
+    input {
+        display: block;
+        width: 100%;
+        height: 40px;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        padding: 0 15px;
+        background-color: transparent;
+        border-radius: 20px;
+        border: none;
+        border: 2px solid rgba(black, 0.1);
+        color: var(--grey);
+
+        &:focus {
+            border-color: var(--teal);
+            color: var(--black);
+        }
+    }
+
+    .rightButton {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        border: none;
+        background-color: transparent;
+
+        svg {
+            fill: var(--light-grey);
+            width: 20px;
+            height: 20px;
+        }
+    }
+}
+
+.submitButton {
+    height: 40px;
+    font-size: 14px;
+    color: white;
+    border-radius: 20px;
+    border: none;
+    display: block;
+    width: 100%;
+    background-color: teal;
+}
+
+.otherLinks {
+    text-align: center;
+    display: block;
+    color: var(--red);
+    margin: 20px auto;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+}

src/components/auth/Login.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import styles from './Auth.module.scss';
+import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
+import { ReactComponent as EyeOffIcon } from '../../assets/icons/eye-off-outline.svg';
+import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg';
+import { NavLink } from "react-router-dom";
+
+export const Login: React.FC = () => {
+    const [showPassowrd, setShowPassword] = useState<boolean>(true);
+    const [userName, setUsername] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
+
+    return <section className="page">
+        <header className={styles.pageHeader}>
+            <LogoIcon />
+        </header>
+
+        <section className={styles.form}>
+
+            <div className={styles.inputHolder}>
+                <input defaultValue={userName} onInput={(e) => setUsername(e.currentTarget.value)} 
+                type="email" placeholder="Email ID" />
+            </div>
+
+            <div className={styles.inputHolder}>
+                <input defaultValue={password} onInput={(e) => setPassword(e.currentTarget.value)} 
+                type={ showPassowrd ? "text" : "password" } placeholder="Password" />
+                <button className={styles.rightButton} onClick={() => setShowPassword(!showPassowrd)}>
+                    { showPassowrd ? <EyeOffIcon /> : <EyeIcon /> }
+                </button>
+            </div>
+
+            <button className={styles.submitButton}>
+                Knock Knock
+            </button>
+
+            <NavLink className={styles.otherLinks} to="/signup"> Signup? </NavLink>
+
+        </section>
+
+    </section>
+};