major ui tweaks and refactoring

src/app/auth/login/DashboardLoginForm.tsx

@@ -12,6 +12,7 @@ import LoginForm from "@app/components/LoginForm";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import Image from "next/image";
 
 type DashboardLoginFormProps = {
     redirect?: string;
@@ -37,10 +38,20 @@ export default function DashboardLoginForm({
     return (
         <Card className="w-full max-w-md">
             <CardHeader>
-                <CardTitle>Welcome to Pangolin</CardTitle>
-                <CardDescription>
-                    Enter your credentials to access your dashboard
-                </CardDescription>
+                <div className="flex flex-row items-center justify-center">
+                    <Image
+                        src={`/logo/pangolin_orange.svg`}
+                        alt="Pangolin Logo"
+                        width="100"
+                        height="100"
+                    />
+                </div>
+                <div className="text-center space-y-1">
+                    <h1 className="text-2xl font-bold mt-1">
+                        Welcome to Pangolin
+                    </h1>
+                    <p className="text-sm text-muted-foreground">Log in to get started</p>
+                </div>
             </CardHeader>
             <CardContent>
                 <LoginForm

src/app/auth/login/page.tsx

@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { cache } from "react";
 import DashboardLoginForm from "./DashboardLoginForm";
 import { Mail } from "lucide-react";
+import { pullEnv } from "@app/lib/pullEnv";
 
 export const dynamic = "force-dynamic";
 
@@ -16,7 +17,9 @@ export default async function Page(props: {
 
     const isInvite = searchParams?.redirect?.includes("/invite");
 
-    const signUpDisabled = process.env.DISABLE_SIGNUP_WITHOUT_INVITE === "true";
+    const env = pullEnv();
+
+    const signUpDisabled = env.flags.disableSignupWithoutInvite;
 
     if (user) {
         redirect("/");

src/app/auth/reset-password/ResetPasswordForm.tsx

@@ -364,8 +364,6 @@ export default function ResetPasswordForm({
                                                                 <InputOTPSlot
                                                                     index={2}
                                                                 />
-                                                            </InputOTPGroup>
-                                                            <InputOTPGroup>
                                                                 <InputOTPSlot
                                                                     index={3}
                                                                 />

src/app/auth/reset-password/page.tsx

@@ -38,7 +38,7 @@ export default async function Page(props: {
                     }
                     className="underline"
                 >
-                    Go to login
+                    Go back to log in
                 </Link>
             </p>
         </>

src/app/auth/resource/[resourceId]/page.tsx

@@ -16,6 +16,7 @@ import { cookies } from "next/headers";
 import { CheckResourceSessionResponse } from "@server/routers/auth";
 import AccessTokenInvalid from "./AccessToken";
 import AccessToken from "./AccessToken";
+import { pullEnv } from "@app/lib/pullEnv";
 
 export default async function ResourceAuthPage(props: {
     params: Promise<{ resourceId: number }>;
@@ -27,6 +28,8 @@ export default async function ResourceAuthPage(props: {
     const params = await props.params;
     const searchParams = await props.searchParams;
 
+    const env = pullEnv();
+
     let authInfo: GetResourceAuthInfoResponse | undefined;
     try {
         const res = await internal.get<
@@ -42,7 +45,9 @@ export default async function ResourceAuthPage(props: {
     const user = await getUser({ skipCheckVerifyEmail: true });
 
     if (!authInfo) {
-        {/* @ts-ignore */} // TODO: fix this
+        {
+            /* @ts-ignore */
+        } // TODO: fix this
         return (
             <div className="w-full max-w-md">
                 <ResourceNotFound />
@@ -63,11 +68,7 @@ export default async function ResourceAuthPage(props: {
         !authInfo.pincode &&
         !authInfo.whitelist;
 
-    if (
-        user &&
-        !user.emailVerified &&
-        process.env.FLAGS_EMAIL_VERIFICATION_REQUIRED === "true"
-    ) {
+    if (user && !user.emailVerified && env.flags.emailVerificationRequired) {
         redirect(
             `/auth/verify-email?redirect=/auth/resource/${authInfo.resourceId}`
         );
@@ -75,7 +76,7 @@ export default async function ResourceAuthPage(props: {
 
     const allCookies = await cookies();
     const cookieName =
-        process.env.RESOURCE_SESSION_COOKIE_NAME + `_${params.resourceId}`;
+        env.server.resourceSessionCookieName + `_${params.resourceId}`;
     const sessionId = allCookies.get(cookieName)?.value ?? null;
 
     if (sessionId) {

src/app/auth/signup/SignupForm.tsx

@@ -12,23 +12,24 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@/components/ui/form";
 import {
     Card,
     CardContent,
     CardDescription,
     CardHeader,
-    CardTitle,
+    CardTitle
 } from "@/components/ui/card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { SignUpResponse } from "@server/routers/auth";
 import { useRouter } from "next/navigation";
 import { passwordSchema } from "@server/auth/passwordSchema";
 import { AxiosResponse } from "axios";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import Image from "next/image";
 
 type SignupFormProps = {
     redirect?: string;
@@ -40,14 +41,18 @@ const formSchema = z
     .object({
         email: z.string().email({ message: "Invalid email address" }),
         password: passwordSchema,
-        confirmPassword: passwordSchema,
+        confirmPassword: passwordSchema
     })
     .refine((data) => data.password === data.confirmPassword, {
         path: ["confirmPassword"],
-        message: "Passwords do not match",
+        message: "Passwords do not match"
     });
 
-export default function SignupForm({ redirect, inviteId, inviteToken }: SignupFormProps) {
+export default function SignupForm({
+    redirect,
+    inviteId,
+    inviteToken
+}: SignupFormProps) {
     const router = useRouter();
 
     const api = createApiClient(useEnvContext());
@@ -60,8 +65,8 @@ export default function SignupForm({ redirect, inviteId, inviteToken }: SignupFo
         defaultValues: {
             email: "",
             password: "",
-            confirmPassword: "",
-        },
+            confirmPassword: ""
+        }
     });
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
@@ -109,10 +114,22 @@ export default function SignupForm({ redirect, inviteId, inviteToken }: SignupFo
     return (
         <Card className="w-full max-w-md">
             <CardHeader>
-                <CardTitle>Create Account</CardTitle>
-                <CardDescription>
-                    Enter your details to create an account
-                </CardDescription>
+                <div className="flex flex-row items-center justify-center">
+                    <Image
+                        src={`/logo/pangolin_orange.svg`}
+                        alt="Pangolin Logo"
+                        width="100"
+                        height="100"
+                    />
+                </div>
+                <div className="text-center space-y-1">
+                    <h1 className="text-2xl font-bold mt-1">
+                        Welcome to Pangolin
+                    </h1>
+                    <p className="text-sm text-muted-foreground">
+                        Create an account to get started
+                    </p>
+                </div>
             </CardHeader>
             <CardContent>
                 <Form {...form}>

src/app/auth/verify-email/page.tsx

@@ -1,5 +1,6 @@
 import VerifyEmailForm from "@app/app/auth/verify-email/VerifyEmailForm";
 import { verifySession } from "@app/lib/auth/verifySession";
+import { pullEnv } from "@app/lib/pullEnv";
 import { redirect } from "next/navigation";
 import { cache } from "react";
 
@@ -8,7 +9,9 @@ export const dynamic = "force-dynamic";
 export default async function Page(props: {
     searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-    if (process.env.FLAGS_EMAIL_VERIFICATION_REQUIRED !== "true") {
+    const env = pullEnv();
+
+    if (!env.flags.emailVerificationRequired) {
         redirect("/");
     }