diff --git a/frontend/src/components/login/WelcomeModal.tsx b/frontend/src/components/login/WelcomeModal.tsx new file mode 100644 index 0000000..47c4369 --- /dev/null +++ b/frontend/src/components/login/WelcomeModal.tsx @@ -0,0 +1,85 @@ +import { + HandPalmIcon, + ShieldCheckIcon, + WarningIcon, +} from "@phosphor-icons/react"; +import Logo from "../Logo.tsx"; +import { Modal } from "../ui/Modal"; +import Saajan from "../ui/Saajan.tsx"; + +export default function WelcomeModal({ + setShowWelcome, +}: { + setShowWelcome: (show: boolean) => void; +}) { + return ( + <> + +
+
+ +
+

+ Welcome to   +  ! +

+

+ Before we begin, let me make a small promise. + +

+
+ Everything you write here is sealed with your password,{" "} + cryptographically + , before it leaves your hands. +
A fancy way of saying, I couldn't if I tried. +

+ +
+ +

+ If you ever happen to forget your password, your letters are lost + to time, forever. +
+ + I highly, highly recommend storing this password in your{" "} + + password manager + {" "} + or somewhere safe to remember it. + +

+
+ +
+ +
+
+ +
+ +
+ + ); +} diff --git a/frontend/src/components/ui/LogModal.tsx b/frontend/src/components/ui/LogModal.tsx index 9199772..fd897f6 100644 --- a/frontend/src/components/ui/LogModal.tsx +++ b/frontend/src/components/ui/LogModal.tsx @@ -25,14 +25,18 @@ export const LogModal = ({ )} {message} -
- Error Stack -
-
- 
-            {String(log)}
-
-
+ {log && ( + <> +
+ Error Stack +
+
+ 
+                {String(log)}
+
+
+ + )} ); diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index bebf1a7..c55de2d 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -1,9 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { - HandPalmIcon, - ShieldCheckIcon, - WarningIcon, -} from "@phosphor-icons/react"; + import axios from "axios"; import { useState } from "react"; import { useForm } from "react-hook-form"; @@ -11,8 +7,8 @@ import { useLocation, useNavigate } from "react-router-dom"; import { z } from "zod"; import { api, publicApi } from "../api/apiClient"; import Logo from "../components/Logo"; +import WelcomeModal from "../components/login/WelcomeModal.tsx"; import FormField from "../components/ui/FormField"; -import { Modal } from "../components/ui/Modal"; import Saajan from "../components/ui/Saajan"; import { endpoints } from "../config/endpoints"; import { ROUTES } from "../config/routes"; @@ -26,83 +22,6 @@ const loginSchema = z.object({ type LoginInputs = z.infer; -function WelcomeModal({ - setShowWelcome, -}: { - setShowWelcome: (show: boolean) => void; -}) { - return ( - <> - -
-
- -
-

- Welcome to   -  ! -

-

- Before we begin, let me make a small promise. - -

-
- Everything you write here is sealed with your password,{" "} - cryptographically - , before it leaves your hands. -
A fancy way of saying, I couldn't if I tried. -

- -
- -

- If you ever happen to forget your password, your letters are lost - to time, forever. -
- - I highly, highly recommend storing this password in your{" "} - - password manager - {" "} - or somewhere safe to remember it. - -

-
- -
- -
-
- -
- -
- - ); -} - export default function Login() { const navigate = useNavigate(); const location = useLocation(); @@ -127,7 +46,7 @@ export default function Login() { setIsLoading(true); setApiError(null); try { - // client side key derivation for 0 knowledge + // client side key derivation for e2e encryption const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle( data.password, data.email, @@ -143,7 +62,6 @@ export default function Login() { headers: { Authorization: `Bearer ${authData.access}` }, }); - // store the auth related data await setAuthStore(authData.access, userData, masterKey); navigate(nextRoute, { replace: true }); diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx index 7a769db..5f75474 100644 --- a/frontend/src/pages/Register.tsx +++ b/frontend/src/pages/Register.tsx @@ -13,7 +13,6 @@ import { endpoints } from "../config/endpoints"; import { ROUTES } from "../config/routes"; import { CryptoUtils } from "../utils/crypto"; -// validation logic const registerSchema = z .object({ full_name: z.string().min(2, "Name must be at least 2 characters"), @@ -49,7 +48,7 @@ export default function Register() { setIsLoading(true); setApiError(null); try { - // We generate the key bundle here to get the authHash (password) for the server. + // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db. const { authHash } = await CryptoUtils.deriveKeyBundle( data.password, data.email, @@ -136,7 +135,6 @@ export default function Register() { } /> - {/* Warning */}

diff --git a/frontend/src/utils/keystore.ts b/frontend/src/utils/keystore.ts index 30b3b46..3d6189d 100644 --- a/frontend/src/utils/keystore.ts +++ b/frontend/src/utils/keystore.ts @@ -1,6 +1,6 @@ import { openDB } from "idb"; -// we use this to store master key in browser - secure and good UX +// we use indexedDB to securely store master key for easier access across tabs (better UX than having to store in session) const db = openDB("piku-keys", 1, { upgrade(db) { db.createObjectStore("master-key");