HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(mobx): migrate auth and config

Browse Source
This commit is contained in:
Paul
2021-12-11 21:04:12 +00:00
parent bc799931a8
commit f8b8d96d3d
22 changed files with 342 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/login/Login.tsx
View File

@@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { Helmet } from "react-helmet";
import { Route, Switch } from "react-router-dom";
import { LIBRARY_VERSION } from "revolt.js";
@@ -6,22 +7,24 @@ import styles from "./Login.module.scss";
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { useApplicationState } from "../../mobx/State";
import { ThemeContext } from "../../context/Theme";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import LocaleSelector from "../../components/common/LocaleSelector";
import background from "./background.jpg";
import { Titlebar } from "../../components/native/Titlebar";
import { APP_VERSION } from "../../version";
import background from "./background.jpg";
import { FormCreate } from "./forms/FormCreate";
import { FormLogin } from "./forms/FormLogin";
import { FormReset, FormSendReset } from "./forms/FormReset";
import { FormResend, FormVerify } from "./forms/FormVerify";
export default function Login() {
export default observer(() => {
const theme = useContext(ThemeContext);
const client = useContext(AppContext);
const configuration = useApplicationState().config.get();
return (
<>
@@ -35,8 +38,7 @@ export default function Login() {
<div className={styles.content}>
<div className={styles.attribution}>
<span>
API:{" "}
<code>{client.configuration?.revolt ?? "???"}</code>{" "}
API: <code>{configuration?.revolt ?? "???"}</code>{" "}
&middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
&middot; App: <code>{APP_VERSION}</code>
</span>
@@ -80,4 +82,4 @@ export default function Login() {
</div>
</>
);
}
});

19
src/pages/login/forms/CaptchaBlock.tsx
View File

@@ -1,10 +1,11 @@
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { observer } from "mobx-react-lite";
import styles from "../Login.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect } from "preact/hooks";
import { useEffect } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useApplicationState } from "../../../mobx/State";
import Preloader from "../../../components/ui/Preloader";
@@ -13,22 +14,22 @@ export interface CaptchaProps {
onCancel: () => void;
}
export function CaptchaBlock(props: CaptchaProps) {
const client = useContext(AppContext);
export const CaptchaBlock = observer((props: CaptchaProps) => {
const configuration = useApplicationState().config.get();
useEffect(() => {
if (!client.configuration?.features.captcha.enabled) {
if (!configuration?.features.captcha.enabled) {
props.onSuccess();
}
}, [client.configuration?.features.captcha.enabled, props]);
}, [configuration?.features.captcha.enabled, props]);
if (!client.configuration?.features.captcha.enabled)
if (!configuration?.features.captcha.enabled)
return <Preloader type="spinner" />;
return (
<div>
<HCaptcha
sitekey={client.configuration.features.captcha.key}
sitekey={configuration.features.captcha.key}
onVerify={(token) => props.onSuccess(token)}
/>
<div className={styles.footer}>
@@ -38,4 +39,4 @@ export function CaptchaBlock(props: CaptchaProps) {
</div>
</div>
);
}
});

28
src/pages/login/forms/Form.tsx
View File

@@ -6,6 +6,8 @@ import styles from "../Login.module.scss";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
@@ -44,7 +46,7 @@ interface FormInputs {
}
export function Form({ page, callback }: Props) {
const client = useContext(AppContext);
const configuration = useApplicationState().config.get();
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState<string | undefined>(undefined);
@@ -80,10 +82,7 @@ export function Form({ page, callback }: Props) {
}
try {
if (
client.configuration?.features.captcha.enabled &&
page !== "reset"
) {
if (configuration?.features.captcha.enabled && page !== "reset") {
setCaptcha({
onSuccess: async (captcha) => {
setCaptcha(undefined);
@@ -111,7 +110,7 @@ export function Form({ page, callback }: Props) {
if (typeof success !== "undefined") {
return (
<div className={styles.success}>
{client.configuration?.features.email ? (
{configuration?.features.email ? (
<>
<Envelope size={72} />
<h2>
@@ -172,15 +171,14 @@ export function Form({ page, callback }: Props) {
error={errors.password?.message}
/>
)}
{client.configuration?.features.invite_only &&
page === "create" && (
<FormField
type="invite"
register={register}
showOverline
error={errors.invite?.message}
/>
)}
{configuration?.features.invite_only && page === "create" && (
<FormField
type="invite"
register={register}
showOverline
error={errors.invite?.message}
/>
)}
{error && (
<Overline type="error" error={error}>
<Text id={`login.error.${page}`} />

7
src/pages/login/forms/FormCreate.tsx
View File

@@ -1,10 +1,9 @@
import { useContext } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useApplicationState } from "../../../mobx/State";
import { Form } from "./Form";
export function FormCreate() {
const client = useContext(AppContext);
const config = useApplicationState().config;
const client = config.createClient();
return <Form page="create" callback={(data) => client.register(data)} />;
}

47
src/pages/login/forms/FormLogin.tsx
View File

@@ -1,15 +1,16 @@
import { detect } from "detect-browser";
import { useHistory } from "react-router-dom";
import { Session } from "revolt-api/types/Auth";
import { Client } from "revolt.js";
import { useContext } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
import { OperationsContext } from "../../../context/revoltjs/RevoltClient";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { Form } from "./Form";
export function FormLogin() {
const { login } = useContext(OperationsContext);
const history = useHistory();
const auth = useApplicationState().auth;
const { openScreen } = useIntermediate();
return (
<Form
@@ -34,8 +35,40 @@ export function FormLogin() {
friendly_name = "Unknown Device";
}
await login({ ...data, friendly_name });
history.push("/");
// ! FIXME: temporary login flow code
// This should be replaced in the future.
const client = new Client();
await client.fetchConfiguration();
const session = (await client.req(
"POST",
"/auth/session/login",
{ ...data, friendly_name },
)) as unknown as Session;
client.session = session;
(client as any).Axios.defaults.headers = {
"x-session-token": session?.token,
};
function login() {
auth.setSession(session);
}
const { onboarding } = await client.req(
"GET",
"/onboard/hello",
);
if (onboarding) {
openScreen({
id: "onboarding",
callback: async (username: string) =>
client
.completeOnboarding({ username }, false)
.then(login),
});
} else {
login();
}
}}
/>
);

5
src/pages/login/forms/FormReset.tsx
View File

@@ -2,12 +2,15 @@ import { useHistory, useParams } from "react-router-dom";
import { useContext } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { Form } from "./Form";
export function FormSendReset() {
const client = useContext(AppContext);
const config = useApplicationState().config;
const client = config.createClient();
return (
<Form

5
src/pages/login/forms/FormVerify.tsx
View File

@@ -2,6 +2,8 @@ import { useHistory, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "preact/hooks";
import { useApplicationState } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
@@ -11,7 +13,8 @@ import Preloader from "../../../components/ui/Preloader";
import { Form } from "./Form";
export function FormResend() {
const client = useContext(AppContext);
const config = useApplicationState().config;
const client = config.createClient();
return (
<Form

1
src/pages/login/forms/MailProvider.tsx
View File

@@ -32,7 +32,6 @@ function mapMailProvider(email?: string): [string, string] | undefined {
case "outlook.com.br":
case "outlook.cl":
case "outlook.cz":
case "outlook.dk":
case "outlook.com.gr":
case "outlook.co.il":
case "outlook.in":

9
src/pages/settings/Settings.tsx
View File

@@ -29,10 +29,7 @@ import { useContext } from "preact/hooks";
import { useApplicationState } from "../../mobx/State";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import {
AppContext,
OperationsContext,
} from "../../context/revoltjs/RevoltClient";
import { AppContext, LogOutContext } from "../../context/revoltjs/RevoltClient";
import LineDivider from "../../components/ui/LineDivider";
@@ -57,7 +54,7 @@ import { ThemeShop } from "./panes/ThemeShop";
export default observer(() => {
const history = useHistory();
const client = useContext(AppContext);
const operations = useContext(OperationsContext);
const logout = useContext(LogOutContext);
const experiments = useApplicationState().experiments;
function switchPage(to?: string) {
@@ -220,7 +217,7 @@ export default observer(() => {
</a>
<LineDivider />
<ButtonItem
onClick={() => operations.logout()}
onClick={logout}
className={styles.logOut}
compact>
<LogOut size={20} />