me/pi-ku
1
0
Fork 0
Code Issues Pull Requests 1 Actions Projects Releases Wiki Activity

Style/Revamp #4

Merged
me merged 12 commits from feature/home_revamp into main 2026-05-08 03:16:16 +00:00
Conversation 0 Commits 12 Files Changed 20
+317 -316
5 changed files with 317 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27ab3ad4b1 - Show all commits
frontend/public/logo.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

frontend/src/components/Logo.tsx
+52 -52
View File
@@ -2,63 +2,63 @@ import { DotIcon } from "@phosphor-icons/react";
import "@fontsource/knewave/400.css"; import "@fontsource/knewave/400.css";
interface LogoProps { interface LogoProps {
scale?: number; scale?: number;
type?: "inline" | "mono" | "logo" | null; type?: "inline" | "mono" | "logo" | null;
ul?: boolean; ul?: boolean;
} }
export default function Logo({ export default function Logo({
scale = 1, scale = 1,
type = null, type = null,
ul = false, ul = false,
}: LogoProps) { }: LogoProps) {
if (type === "inline") { if (type === "inline") {
return ( return (
<span className={"text-accent font-display italic "}> <span className={"text-accent font-display italic "}>
pi<span className="text-primary">.</span>&nbsp;ku pi<span className="text-primary">.</span>&nbsp;ku
<span className="text-primary">.</span>&nbsp; <span className="text-primary">.</span>&nbsp;
</span> </span>
); );
} }
if (type === "mono") { if (type === "mono") {
return ( return (
<span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50"> <span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
pi. ku. pi. ku.
</span> </span>
); );
} }
if (type === "logo") { if (type === "logo") {
return ( return (
<img <img
src="/android-chrome-512x512.png" src="/logo.svg"
alt="Pi. Ku. logo" alt="Pi. Ku. logo"
className="mx-auto" className="mx-4"
width={scale * 100} width={scale * 100}
/> />
); );
} }
return ( return (
<div <div
role="img" role="img"
aria-label="Pi. Ku. logo" aria-label="Pi. Ku. logo"
className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`} className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
style={{ fontFamily: "'Knewave', serif", scale }} style={{ fontFamily: "'Knewave', serif", scale }}
> >
<span className="text-3xl font-light text-accent">Pi</span> <span className="text-3xl font-light text-accent">Pi</span>
<DotIcon <DotIcon
weight="fill" weight="fill"
size={12} size={12}
className="text-primary translate-y-1 -mx-px" className="text-primary translate-y-1 -mx-px"
/> />
<span className="text-3xl font-light text-accent">&nbsp;Ku</span> <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
<DotIcon <DotIcon
weight="fill" weight="fill"
size={12} size={12}
className="text-primary translate-y-1 -mx-px" className="text-primary translate-y-1 -mx-px"
/> />
</div> </div>
); );
} }
frontend/src/index.css
+3 -3
View File
@@ -24,9 +24,9 @@
--color-neutral: oklch(38% 0.02 45); --color-neutral: oklch(38% 0.02 45);
--color-neutral-content: oklch(80% 0.015 60); --color-neutral-content: oklch(80% 0.015 60);
--color-info: oklch(60% 0.07 240); --color-info: oklch(60% 0.06 250);
--color-info-content: oklch(95% 0.01 240); --color-info-content: oklch(95% 0.01 240);
--color-success: oklch(60% 0.08 150); --color-success: oklch(65% 0.05 140);
--color-success-content: oklch(16% 0.03 150); --color-success-content: oklch(16% 0.03 150);
--color-warning: oklch(68% 0.08 72); --color-warning: oklch(68% 0.08 72);
--color-warning-content: oklch(18% 0.03 60); --color-warning-content: oklch(18% 0.03 60);
@@ -64,7 +64,7 @@
} }
.glass-card { .glass-card {
@apply bg-glass-bg backdrop-blur-xl border border-neutral-content/10 shadow-warm rounded-xl m-4; @apply bg-glass-bg max-w-xs md:max-w-sm backdrop-blur-xl border border-neutral-content/10 shadow-warm rounded-xl m-4;
} }
.ul-wavy { .ul-wavy {
frontend/src/pages/Login.tsx
+117 -117
View File
@@ -16,135 +16,135 @@ import { useAuth } from "../hooks/useAuth";
import { CryptoUtils } from "../utils/crypto"; import { CryptoUtils } from "../utils/crypto";
const loginSchema = z.object({ const loginSchema = z.object({
email: z.email("Please enter a valid email"), email: z.email("Please enter a valid email"),
password: z.string().min(1, "Password is required"), password: z.string().min(1, "Password is required"),
}); });
type LoginInputs = z.infer<typeof loginSchema>; type LoginInputs = z.infer<typeof loginSchema>;
export default function Login() { export default function Login() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [apiError, setApiError] = useState<string | null>(null); const [apiError, setApiError] = useState<string | null>(null);
const { setAuthStore } = useAuth(); const { setAuthStore } = useAuth();
const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime); const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
const [saajanMessage, setSaajanMessage] = useState<string>( const [saajanMessage, setSaajanMessage] = useState<string>(
"I was wondering when you'd return.", "I was wondering when you'd return.",
); );
const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER; const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
} = useForm<LoginInputs>({ } = useForm<LoginInputs>({
resolver: zodResolver(loginSchema), resolver: zodResolver(loginSchema),
}); });
const onSubmit = async (data: LoginInputs) => { const onSubmit = async (data: LoginInputs) => {
setIsLoading(true); setIsLoading(true);
setApiError(null); setApiError(null);
try { try {
// client side key derivation for e2e encryption // client side key derivation for e2e encryption
const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle( const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
data.password, data.password,
data.email, data.email,
); );
// send just the authHash as the password to the server // send just the authHash as the password to the server
const { data: authData } = await publicApi.post(endpoints.LOGIN, { const { data: authData } = await publicApi.post(endpoints.LOGIN, {
email: data.email, email: data.email,
password: authHash, password: authHash,
}); });
const { data: userData } = await api.get(endpoints.ME, { const { data: userData } = await api.get(endpoints.ME, {
headers: { Authorization: `Bearer ${authData.access}` }, headers: { Authorization: `Bearer ${authData.access}` },
}); });
await setAuthStore(authData.access, userData, masterKey); await setAuthStore(authData.access, userData, masterKey);
navigate(nextRoute, { replace: true, state: location.state }); navigate(nextRoute, { replace: true, state: location.state });
} catch (err) { } catch (err) {
let message = let message =
"Sorry, we're experiencing technical issues.\nPlease try again later."; "Sorry, we're experiencing technical issues.\nPlease try again later.";
if (axios.isAxiosError(err) && err.response?.status !== 500) { if (axios.isAxiosError(err) && err.response?.status !== 500) {
message = err.response?.data?.detail || err.response?.data?.message; message = err.response?.data?.detail || err.response?.data?.message;
}
setApiError(message);
} finally {
setIsLoading(false);
}
};
return (
<div className="flex flex-col items-center">
{!showWelcome && <Saajan message={saajanMessage} position="top" />}
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
<h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
Enter <Logo /> Archive
</h1>
{apiError && (
<div className="alert alert-error text-xs py-2 rounded-md">
<span data-testid="login-error-message">{apiError}</span>
</div>
)}
<FormField
label="Email"
type="email"
placeholder="f.kafka@wrongtrain.com"
data-testid="email-input"
registration={register("email")}
error={errors.email?.message}
handleFocus={() => setSaajanMessage("I remember you.")}
/>
<FormField
label="Password"
type="password"
placeholder="••••••••"
data-testid="password-input"
registration={register("password")}
error={errors.password?.message}
handleFocus={() =>
setSaajanMessage("The one thing I cannot know for you.")
} }
/> setApiError(message);
} finally {
setIsLoading(false);
}
};
<div className="card-actions mt-4"> return (
<button <div className="flex flex-col items-center">
type="submit" {!showWelcome && <Saajan message={saajanMessage} position="top" />}
name="login" {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
disabled={isLoading} <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
aria-label="Sign In" <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
data-testid="login-submit-btn" <h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
className="btn btn-primary w-full shadow-lg" &nbsp;&nbsp;Enter <Logo type="logo" scale={0.7} /> Archive
> </h1>
{isLoading ? (
<span className="loading loading-spinner loading-sm" />
) : (
"Sign In"
)}
</button>
</div>
<div className="text-center text-sm font-medium text-base-content/70"> {apiError && (
Don't have an account?{" "} <div className="alert alert-error text-xs py-2 rounded-md">
<button <span data-testid="login-error-message">{apiError}</span>
type="button" </div>
name="register" )}
onClick={() => navigate(ROUTES.ONBOARD)}
className="link link-primary no-underline hover:underline font-bold" <FormField
> label="Email"
Register type="email"
</button> placeholder="f.kafka@wrongtrain.com"
</div> data-testid="email-input"
</form> registration={register("email")}
</div> error={errors.email?.message}
</div> handleFocus={() => setSaajanMessage("I remember you.")}
); />
<FormField
label="Password"
type="password"
placeholder="••••••••"
data-testid="password-input"
registration={register("password")}
error={errors.password?.message}
handleFocus={() =>
setSaajanMessage("The one thing I cannot know for you.")
}
/>
<div className="card-actions mt-4">
<button
type="submit"
name="login"
disabled={isLoading}
aria-label="Sign In"
data-testid="login-submit-btn"
className="btn btn-primary w-full shadow-lg"
>
{isLoading ? (
<span className="loading loading-spinner loading-sm" />
) : (
"Sign In"
)}
</button>
</div>
<div className="text-center text-sm font-medium text-base-content/70">
Don't have an account?{" "}
<button
type="button"
name="register"
onClick={() => navigate(ROUTES.ONBOARD)}
className="link link-primary no-underline hover:underline font-bold"
>
Register
</button>
</div>
</form>
</div>
</div>
);
} }
frontend/src/pages/Register.tsx
+144 -144
View File
@@ -14,158 +14,158 @@ import { ROUTES } from "../config/routes";
import { CryptoUtils } from "../utils/crypto"; import { CryptoUtils } from "../utils/crypto";
const registerSchema = z const registerSchema = z
.object({ .object({
full_name: z.string().min(2, "Name must be at least 2 characters"), full_name: z.string().min(2, "Name must be at least 2 characters"),
email: z.email("Please enter a valid email"), email: z.email("Please enter a valid email"),
password: z.string().min(8, "Password must be at least 8 characters"), password: z.string().min(8, "Password must be at least 8 characters"),
confirm_password: z.string(), confirm_password: z.string(),
}) })
.refine((data) => data.password === data.confirm_password, { .refine((data) => data.password === data.confirm_password, {
message: "Passwords don't match", message: "Passwords don't match",
path: ["confirm_password"], path: ["confirm_password"],
}); });
type RegisterInputs = z.infer<typeof registerSchema>; type RegisterInputs = z.infer<typeof registerSchema>;
export default function Register() { export default function Register() {
const navigate = useNavigate(); const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [apiError, setApiError] = useState<string | null>(null); const [apiError, setApiError] = useState<string | null>(null);
const [saajanMessage, setSaajanMessage] = useState<string>( const [saajanMessage, setSaajanMessage] = useState<string>(
"I didn't think I'd be here either.\nAnd yet, here we are.", "I didn't think I'd be here either.\nAnd yet, here we are.",
); );
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
} = useForm<RegisterInputs>({ } = useForm<RegisterInputs>({
resolver: zodResolver(registerSchema), resolver: zodResolver(registerSchema),
}); });
const onSubmit = async (data: RegisterInputs) => { const onSubmit = async (data: RegisterInputs) => {
setSaajanMessage("Good. I'll remember that."); setSaajanMessage("Good. I'll remember that.");
setIsLoading(true); setIsLoading(true);
setApiError(null); setApiError(null);
try { try {
// we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db. // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
const { authHash } = await CryptoUtils.deriveKeyBundle( const { authHash } = await CryptoUtils.deriveKeyBundle(
data.password, data.password,
data.email, data.email,
); );
await publicApi.post(endpoints.REGISTER, { await publicApi.post(endpoints.REGISTER, {
full_name: data.full_name, full_name: data.full_name,
email: data.email, email: data.email,
password: authHash, password: authHash,
}); });
navigate(ROUTES.VERIFY_EMAIL, { replace: true }); navigate(ROUTES.VERIFY_EMAIL, { replace: true });
} catch (err) { } catch (err) {
let message = "Registration failed. Please try again."; let message = "Registration failed. Please try again.";
if (axios.isAxiosError(err)) { if (axios.isAxiosError(err)) {
message = err.response?.data?.message || message; message = err.response?.data?.message || message;
} }
setApiError(message); setApiError(message);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}; };
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<Saajan message={saajanMessage} position="right" /> <Saajan message={saajanMessage} position="right" />
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom"> <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4"> <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
<div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap"> <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
Create a <Logo /> Account Create a <Logo type="logo" scale={0.7} /> Account
</div> </div>
{apiError && ( {apiError && (
<div className="alert alert-error text-xs py-2 rounded-md"> <div className="alert alert-error text-xs py-2 rounded-md">
<span>{apiError}</span> <span>{apiError}</span>
</div>
)}
<FormField
label="Pen Name"
placeholder="Word Smith"
data-testid="pen-name-input"
registration={register("full_name")}
error={errors.full_name?.message}
handleFocus={() =>
setSaajanMessage("Hello friend. What should I call you?")
}
/>
<FormField
label="Email"
type="email"
placeholder="f.kafka@wrongtrain.com"
data-testid="email-input"
registration={register("email")}
error={errors.email?.message}
handleFocus={() =>
setSaajanMessage(
"Where should I send your letters?\nNo empty lunchboxes, please.",
)
}
/>
<FormField
label="Password"
type="password"
placeholder="••••••••"
data-testid="password-input"
registration={register("password")}
error={errors.password?.message}
handleFocus={() =>
setSaajanMessage(
"Something only you know.\nI have one of those too.",
)
}
/>
<FormField
label="Confirm Password"
type="password"
placeholder="••••••••"
data-testid="confirm-password-input"
registration={register("confirm_password")}
error={errors.confirm_password?.message}
handleFocus={() =>
setSaajanMessage(
"Just once? Trust me, \nsome things are worth repeating twice.",
)
}
/>
<div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
<InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
<p className="text-sm font-semibold">
Choose a password you won't forget. <br />
Just like life,{" "}
<span className="underline decoration-2">there is no reset</span>{" "}
here. If you lose it, your letters cannot be recovered.
</p>
</div>
<div className="card-actions mt-4">
<button
type="submit"
disabled={isLoading}
aria-label="Register"
data-testid="register-submit-btn"
className="btn btn-primary w-full shadow-lg"
>
{isLoading ? (
<span className="loading loading-spinner loading-sm" />
) : (
"Register"
)}
</button>
</div>
</form>
</div> </div>
)} </div>
);
<FormField
label="Pen Name"
placeholder="Word Smith"
data-testid="pen-name-input"
registration={register("full_name")}
error={errors.full_name?.message}
handleFocus={() =>
setSaajanMessage("Hello friend. What should I call you?")
}
/>
<FormField
label="Email"
type="email"
placeholder="f.kafka@wrongtrain.com"
data-testid="email-input"
registration={register("email")}
error={errors.email?.message}
handleFocus={() =>
setSaajanMessage(
"Where should I send your letters?\nNo empty lunchboxes, please.",
)
}
/>
<FormField
label="Password"
type="password"
placeholder="••••••••"
data-testid="password-input"
registration={register("password")}
error={errors.password?.message}
handleFocus={() =>
setSaajanMessage(
"Something only you know.\nI have one of those too.",
)
}
/>
<FormField
label="Confirm Password"
type="password"
placeholder="••••••••"
data-testid="confirm-password-input"
registration={register("confirm_password")}
error={errors.confirm_password?.message}
handleFocus={() =>
setSaajanMessage(
"Just once? Trust me, \nsome things are worth repeating twice.",
)
}
/>
<div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
<InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
<p className="text-sm font-semibold">
Choose a password you won't forget. <br />
Just like life,{" "}
<span className="underline decoration-2">there is no reset</span>{" "}
here. If you lose it, your letters cannot be recovered.
</p>
</div>
<div className="card-actions mt-4">
<button
type="submit"
disabled={isLoading}
aria-label="Register"
data-testid="register-submit-btn"
className="btn btn-primary w-full shadow-lg"
>
{isLoading ? (
<span className="loading loading-spinner loading-sm" />
) : (
"Register"
)}
</button>
</div>
</form>
</div>
</div>
);
} }