diff --git a/src/components/README.md b/src/components/README.md new file mode 100644 index 00000000..2aa9f1cc --- /dev/null +++ b/src/components/README.md @@ -0,0 +1,14 @@ +The following folders should not be added to or modified: + +- `common` +- `markdown` +- `native` +- `ui` + +The following are part-legacy, will remain in place and will be rewritten to some degree still: + +- `navigation` + +The following are mostly good to go: + +- `settings` diff --git a/src/components/settings/account/AccountManagement.tsx b/src/components/settings/account/AccountManagement.tsx new file mode 100644 index 00000000..05d82e97 --- /dev/null +++ b/src/components/settings/account/AccountManagement.tsx @@ -0,0 +1,64 @@ +import { Block } from "@styled-icons/boxicons-regular"; +import { Trash } from "@styled-icons/boxicons-solid"; + +import { Text } from "preact-i18n"; +import { useContext } from "preact/hooks"; + +import { CategoryButton } from "@revoltchat/ui"; + +import { modalController } from "../../../context/modals"; +import { + LogOutContext, + useClient, +} from "../../../context/revoltjs/RevoltClient"; + +export default function AccountManagement() { + const logOut = useContext(LogOutContext); + const client = useClient(); + + const callback = (route: "disable" | "delete") => () => + modalController.push({ + type: "mfa_flow", + state: "known", + client, + callback: ({ token }) => + client.api + .post(`/auth/account/${route}`, undefined, { + headers: { + "X-MFA-Ticket": token, + }, + }) + .then(() => logOut(true)), + }); + + return ( + <> +

+ +

+ +
+ +
+ } + description={ + "Disable your account. You won't be able to access it unless you contact support." + } + action="chevron" + onClick={callback("disable")}> + + + + } + description={ + "Your account will be queued for deletion, a confirmation email will be sent." + } + action="chevron" + onClick={callback("delete")}> + + + + ); +} diff --git a/src/components/settings/account/EditAccount.tsx b/src/components/settings/account/EditAccount.tsx new file mode 100644 index 00000000..ce7a6088 --- /dev/null +++ b/src/components/settings/account/EditAccount.tsx @@ -0,0 +1,75 @@ +import { At } from "@styled-icons/boxicons-regular"; +import { Envelope, Key, Pencil } from "@styled-icons/boxicons-solid"; + +import { Text } from "preact-i18n"; +import { useContext, useEffect, useState } from "preact/hooks"; + +import { + AccountDetail, + CategoryButton, + Column, + HiddenValue, +} from "@revoltchat/ui"; + +import { useIntermediate } from "../../../context/intermediate/Intermediate"; +import { + ClientStatus, + StatusContext, + useClient, +} from "../../../context/revoltjs/RevoltClient"; + +export default function EditAccount() { + const client = useClient(); + const status = useContext(StatusContext); + const { openScreen } = useIntermediate(); + + const [email, setEmail] = useState("..."); + + useEffect(() => { + if (email === "..." && status === ClientStatus.ONLINE) { + client.api + .get("/auth/account/") + .then((account) => setEmail(account.email)); + } + }, [client, email, status]); + + return ( + <> + + + + + {( + [ + ["username", client.user!.username, At], + ["email", email, Envelope], + ["password", "•••••••••", Key], + ] as const + ).map(([field, value, Icon]) => ( + } + description={ + field === "email" ? ( + + ) : ( + value + ) + } + account + action={} + onClick={() => + openScreen({ + id: "modify_account", + field, + }) + }> + + + ))} + + ); +} diff --git a/src/components/settings/account/MultiFactorAuthentication.tsx b/src/components/settings/account/MultiFactorAuthentication.tsx new file mode 100644 index 00000000..e2539918 --- /dev/null +++ b/src/components/settings/account/MultiFactorAuthentication.tsx @@ -0,0 +1,37 @@ +import { Lock } from "@styled-icons/boxicons-solid"; + +import { Text } from "preact-i18n"; + +import { CategoryButton } from "@revoltchat/ui"; + +export default function MultiFactorAuthentication() { + return ( + <> +

+ +

+
+ {/**/} + Two-factor authentication is currently in-development, see{" "} + + tracking issue here + + . +
+ } + description={"Set up 2FA on your account."} + disabled + action={}> + Set up Two-factor authentication + + {/*} + description={"View and download your 2FA backup codes."} + disabled + action="chevron"> + View my backup codes + */} + + ); +} diff --git a/src/components/settings/appearance/EmojiSelector.tsx b/src/components/settings/appearance/EmojiSelector.tsx index 6ef7c346..3dea0564 100644 --- a/src/components/settings/appearance/EmojiSelector.tsx +++ b/src/components/settings/appearance/EmojiSelector.tsx @@ -2,10 +2,10 @@ import styled from "styled-components/macro"; import { Text } from "preact-i18n"; -import mutantSVG from "./mutant_emoji.svg"; -import notoSVG from "./noto_emoji.svg"; -import openmojiSVG from "./openmoji_emoji.svg"; -import twemojiSVG from "./twemoji_emoji.svg"; +import mutantSVG from "./assets/mutant_emoji.svg"; +import notoSVG from "./assets/noto_emoji.svg"; +import openmojiSVG from "./assets/openmoji_emoji.svg"; +import twemojiSVG from "./assets/twemoji_emoji.svg"; import { EmojiPack } from "../../common/Emoji"; diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/appearance/Shims.tsx similarity index 89% rename from src/components/settings/AppearanceShims.tsx rename to src/components/settings/appearance/Shims.tsx index 4e7ea7e8..4eeab82c 100644 --- a/src/components/settings/AppearanceShims.tsx +++ b/src/components/settings/appearance/Shims.tsx @@ -14,9 +14,9 @@ import { Radio, } from "@revoltchat/ui"; -import TextAreaAutoSize from "../../lib/TextAreaAutoSize"; +import TextAreaAutoSize from "../../../lib/TextAreaAutoSize"; -import { useApplicationState } from "../../mobx/State"; +import { useApplicationState } from "../../../mobx/State"; import { Fonts, @@ -25,15 +25,15 @@ import { MonospaceFonts, MONOSPACE_FONTS, MONOSPACE_FONT_KEYS, -} from "../../context/Theme"; +} from "../../../context/Theme"; -import { EmojiSelector } from "./appearance/EmojiSelector"; -import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector"; +import { EmojiSelector } from "./EmojiSelector"; +import { ThemeBaseSelector } from "./ThemeBaseSelector"; /** * Component providing a way to switch the base theme being used. */ -export const ThemeBaseSelectorShim = observer(() => { +export const ShimThemeBaseSelector = observer(() => { const theme = useApplicationState().settings.theme; return ( { /** * Component providing a link to the theme shop. * Only appears if experiment is enabled. - * TODO: stabilise */ -export const ThemeShopShim = () => { +export const ShimThemeShop = () => { return ( { /** * Component providing a way to change current accent colour. */ -export const ThemeAccentShim = observer(() => { +export const ShimThemeAccent = observer(() => { const theme = useApplicationState().settings.theme; return ( <> @@ -90,7 +89,7 @@ export const ThemeAccentShim = observer(() => { /** * Component providing a way to edit custom CSS. */ -export const ThemeCustomCSSShim = observer(() => { +export const ShimThemeCustomCSS = observer(() => { const theme = useApplicationState().settings.theme; return ( <> @@ -111,7 +110,7 @@ export const ThemeCustomCSSShim = observer(() => { /** * Component providing a way to switch between compact and normal message view. */ -export const DisplayCompactShim = () => { +export const ShimDisplayCompact = () => { // TODO: WIP feature return ( <> @@ -146,7 +145,7 @@ export const DisplayCompactShim = () => { /** * Component providing a way to change primary text font. */ -export const DisplayFontShim = observer(() => { +export const ShimDisplayFont = observer(() => { const theme = useApplicationState().settings.theme; return ( <> @@ -169,7 +168,7 @@ export const DisplayFontShim = observer(() => { /** * Component providing a way to change secondary, monospace text font. */ -export const DisplayMonospaceFontShim = observer(() => { +export const ShimDisplayMonospaceFont = observer(() => { const theme = useApplicationState().settings.theme; return ( <> @@ -199,7 +198,7 @@ export const DisplayMonospaceFontShim = observer(() => { /** * Component providing a way to toggle font ligatures. */ -export const DisplayLigaturesShim = observer(() => { +export const ShimDisplayLigatures = observer(() => { const settings = useApplicationState().settings; if (settings.theme.getFont() !== "Inter") return null; @@ -220,7 +219,7 @@ export const DisplayLigaturesShim = observer(() => { /** * Component providing a way to toggle showing the send button on desktop. */ -export const ShowSendButtonShim = observer(() => { +export const ShimShowSendButton = observer(() => { const settings = useApplicationState().settings; return ( @@ -240,7 +239,7 @@ export const ShowSendButtonShim = observer(() => { /** * Component providing a way to toggle seasonal themes. */ -export const DisplaySeasonalShim = observer(() => { +export const ShimDisplaySeasonal = observer(() => { const settings = useApplicationState().settings; return ( @@ -260,7 +259,7 @@ export const DisplaySeasonalShim = observer(() => { /** * Component providing a way to toggle transparency effects. */ -export const DisplayTransparencyShim = observer(() => { +export const ShimDisplayTransparency = observer(() => { const settings = useApplicationState().settings; return ( @@ -280,7 +279,7 @@ export const DisplayTransparencyShim = observer(() => { /** * Component providing a way to change emoji pack. */ -export const DisplayEmojiShim = observer(() => { +export const ShimDisplayEmoji = observer(() => { const settings = useApplicationState().settings; return ( { - const { openScreen } = useIntermediate(); - const logOut = useContext(LogOutContext); - const status = useContext(StatusContext); - - const client = useClient(); - - const [email, setEmail] = useState("..."); - - useEffect(() => { - if (email === "..." && status === ClientStatus.ONLINE) { - client.api - .get("/auth/account/") - .then((account) => setEmail(account.email)); - } - }, [client, email, status]); +import AccountManagement from "../../../components/settings/account/AccountManagement"; +import EditAccount from "../../../components/settings/account/EditAccount"; +import MultiFactorAuthentication from "../../../components/settings/account/MultiFactorAuthentication"; +export function Account() { return (
- - - - - {( - [ - ["username", client.user!.username, At], - ["email", email, Envelope], - ["password", "•••••••••", Key], - ] as const - ).map(([field, value, Icon]) => ( - } - description={ - field === "email" ? ( - - ) : ( - value - ) - } - account - action={} - onClick={() => - openScreen({ - id: "modify_account", - field, - }) - }> - - - ))} - +
-

