ms2/signine e2e tests

package.json

@@ -109,6 +109,7 @@
     "uuid": "9.0.1",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack-dev-server": "^3.2.1",
+    "imapflow": "^1.0.164"
   }
 }

src/management-system-v2/app/(dashboard)/[environmentId]/profile/user-profile.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { FC, ReactNode, useState } from 'react';
-import { Space, Card, Typography, App, Table, Alert } from 'antd';
+import { Space, Card, Typography, App, Table, Alert, Modal, Form, Input } from 'antd';
 import styles from './user-profile.module.scss';
 import { RightOutlined } from '@ant-design/icons';
 import { signOut } from 'next-auth/react';
@@ -17,7 +17,11 @@ const UserProfile: FC<{ userData: User }> = ({ userData }) => {
   const [changeNameModalOpen, setChangeNameModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState<ReactNode | undefined>(undefined);
 
-  const { message: messageApi } = App.useApp();
+  const [changeEmailModalOpen, setChangeEmailModalOpen] = useState(false);
+  const [errors, parseEmail] = useParseZodErrors(z.object({ email: z.string().email() }));
+  const [changeEmailForm] = Form.useForm();
+
+  const { message: messageApi, notification } = App.useApp();
 
   async function deleteUser() {
     try {
@@ -33,6 +37,26 @@ const UserProfile: FC<{ userData: User }> = ({ userData }) => {
     }
   }
 
+  async function requestEmailChange(values: unknown) {
+    try {
+      const data = parseEmail(values);
+      if (!data) return;
+
+      const response = await serverRequestEmailChange(data.email);
+      if (response && 'error' in response) throw response;
+
+      setChangeEmailModalOpen(false);
+      notification.success({
+        message: 'Email change request successful',
+        description: 'Check your Email for the verification link',
+      });
+    } catch (e: unknown) {
+      //@ts-ignore
+      const content = (e?.error?.message as ReactNode) ? e.error.message : 'An error ocurred';
+      messageApi.error({ content });
+    }
+  }
+
   const firstName = userData.guest ? 'Guest' : userData.firstName || '';
   const lastName = userData.guest ? '' : userData.lastName || '';
 
@@ -65,6 +89,31 @@ const UserProfile: FC<{ userData: User }> = ({ userData }) => {
         }}
       />
 
+      <Modal
+        title="Change your email"
+        open={changeEmailModalOpen}
+        closeIcon={null}
+        onCancel={() => setChangeEmailModalOpen(false)}
+        onOk={changeEmailForm.submit}
+        destroyOnClose
+      >
+        <Alert
+          type="warning"
+          message="We'll send a sign in link to your new email, if you don't open it in this browser your email won't be changed"
+          style={{ marginBottom: '1rem' }}
+        />
+        <Form
+          initialValues={userData}
+          form={changeEmailForm}
+          layout="vertical"
+          onFinish={requestEmailChange}
+        >
+          <Form.Item label="Email" name="email" required {...antDesignInputProps(errors, 'email')}>
+            <Input type="email" />
+          </Form.Item>
+        </Form>
+      </Modal>
+
       <Space direction="vertical" className={styles.Container}>
         <Card className={styles.Card} style={{ margin: 'auto' }}>
           {errorMessage && (

src/management-system-v2/app/api/auth/[...nextauth]/adapter.ts

@@ -6,11 +6,14 @@ import {
   addOauthAccount,
   getOauthAccountByProviderId,
 } from '@/lib/data/legacy/iam/users';
+import {
+  createVerificationToken,
+  deleteVerificationToken,
+  getVerificationToken,
+} from '@/lib/data/legacy/verification-tokens';
 import { AuthenticatedUser } from '@/lib/data/user-schema';
 import { type Adapter, AdapterAccount, VerificationToken } from 'next-auth/adapters';
 
-const invitationTokens = new Map<string, VerificationToken>();
-
 const Adapter = {
   createUser: async (
     user: Omit<AuthenticatedUser, 'id'> | { email: string; emailVerified: Date },
@@ -25,21 +28,20 @@ const Adapter = {
     return getUserById(id);
   },
   updateUser: async (user: AuthenticatedUser) => {
-    return updateUser(user.id, user);
+    return updateUser(user.id, { ...user, guest: false });
   },
   getUserByEmail: async (email: string) => {
     return getUserByEmail(email) ?? null;
   },
   createVerificationToken: async (token: VerificationToken) => {
-    invitationTokens.set(token.identifier, token);
-    return token;
+    return createVerificationToken(token);
   },
-  useVerificationToken: async ({ identifier }: { identifier: string; token: string }) => {
+  useVerificationToken: async (params: { identifier: string; token: string }) => {
     // next-auth checks if the token is expired
-    const storedToken = invitationTokens.get(identifier);
-    invitationTokens.delete(identifier);
+    const token = getVerificationToken(params);
+    if (token) deleteVerificationToken(params);
 
-    return storedToken ?? null;
+    return token ?? null;
   },
   linkAccount: async (account: AdapterAccount) => {
     return addOauthAccount({

src/management-system-v2/app/api/auth/[...nextauth]/auth-options.ts

@@ -35,7 +35,10 @@ const nextAuthOptions: AuthOptions = {
     }),
     EmailProvider({
       sendVerificationRequest(params) {
-        const signinMail = renderSigninLinkEmail(params.url, params.expires);
+        const signinMail = renderSigninLinkEmail({
+          signInLink: params.url,
+          expires: params.expires,
+        });
 
         sendEmail({
           to: params.identifier,
@@ -63,16 +66,26 @@ const nextAuthOptions: AuthOptions = {
 
       return session;
     },
-    signIn: async ({ account, user: _user }) => {
+    signIn: async ({ account, user: _user, email }) => {
       const session = await getServerSession(nextAuthOptions);
       const sessionUser = session?.user;
 
-      if (sessionUser?.guest && account?.provider !== 'guest-loguin') {
+      if (
+        sessionUser?.guest &&
+        account?.provider !== 'guest-signin' &&
+        !email?.verificationRequest
+      ) {
+        // Check if the user's cookie is correct
+        const sessionUserInDb = getUserById(sessionUser.id);
+        if (!sessionUserInDb || !sessionUserInDb.guest) throw new Error('Something went wrong');
+
         const user = _user as Partial<AuthenticatedUser>;
-        const guestUser = getUserById(sessionUser.id);
+        const userSigningIn = getUserById(_user.id);
 
-        if (guestUser.guest) {
-          updateUser(guestUser.id, {
+        if (userSigningIn) {
+          updateUser(sessionUser.id, { guest: true, signedInWithUserId: userSigningIn.id });
+        } else {
+          updateUser(sessionUser.id, {
             firstName: user.firstName ?? undefined,
             lastName: user.lastName ?? undefined,
             username: user.username ?? undefined,
@@ -221,6 +234,32 @@ if (process.env.NODE_ENV === 'development') {
   );
 }
 
+// add the test user in preview deployments and dev
+// dev is for local testing
+const url = process.env.NEXTAUTH_URL;
+if (
+  (url && url.endsWith('app.run') && url.startsWith('https://pr-')) ||
+  process.env.NODE_ENV === 'development'
+) {
+  nextAuthOptions.providers.push(
+    CredentialsProvider({
+      id: 'test-user',
+      name: 'Continue With Test User',
+      credentials: {},
+      async authorize() {
+        return addUser({
+          guest: false,
+          email: `test-user-${crypto.randomUUID()}@proceed-labs.org`,
+          firstName: 'Test',
+          lastName: 'Test',
+          username: 'test-user',
+          emailVerified: new Date(),
+        });
+      },
+    }),
+  );
+}
+
 export type ExtractedProvider =
   | {
       id: string;

src/management-system-v2/app/change-email/change-email-card.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Space, Button, App, Card, Typography } from 'antd';
+import { useState } from 'react';
+import { changeEmail as serverChangeEmail } from '@/lib/change-email/server-actions';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import Content from '@/components/content';
+import { useSession } from 'next-auth/react';
+
+export default function ChangeEmailCard({
+  previousEmail,
+  newEmail,
+}: {
+  previousEmail?: string;
+  newEmail: string;
+}) {
+  const { message } = App.useApp();
+  const params = useSearchParams();
+  const router = useRouter();
+  const session = useSession();
+
+  const [loading, setLoading] = useState<'changing' | 'cancelling' | undefined>();
+  async function changeEmail(cancel: boolean = false) {
+    try {
+      setLoading(cancel ? 'cancelling' : 'changing');
+
+      const response = await serverChangeEmail(params.get('token')!, params.get('email')!, cancel);
+
+      if (response?.error) throw response.error.message;
+
+      if (cancel) {
+        message.open({ content: 'Email change cancelled', type: 'success' });
+      } else {
+        message.open({ content: 'Email changed', type: 'success' });
+        session.update();
+      }
+
+      router.push('/profile');
+    } catch (e) {
+      const content = typeof e === 'string' ? e : 'An error occurred';
+
+      message.open({ content, type: 'error' });
+      setLoading(undefined);
+    }
+  }
+
+  return (
+    <Content title="Change Email">
+      <Card
+        title="Are you sure you want to change your email?"
+        style={{ width: '90%', maxWidth: '80ch', margin: 'auto' }}
+      >
+        {previousEmail ? (
+          <>
+            <Typography.Text code>{previousEmail}</Typography.Text>
+            <ArrowRightOutlined style={{ margin: '0 1rem' }} />
+            <Typography.Text code>{newEmail}</Typography.Text>
+          </>
+        ) : (
+          <>
+            Your email will now be <Typography.Text code>{newEmail}</Typography.Text>
+          </>
+        )}
+        <br />
+        <Space style={{ marginTop: '1rem' }}>
+          <Button
+            type="default"
+            onClick={() => changeEmail(true)}
+            loading={loading === 'cancelling'}
+          >
+            Cancel
+          </Button>
+          <Button type="primary" onClick={() => changeEmail()} loading={loading === 'changing'}>
+            Confirm
+          </Button>
+        </Space>
+      </Card>
+    </Content>
+  );
+}

src/management-system-v2/app/change-email/page.tsx

@@ -0,0 +1,34 @@
+import { getCurrentUser } from '@/components/auth';
+import { getTokenHash, notExpired } from '@/lib/change-email/utils';
+import { getVerificationToken } from '@/lib/data/legacy/verification-tokens';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+import ChangeEmailCard from './change-email-card';
+
+const searchParamsScema = z.object({ email: z.string().email(), token: z.string() });
+
+export default async function ChangeEmailPage({ searchParams }: { searchParams: unknown }) {
+  const parsedSearchkParams = searchParamsScema.safeParse(searchParams);
+  if (!parsedSearchkParams.success) redirect('/');
+  const { email, token } = parsedSearchkParams.data;
+
+  const { session } = await getCurrentUser();
+  const userId = session?.user.id;
+  if (!userId || session.user.guest) redirect('/');
+  const previousEmail = session.user.email;
+
+  const verificationToken = getVerificationToken({
+    identifier: email,
+    token: await getTokenHash(token),
+  });
+
+  if (
+    !verificationToken ||
+    !verificationToken.updateEmail ||
+    verificationToken.userId !== userId ||
+    !(await notExpired(verificationToken))
+  )
+    redirect('/');
+
+  return <ChangeEmailCard previousEmail={previousEmail} newEmail={email} />;
+}

src/management-system-v2/app/transfer-processes/page.tsx

@@ -0,0 +1,54 @@
+import { getCurrentUser } from '@/components/auth';
+import Content from '@/components/content';
+import { getProcesses } from '@/lib/data/legacy/_process';
+import { getUserById } from '@/lib/data/legacy/iam/users';
+import { Card } from 'antd';
+import { redirect } from 'next/navigation';
+import TransferProcessesConfirmationButtons from './transfer-processes-confitmation-buttons';
+
+export default async function TransferProcessesPage({
+  searchParams,
+}: {
+  searchParams: {
+    callbackUrl?: string;
+    guestId?: string;
+  };
+}) {
+  const { userId, session } = await getCurrentUser();
+  if (!session) redirect('api/auth/signin');
+  if (session.user.guest) redirect('/');
+
+  const callbackUrl = searchParams.callbackUrl || '/';
+
+  const guestId = searchParams.guestId;
+  // guestId === userId if the user signed in with a non existing account, and the guest user was
+  // turned into an authenticated user
+  if (!guestId || guestId === userId) redirect(callbackUrl);
+
+  const possibleGuest = getUserById(guestId);
+  // possibleGuest might be a normal user, this would happen if the user signed in with a new
+  // account, we only go further then this redirect, if the user signed in with an account that was
+  // already linked to an existing user
+  if (!possibleGuest || !possibleGuest.guest || possibleGuest?.signedInWithUserId !== userId)
+    redirect(callbackUrl);
+
+  // NOTE: this ignores folders
+  const guestProcesses = (await getProcesses()).filter(
+    (process) => process.environmentId === guestId,
+  );
+  if (guestProcesses.length === 0) redirect(callbackUrl);
+
+  return (
+    <Content title="Transfer Processes">
+      <Card
+        title="Would you like to transfer your processes?"
+        style={{ maxWidth: '70ch', margin: 'auto' }}
+      >
+        Your guest account had {guestProcesses.length} process{guestProcesses.length !== 1 && 'es'}.
+        <br />
+        Would you like to transfer them to your account?
+        <TransferProcessesConfirmationButtons guestId={guestId} callbackUrl={callbackUrl} />
+      </Card>
+    </Content>
+  );
+}