refactor: Rename auth/SignIn components to common/VerticalForm

because they're used for more than just signing in
acmucsd · Apr 23, 2024 · e75f2c0 · e75f2c0
1 parent 0ad068a
commit e75f2c0
Show file tree

Hide file tree

Showing 23 changed files with 105 additions and 79 deletions.
diff --git a/src/components/auth/index.ts b/src/components/auth/index.ts
diff --git a/src/components/auth/SignInButton/index.tsx → ...nents/common/VerticalFormButton/index.tsx b/src/components/auth/SignInButton/index.tsx → ...nents/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;
diff --git a/...nents/auth/SignInButton/style.module.scss → ...mmon/VerticalFormButton/style.module.scss b/...nents/auth/SignInButton/style.module.scss → ...mmon/VerticalFormButton/style.module.scss
diff --git a/.../auth/SignInButton/style.module.scss.d.ts → ...VerticalFormButton/style.module.scss.d.ts b/.../auth/SignInButton/style.module.scss.d.ts → ...VerticalFormButton/style.module.scss.d.ts
diff --git a/src/components/auth/SignInFormItem/index.tsx → ...ponents/common/VerticalFormItem/index.tsx b/src/components/auth/SignInFormItem/index.tsx → ...ponents/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;
diff --git a/...nts/auth/SignInFormItem/style.module.scss → ...common/VerticalFormItem/style.module.scss b/...nts/auth/SignInFormItem/style.module.scss → ...common/VerticalFormItem/style.module.scss
diff --git a/...uth/SignInFormItem/style.module.scss.d.ts → ...n/VerticalFormItem/style.module.scss.d.ts b/...uth/SignInFormItem/style.module.scss.d.ts → ...n/VerticalFormItem/style.module.scss.d.ts
diff --git a/src/components/auth/SignInTitle/index.tsx → ...onents/common/VerticalFormTitle/index.tsx b/src/components/auth/SignInTitle/index.tsx → ...onents/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;
diff --git a/...onents/auth/SignInTitle/style.module.scss → ...ommon/VerticalFormTitle/style.module.scss b/...onents/auth/SignInTitle/style.module.scss → ...ommon/VerticalFormTitle/style.module.scss
diff --git a/...s/auth/SignInTitle/style.module.scss.d.ts → .../VerticalFormTitle/style.module.scss.d.ts b/...s/auth/SignInTitle/style.module.scss.d.ts → .../VerticalFormTitle/style.module.scss.d.ts
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
@@ -12,3 +12,6 @@ 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';
diff --git a/src/components/profile/UserHandleNotFound/index.tsx b/src/components/profile/UserHandleNotFound/index.tsx
@@ -1,5 +1,4 @@
-import { SignInButton } from '@/components/auth';
-import { Typography, VerticalForm } from '@/components/common';
+import { Typography, VerticalForm, VerticalFormButton } from '@/components/common';
 import Cat404 from '@/public/assets/graphics/cat404.png';
 import Image from 'next/image';
 
@@ -13,6 +12,6 @@ export const UserHandleNotFound = ({ handle }: UserHandleNotFoundProps) => (
       No user with handle &lsquo;{handle}&rsquo; was found.
     </Typography>
     <Image src={Cat404} width={256} height={256} alt="Sad Cat" />
-    <SignInButton type="link" display="button1" href="/" text="Return to Home" />
+    <VerticalFormButton type="link" display="button1" href="/" text="Return to Home" />
   </VerticalForm>
 );
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,5 +1,4 @@
-import { SignInButton } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import { VerticalForm, VerticalFormButton } from '@/components/common';
 import Cat404 from '@/public/assets/graphics/cat404.png';
 import styles from '@/styles/pages/404.module.scss';
 import Image from 'next/image';
@@ -10,7 +9,7 @@ const PageNotFound = () => {
       <VerticalForm style={{ alignItems: 'center', flex: 'auto', height: 'unset' }}>
         <h1 className={styles.header}>Whoops, we ended up on the wrong page!</h1>
         <Image src={Cat404} width={256} height={256} alt="Sad Cat" />
-        <SignInButton type="link" display="button1" href="/" text="Return to Home" />
+        <VerticalFormButton type="link" display="button1" href="/" text="Return to Home" />
       </VerticalForm>
     </div>
   );

diff --git a/src/pages/500.tsx b/src/pages/500.tsx
@@ -1,5 +1,4 @@
-import { SignInButton } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import { VerticalForm, VerticalFormButton } from '@/components/common';
 import Cat404 from '@/public/assets/graphics/cat404.png';
 import styles from '@/styles/pages/404.module.scss';
 import Image from 'next/image';
@@ -17,7 +16,7 @@ const InternalServerError = () => {
         >
           Logging out will usually fix your issue.
         </span>
-        <SignInButton type="link" display="button1" href="/logout" text="Logout" />
+        <VerticalFormButton type="link" display="button1" href="/logout" text="Logout" />
         <span
           style={{
             textAlign: 'center',

diff --git a/src/pages/admin/attendance.tsx b/src/pages/admin/attendance.tsx
@@ -1,5 +1,9 @@
-import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import {
+  VerticalForm,
+  VerticalFormButton,
+  VerticalFormItem,
+  VerticalFormTitle,
+} from '@/components/common';
 import { config } from '@/lib';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService, ValidationService } from '@/lib/services';
@@ -26,11 +30,11 @@ const AwardPointsPage: NextPage = () => {
 
   return (
     <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
-      <SignInTitle
+      <VerticalFormTitle
         text="Retroactive Attendance"
         description="Mark members as attended for past events"
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="email"
@@ -44,7 +48,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.email}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="description"
@@ -55,7 +59,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.description}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<VscLock />}
         name="points"
         element="input"
@@ -66,7 +70,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.points}
       />
