Rearrange
This commit is contained in:
parent
650163c341
commit
c18be32c09
|
@ -12,7 +12,7 @@ import { CustomError } from "@ente/shared/error";
|
||||||
import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
|
import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
|
||||||
import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
|
import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
|
||||||
import MoreHoriz from "@mui/icons-material/MoreHoriz";
|
import MoreHoriz from "@mui/icons-material/MoreHoriz";
|
||||||
import { Button, ButtonBase, Snackbar, TextField } from "@mui/material";
|
import { Button, ButtonBase, Snackbar, TextField, styled } from "@mui/material";
|
||||||
import { t } from "i18next";
|
import { t } from "i18next";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { AppContext } from "pages/_app";
|
import { AppContext } from "pages/_app";
|
||||||
|
@ -30,8 +30,7 @@ const AuthenticatorCodesPage = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchCodes = async () => {
|
const fetchCodes = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await getAuthCodes();
|
setCodes(await getAuthCodes());
|
||||||
setCodes(res);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (
|
if (
|
||||||
e instanceof Error &&
|
e instanceof Error &&
|
||||||
|
@ -58,11 +57,9 @@ const AuthenticatorCodesPage = () => {
|
||||||
|
|
||||||
if (!hasFetched) {
|
if (!hasFetched) {
|
||||||
return (
|
return (
|
||||||
<>
|
<VerticallyCentered>
|
||||||
<VerticallyCentered>
|
<EnteSpinner />
|
||||||
<EnteSpinner></EnteSpinner>
|
</VerticallyCentered>
|
||||||
</VerticallyCentered>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,9 +77,7 @@ const AuthenticatorCodesPage = () => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ marginBottom: "1rem" }} />
|
<div style={{ marginBottom: "1rem" }} />
|
||||||
{filteredCodes.length === 0 && searchTerm.length === 0 ? (
|
{(filteredCodes.length || searchTerm.length) && (
|
||||||
<></>
|
|
||||||
) : (
|
|
||||||
<TextField
|
<TextField
|
||||||
id="search"
|
id="search"
|
||||||
name="search"
|
name="search"
|
||||||
|
@ -104,7 +99,11 @@ const AuthenticatorCodesPage = () => {
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{filteredCodes.length === 0 ? (
|
{filteredCodes.length ? (
|
||||||
|
filteredCodes.map((code) => (
|
||||||
|
<CodeDisplay key={code.id} code={code} />
|
||||||
|
))
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
@ -113,21 +112,11 @@ const AuthenticatorCodesPage = () => {
|
||||||
marginTop: "32px",
|
marginTop: "32px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{searchTerm.length !== 0 ? (
|
{searchTerm.length && <p>{t("NO_RESULTS")}</p>}
|
||||||
<p>{t("NO_RESULTS")}</p>
|
|
||||||
) : (
|
|
||||||
<div />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
filteredCodes.map((code) => (
|
|
||||||
<CodeDisplay key={code.id} code={code} />
|
|
||||||
))
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ marginBottom: "2rem" }} />
|
|
||||||
<Footer />
|
<Footer />
|
||||||
<div style={{ marginBottom: "4rem" }} />
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -396,14 +385,7 @@ const UnparseableCode: React.FC<UnparseableCodeProps> = ({
|
||||||
|
|
||||||
const Footer: React.FC = () => {
|
const Footer: React.FC = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<Footer_>
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p>{t("AUTH_DOWNLOAD_MOBILE_APP")}</p>
|
<p>{t("AUTH_DOWNLOAD_MOBILE_APP")}</p>
|
||||||
<a
|
<a
|
||||||
href="https://github.com/ente-io/ente/tree/main/auth#-download"
|
href="https://github.com/ente-io/ente/tree/main/auth#-download"
|
||||||
|
@ -411,6 +393,15 @@ const Footer: React.FC = () => {
|
||||||
>
|
>
|
||||||
<Button color="accent">{t("DOWNLOAD")}</Button>
|
<Button color="accent">{t("DOWNLOAD")}</Button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</Footer_>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const Footer_ = styled("div")`
|
||||||
|
margin-block-start: 2rem;
|
||||||
|
margin-block-end: 4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
`;
|
||||||
|
|
Loading…
Reference in a new issue