feat: update register mobile

.eslintrc.json

@@ -12,6 +12,7 @@
     "project": "./tsconfig.json"
   },
   "rules": {
+    "react/no-unescaped-entities": "off",
     "react/jsx-props-no-spreading": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "arrow-body-style": "off",

src/app/badge/Badge.scss

@@ -0,0 +1,84 @@
+#badge-page-container {
+  margin-top: $nav-height;
+  padding: $main-padding-mobile;
+  height: calc(100dvh - $nav-height);
+  font-family: $p-font;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+
+  #badge-page-main-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    @media (min-width: 580px) {
+      width: 30rem;
+      margin-inline: auto;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+    }
+
+    h1 {
+      margin-bottom: 2rem;
+    }
+
+    #badge-form-body {
+      height: 100%;
+    }
+  }
+
+  #badge-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+
+    #current-step-small {
+      @media (min-width: 400px) {
+        display: none;
+      }
+    }
+
+    #current-step-large {
+      display: none;
+
+      @media (min-width: 400px) {
+        display: block;
+      }
+    }
+
+    p {
+      font-size: 1.2rem;
+    }
+
+    button {
+      border-radius: 22px;
+      padding: 0.5rem 1rem;
+      font-size: 1.2rem;
+      font-family: $p-font;
+      font-weight: 600;
+      display: flex;
+      gap: 0.5rem;
+      border: none;
+      align-items: center;
+      border: 2px solid $white;
+      cursor: pointer;
+
+      .right-arrow {
+        transform: rotate(180deg);
+        color: white;
+      }
+    }
+
+    .back-button {
+      background-color: transparent;
+      color: white;
+    }
+  }
+}

