TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Custom component

Browse Source
This commit is contained in:
Manav Rathi
2024-06-24 15:08:18 +05:30
parent 21fa0ee7a7
commit 899d1ff6a4
3 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/packages/accounts/pages/credentials.tsx
View File

@@ -1,13 +1,11 @@
import { isDevBuild } from "@/next/env";
import log from "@/next/log";
import { ensure } from "@/utils/ensure";
import { VerticallyCentered } from "@ente/shared/components/Container";
import EnteSpinner from "@ente/shared/components/EnteSpinner";
import FormPaper from "@ente/shared/components/Form/FormPaper";
import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
import LinkButton from "@ente/shared/components/LinkButton";
import {
ConnectionDetails,
LoginFlowFormFooter,
PasswordHeader,
VerifyingPasskey,
} from "@ente/shared/components/LoginComponents";
@@ -42,6 +40,7 @@ import {
setKey,
} from "@ente/shared/storage/sessionStorage";
import type { KeyAttributes, User } from "@ente/shared/user/types";
import { Stack } from "@mui/material";
import { t } from "i18next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
@@ -321,16 +320,16 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
srpAttributes={srpAttributes}
/>
<FormPaperFooter style={{ justifyContent: "space-between" }}>
<LinkButton onClick={() => router.push(PAGES.RECOVER)}>
{t("FORGOT_PASSWORD")}
</LinkButton>
<LinkButton onClick={logout}>
{t("CHANGE_EMAIL")}
</LinkButton>
</FormPaperFooter>
{isDevBuild && <ConnectionDetails />}
<LoginFlowFormFooter>
<Stack direction="row" justifyContent="space-between">
<LinkButton onClick={() => router.push(PAGES.RECOVER)}>
{t("FORGOT_PASSWORD")}
</LinkButton>
<LinkButton onClick={logout}>
{t("CHANGE_EMAIL")}
</LinkButton>
</Stack>
</LoginFlowFormFooter>
</FormPaper>
</VerticallyCentered>
);

2
web/packages/accounts/pages/verify.tsx
View File

@@ -229,7 +229,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
/>
<FormPaperFooter>
<Stack gap={4} sx={{ width: "100%", textAlign: "start" }}>
<Stack gap={1} sx={{ width: "100%", textAlign: "start" }}>
<Stack direction="row" justifyContent="space-between">
{resend === 0 && (
<LinkButton onClick={resendEmail}>

51
web/packages/shared/components/LoginComponents.tsx
View File

@@ -1,6 +1,5 @@
import { isDevBuild } from "@/next/env";
import log from "@/next/log";
import { apiOrigin } from "@/next/origins";
import { customAPIHost } from "@/next/origins";
import type { BaseAppContextT } from "@/next/types/app";
import {
checkPasskeyVerificationStatus,
@@ -8,7 +7,7 @@ import {
saveCredentialsAndNavigateTo,
} from "@ente/accounts/services/passkey";
import EnteButton from "@ente/shared/components/EnteButton";
import { CircularProgress, Typography, styled } from "@mui/material";
import { CircularProgress, Stack, Typography, styled } from "@mui/material";
import { t } from "i18next";
import { useRouter } from "next/router";
import React, { useState } from "react";
@@ -46,22 +45,26 @@ const Header_ = styled("div")`
gap: 8px;
`;
export const ConnectionDetails: React.FC = () => {
const host = new URL(apiOrigin()).host;
export const LoginFlowFormFooter: React.FC<React.PropsWithChildren> = ({
children,
}) => {
const host = customAPIHost();
return (
<ConnectionDetails_>
<Typography variant="small" color="text.faint">
{host}
</Typography>
</ConnectionDetails_>
<FormPaperFooter>
<Stack gap={"16px"} sx={{ width: "100%", textAlign: "start" }}>
{children}
{host && (
<Typography variant="small" color="text.faint">
{host}
</Typography>
)}
</Stack>
</FormPaperFooter>
);
};
const ConnectionDetails_ = styled("div")`
margin-block-start: 1rem;
`;
interface VerifyingPasskeyProps {
/** ID of the current passkey verification session. */
passkeySessionID: string;
@@ -161,16 +164,16 @@ export const VerifyingPasskey: React.FC<VerifyingPasskeyProps> = ({
</ButtonStack>
</VerifyingPasskeyMiddle>
<FormPaperFooter style={{ justifyContent: "space-between" }}>
<LinkButton onClick={handleRecover}>
{t("RECOVER_ACCOUNT")}
</LinkButton>
<LinkButton onClick={logout}>
{t("CHANGE_EMAIL")}
</LinkButton>
</FormPaperFooter>
{isDevBuild && <ConnectionDetails />}
<LoginFlowFormFooter>
<Stack direction="row" justifyContent="space-between">
<LinkButton onClick={handleRecover}>
{t("RECOVER_ACCOUNT")}
</LinkButton>
<LinkButton onClick={logout}>
{t("CHANGE_EMAIL")}
</LinkButton>
</Stack>
</LoginFlowFormFooter>
</FormPaper>
</VerticallyCentered>
);