- -

-
- {/**/} - Two-factor authentication is currently in-development, see{" "} - - tracking issue here - - . -
- } - description={"Set up 2FA on your account."} - disabled - action={}> - Set up Two-factor authentication - - {/*} - description={"View and download your 2FA backup codes."} - disabled - action="chevron"> - View my backup codes - */} - +
-

- -

- -
- -
- } - description={ - "Disable your account. You won't be able to access it unless you contact support." - } - action="chevron" - onClick={() => - modalController.push({ - type: "mfa_flow", - state: "known", - client, - callback: ({ token }) => - client.api - .post("/auth/account/disable", undefined, { - headers: { - "X-MFA-Ticket": token, - }, - }) - .then(() => logOut(true)), - }) - }> - - - - } - description={ - "Your account will be queued for deletion, a confirmation email will be sent." - } - action="chevron" - onClick={() => - modalController.push({ - type: "mfa_flow", - state: "known", - client, - callback: ({ token }) => - client.api - .post("/auth/account/delete", undefined, { - headers: { - "X-MFA-Ticket": token, - }, - }) - .then(() => logOut(true)), - }) - }> - - + +
@@ -174,4 +31,4 @@ export const Account = observer(() => {
); -}); +} diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx index a907688c..c3c994f4 100644 --- a/src/pages/settings/panes/Appearance.tsx +++ b/src/pages/settings/panes/Appearance.tsx @@ -7,46 +7,46 @@ import { Column } from "@revoltchat/ui"; import CollapsibleSection from "../../../components/common/CollapsibleSection"; import { - ThemeBaseSelectorShim, - ThemeShopShim, - ThemeAccentShim, - DisplayFontShim, - DisplayMonospaceFontShim, - DisplayLigaturesShim, - DisplayEmojiShim, - ThemeCustomCSSShim, - DisplaySeasonalShim, - DisplayTransparencyShim, - ShowSendButtonShim, -} from "../../../components/settings/AppearanceShims"; + ShimThemeBaseSelector, + ShimThemeShop, + ShimThemeAccent, + ShimDisplayFont, + ShimDisplayMonospaceFont, + ShimDisplayLigatures, + ShimDisplayEmoji, + ShimThemeCustomCSS, + ShimDisplaySeasonal, + ShimDisplayTransparency, + ShimShowSendButton, +} from "../../../components/settings/appearance/Shims"; import ThemeOverrides from "../../../components/settings/appearance/ThemeOverrides"; import ThemeTools from "../../../components/settings/appearance/ThemeTools"; export const Appearance = observer(() => { return (
- - + +
- +

- +

- - + +
- - + +
- +
{ id="settings_advanced_appearance" defaultValue={false} summary={}> - - + +
);