From 6db59247cd103a9b5acda9808e482d31d452e302 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Fri, 10 Jan 2025 12:05:10 +0530
Subject: [PATCH] L2

---
 web/packages/accounts/components/Login.tsx | 71 +++++++++++++++-------
 web/packages/accounts/pages/login.tsx      | 22 +++----
 2 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/web/packages/accounts/components/Login.tsx b/web/packages/accounts/components/Login.tsx
index 31fb239149..39867d8e3a 100644
--- a/web/packages/accounts/components/Login.tsx
+++ b/web/packages/accounts/components/Login.tsx
@@ -12,14 +12,24 @@ import { useRouter } from "next/router";
 import { PAGES } from "../constants/pages";
 import { getSRPAttributes } from "../services/srp-remote";
 import { sendOTT } from "../services/user";
+import {
+    AccountsPageFooter,
+    AccountsPageTitle,
+} from "./layouts/centered-paper";
 
 interface LoginProps {
     signUp: () => void;
     /** Reactive value of {@link customAPIHost}. */
     host: string | undefined;
+    /**
+     * If true, return the "newer" variant.
+     *
+     * TODO: Remove the branching.
+     */
+    useV2?: boolean;
 }
 
-export const Login: React.FC<LoginProps> = ({ signUp, host }) => {
+export const Login: React.FC<LoginProps> = ({ signUp, host, useV2 }) => {
     const router = useRouter();
 
     const loginUser: SingleInputFormProps["callback"] = async (
@@ -54,31 +64,46 @@ export const Login: React.FC<LoginProps> = ({ signUp, host }) => {
         }
     };
 
+    const form = (
+        <SingleInputForm
+            callback={loginUser}
+            fieldType="email"
+            placeholder={t("enter_email")}
+            buttonText={t("login")}
+            autoComplete="username"
+            hiddenPostInput={
+                <Input sx={{ display: "none" }} type="password" value="" />
+            }
+        />
+    );
+
+    const footerContents = (
+        <Stack sx={{ gap: 4, textAlign: "center" }}>
+            <LinkButton onClick={signUp}>{t("no_account")}</LinkButton>
+            <Typography
+                variant="mini"
+                sx={{ color: "text.faint", minHeight: "16px" }}
+            >
+                {host ?? "" /* prevent layout shift with a minHeight */}
+            </Typography>
+        </Stack>
+    );
+
+    if (useV2) {
+        return (
+            <>
+                <AccountsPageTitle>{t("login")}</AccountsPageTitle>
+                {form}
+                <AccountsPageFooter>{footerContents}</AccountsPageFooter>
+            </>
+        );
+    }
+
     return (
         <>
             <FormPaperTitle>{t("login")}</FormPaperTitle>
-            <SingleInputForm
-                callback={loginUser}
-                fieldType="email"
-                placeholder={t("enter_email")}
-                buttonText={t("login")}
-                autoComplete="username"
-                hiddenPostInput={
-                    <Input sx={{ display: "none" }} type="password" value="" />
-                }
-            />
-            <FormPaperFooter>
-                <Stack sx={{ gap: 4 }}>
-                    <LinkButton onClick={signUp}>{t("no_account")}</LinkButton>
-
-                    <Typography
-                        variant="mini"
-                        sx={{ color: "text.faint", minHeight: "32px" }}
-                    >
-                        {host ?? "" /* prevent layout shift with a minHeight */}
-                    </Typography>
-                </Stack>
-            </FormPaperFooter>
+            {form}
+            <FormPaperFooter>{footerContents}</FormPaperFooter>
         </>
     );
 };
diff --git a/web/packages/accounts/pages/login.tsx b/web/packages/accounts/pages/login.tsx
index d1005bdcd3..f1d1945815 100644
--- a/web/packages/accounts/pages/login.tsx
+++ b/web/packages/accounts/pages/login.tsx
@@ -1,17 +1,14 @@
-import { FormPaper } from "@/base/components/FormPaper";
+import { Stack100vhCenter } from "@/base/components/containers";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { customAPIHost } from "@/base/origins";
-import { VerticallyCentered } from "@ente/shared/components/Container";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
+import { AccountsPageContents } from "../components/layouts/centered-paper";
 import { Login } from "../components/Login";
 import { PAGES } from "../constants/pages";
-import type { PageProps } from "../types/page";
-
-const Page: React.FC<PageProps> = ({ appContext }) => {
-    const { showNavBar } = appContext;
 
+const Page: React.FC = () => {
     const [loading, setLoading] = useState(true);
     const [host, setHost] = useState<string | undefined>();
 
@@ -24,7 +21,6 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
             void router.push(PAGES.VERIFY);
         }
         setLoading(false);
-        showNavBar(true);
     }, []);
 
     const signUp = () => {
@@ -32,15 +28,13 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     };
 
     return loading ? (
-        <VerticallyCentered>
+        <Stack100vhCenter>
             <ActivityIndicator />
-        </VerticallyCentered>
+        </Stack100vhCenter>
     ) : (
-        <VerticallyCentered>
-            <FormPaper>
-                <Login {...{ signUp, host }} />
-            </FormPaper>
-        </VerticallyCentered>
+        <AccountsPageContents>
+            <Login {...{ signUp, host }} useV2 />
+        </AccountsPageContents>
     );
 };