feat: migrate login with email and password form

apeunit · Jun 7, 2024 · b157e9d · b157e9d
1 parent 373bcbb
commit b157e9d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 29 deletions.
diff --git a/components/shared/Navigation/Navigation.tsx b/components/shared/Navigation/Navigation.tsx
@@ -1,15 +1,12 @@
 import IconButton from "../IconButton/IconButton"
 import { ArrowLeft, Dots } from "../Icons/Icons"
 import styles from "./Navigation.module.css"
-import { useState } from "react"
-import { useAuth } from "@/hooks/auth"
 import { useApp } from "@/context/AppContext"
 import { Popover } from "react-tiny-popover"
 import Menu from "../Menu/Menu"
 import { useNavigate } from "react-router-dom"
 
 const Navigation = () => {
-  const { user, logout } = useAuth({ middleware: "auth" })
   const { toggleMenu, menuOpen, closeMenu } = useApp()
   const pathname = window.location.pathname
   const navigate = useNavigate()

diff --git a/views/App.tsx b/views/App.tsx
@@ -11,6 +11,7 @@ import AppLayout from "./app/layout"
 import Login from "./auth/login/page"
 import AuthLayout from "./auth/layout"
 import NotFoundPage from "./not-found"
+import LoginWithPassword from "./auth/login-with-password/page"
 
 const App = () => {
   return (
@@ -65,9 +66,18 @@ const App = () => {
           }
         />
 
-        <Route path="*" element={
-          <NotFoundPage />
-        } />
+        <Route
+          path="/login-with-password"
+          element={
+            <RootLayout>
+              <AppLayout>
+                <LoginWithPassword />
+              </AppLayout>
+            </RootLayout>
+          }
+        />
+
+        <Route path="*" element={<NotFoundPage />} />
         {/* </RootLayout> */}
       </Routes>
     </BrowserRouter>

diff --git a/views/app/layout.tsx b/views/app/layout.tsx
@@ -7,13 +7,14 @@ import Header from "@/components/shared/Header/Header"
 const AppLayout = ({ children, header }: any) => {
   const { user } = useAuth({ middleware: "auth" })
 
-  if (!user) {
-    return <Loading />
-  }
+  // TODO Loading progress should be handled deferently 
+  // if (!user) {
+  //   return <Loading />
+  // }
 
   return (
     <div className={styles.container}>
-      <Header>{header}</Header>
+      {header && <Header>{header}</Header>}
       <main>{children}</main>
     </div>
   )

diff --git a/views/auth/login-with-password/page.tsx b/views/auth/login-with-password/page.tsx
@@ -1,19 +1,14 @@
-"use client";
-
-import { useAuth } from "../../../hooks/auth";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import {useState } from "react";
+import styles from "./LoginWithPassword.module.css";
 import AuthSessionStatus from "../AuthSessionStatus";
 
-import styles from "./LoginWithPassword.module.css";
 
 import { Button, Link } from "@radix-ui/themes";
 import AuthCard from "../AuthCard/AuthCard";
 import InputField from "@/components/shared/InputField/InputField";
+import { useAuth } from "@/hooks/auth";
 
-const Login = () => {
-  const router = useRouter();
-
+const LoginWithPassword = () => {
   const { login } = useAuth({
     middleware: "guest",
     redirectIfAuthenticated: "/dashboard",
@@ -24,15 +19,15 @@ const Login = () => {
   const [errors, setErrors] = useState<any>([]);
   const [status, setStatus] = useState(null);
 
-  useEffect(() => {
-    // @ts-ignore
-    if (router.reset?.length > 0 && errors.length === 0) {
-      // @ts-ignore
-      setStatus(atob(router.reset));
-    } else {
-      setStatus(null);
-    }
-  });
+  // useEffect(() => {
+    // // @ts-ignore
+    // if (router.reset?.length > 0 && errors.length === 0) {
+    //   // @ts-ignore
+    //   setStatus(atob(router.reset));
+    // } else {
+    //   setStatus(null);
+    // }
+  // });
 
   const submitForm = async (event) => {
     event.preventDefault();
@@ -94,4 +89,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default LoginWithPassword;