-      <SignInButton
+      <VerticalFormButton
         type="button"
         display="button1"
         text="Award Points"

diff --git a/src/pages/admin/milestone.tsx b/src/pages/admin/milestone.tsx
@@ -1,5 +1,9 @@
-import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import {
+  VerticalForm,
+  VerticalFormButton,
+  VerticalFormItem,
+  VerticalFormTitle,
+} from '@/components/common';
 import { config } from '@/lib';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService } from '@/lib/services';
@@ -25,11 +29,11 @@ const AwardPointsPage: NextPage = () => {
 
   return (
     <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
-      <SignInTitle
+      <VerticalFormTitle
         text="Create Milestone"
         description="Award points to all active users (e.g. for ACM's 8 year anniversary)"
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="name"
@@ -40,7 +44,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.name}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<VscLock />}
         name="points"
         element="input"
@@ -51,7 +55,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.points}
       />
-      <SignInButton
+      <VerticalFormButton
         type="button"
         display="button1"
         text="Create Milestone"

diff --git a/src/pages/admin/points.tsx b/src/pages/admin/points.tsx
@@ -1,5 +1,9 @@
-import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import {
+  VerticalForm,
+  VerticalFormButton,
+  VerticalFormItem,
+  VerticalFormTitle,
+} from '@/components/common';
 import { config } from '@/lib';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService, ValidationService } from '@/lib/services';
@@ -26,8 +30,11 @@ const AwardPointsPage: NextPage = () => {
 
   return (
     <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
-      <SignInTitle text="Award Bonus Points" description="Grant Bonus Points to a Specific User" />
-      <SignInFormItem
+      <VerticalFormTitle
+        text="Award Bonus Points"
+        description="Grant Bonus Points to a Specific User"
+      />
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="email"
@@ -41,7 +48,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.email}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="description"
@@ -52,7 +59,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.description}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<VscLock />}
         name="points"
         element="input"
@@ -63,7 +70,7 @@ const AwardPointsPage: NextPage = () => {
         })}
         error={errors.points}
       />
-      <SignInButton
+      <VerticalFormButton
         type="button"
         display="button1"
         text="Award Points"

diff --git a/src/pages/check-email.tsx b/src/pages/check-email.tsx
@@ -1,5 +1,4 @@
-import { SignInButton } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import { VerticalForm, VerticalFormButton } from '@/components/common';
 import styles from '@/styles/pages/check-email.module.scss';
 import type { GetServerSideProps } from 'next';
 
@@ -21,7 +20,7 @@ const CheckEmail = ({ email }: CheckEmailProps) => {
         We&apos;ve sent an email to <b>{email}</b> to verify your email address and activate your
         account.
       </span>
-      <SignInButton
+      <VerticalFormButton
         type="link"
         display="button1"
         href="/login"

diff --git a/src/pages/forgot-password.tsx b/src/pages/forgot-password.tsx
@@ -1,5 +1,9 @@
-import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import {
+  VerticalForm,
+  VerticalFormButton,
+  VerticalFormItem,
+  VerticalFormTitle,
+} from '@/components/common';
 import { config, showToast } from '@/lib';
 import { AuthManager } from '@/lib/managers';
 import { ValidationService } from '@/lib/services';
@@ -34,8 +38,8 @@ const ForgotPassword: NextPage = () => {
 
   return (
     <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
-      <SignInTitle text="Forgot Password" />
-      <SignInFormItem
+      <VerticalFormTitle text="Forgot Password" />
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="email"
@@ -49,7 +53,7 @@ const ForgotPassword: NextPage = () => {
         })}
         error={errors.email}
       />
-      <SignInButton
+      <VerticalFormButton
         type="button"
         display="button1"
         text="Submit"

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -1,5 +1,9 @@
-import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
-import { VerticalForm } from '@/components/common';
+import {
+  VerticalForm,
+  VerticalFormButton,
+  VerticalFormItem,
+  VerticalFormTitle,
+} from '@/components/common';
 import { config, showToast } from '@/lib';
 import { resendEmailVerification } from '@/lib/api/AuthAPI';
 import { AuthManager } from '@/lib/managers';
@@ -65,8 +69,8 @@ const LoginPage: NextPage<LoginProps> = ({ destination }) => {
 
   return (
     <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
-      <SignInTitle text="Welcome to ACM!" />
-      <SignInFormItem
+      <VerticalFormTitle text="Welcome to ACM!" />
+      <VerticalFormItem
         icon={<AiOutlineMail />}
         element="input"
         name="email"
@@ -80,7 +84,7 @@ const LoginPage: NextPage<LoginProps> = ({ destination }) => {
         })}
         error={errors.email}
       />
-      <SignInFormItem
+      <VerticalFormItem
         icon={<VscLock />}
         name="password"
         element="input"
@@ -91,19 +95,19 @@ const LoginPage: NextPage<LoginProps> = ({ destination }) => {
         })}
         error={errors.password}
       />
-      <SignInButton
+      <VerticalFormButton
         type="link"
         display="link"
         text="Forgot your password?"
         href="/forgot-password"
       />
-      <SignInButton
+      <VerticalFormButton
         type="button"
         display="button1"
         text="Sign In"
         onClick={handleSubmit(onSubmit)}
       />
-      <SignInButton type="link" href="/register" text="Sign Up" display="button2" />
+      <VerticalFormButton type="link" href="/register" text="Sign Up" display="button2" />
     </VerticalForm>
   );
 };