refactor & add login with google

Author: SupertigerDev

src/chat-api/RawData.ts

@@ -186,7 +186,7 @@ export interface RawUser {
 
 export interface RawUserConnection {
   id: string;
-  provider: "GOOGLE";
+  provider: "GOOGLE" | "GOOGLE_DRIVE";
   connectedAt: number;
 }
 

src/chat-api/services/UserService.ts

@@ -15,15 +15,52 @@ import { Presence } from "../store/useUsers";
 import { request } from "./Request";
 import ServiceEndpoints from "./ServiceEndpoints";
 
-export async function createGoogleAccountLink(): Promise<string> {
+export async function createGoogleDriveAccountLink() {
   return request({
-    url: env.SERVER_URL + "/api/google/create-link",
+    url: env.SERVER_URL + "/api/connections/google-drive/create-link",
     method: "GET",
     notJSON: true,
     useToken: true
   });
 }
 
+export async function createGoogleAccountLink(
+  login?: boolean
+): Promise<string> {
+  return request({
+    url: env.SERVER_URL + "/api/connections/google/create-link",
+    params: login ? { login } : undefined,
+    method: "GET",
+    notJSON: true,
+    useToken: true
+  });
+}
+
+export async function unlinkAccountWithGoogle(): Promise<{
+  status: boolean;
+}> {
+  return request({
+    url: env.SERVER_URL + "/api/connections/google/unlink-account",
+    method: "POST",
+    useToken: true
+  });
+}
+
+export async function linkAccountWithGoogle(
+  code: string,
+  nerimityUserToken: string
+): Promise<{ connection: RawUserConnection }> {
+  return request({
+    url: env.SERVER_URL + "/api/connections/google/link-account",
+    method: "POST",
+    body: {
+      code,
+      nerimityToken: nerimityUserToken
+    },
+    useToken: false
+  });
+}
+
 export async function registerFCM(token: string) {
   return request({
     url: env.SERVER_URL + "/api" + ServiceEndpoints.user("register-fcm"),
@@ -38,16 +75,16 @@ export async function fetchInventory() {
   return request<RawInventoryItem[]>({
     url: env.SERVER_URL + "/api" + ServiceEndpoints.user("inventory"),
     method: "GET",
-    useToken: true,
+    useToken: true
   });
 }
 
-export async function linkAccountWithGoogle(
+export async function linkAccountWithGoogleDrive(
   code: string,
   nerimityUserToken: string
 ): Promise<{ connection: RawUserConnection }> {
   return request({
-    url: env.SERVER_URL + "/api/google/link-account",
+    url: env.SERVER_URL + "/api/connections/google-drive/link-account",
     method: "POST",
     body: {
       code,
@@ -56,17 +93,21 @@ export async function linkAccountWithGoogle(
     useToken: false
   });
 }
-export async function unlinkAccountWithGoogle(): Promise<{ status: boolean }> {
+export async function unlinkAccountWithGoogleDrive(): Promise<{
+  status: boolean;
+}> {
   return request({
-    url: env.SERVER_URL + "/api/google/unlink-account",
+    url: env.SERVER_URL + "/api/connections/google-drive/unlink-account",
     method: "POST",
     useToken: true
   });
 }
 
-export async function getGoogleAccessToken(): Promise<{ accessToken: string }> {
+export async function getGoogleDriveAccessToken(): Promise<{
+  accessToken: string;
+}> {
   return request({
-    url: env.SERVER_URL + "/api/google/access-token",
+    url: env.SERVER_URL + "/api/connections/google-drive/access-token",
     method: "GET",
     useToken: true
   });
@@ -124,15 +165,17 @@ export async function verifyEmailConfirmCode(
 // error returns {path?, message}
 export async function loginRequest(
   email: string,
-  password: string
+  password: string,
+  googleCode?: string
 ): Promise<{ token: string }> {
   const isUsernameAndTag = email.includes(":");
   return request({
     url: env.SERVER_URL + "/api" + ServiceEndpoints.login(),
     method: "POST",
     body: {
       ...(isUsernameAndTag ? { usernameAndTag: email } : { email }),
-      password
+      password,
+      ...(googleCode ? { googleCode } : {})
     }
   });
 }

src/chat-api/store/useMessages.ts

@@ -10,7 +10,7 @@ import socketClient from "../socketClient";
 import useAccount from "./useAccount";
 import useChannelProperties from "./useChannelProperties";
 import useChannels from "./useChannels";
-import { getGoogleAccessToken } from "../services/UserService";
+import { getGoogleDriveAccessToken } from "../services/UserService";
 import { uploadFileGoogleDrive } from "@/common/driveAPI";
 import { batch } from "solid-js";
 import { uploadAttachment } from "../services/nerimityCDNService";
@@ -243,7 +243,7 @@ const sendAndStoreMessage = async (channelId: string, content?: string) => {
   let googleDriveFileId: string | undefined;
   if (file && shouldUploadToGoogleDrive) {
     try {
-      const accessToken = await getGoogleAccessToken();
+      const accessToken = await getGoogleDriveAccessToken();
       const res = await uploadFileGoogleDrive(
         file,
         accessToken.accessToken,

src/components/message-pane/MessagePane.tsx

@@ -403,7 +403,7 @@ function MessageArea(props: {
       const shouldUploadToGoogleDrive = attachment.uploadTo === "google_drive";
       if (
         shouldUploadToGoogleDrive &&
-        !account.user()?.connections.find((c) => c.provider === "GOOGLE")
+        !account.user()?.connections.find((c) => c.provider === "GOOGLE_DRIVE")
       ) {
         createPortal((close) => <GoogleDriveLinkModal close={close} />);
         return;

src/components/settings/ConnectionsSettings.tsx

@@ -10,7 +10,9 @@ import SettingsBlock, {
 import Button from "../ui/Button";
 import {
   createGoogleAccountLink,
-  unlinkAccountWithGoogle
+  createGoogleDriveAccountLink,
+  unlinkAccountWithGoogle,
+  unlinkAccountWithGoogleDrive
 } from "@/chat-api/services/UserService";
 import {
   OAuth2AuthorizedApplication,
@@ -54,6 +56,7 @@ export default function ConnectionsSettings() {
 function Connections() {
   return (
     <>
+      <GoogleDriveLink />
       <GoogleLink />
     </>
   );
@@ -146,9 +149,54 @@ const ThirdPartyConnectionItem = (props: {
   );
 };
 
+function GoogleDriveLink() {
+  const { account } = useStore();
+  const isGoogleDriveConnected = () =>
+    account.user()?.connections?.find((c) => c.provider === "GOOGLE_DRIVE");
+
+  const linkGoogle = () => {
+    createGoogleDriveAccountLink()
+      .then((url) => {
+        window.open(url, "_blank");
+      })
+      .catch((err) => {
+        toast(err.message);
+      });
+  };
+  const unlinkGoogle = async () => {
+    await unlinkAccountWithGoogleDrive().catch((err) => {
+      toast(err.message);
+    });
+  };
+
+  return (
+    <SettingsBlock
+      iconSrc="/assets/Google.svg"
+      label="Google Drive"
+      description={t("settings.connections.googleDriveDescription")}
+    >
+      <Show when={!isGoogleDriveConnected()}>
+        <Button
+          label={t("settings.connections.linkButton")}
+          iconName="link"
+          onClick={linkGoogle}
+        />
+      </Show>
+      <Show when={isGoogleDriveConnected()}>
+        <Button
+          label={t("settings.connections.unlinkButton")}
+          color="var(--alert-color)"
+          iconName="link_off"
+          onClick={unlinkGoogle}
+        />
+      </Show>
+    </SettingsBlock>
+  );
+}
+
 function GoogleLink() {
   const { account } = useStore();
-  const isConnected = () =>
+  const isGoogleConnected = () =>
     account.user()?.connections?.find((c) => c.provider === "GOOGLE");
 
   const linkGoogle = () => {
@@ -172,14 +220,14 @@ function GoogleLink() {
       label="Google"
       description={t("settings.connections.googleDescription")}
     >
-      <Show when={!isConnected()}>
+      <Show when={!isGoogleConnected()}>
         <Button
           label={t("settings.connections.linkButton")}
           iconName="link"
           onClick={linkGoogle}
         />
       </Show>
-      <Show when={isConnected()}>
+      <Show when={isGoogleConnected()}>
         <Button
           label={t("settings.connections.unlinkButton")}
           color="var(--alert-color)"

src/index.tsx

@@ -146,9 +146,12 @@ const ResetPasswordPage = lazy(() => import("./pages/ResetPasswordPage"));
 const TermsAndConditionsPage = lazy(
   () => import("./pages/TermsAndConditionsPage")
 );
-const GoogleRedirectLinkAccount = lazy(
+const GoogleRedirectLinkAccountPage = lazy(
   () => import("./pages/GoogleRedirectLinkAccountPage")
 );
+const GoogleDriveRedirectLinkAccountPage = lazy(
+  () => import("./pages/GoogleDriveRedirectLinkAccountPage")
+);
 
 const TicketsPage = lazy(() => import("./components/tickets/TicketsPage"));
 
@@ -401,8 +404,12 @@ render(
             component={TermsAndConditionsPage}
           />
           <Route
-            path="/google-redirect"
-            component={GoogleRedirectLinkAccount}
+            path="/connections/google-drive-redirect"
+            component={GoogleDriveRedirectLinkAccountPage}
+          />
+          <Route
+            path="/connections/google-redirect"
+            component={GoogleRedirectLinkAccountPage}
           />
           <Route path="/i/:inviteId" component={InviteRedirect} />
           <Route path="/p/:postId" component={PostRedirect} />

src/locales/list/en-gb.json

@@ -736,7 +736,8 @@
         "unauthorizeButton": "Unauthorise",
         "unauthorizing": "Un-authorising…"
       },
-      "googleDescription": "Linking your Google account will allow you to upload files in Nerimity. Files will be stored in your Google Drive.",
+      "googleDriveDescription": "Linking your Google account will allow you to upload files in Nerimity. Files will be stored in your Google Drive.",
+      "googleDescription": "Linking your Google account will allow you to login using Google quickly and easily.",
       "linkButton": "Link",
       "unlinkButton": "Unlink"
     },
@@ -1167,8 +1168,12 @@
     "addButton": "Add bot",
     "permissions": "Bot Permissions"
   },
+  "googleDriveAccountLink": {
+    "linking": "Linking your account with Google Drive…",
+    "success": "Account linked! You may now close this window."
+  },
   "googleAccountLink": {
-    "linking": "Linking your account with Google…",
+    "linking": "Linking your account with Google",
     "success": "Account linked! You may now close this window."
   },
   "invite": {

src/pages/GoogleDriveRedirectLinkAccountPage.tsx

@@ -0,0 +1,80 @@
+import PageHeader from "../components/PageHeader";
+import { styled } from "solid-styled-components";
+import { FlexColumn } from "@/components/ui/Flexbox";
+import PageFooter from "@/components/PageFooter";
+import { useSearchParams } from "solid-navigator";
+import { Show, createSignal, onMount } from "solid-js";
+import { linkAccountWithGoogleDrive } from "@/chat-api/services/UserService";
+import Text from "@/components/ui/Text";
+
+import { useTransContext } from "@nerimity/solid-i18lite";
+
+const PageContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+`;
+
+const Content = styled("div")`
+  display: flex;
+  flex-direction: column;
+  margin: 8px;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-radius: 8px;
+  flex: 1;
+`;
+
+const CenterContainer = styled(FlexColumn)`
+  gap: 20px;
+  margin: 30px;
+  margin-top: 50px;
+  max-width: 800px;
+  align-self: center;
+  align-items: center;
+  text-align: center;
+`;
+
+export default function GoogleDriveRedirectLinkAccountPage() {
+  const [t] = useTransContext();
+  const [searchParams] = useSearchParams<{ state: string; code: string }>();
+  const [error, setError] = createSignal("");
+  const [success, setSuccess] = createSignal(false);
+
+  onMount(async () => {
+    const code = searchParams.code;
+    const userToken = searchParams.state;
+
+    const res = await linkAccountWithGoogleDrive(code!, userToken!).catch(
+      (err) => {
+        setError(err.message);
+      }
+    );
+
+    if (!res) return;
+    if (res.connection) {
+      setSuccess(true);
+    }
+  });
+
+  return (
+    <PageContainer class="page-container">
+      <PageHeader hideAccountInfo />
+      <Content class="content">
+        <CenterContainer>
+          {t("googleDriveAccountLink.linking")}
+          <Show when={error()}>
+            <Text color="var(--alert-color)">{error()}</Text>
+          </Show>
+          <Show when={success()}>
+            <Text color="var(--success-color)">
+              {t("googleDriveAccountLink.success")}
+            </Text>
+          </Show>
+        </CenterContainer>
+      </Content>
+      <PageFooter />
+    </PageContainer>
+  );
+}

src/pages/GoogleRedirectLinkAccountPage.tsx

@@ -67,7 +67,7 @@ export default function GoogleRedirectLinkAccountPage() {
           </Show>
           <Show when={success()}>
             <Text color="var(--success-color)">
-              {t("googleAccountLink.success")}
+              {t("googleDriveAccountLink.success")}
             </Text>
           </Show>
         </CenterContainer>