abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 08:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide client behind context.

Browse Source 
Use idb for saving data.
Allow logins.
This commit is contained in:
Paul
2021-06-18 22:47:25 +01:00
parent 68a35751b3
commit ec97dbebd0
13 changed files with 474 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import { APP_VERSION } from "../../version";
import { LIBRARY_VERSION } from "revolt.js";
import { Route, Switch } from "react-router-dom";
import { ThemeContext } from "../../context/Theme";
import { RevoltClient } from "../../context/revoltjs/RevoltClient";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import background from "./background.jpg";
@@ -17,6 +17,7 @@ import { FormReset, FormSendReset } from "./forms/FormReset";
export const Login = () => {
const theme = useContext(ThemeContext);
const { client } = useContext(AppContext);
return (
<div className={styles.login}>
@@ -27,7 +28,7 @@ export const Login = () => {
<div className={styles.attribution}>
<span>
API:{" "}
<code>{RevoltClient.configuration?.revolt ?? "???"}</code>{" "}
<code>{client.configuration?.revolt ?? "???"}</code>{" "}
&middot; revolt.js: <code>{LIBRARY_VERSION}</code>{" "}
&middot; App: <code>{APP_VERSION}</code>
</span>

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

@@ -1,9 +1,9 @@
import { Text } from "preact-i18n";
import { useEffect } from "preact/hooks";
import styles from "../Login.module.scss";
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { useContext, useEffect } from "preact/hooks";
import Preloader from "../../../components/ui/Preloader";
import { RevoltClient } from "../../../context/revoltjs/RevoltClient";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
export interface CaptchaProps {
onSuccess: (token?: string) => void;
@@ -11,19 +11,21 @@ export interface CaptchaProps {
}
export function CaptchaBlock(props: CaptchaProps) {
const { client } = useContext(AppContext);
useEffect(() => {
if (!RevoltClient.configuration?.features.captcha.enabled) {
if (!client.configuration?.features.captcha.enabled) {
props.onSuccess();
}
}, []);
if (!RevoltClient.configuration?.features.captcha.enabled)
if (!client.configuration?.features.captcha.enabled)
return <Preloader />;
return (
<div>
<HCaptcha
sitekey={RevoltClient.configuration.features.captcha.key}
sitekey={client.configuration.features.captcha.key}
onVerify={token => props.onSuccess(token)}
/>
<div className={styles.footer}>

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

@@ -1,14 +1,14 @@
import { Legal } from "./Legal";
import { Text } from "preact-i18n";
import { Link } from "react-router-dom";
import { useState } from "preact/hooks";
import styles from "../Login.module.scss";
import { useForm } from "react-hook-form";
import { MailProvider } from "./MailProvider";
import { useContext, useState } from "preact/hooks";
import { CheckCircle, Mail } from "@styled-icons/feather";
import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
import { takeError } from "../../../context/revoltjs/error";
import { RevoltClient } from "../../../context/revoltjs/RevoltClient";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import FormField from "../FormField";
import Button from "../../../components/ui/Button";
@@ -34,6 +34,8 @@ function getInviteCode() {
}
export function Form({ page, callback }: Props) {
const { client } = useContext(AppContext);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState<string | undefined>(undefined);
const [error, setGlobalError] = useState<string | undefined>(undefined);
@@ -73,7 +75,7 @@ export function Form({ page, callback }: Props) {
try {
if (
RevoltClient.configuration?.features.captcha.enabled &&
client.configuration?.features.captcha.enabled &&
page !== "reset"
) {
setCaptcha({
@@ -103,7 +105,7 @@ export function Form({ page, callback }: Props) {
if (typeof success !== "undefined") {
return (
<div className={styles.success}>
{RevoltClient.configuration?.features.email ? (
{client.configuration?.features.email ? (
<>
<Mail size={72} />
<h2>
@@ -157,7 +159,7 @@ export function Form({ page, callback }: Props) {
error={errors.password?.message}
/>
)}
{RevoltClient.configuration?.features.invite_only &&
{client.configuration?.features.invite_only &&
page === "create" && (
<FormField
type="invite"

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

@@ -1,12 +1,15 @@
import { RevoltClient } from "../../../context/revoltjs/RevoltClient";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useContext } from "preact/hooks";
import { Form } from "./Form";
export function FormCreate() {
const { client } = useContext(AppContext);
return (
<Form
page="create"
callback={async data => {
await RevoltClient.register(process.env.API_SERVER as string, data);
await client.register(import.meta.env.VITE_API_URL, data);
}}
/>
);

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

@@ -1,12 +1,15 @@
import { RevoltClient } from "../../../context/revoltjs/RevoltClient";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useContext } from "preact/hooks";
import { Form } from "./Form";
export function FormResend() {
const { client } = useContext(AppContext);
return (
<Form
page="resend"
callback={async data => {
await RevoltClient.req("POST", "/auth/resend", data);
await client.req("POST", "/auth/resend", data);
}}
/>
);

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

@@ -1,13 +1,16 @@
import { Form } from "./Form";
import { useContext } from "preact/hooks";
import { useHistory, useParams } from "react-router-dom";
import { RevoltClient } from "../../../context/revoltjs/RevoltClient";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
export function FormSendReset() {
const { client } = useContext(AppContext);
return (
<Form
page="send_reset"
callback={async data => {
await RevoltClient.req("POST", "/auth/send_reset", data);
await client.req("POST", "/auth/send_reset", data);
}}
/>
);
@@ -15,13 +18,14 @@ export function FormSendReset() {
export function FormReset() {
const { token } = useParams<{ token: string }>();
const { client } = useContext(AppContext);
const history = useHistory();
return (
<Form
page="reset"
callback={async data => {
await RevoltClient.req("POST", "/auth/reset" as any, {
await client.req("POST", "/auth/reset" as any, {
token,
...(data as any)
});