diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 96e5738..77d9593 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -31,7 +31,7 @@ export default function App() { return ( -
+
}> } /> diff --git a/frontend/src/assets/noise.gif b/frontend/src/assets/noise.gif new file mode 100644 index 0000000..6b76b19 Binary files /dev/null and b/frontend/src/assets/noise.gif differ diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx index d7874a6..dbe19b6 100644 --- a/frontend/src/components/Logo.tsx +++ b/frontend/src/components/Logo.tsx @@ -1,7 +1,7 @@ import { DotIcon } from "@phosphor-icons/react"; import "@fontsource/knewave/400.css"; -export default function Logo({ scale = 2 }) { +export default function Logo({ scale = 1 }) { return (
-  Pi + Pi -  Ku +  Ku
diff --git a/frontend/src/index.css b/frontend/src/index.css index d2a940c..8071edf 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -47,10 +47,7 @@ --font-display: "Playwrite HR Lijeva Variable", cursive; --font-sans: "Jost Variable", sans-serif; --font-serif: "Playfair Display Variable", serif; - --color-glass-bg: rgba(28, - 22, - 16, - 0.45); + --color-glass-bg: rgba(28, 22, 16, 0.45); --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6); --radius-xl: 1.5rem; --color-paper: oklch(97% 0.008 80); diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 7574f75..b5b0240 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -1,5 +1,9 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { ShieldCheckIcon, WarningIcon } from "@phosphor-icons/react"; +import { + HandPalmIcon, + ShieldCheckIcon, + WarningIcon, +} from "@phosphor-icons/react"; import axios from "axios"; import { useState } from "react"; import { useForm } from "react-hook-form"; @@ -8,6 +12,7 @@ import { z } from "zod"; import { api, publicApi } from "../api/apiClient"; import Logo from "../components/Logo"; import FormField from "../components/ui/FormField"; +import Saajan from "../components/ui/Saajan"; import { endpoints } from "../config/endpoints"; import { ROUTES } from "../config/routes"; import { useAuth } from "../hooks/useAuth"; @@ -20,10 +25,19 @@ const loginSchema = z.object({ type LoginInputs = z.infer; -function WelcomeModal({ setShowWelcome }) { +function WelcomeModal({ + setShowWelcome, +}: { + setShowWelcome: (show: boolean) => void; +}) { return (
-
+
+ +
+

- Welcome to ! + Welcome to   +  !

- To ensure complete privacy, all - your letters are{" "} - - sealed with your password - - , which only you have access to. + Before we begin, let me make a small promise. + +


- - The server never sees it, and it's a solemn 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.

@@ -53,6 +70,19 @@ function WelcomeModal({ setShowWelcome }) {

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. +

@@ -62,7 +92,7 @@ function WelcomeModal({ setShowWelcome }) { onClick={() => setShowWelcome(false)} className="btn btn-primary w-full shadow-lg" > - I understand + I'll remember
@@ -78,6 +108,9 @@ export default function Login() { const [apiError, setApiError] = useState(null); const { setAuthStore } = useAuth(); const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime); + const [saajanMessage, setSaajanMessage] = useState( + "I was wondering when you'd return.", + ); const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER; const { @@ -125,12 +158,13 @@ export default function Login() { }; return ( -
+
+ {!showWelcome && } {showWelcome && }

- Sign in to + Enter Archive

{apiError && ( @@ -142,9 +176,10 @@ export default function Login() { setSaajanMessage("I remember you.")} /> + setSaajanMessage("The one thing I cannot know for you.") + } />
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx index 662b814..7a769db 100644 --- a/frontend/src/pages/Register.tsx +++ b/frontend/src/pages/Register.tsx @@ -8,6 +8,7 @@ import { z } from "zod"; import { publicApi } from "../api/apiClient"; import Logo from "../components/Logo"; import FormField from "../components/ui/FormField"; +import Saajan from "../components/ui/Saajan"; import { endpoints } from "../config/endpoints"; import { ROUTES } from "../config/routes"; import { CryptoUtils } from "../utils/crypto"; @@ -31,6 +32,9 @@ export default function Register() { const navigate = useNavigate(); const [isLoading, setIsLoading] = useState(false); const [apiError, setApiError] = useState(null); + const [saajanMessage, setSaajanMessage] = useState( + "I didn't think I'd be here either.\nAnd yet, here we are.", + ); const { register, @@ -41,6 +45,7 @@ export default function Register() { }); const onSubmit = async (data: RegisterInputs) => { + setSaajanMessage("Good. I'll remember that."); setIsLoading(true); setApiError(null); try { @@ -68,74 +73,96 @@ export default function Register() { }; return ( -
- -

- Create a Account -

- - {apiError && ( -
- {apiError} +
+ +
+ +
+ Create a Account
- )} - + {apiError && ( +
+ {apiError} +
+ )} - + + setSaajanMessage("Hello friend. What should I call you?") + } + /> - + + setSaajanMessage( + "Where should I send your letters?\nNo empty lunchboxes, please.", + ) + } + /> - + + setSaajanMessage( + "Something only you know.\nI have one of those too.", + ) + } + /> - {/* Warning */} -
- -

- Choose a password you won't forget.
- There is no reset.{" "} - If you lose it, your letters cannot be recovered. -

-
+ + setSaajanMessage( + "Just once? Trust me, \nsome things are worth repeating twice.", + ) + } + /> -
- -
- + {/* Warning */} +
+ +

+ Choose a password you won't forget.
+ Just like life,{" "} + there is no reset{" "} + here. If you lose it, your letters cannot be recovered. +

+
+ +
+ +
+ +
); }