src/app/badge/page.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import './Badge.scss';
+import FormStep1 from '@/components/Register/FormSteps/FormStep1/FormStep1';
+import {
+  RegistrationSchema,
+  TFormData,
+  ValidFieldNames
+} from '@/components/Register/types';
+import RightArrow from '@/components/Icons/RightArrow';
+import FormStep2 from '@/components/Register/FormSteps/FormStep2/FormStep2';
+import FormStep3 from '@/components/Register/FormSteps/FormStep3/FormStep3';
+import FormStep4 from '@/components/Register/FormSteps/FormStep4/FormStep4';
+import Link from 'next/link';
+
+export default function Register() {
+  const [nextButtonText, setNextButtonText] = useState('Next');
+  const [currentFormStep, setCurrentFormStep] = useState(1);
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    getValues
+  } = useForm<TFormData>({
+    resolver: zodResolver(RegistrationSchema)
+  });
+
+  useEffect(() => {
+    if (currentFormStep === 4) {
+      setNextButtonText('Home');
+    } else if (currentFormStep === 3) {
+      setNextButtonText('Finish');
+    } else {
+      setNextButtonText('Next');
+    }
+  }, [currentFormStep]);
+
+  const onSubmit = async (data: TFormData) => {
+    try {
+      console.log(data);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleFormNext = async () => {
+    // Input Validation for Steps 1 and 2
+    if (currentFormStep <= 2) {
+      let fieldsToValidate: Array<ValidFieldNames> = [
+        'name',
+        'pronouns',
+        'year'
+      ];
+      if (currentFormStep === 2) {
+        fieldsToValidate = ['email', 'link'];
+      }
+
+      const isValid = await trigger(fieldsToValidate);
+      if (!isValid) return;
+    }
+
+    if (currentFormStep === 3) {
+      handleSubmit(onSubmit)();
+    }
+
+    if (currentFormStep >= 4) {
+      // setOpen(false);
+      return;
+    }
+    setCurrentFormStep(currentFormStep + 1);
+  };
+
+  const handleFormPrev = () => {
+    if (currentFormStep <= 1) return;
+    setCurrentFormStep(currentFormStep - 1);
+  };
+
+  return (
+    <main id="badge-page-container">
+      <div id="badge-page-main-content">
+        <h1>
+          {currentFormStep === 4 ? 'Badge Complete!' : 'Create Your Badge'}
+        </h1>
+        <form
+          onSubmit={handleSubmit(onSubmit, validationError => {
+            console.error('Validation errors:', validationError);
+          })}
+          className="modal-form"
+        >
+          <div id="badge-form-body">
+            {currentFormStep === 1 && (
+              <FormStep1
+                register={register}
+                control={control}
+                errors={errors}
+              />
+            )}
+            {currentFormStep === 2 && (
+              <FormStep2
+                register={register}
+                control={control}
+                errors={errors}
+              />
+            )}
+            {currentFormStep === 3 && <FormStep3 />}
+            {currentFormStep === 4 && <FormStep4 formData={getValues()} />}
+          </div>
+        </form>
+      </div>
+      <div id="badge-footer">
+        {currentFormStep === 1 && (
+          <Link href="/register" style={{ textDecoration: 'none' }}>
+            <button
+              type="button"
+              className="back-button"
+              onClick={handleFormPrev}
+            >
+              <span className="right-arrow">
+                <RightArrow fill="white" />
+              </span>{' '}
+              Back
+            </button>
+          </Link>
+        )}
+        {currentFormStep > 1 && (
+          <button
+            type="button"
+            className="back-button"
+            onClick={handleFormPrev}
+          >
+            <span className="right-arrow">
+              <RightArrow fill="white" />
+            </span>{' '}
+            Back
+          </button>
+        )}
+        <p id="current-step-large">Step {currentFormStep} of 4</p>
+        <p id="current-step-small">{currentFormStep}/4</p>
+        {currentFormStep < 4 && (
+          <button
+            type="button"
+            className="next-button"
+            onClick={handleFormNext}
+          >
+            {nextButtonText}{' '}
+            {currentFormStep < 4 && (
+              <span>
+                <RightArrow />
+              </span>
+            )}
+          </button>
+        )}
+        {currentFormStep === 4 && (
+          <Link href="/" style={{ textDecoration: 'none' }}>
+            <button type="button" className="next-button">
+              Home
+            </button>
+          </Link>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/register/Register.scss

@@ -0,0 +1,112 @@
+#register-page-container {
+  margin-top: $nav-height;
+  padding: $main-padding-mobile;
+  height: calc(100dvh - $nav-height);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  #register-top {
+    #smaller-register-header {
+      font-size: 2.25rem;
+      text-align: center;
+      margin-bottom: 3rem;
+
+      svg {
+        margin-top: 11px;
+        margin-inline: auto;
+        max-width: 13ch;
+      }
+
+      @media (min-width: 400px) {
+        display: none;
+      }
+    }
+
+    #larger-register-header {
+      display: none;
+
+      @media (min-width: 400px) {
+        font-size: 4rem;
+        display: block;
+        width: fit-content;
+        margin-inline: auto;
+
+        span {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          margin-bottom: 1.25rem;
+        }
+      }
+    }
+
+    @media (min-width: 400px) {
+      font-size: 1rem;
+    }
+
+    > p {
+      margin-inline: auto;
+      max-width: 30ch;
+
+      @media (min-width: 400px) {
+        max-width: 38ch;
+      }
+    }
+  }
+
+  #register-bottom {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    max-width: 17.5rem;
+    margin-inline: auto;
+
+    a,
+    button {
+      width: 100%;
+      font-family: $p-font;
+      font-size: 1.25rem;
+      line-height: 100%;
+      text-decoration: none;
+      border-radius: 30px;
+      background: $white;
+      color: black;
+      border: 2px solid $white;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      padding: 0.5rem 1rem;
+
+      @media (min-width: 400px) {
+        padding: 1rem 2rem;
+      }
+    }
+
+    #luma-button-container {
+      width: 100%;
+      position: relative;
+      svg {
+        pointer-events: none;
+        position: absolute;
+        top: -30%;
+        right: -8%;
+      }
+    }
+
+    #create-badge-button {
+      background-color: transparent;
+      color: white;
+      cursor: pointer;
+    }
+
+    p {
+      font-size: 0.875rem;
+      text-align: center;
+    }
+  }
+}