Revert "Slack login (#114)"

This reverts commit 07c754f.

.env.development

@@ -1 +1 @@
-PUBLIC_URL=https://localhost:3000
+PUBLIC_URL=http://localhost:3000

.gitignore

@@ -45,5 +45,3 @@ next-env.d.ts
 
 # Sentry Auth Token
 .sentryclirc
-
-certificates

app/(authenticated)/user/[id]/page.tsx

@@ -104,7 +104,7 @@ export default async function UserPage({ params }: { params: { id: string } }) {
       <Space h={"md"} />
       {isSlackEnabled && (
         <>
-          {!user.identities.find((id) => id.provider == "slack") ? (
+          {!user.slack_user_id ? (
             <Card withBorder>
               <h2 className="mt-0">Link your account to Slack</h2>
               <Suspense>
@@ -125,12 +125,7 @@ export default async function UserPage({ params }: { params: { id: string } }) {
                   </>
                 }
               >
-                <SlackUserInfo
-                  slack_user_id={
-                    user.identities.find((id) => id.provider == "slack")
-                      ?.provider_key!
-                  }
-                />
+                <SlackUserInfo slack_user_id={user.slack_user_id} />
               </Suspense>
             </Card>
           )}

app/login/GoogleLoginButton.tsx

@@ -1,96 +1,33 @@
 "use client";
 
 import { usePublicURL } from "@/components/PublicURLContext";
-import { useLocalStorage } from "@mantine/hooks";
-import Link from "next/link";
 import Script from "next/script";
 
-export function GoogleLoginButton(props: {
-  clientID: string;
-  hostedDomain: string | undefined;
-}) {
+export function GoogleLoginButton(props: { clientID: string }) {
   const publicURL = usePublicURL();
-  const gCsrfCookie = localStorage.getItem("g_csrf_token");
-
   return (
-    <>
-      <Script src="https://accounts.google.com/gsi/client" />
-
-      {/* <div id="signInWrapper" className="my-8">
-        <div
-          id="g_id_onload"
-          data-client_id={props.clientID}
-          data-context="signin"
-          data-ux_mode="redirect"
-          data-login_uri={`${publicURL}/login/google/callback`}
-          data-itp_support="true"
-          data-prompt-parent="signInWrapper"
-          data-hd="york.ac.uk"
-        ></div>
+    <div id="signInWrapper" className="my-8">
+      <div
+        id="g_id_onload"
+        data-client_id={props.clientID}
+        data-context="signin"
+        data-ux_mode="redirect"
+        data-login_uri={`${publicURL}/login/google/callback`}
+        data-itp_support="true"
+        data-prompt-parent="signInWrapper"
+        data-hd="york.ac.uk"
+      ></div>
 
-        <div
-          className="g_id_signin"
-          data-type="standard"
-          data-shape="rectangular"
-          data-theme="outline"
-          data-text="signin_with"
-          data-size="large"
-          data-logo_alignment="left"
-        ></div>
-        <Script src="https://accounts.google.com/gsi/client" />
-      </div> */}
-
-      <Link
-        href={`https://accounts.google.com/gsi/select?client_id=${
-          props.clientID
-        }&ux_mode=redirect&login_uri=${encodeURIComponent(
-          publicURL + "/login/google/callback",
-        )}&ui_mode=card&context=signin${
-          props.hostedDomain ? `&hosted_domain=${props.hostedDomain}` : ""
-        }&g_csrf_token=${gCsrfCookie}&origin=${encodeURIComponent(publicURL)}`}
-        style={{
-          alignItems: "center",
-          color: "var(--mantine-color-text)",
-          backgroundColor: "var(--mantine-color-default-hover)",
-          border: "1px solid var(--mantine-color-default-border)",
-          borderRadius: 4,
-          display: "inline-flex",
-          fontFamily: "Lato, sans-serif",
-          fontSize: 16,
-          fontWeight: 600,
-          height: 48,
-          justifyContent: "center",
-          textDecoration: "none",
-          width: 256,
-        }}
-      >
-        <svg
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 48 48"
-          xmlnsXlink="http://www.w3.org/1999/xlink"
-          style={{ height: 20, width: 20, marginRight: 12, display: "block" }}
-        >
-          <path
-            fill="#EA4335"
-            d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-          ></path>
-          <path
-            fill="#4285F4"
-            d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-          ></path>
-          <path
-            fill="#FBBC05"
-            d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-          ></path>
-          <path
-            fill="#34A853"
-            d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-          ></path>
-          <path fill="none" d="M0 0h48v48H0z"></path>
-        </svg>
-        Sign in with Google
-      </Link>
-    </>
+      <div
+        className="g_id_signin"
+        data-type="standard"
+        data-shape="rectangular"
+        data-theme="outline"
+        data-text="signin_with"
+        data-size="large"
+        data-logo_alignment="left"
+      ></div>
+      <Script src="https://accounts.google.com/gsi/client" />
+    </div>
   );
 }

app/login/google/callback/route.ts

@@ -1,4 +1,4 @@
-import { loginOrCreateUserGoogle } from "@/lib/auth/server";
+import { loginOrCreateUser } from "@/lib/auth/server";
 import { RedirectType } from "next/dist/client/components/redirect";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
@@ -16,7 +16,7 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
     );
   }
 
-  await loginOrCreateUserGoogle(idToken);
+  await loginOrCreateUser(idToken);
 
   const url = new URL("/calendar", process.env.PUBLIC_URL!);
   return NextResponse.redirect(url, {

app/login/page.tsx

@@ -2,9 +2,6 @@ import Image from "next/image";
 import BG from "./login-bg.png";
 import { GoogleLoginButton } from "./GoogleLoginButton";
 import invariant from "@/lib/invariant";
-import SlackLoginButton from "@/components/slack/SlackLoginButton";
-import { isSlackEnabled } from "@/lib/slack/slackApiConnection";
-import { Center, Stack } from "@mantine/core";
 
 export default function GoogleSignInPage(props: {
   searchParams: { error?: string };
@@ -18,27 +15,13 @@ export default function GoogleSignInPage(props: {
         priority
         className="fixed left-0 top-0 z-0 h-full w-full object-cover"
       />
-      <div className="relative z-50 mx-auto mt-16 block max-w-lg rounded-lg bg-white p-16 shadow-lg dark:bg-[--mantine-color-body]">
-        <Center>
-          <Stack>
-            <h1 className="text-4xl font-bold text-black dark:text-white">
-              Welcome to YSTV
-            </h1>
-            {props.searchParams?.error &&
-              props.searchParams.error !== "No session" && (
-                <p className="text-danger">{props.searchParams.error}</p>
-              )}
-          </Stack>
-        </Center>
-        <Center>
-          <Stack>
-            <GoogleLoginButton
-              clientID={process.env.GOOGLE_CLIENT_ID!}
-              hostedDomain={process.env.GOOGLE_PERMITTED_DOMAINS}
-            />
-            {isSlackEnabled && <SlackLoginButton />}
-          </Stack>
-        </Center>
+      <div className="relative z-50 mx-auto mt-16 block max-w-lg rounded-lg bg-white p-16 shadow-lg">
+        <h1 className="text-4xl font-bold text-black">Welcome to YSTV</h1>
+        {props.searchParams?.error &&
+          props.searchParams.error !== "No session" && (
+            <p className="text-danger">{props.searchParams.error}</p>
+          )}
+        <GoogleLoginButton clientID={process.env.GOOGLE_CLIENT_ID!} />
       </div>
     </div>
   );

app/login/slack/callback/route.ts

@@ -1,10 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { getSlackUserInfo } from "@/lib/auth/slack";
-import {
-  getCurrentUserOrNull,
-  loginOrCreateUserSlack,
-} from "@/lib/auth/server";
+import { saveSlackUserInfo } from "@/lib/auth/slack";
 
 export async function GET(req: NextRequest): Promise<NextResponse> {
   const searchParams = req.nextUrl.searchParams;
@@ -19,9 +15,7 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
     );
   }
 
-  const slackUserInfo = await getSlackUserInfo(code);
-  let user = await getCurrentUserOrNull(req);
-  user = await loginOrCreateUserSlack(slackUserInfo);
+  await saveSlackUserInfo(code);
 
   const url = new URL("/user/me", process.env.PUBLIC_URL!);
   return NextResponse.redirect(url, {

components/slack/SlackLoginButton.tsx

@@ -7,12 +7,12 @@ export default async function SlackLoginButton() {
         process.env.SLACK_CLIENT_ID
       }&redirect_uri=${encodeURIComponent(
         process.env.PUBLIC_URL! + "/login/slack/callback",
-      )}&scope=openid profile email`}
+      )}`}
       style={{
         alignItems: "center",
         color: "var(--mantine-color-text)",
         backgroundColor: "var(--mantine-color-default-hover)",
-        border: "1px solid var(--mantine-color-default-border)",
+        border: "1px solid #ddd",
         borderRadius: 4,
         display: "inline-flex",
         fontFamily: "Lato, sans-serif",

components/slack/SlackLogoutButton.tsx

@@ -1,34 +1,13 @@
 "use client";
 
 import { Button, HoverCard } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
 import { AiFillDelete } from "react-icons/ai";
 
-export default function SlackLogoutButton(props: {
-  action: () => Promise<boolean> | void;
-}) {
+export default function SlackLogoutButton() {
   return (
     <HoverCard>
       <HoverCard.Target>
-        <Button
-          variant="filled"
-          color="red"
-          className="ml-auto"
-          type="submit"
-          onClick={async () => {
-            const deleteResult = await props.action();
-
-            if (deleteResult == false) {
-              notifications.show({
-                title: "Cannot remove slack link",
-                message:
-                  "You cannot disconnect your slack account as you use it to sign in",
-                color: "red",
-                autoClose: 5000,
-              });
-            }
-          }}
-        >
+        <Button variant="filled" color="red" className="ml-auto" type="submit">
           <AiFillDelete />
         </Button>
       </HoverCard.Target>

components/slack/SlackUserInfo.tsx

@@ -1,4 +1,4 @@
-import { removeSlackLink } from "@/features/people";
+import { setUserSlackID } from "@/features/people";
 import { mustGetCurrentUser } from "@/lib/auth/server";
 import slackApiConnection, {
   isSlackEnabled,
@@ -13,9 +13,9 @@ import {
   HoverCard,
 } from "@mantine/core";
 import { redirect } from "next/navigation";
+import { AiFillDelete } from "react-icons/ai";
 import SlackLogoutButton from "./SlackLogoutButton";
 import { App } from "@slack/bolt";
-import { notifications } from "@mantine/notifications";
 
 export default async function SlackUserInfo({
   slack_user_id,
@@ -47,17 +47,16 @@ export default async function SlackUserInfo({
               {slack_user.profile?.email}
             </Text>
           </Stack>
-          <SlackLogoutButton
+          <form
             action={async () => {
               "use server";
-              const removeSuccess = await removeSlackLink(cal_user.user_id);
-              if (removeSuccess) {
-                redirect("/user/me");
-              } else {
-                return false;
-              }
+              setUserSlackID(cal_user.user_id, "");
+              redirect("/user/me");
             }}
-          />
+            className="ml-auto"
+          >
+            <SlackLogoutButton />
+          </form>
         </Group>
       </Card>
     );

features/people/users.ts

@@ -1,5 +1,5 @@
 import { prisma } from "@/lib/db";
-import { string, z } from "zod";
+import { z } from "zod";
 import { UserPreferencesSchema } from "@/lib/db/preferences";
 
 /**
@@ -23,10 +23,8 @@ export type ExposedUser = z.infer<typeof ExposedUserModel>;
  */
 export const SecureUserModel = ExposedUserModel.extend({
   preferences: UserPreferencesSchema,
+  slack_user_id: z.string().optional(),
   email: z.string(),
-  identities: z.array(
-    z.object({ provider: z.string(), provider_key: z.string() }),
-  ),
 });
 
 export type SecureUser = z.infer<typeof SecureUserModel>;
@@ -64,25 +62,11 @@ export async function setUserPreference<
   });
 }
 
-export async function removeSlackLink(user_id: number): Promise<boolean> {
-  return await prisma.$transaction(async ($db) => {
-    const num_identities = await $db.identity.count({
-      where: {
-        user_id: user_id,
-      },
-    });
-
-    if (num_identities <= 1) {
-      return false;
-    }
-
-    await $db.identity.deleteMany({
-      where: {
-        user_id: user_id,
-        provider: "slack",
-      },
+export async function setUserSlackID(userID: number, slackID: string) {
+  await prisma.$transaction(async ($db) => {
+    await $db.user.update({
+      where: { user_id: userID },
+      data: { slack_user_id: slackID },
     });
-
-    return true;
   });
 }