Inline

web/apps/auth/src/components/Navbar.tsx

@@ -1,35 +0,0 @@
-import { HorizontalFlex } from "@ente/shared/components/Container";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
-import NavbarBase from "@ente/shared/components/Navbar/base";
-import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
-import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
-import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
-import MoreHoriz from "@mui/icons-material/MoreHoriz";
-import { t } from "i18next";
-import { AppContext } from "pages/_app";
-import React from "react";
-
-export default function AuthNavbar() {
-    const { isMobile, logout } = React.useContext(AppContext);
-    return (
-        <NavbarBase isMobile={isMobile}>
-            <HorizontalFlex flex={1} justifyContent={"center"}>
-                <EnteLogo />
-            </HorizontalFlex>
-            <HorizontalFlex position={"absolute"} right="24px">
-                <OverflowMenu
-                    ariaControls={"auth-options"}
-                    triggerButtonIcon={<MoreHoriz />}
-                >
-                    <OverflowMenuOption
-                        color="critical"
-                        startIcon={<LogoutOutlined />}
-                        onClick={logout}
-                    >
-                        {t("LOGOUT")}
-                    </OverflowMenuOption>
-                </OverflowMenu>
-            </HorizontalFlex>
-        </NavbarBase>
-    );
-}

web/apps/auth/src/components/OTPDisplay.tsx

@@ -3,7 +3,6 @@ import { t } from "i18next";
 import { HOTP, TOTP } from "otpauth";
 import { useEffect, useState } from "react";
 import { Code } from "types/code";
-import TimerProgress from "./TimerProgress";
 
 const TOTPDisplay = ({ issuer, account, code, nextCode, period }) => {
     return (
@@ -235,3 +234,41 @@ const OTPDisplay = (props: OTPDisplayProps) => {
 };
 
 export default OTPDisplay;
+
+const TimerProgress = ({ period }) => {
+    const [progress, setProgress] = useState(0);
+    const [ticker, setTicker] = useState(null);
+    const microSecondsInPeriod = period * 1000000;
+
+    const startTicker = () => {
+        const ticker = setInterval(() => {
+            updateTimeRemaining();
+        }, 10);
+        setTicker(ticker);
+    };
+
+    const updateTimeRemaining = () => {
+        const timeRemaining =
+            microSecondsInPeriod -
+            ((new Date().getTime() * 1000) % microSecondsInPeriod);
+        setProgress(timeRemaining / microSecondsInPeriod);
+    };
+
+    useEffect(() => {
+        startTicker();
+        return () => clearInterval(ticker);
+    }, []);
+
+    const color = progress > 0.4 ? "green" : "orange";
+
+    return (
+        <div
+            style={{
+                borderTopLeftRadius: "3px",
+                width: `${progress * 100}%`,
+                height: "3px",
+                backgroundColor: color,
+            }}
+        />
+    );
+};

web/apps/auth/src/components/TimerProgress.tsx

@@ -1,41 +0,0 @@
-import { useEffect, useState } from "react";
-
-const TimerProgress = ({ period }) => {
-    const [progress, setProgress] = useState(0);
-    const [ticker, setTicker] = useState(null);
-    const microSecondsInPeriod = period * 1000000;
-
-    const startTicker = () => {
-        const ticker = setInterval(() => {
-            updateTimeRemaining();
-        }, 10);
-        setTicker(ticker);
-    };
-
-    const updateTimeRemaining = () => {
-        const timeRemaining =
-            microSecondsInPeriod -
-            ((new Date().getTime() * 1000) % microSecondsInPeriod);
-        setProgress(timeRemaining / microSecondsInPeriod);
-    };
-
-    useEffect(() => {
-        startTicker();
-        return () => clearInterval(ticker);
-    }, []);
-
-    const color = progress > 0.4 ? "green" : "orange";
-
-    return (
-        <div
-            style={{
-                borderTopLeftRadius: "3px",
-                width: `${progress * 100}%`,
-                height: "3px",
-                backgroundColor: color,
-            }}
-        />
-    );
-};
-
-export default TimerProgress;

web/apps/auth/src/pages/auth.tsx

@@ -1,15 +1,23 @@
-import { VerticallyCentered } from "@ente/shared/components/Container";
+import {
+    HorizontalFlex,
+    VerticallyCentered,
+} from "@ente/shared/components/Container";
+import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
+import NavbarBase from "@ente/shared/components/Navbar/base";
+import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
+import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
 import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { CustomError } from "@ente/shared/error";
 import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
+import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import { Button, TextField } from "@mui/material";
-import AuthNavbar from "components/Navbar";
 import OTPDisplay from "components/OTPDisplay";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { AppContext } from "pages/_app";
-import { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { getAuthCodes } from "services";
 
 const AuthenticatorCodesPage = () => {
@@ -127,6 +135,32 @@ const AuthenticatorCodesPage = () => {
 
 export default AuthenticatorCodesPage;
 
+const AuthNavbar: React.FC = () => {
+    const { isMobile, logout } = useContext(AppContext);
+
+    return (
+        <NavbarBase isMobile={isMobile}>
+            <HorizontalFlex flex={1} justifyContent={"center"}>
+                <EnteLogo />
+            </HorizontalFlex>
+            <HorizontalFlex position={"absolute"} right="24px">
+                <OverflowMenu
+                    ariaControls={"auth-options"}
+                    triggerButtonIcon={<MoreHoriz />}
+                >
+                    <OverflowMenuOption
+                        color="critical"
+                        startIcon={<LogoutOutlined />}
+                        onClick={logout}
+                    >
+                        {t("LOGOUT")}
+                    </OverflowMenuOption>
+                </OverflowMenu>
+            </HorizontalFlex>
+        </NavbarBase>
+    );
+};
+
 const AuthFooter: React.FC = () => {
     return (
         <div

web/apps/auth/src/services/index.ts

@@ -6,10 +6,10 @@ import { getEndpoint } from "@ente/shared/network/api";
 import { getToken } from "@ente/shared/storage/localStorage/helpers";
 import { getActualKey } from "@ente/shared/user";
 import { HttpStatusCode } from "axios";
-import { AuthEntity, AuthKey } from "types/api";
 import { Code } from "types/code";
 
 const ENDPOINT = getEndpoint();
+
 export const getAuthCodes = async (): Promise<Code[]> => {
     const masterKey = await getActualKey();
     try {
@@ -65,6 +65,20 @@ export const getAuthCodes = async (): Promise<Code[]> => {
     }
 };
 
+interface AuthEntity {
+    id: string;
+    encryptedData: string | null;
+    header: string | null;
+    isDeleted: boolean;
+    createdAt: number;
+    updatedAt: number;
+}
+
+interface AuthKey {
+    encryptedKey: string;
+    header: string;
+}
+
 export const getAuthKey = async (): Promise<AuthKey> => {
     try {
         const resp = await HTTPService.get(

web/apps/auth/src/types/api.ts

@@ -1,13 +0,0 @@
-export interface AuthEntity {
-    id: string;
-    encryptedData: string | null;
-    header: string | null;
-    isDeleted: boolean;
-    createdAt: number;
-    updatedAt: number;
-}
-
-export interface AuthKey {
-    encryptedKey: string;
-    header: string;
-}