Make events not require sign-in

src/components/admin/store/DetailsForm/style.module.scss

@@ -90,5 +90,5 @@
 }
 
 :export {
-  #{defaultThemeColorHex}: vars.$light-primary-2;
+  #{defaultThemeColorHex}: vars.$blue-5;
 }

src/components/common/Login/index.tsx

@@ -0,0 +1,120 @@
+import VerticalForm from '@/components/common/VerticalForm';
+import VerticalFormButton from '@/components/common/VerticalFormButton';
+import VerticalFormItem from '@/components/common/VerticalFormItem';
+import VerticalFormTitle from '@/components/common/VerticalFormTitle';
+import { config, showToast } from '@/lib';
+import { resendEmailVerification } from '@/lib/api/AuthAPI';
+import { AuthManager } from '@/lib/managers';
+import { CookieService, ValidationService } from '@/lib/services';
+import { URL } from '@/lib/types';
+import { LoginRequest } from '@/lib/types/apiRequests';
+import { PrivateProfile } from '@/lib/types/apiResponses';
+import { UserState } from '@/lib/types/enums';
+import { reportError } from '@/lib/utils';
+import { useRouter } from 'next/router';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { AiOutlineMail } from 'react-icons/ai';
+import { VscLock } from 'react-icons/vsc';
+
+interface LoginProps {
+  destination: URL;
+  full?: boolean;
+}
+
+const Login = ({ destination, full }: LoginProps) => {
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginRequest>();
+
+  const onSubmit: SubmitHandler<LoginRequest> = ({ email, password }) => {
+    AuthManager.login({
+      email,
+      password,
+      onSuccessCallback: (user: PrivateProfile) => {
+        if (user.state === UserState.PENDING) {
+          showToast('Account Not Verified', 'Click to resend a verification email', [
+            {
+              text: 'Send Email',
+              onClick: async () => {
+                await resendEmailVerification(user.email);
+                showToast(`Verification email sent to ${user.email}!`);
+              },
+            },
+          ]);
+
+          CookieService.clearClientCookies();
+
+          return;
+        }
+        if (user.state === UserState.BLOCKED) {
+          showToast('This account has been disabled', 'Email [email protected] if you have questions.');
+
+          CookieService.clearClientCookies();
+          return;
+        }
+
+        router.push(destination);
+      },
+      onFailCallback: error => {
+        reportError('Unable to login', error);
+      },
+    });
+  };
+
+  return (
+    <VerticalForm onEnterPress={handleSubmit(onSubmit)} style={{ height: full ? '' : 'auto' }}>
+      {full ? <VerticalFormTitle text="Welcome to ACM!" /> : null}
+      <VerticalFormItem
+        icon={<AiOutlineMail />}
+        element="input"
+        name="email"
+        type="email"
+        placeholder="Email ([email protected])"
+        formRegister={register('email', {
+          validate: email => {
+            const validation = ValidationService.isValidEmail(email);
+            return validation.valid || validation.error;
+          },
+        })}
+        error={errors.email}
+      />
+      <VerticalFormItem
+        icon={<VscLock />}
+        name="password"
+        element="input"
+        type="password"
+        placeholder="Password"
+        formRegister={register('password', {
+          required: 'Required',
+        })}
+        error={errors.password}
+      />
+      <VerticalFormButton
+        type="link"
+        display="link"
+        text="Forgot your password?"
+        href="/forgot-password"
+      />
+      <VerticalFormButton
+        type="button"
+        display="button1"
+        text="Sign In"
+        onClick={handleSubmit(onSubmit)}
+      />
+      {full ? (
+        <VerticalFormButton
+          type="link"
+          href={config.registerRoute}
+          text="Sign Up"
+          display="button2"
+        />
+      ) : null}
+    </VerticalForm>
+  );
+};
+
+export default Login;

src/components/common/LoginAppeal/index.tsx

