merge: remote-tracking branch 'core/main'

revoltchat · Jun 23, 2024 · 5bba1ee · 5bba1ee
2 parents 52dd782 + 441684a
commit 5bba1ee
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 200 deletions.
diff --git a/README.md b/README.md
@@ -89,12 +89,12 @@ You can now deploy the directory `packages/client/dist`.
 
 The app currently needs the following routes:
 
-- `/server`
-- `/channel`
-- `/dev`
-- `/friends`
-- `/app`
+- `/login`
 - `/pwa`
+- `/dev`
 - `/settings`
+- `/friends`
+- `/server`
+- `/channel`
 
-This corresponds to [Content.tsx#L33](packages/client/src/interface/Content.tsx).
+This corresponds to [Content.tsx#L33](packages/client/src/index.tsx).
diff --git a/packages/client/assets b/packages/client/assets
diff --git a/packages/client/components/auth/src/flows/Flow.tsx b/packages/client/components/auth/src/flows/Flow.tsx
@@ -10,8 +10,12 @@ import wave from "./wave.svg";
  * Container for authentication page flows
  */
 export const FlowBase = styled(Column)`
-  background: ${(props) =>
-    props.theme!.colours["messaging-message-box-background"]};
+  background: ${
+    (props) =>
+      props.theme!.colours[
+        "messaging-message-box-background"
+      ] /* TODO: change and in other places */
+  };
   color: ${(props) => props.theme!.colours["messaging-message-box-foreground"]};
 
   /* background-color: rgba(36, 36, 36, 0.75);

diff --git a/packages/client/components/auth/src/flows/FlowConfirmReset.tsx b/packages/client/components/auth/src/flows/FlowConfirmReset.tsx
@@ -28,7 +28,7 @@ export default function FlowConfirmReset() {
       remove_sessions,
     });
 
-    navigate("../..", { replace: true });
+    navigate("/login/auth", { replace: true });
   }
 
   return (
@@ -39,7 +39,7 @@ export default function FlowConfirmReset() {
         <Button type="submit">{t("login.reset")}</Button>
       </Form>
       <Typography variant="legacy-settings-description">
-        <a href="../..">{t("login.remembered")}</a>
+        <a href="/login/auth">{t("login.remembered")}</a>
       </Typography>
     </>
   );

diff --git a/packages/client/components/auth/src/flows/FlowCreate.tsx b/packages/client/components/auth/src/flows/FlowCreate.tsx
@@ -7,6 +7,7 @@ import MdArrowBack from "@material-design-icons/svg/filled/arrow_back.svg?compon
 
 import { clientController } from "../../../client";
 
+import { FlowTitle } from "./Flow";
 import { setFlowCheckEmail } from "./FlowCheck";
 import { Fields, Form } from "./Form";
 
@@ -43,9 +44,9 @@ export default function FlowCreate() {
 
   return (
     <>
-      {/* <FlowTitle subtitle={t("login.subtitle2")} emoji="wave">
+      <FlowTitle subtitle={t("login.subtitle2")} emoji="wave">
         {t("login.welcome2")}
-      </FlowTitle> */}
+      </FlowTitle>
       <Form onSubmit={create} captcha={CONFIGURATION.HCAPTCHA_SITEKEY}>
         <Fields fields={["email", "password"]} />
         <Row align justify="center">

diff --git a/packages/client/components/auth/src/flows/FlowHome.tsx b/packages/client/components/auth/src/flows/FlowHome.tsx
@@ -2,50 +2,22 @@ import { Show } from "solid-js";
 
 import { clientController } from "@revolt/client";
 import { useTranslation } from "@revolt/i18n";
-import { Navigate, useNavigate } from "@revolt/routing";
-import { Button, Column, Row, Typography, styled } from "@revolt/ui";
+import { Navigate } from "@revolt/routing";
+import { Button, Column, styled } from "@revolt/ui";
 
-import RevoltSvg from "../../../../public/assets/wide.svg?component-solid";
-
-import { FlowTitle } from "./Flow";
-import { Fields, Form } from "./Form";
-
-/**
- * Account switcher UI
- */
-// eslint-disable-next-line
-const AccountSwitcher = styled(Column)`
-  margin-top: 8px;
-`;
+import RevoltSvg from "../../../../public/assets/wordmark_wide_500px.svg?component-solid";
 
 const Logo = styled(RevoltSvg)`
-  margin: auto;
-  fill: ${(props) => props.theme!.colours.foreground};
-  /* filter: invert(1); */
+  width: 100%;
+  object-fit: contain;
+  fill: ${(props) => props.theme!.colours["messaging-message-box-foreground"]};
 `;
 
 /**
  * Flow for logging into an account
  */
 export default function FlowHome() {
   const t = useTranslation();
-  const navigate = useNavigate();
-
-  /**
-   * Log into account
-   * @param data Form Data
-   */
-  async function login(data: FormData) {
-    const email = data.get("email") as string;
-    const password = data.get("password") as string;
-
-    await clientController.login({
-      email,
-      password,
-    });
-
-    navigate("/app", { replace: true });
-  }
 
   return (
     <>
@@ -82,57 +54,13 @@ export default function FlowHome() {
               <Button>Log In</Button>
             </Column>
           </a>
-          {/* <Link href="create"> */}
-          <a href="https://app.revolt.chat/login/create" target="_blank">
+          <a href="/login/create">
             <Column>
               <Button variant="secondary">Sign Up</Button>
             </Column>
           </a>
-          {/* </Link> */}
         </Column>
       </Column>
-
-      {/*<FlowTitle subtitle={t("login.subtitle")} emoji="wave">
-        {t("login.welcome")}
-  </FlowTitle>*/}
-      {/*<Form onSubmit={login}>
-        <Fields fields={["email", "password"]} />
-        <Button type="submit">{t("login.title")}</Button>
-</Form>
-      <Typography variant="legacy-settings-description">
-        {t("login.new")} <Link href="create">{t("login.create")}</Link>
-      </Typography>
-      <Typography variant="legacy-settings-description">
-        {t("login.forgot")} <Link href="reset">{t("login.reset")}</Link>
-      </Typography>
-      <Typography variant="legacy-settings-description">
-        {t("login.missing_verification")}{" "}
-        <Link href="resend">{t("login.resend")}</Link>
-      </Typography>*/}
-
-      {/*<Show when={clientController.getReadyClients().length > 0}>
-        <Switch fallback={<Navigate href="/" />}>
-          <Match when={state.experiments.isEnabled("account_switcher")}>
-            <AccountSwitcher>
-              <FlowTitle>Use existing account</FlowTitle>
-              <For each={clientController.getReadyClients()}>
-                {(client) => (
-                  <CategoryButton
-                    icon={<Avatar src={client.user!.avatarURL} size={32} />}
-                    action="chevron"
-                    onClick={() => {
-                      clientController.switchAccount(client.user!._id);
-                      navigate("/app");
-                    }}
-                  >
-                    {client.user!.username}
-                  </CategoryButton>
-                )}
-              </For>
-            </AccountSwitcher>
-          </Match>
-        </Switch>
-                  </Show>*/}
     </>
   );
 }
diff --git a/packages/client/components/auth/src/flows/FlowLogin.tsx b/packages/client/components/auth/src/flows/FlowLogin.tsx
@@ -1,31 +1,40 @@
-import { Show } from "solid-js";
+import { Match, Show, Switch } from "solid-js";
 
-import { State } from "@revolt/client/Controller";
+import { styled } from "styled-system/jsx";
+
+import { State, TransitionType } from "@revolt/client/Controller";
 import { useTranslation } from "@revolt/i18n";
-import { Navigate, useNavigate } from "@revolt/routing";
-import { Button, Column, Row, iconSize, styled } from "@revolt/ui";
+import { Navigate } from "@revolt/routing";
+import {
+  Button,
+  Column,
+  Preloader,
+  Row,
+  Typography,
+  iconSize,
+} from "@revolt/ui";
 
 import MdArrowBack from "@material-design-icons/svg/filled/arrow_back.svg?component-solid";
 
+import RevoltSvg from "../../../../public/assets/wordmark_wide_500px.svg?component-solid";
 import { clientController } from "../../../client";
 
 import { FlowTitle } from "./Flow";
 import { Fields, Form } from "./Form";
 
-/**
- * Account switcher UI
- */
-// eslint-disable-next-line
-const AccountSwitcher = styled(Column)`
-  margin-top: 8px;
-`;
+const Logo = styled(RevoltSvg, {
+  base: {
+    height: "0.8em",
+    display: "inline",
+    fill: "var(--colours-messaging-message-box-foreground)",
+  },
+});
 
 /**
  * Flow for logging into an account
  */
 export default function FlowLogin() {
   const t = useTranslation();
-  const navigate = useNavigate();
 
   /**
    * Log into account
@@ -41,81 +50,81 @@ export default function FlowLogin() {
     });
   }
 
+  /**
+   * Select a new username
+   * @param data Form Data
+   */
+  async function select(data: FormData) {
+    const username = data.get("username") as string;
+    await clientController.selectUsername(username);
+  }
+
   return (
     <>
-      <Show when={clientController.isLoggedIn()}>
-        <Navigate href="/app" />
-      </Show>
-
-      <Show when={clientController.lifecycle.state() === State.LoggingIn}>
-        This is an indicator to indicate that we are logging in...
-      </Show>
-
-      {/*<FlowTitle subtitle={t("login.subtitle")} emoji="wave">
-        {t("login.welcome")}
-      </FlowTitle>*/}
-      <strong>
-        You are logging into a limited demo of the new Revolt client.
-      </strong>
+      <Switch
+        fallback={
+          <>
+            <FlowTitle subtitle={t("login.subtitle")} emoji="wave">
+              {t("login.welcome")}
+            </FlowTitle>
 
-      <span>
-        Please provide feedback through{" "}
-        <a
-          href="https://github.com/revoltchat/frontend/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc"
-          target="_blank"
-          style={{ "text-decoration": "underline" }}
-        >
-          GitHub issues
-        </a>{" "}
-        where possible.
-      </span>
+            <Form onSubmit={login}>
+              <Fields fields={["email", "password"]} />
+              <Row align justify="center">
+                <a href="..">
+                  <Button variant="plain">
+                    <MdArrowBack {...iconSize("1.2em")} /> Back
+                  </Button>
+                </a>
+                <Button type="submit">{t("login.title")}</Button>
+              </Row>
+            </Form>
 
-      <Form onSubmit={login}>
-        <Fields fields={["email", "password"]} />
-        <Row align justify="center">
-          <a href="..">
-            <Button variant="plain">
-              <MdArrowBack {...iconSize("1.2em")} /> Back
-            </Button>
-          </a>
-          <Button type="submit">{t("login.title")}</Button>
-        </Row>
-      </Form>
+            <Column>
+              <Typography variant="legacy-settings-description">
+                <a href="/login/reset">{t("login.reset")}</a>
+              </Typography>
 
-      <a href="https://app.revolt.chat/login/reset" target="_blank">
-        {/* <Link href="../reset"> */}
-        {t("login.reset")}
-        {/* </Link> */}
-      </a>
-      <a href="https://app.revolt.chat/login/resend" target="_blank">
-        {/* <Link href="../resend"> */}
-        {t("login.resend")}
-        {/* </Link> */}
-      </a>
+              <Typography variant="legacy-settings-description">
+                <a href="/login/resend">{t("login.resend")}</a>
+              </Typography>
+            </Column>
+          </>
+        }
+      >
+        <Match when={clientController.isLoggedIn()}>
+          <Navigate href="/app" />
+        </Match>
+        <Match when={clientController.lifecycle.state() === State.LoggingIn}>
+          <Preloader type="ring" />
+        </Match>
+        <Match when={clientController.lifecycle.state() === State.Onboarding}>
+          <FlowTitle subtitle={t("app.special.modals.onboarding.pick")}>
+            <Row gap="sm">
+              {t("app.special.modals.onboarding.welcome")} <Logo />
+            </Row>
+          </FlowTitle>
 
-      {/*<Show when={clientController.getReadyClients().length > 0}>
-        <Switch fallback={<Navigate href="/" />}>
-          <Match when={state.experiments.isEnabled("account_switcher")}>
-            <AccountSwitcher>
-              <FlowTitle>Use existing account</FlowTitle>
-              <For each={clientController.getReadyClients()}>
-                {(client) => (
-                  <CategoryButton
-                    icon={<Avatar src={client.user!.avatarURL} size={32} />}
-                    action="chevron"
-                    onClick={() => {
-                      clientController.switchAccount(client.user!._id);
-                      navigate("/app");
-                    }}
-                  >
-                    {client.user!.username}
-                  </CategoryButton>
-                )}
-              </For>
-            </AccountSwitcher>
-          </Match>
-        </Switch>
-                  </Show>*/}
+          <Form onSubmit={select}>
+            <Fields fields={["username"]} />
+            <Row align justify="center">
+              <Button
+                variant="plain"
+                onClick={() =>
+                  clientController.lifecycle.transition({
+                    type: TransitionType.Cancel,
+                  })
+                }
+              >
+                <MdArrowBack {...iconSize("1.2em")} /> Cancel
+              </Button>
+              <Button type="submit">
+                {t("app.special.modals.actions.confirm")}
+              </Button>
+            </Row>
+          </Form>
+        </Match>
+      </Switch>
     </>
   );
 }