@@ -0,0 +1,40 @@
+import Login from '@/components/common/Login';
+import Typography from '@/components/common/Typography';
+import { config } from '@/lib';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { ReactNode } from 'react';
+import styles from './style.module.scss';
+
+interface LoginAppealProps {
+  children: ReactNode;
+}
+
+const LoginAppeal = ({ children }: LoginAppealProps) => {
+  const router = useRouter();
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.aside}>
+        <Typography variant="h1/bold" component="h2">
+          Join ACM
+        </Typography>
+        <Typography variant="body/medium" component="p" style={{ lineHeight: '1.5' }}>
+          {children}
+        </Typography>
+      </div>
+      <div className={styles.line} />
+      <div className={styles.login}>
+        <Login destination={router.asPath} />
+        <p>
+          Don&lsquo;t have an account?{' '}
+          <Link href={config.registerRoute} className={styles.signUp}>
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default LoginAppeal;

src/components/common/LoginAppeal/style.module.scss

@@ -0,0 +1,56 @@
+@use 'src/styles/vars.scss' as vars;
+
+.wrapper {
+  background-color: var(--theme-elevated-background);
+  border: 1px solid var(--theme-elevated-stroke);
+  border-radius: 0.5rem;
+  display: flex;
+  gap: 2rem;
+  padding: 2rem;
+
+  @media (max-width: vars.$breakpoint-md) {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .aside {
+    display: flex;
+    flex-basis: 30rem;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    margin-right: auto;
+
+    @media (max-width: vars.$breakpoint-md) {
+      flex-basis: auto;
+      margin: 0 auto;
+      max-width: 30rem;
+    }
+  }
+
+  .line {
+    border-left: 1px solid var(--theme-elevated-stroke);
+    @media (max-width: vars.$breakpoint-md) {
+      border-top: 1px solid var(--theme-elevated-stroke);
+      margin: 0 auto;
+      width: 10rem;
+    }
+  }
+
+  .login {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    margin: 0 auto;
+    max-width: 300px;
+    width: 100%;
+
+    .signUp {
+      color: var(--theme-blue-text-button);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

src/components/common/LoginAppeal/style.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  aside: string;
+  line: string;
+  login: string;
+  signUp: string;
+  wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/common/SEO/index.tsx

@@ -1,5 +1,6 @@
 import Logo from '@/public/assets/acm-logos/general/light-mode.png';
 import Head from 'next/head';
+import style from './style.module.scss';
 
 const TITLE = 'ACM UCSD Membership Portal';
 const DESC =
@@ -8,16 +9,21 @@ const DESC =
 interface SEOProps {
   title?: string;
   description?: string;
+  previewImage?: string;
+  bigPreviewImage?: boolean;
 }
 
-const SEO = ({ title, description = DESC }: SEOProps) => {
-  const fullTitle = title ? `${title} | ${TITLE}` : TITLE;
-
+const SEO = ({
+  title,
+  description = DESC,
+  previewImage = Logo.src,
+  bigPreviewImage = false,
+}: SEOProps) => {
   return (
     <Head>
       {/* google indexing data */}
 
-      <title>{fullTitle}</title>
+      <title>{title ? `${title} | ${TITLE}` : TITLE}</title>
       <meta name="description" content={description} />
       <link rel="shortcut icon" href="/favicon.ico" />
 
@@ -28,13 +34,16 @@ const SEO = ({ title, description = DESC }: SEOProps) => {
       {/* type of content */}
       <meta property="og:type" content="website" />
       {/* actual website title */}
-      <meta property="og:site_name" content="ACM at UCSD" />
+      <meta property="og:site_name" content="ACM at UC San Diego" />
       {/* title to display for the specific link being shared */}
-      <meta property="og:title" content={fullTitle} />
+      <meta property="og:title" content={title ?? TITLE} />
       {/* preview image */}
-      <meta property="og:image" content={Logo.src} />
+      <meta property="og:image" content={previewImage} />
+      {/* make preview image large on Discord and other sites */}
+      {bigPreviewImage ? <meta name="twitter:card" content="summary_large_image" /> : null}
       {/* preview description text */}
       <meta property="og:description" content={description} />
+      <meta name="theme-color" content={style.defaultThemeColorHex} />
     </Head>
   );
 };

src/components/common/SEO/style.module.scss

@@ -0,0 +1,5 @@
+@use 'src/styles/vars.scss' as vars;
+
+:export {
+  #{defaultThemeColorHex}: vars.$blue-5;
+}

src/components/common/SEO/style.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  defaultThemeColorHex: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/common/VerticalForm/style.module.scss

@@ -7,5 +7,6 @@
   height: calc(vars.$min-content-height - 4rem);
   justify-content: center;
   margin: 0 auto;
-  width: 300px;
+  max-width: 300px;
+  width: 100%;
 }

src/components/auth/SignInButton/index.tsx → src/components/common/VerticalFormButton/index.tsx

@@ -20,9 +20,9 @@ interface DisplayOptions {
   style?: CSSProperties;
 }
 
-type SignInButtonProps = (LinkInterface | ButtonInterface) & DisplayOptions;
+type VerticalFormButtonProps = (LinkInterface | ButtonInterface) & DisplayOptions;
 
-const SignInButton = (props: SignInButtonProps) => {
+const VerticalFormButton = (props: VerticalFormButtonProps) => {
   const { type, text, display, style = {} } = props;
 
   if (type === 'link') {
@@ -45,4 +45,4 @@ const SignInButton = (props: SignInButtonProps) => {
   return null;
 };
 
-export default SignInButton;
+export default VerticalFormButton;

src/components/auth/SignInFormItem/index.tsx → src/components/common/VerticalFormItem/index.tsx

@@ -20,9 +20,9 @@ interface FormItemProps {
   inputHeight?: string;
 }
 
-type SignInFormProps = FormItemProps & (InputTypeProps | SelectTypeProps);
+type VerticalFormProps = FormItemProps & (InputTypeProps | SelectTypeProps);
 
-const SignInFormItem = (props: SignInFormProps) => {
+const VerticalFormItem = (props: VerticalFormProps) => {
   const { icon, placeholder, formRegister, element, error, inputHeight } = props;
 
   if (element === 'input') {
@@ -74,4 +74,4 @@ const SignInFormItem = (props: SignInFormProps) => {
   return null;
 };
 
-export default SignInFormItem;
+export default VerticalFormItem;

src/components/auth/SignInTitle/index.tsx → src/components/common/VerticalFormTitle/index.tsx

@@ -1,11 +1,11 @@
 import styles from './style.module.scss';
 
-interface SignInTitleProps {
+interface VerticalFormTitleProps {
   text: string;
   description?: string;
 }
 
-const SignInTitle = ({ text, description }: SignInTitleProps) => {
+const VerticalFormTitle = ({ text, description }: VerticalFormTitleProps) => {
   return (
     <>
       <h1 className={styles.title}>{text}</h1>
@@ -14,4 +14,4 @@ const SignInTitle = ({ text, description }: SignInTitleProps) => {
   );
 };
 
-export default SignInTitle;
+export default VerticalFormTitle;

src/components/common/index.ts

@@ -6,9 +6,13 @@ export { default as Dropdown } from './Dropdown';
 export { default as EditButton } from './EditButton';
 export { default as GifSafeImage } from './GifSafeImage';
 export { default as LinkButton } from './LinkButton';
+export { default as LoginAppeal } from './LoginAppeal';
 export { default as Modal } from './Modal';
 export { default as PaginationControls } from './PaginationControls';
 export { default as SEO } from './SEO';
 export { default as Typography } from './Typography';
 export type { Variant } from './Typography';
 export { default as VerticalForm } from './VerticalForm';
+export { default as VerticalFormButton } from './VerticalFormButton';
+export { default as VerticalFormItem } from './VerticalFormItem';
+export { default as VerticalFormTitle } from './VerticalFormTitle';