Merge pull request #41 from erland-syafiq/register-fix

Register fix

docs/assets/.env.template

@@ -1,7 +1,6 @@
 AWS_DYNAMODB_ACCESS_KEY_ID=<access key>
 AWS_DYNAMODB_SECRET_ACCESS_KEY=<secret key>
 AWS_DEFAULT_REGION=<default region e.g: us-east-1>
-BACKEND_URL=<backend url e.g: localhost:3000>
 ADMIN_USERNAME=<correct user email>
 ADMIN_PASSWORD=<correct user password>
 JWT_SECRET=<secret key>

docs/env-file.md

@@ -11,7 +11,6 @@ Never, commit .env files to any remote repository, including GitHub. Only share
 | AWS_DYNAMODB_ACCESS_KEY_ID | Your AWS DynamoDB access key ID. Refer to "Obtaining AWS Credentials Securely" to obtain this value. | `JKSOKJSDO` (fake) |
 | AWS_DYNAMODB_SECRET_ACCESS_KEY | Your AWS DynamoDB secret access key. Refer to "Obtaining AWS Credentials Securely" to obtain this value.  | `sb0lasoiwkdouwedfes` (fake) |
 | AWS_DEFAULT_REGION | The default AWS region your application will use | `us-east1` |
-| BACKEND_URL | The URL of your backend API | `localhost:3000/api` |
 | ADMIN_USERNAME | The admin username | `[email protected]` (fake) |
 | ADMIN_PASSWORD | The admin password | `randOMPassWordForMUN&283` (fake) |
 | JWT_SECRET | A secret key used for generating JSON Web Tokens (JWTs) for authentication. | `okmasfq;eiuidf` (fake) |

site/app/applicants/page.jsx

@@ -4,6 +4,7 @@ import Dashboard from "./Dashboard";
 import Link from "next/link";
 import "./DashboardPage.css";
 import { invoiceStatusToString } from "@/app/utils/applicantUtils";
+import ErrorPage from "../components/ErrorPage";
 
 /**
  * Page displays some metrics on our current applicants including total number of participants, 
@@ -64,11 +65,6 @@ export default async function DashboardPage() {
 
     }
     catch (e) {
-        return (
-            <main className="container">
-                <h1>Error: {e.name}</h1>
-                <p>{e.message}</p>
-            </main>
-        )
+        return <ErrorPage e={e} />
     }
 }

site/app/components/ErrorPage.jsx

@@ -0,0 +1,16 @@
+
+/**
+ * 
+ * @param {Error} e
+ * @property {string} name - name of error
+ * @property {string} message - error message
+ * @returns {JSX.Element} a pretty error page
+ */
+export default function ErrorPage(e) {
+    return (
+        <div className="container">
+            <h1>Error: {e.name}</h1>
+            <p>{e.message}</p>
+        </div>
+    )
+}

site/app/register/RegisterForm.jsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { isValidEmail } from '../utils/validation';
+import { getApplicantErrors } from '../utils/applicantUtils';
 
 export default function RegisterForm() {
 
@@ -64,33 +64,20 @@ export default function RegisterForm() {
     }
 
     function validateForm() {
-        const newErrors = {};
-
-        if (!formData.advisorEmail) newErrors.advisorEmail = "Advisor Email is required";
-        if (!isValidEmail(formData.advisorEmail)) newErrors.advisorEmail = "Advisor Email is invalid";
-        if (!formData.advisorName) newErrors.advisorName = 'Advisor Name is required';
-        if (!formData.advisorPhone) newErrors.advisorPhone = 'Advisor Phone is required';
-        if (!formData.advisorRelation) newErrors.advisorRelation = "Advisor Relation is required";
-
-        if (!formData.schoolName) newErrors.schoolName = 'School Name is required';
-        if (formData.delegationSize <= 0) newErrors.delegationSize = 'Delegation Size is required';
-        if (!formData.schoolMailingAddress) newErrors.schoolMailingAddress = 'School Mailing Address is required';
-        if (!formData.isAgreeWithTerms) newErrors.isAgreeWithTerms = 'You must agree to the terms';
+        const newErrors = getApplicantErrors(formData);
 
         setErrors(newErrors);
-        console.log(newErrors);
         return Object.keys(newErrors).length === 0;
     }
 
     async function handleSubmit(e) {
         e.preventDefault();
 
-        const URL = `${process.env.BACKEND_URL}/applicants`;
+        const URL = `/api/applicants`;
 
         if (!validateForm()) return;
 
         try {
-            // Fetch data
             const response = await fetch(URL, {
                 method: "POST",
                 mode: "cors",
@@ -101,9 +88,9 @@ export default function RegisterForm() {
             });
 
             if (response.status === 200) {
-                router.push("/register-success");
+                router.push("/register/success");
             } else {
-                router.push("/register-server-failure");
+                console.error(response);
             }
         } catch (error) {
             console.error("There was an error submitting the form!", error);

site/app/register/success/page.jsx

@@ -0,0 +1,11 @@
+
+export default function RegisterSuccess() {
+    return (
+        <main class="Container">
+            <h1>Thank you for registering for VTMUNC!</h1>
+            <p>
+                We will begin processing your data as soon as possible. 
+            </p>
+        </main>
+    )
+}

site/app/utils/applicantUtils.js

@@ -1,3 +1,69 @@
+import { isValidEmail } from '../utils/validation';
+
+/**
+ * Finds if applicant is valid
+ * 
+ * @typedef {Object} Applicant
+ * @property {string} advisorPhone - Phone number of the advisor.
+ * @property {int} delegationSize - Size of the delegation.
+ * @property {string} headDelegateName - Name of the head delegate.
+ * @property {string} schoolName - Name of the school.
+ * @property {string} advisorOtherInformation - Additional information about the advisor.
+ * @property {string} commentsOrQuestions - Comments or questions from the applicant.
+ * @property {string} advisorEmail - Email address of the advisor.
+ * @property {string} advisorRelation - Relation of the advisor to the applicant.
+ * @property {string} schoolMailingAddress - Mailing address of the school.
+ * @property {string} headDelegateEmail - Email address of the head delegate.
+ * @property {string} headDelegatePhone - Phone number of the head delegate.
+ * @property {string} advisorName - Name of the advisor.
+ * @property {string} delegateList - List of delegates. Each delegate is represented as an object.
+ * @property {int} invoiceStatus - Status of the invoice.
+ * 
+ * @param {Applicant} applicant - applicant to be checked
+ * @returns {bool} if applicant is valid
+ */
+export function isApplicantValid(applicant) {
+    return Object.keys(findApplicantErrors(applicant)).length === 0;
+}
+
+/**
+ * Finds if exact errors applicant has
+ * 
+ * @typedef {Object} Applicant
+ * @property {string} advisorPhone - Phone number of the advisor.
+ * @property {int} delegationSize - Size of the delegation.
+ * @property {string} headDelegateName - Name of the head delegate.
+ * @property {string} schoolName - Name of the school.
+ * @property {string} advisorOtherInformation - Additional information about the advisor.
+ * @property {string} commentsOrQuestions - Comments or questions from the applicant.
+ * @property {string} advisorEmail - Email address of the advisor.
+ * @property {string} advisorRelation - Relation of the advisor to the applicant.
+ * @property {string} schoolMailingAddress - Mailing address of the school.
+ * @property {string} headDelegateEmail - Email address of the head delegate.
+ * @property {string} headDelegatePhone - Phone number of the head delegate.
+ * @property {string} advisorName - Name of the advisor.
+ * @property {string} delegateList - List of delegates. Each delegate is represented as an object.
+ * @property {int} invoiceStatus - Status of the invoice.
+ * @returns {bool} if applicant is valid
+ * 
+ * @param {Applicant} applicant - applicant to be checked
+ * @returns {Object} errors of applicant
+ */
+export function getApplicantErrors(applicant) {
+    const newErrors = {};
+
+    if (!applicant.advisorEmail) newErrors.advisorEmail = "Advisor Email is required";
+    if (!isValidEmail(applicant.advisorEmail)) newErrors.advisorEmail = "Advisor Email is invalid";
+    if (!applicant.advisorName) newErrors.advisorName = 'Advisor Name is required';
+    if (!applicant.advisorPhone) newErrors.advisorPhone = 'Advisor Phone is required';
+    if (!applicant.advisorRelation) newErrors.advisorRelation = "Advisor Relation is required";
+
+    if (!applicant.schoolName) newErrors.schoolName = 'School Name is required';
+    if (applicant.delegationSize <= 0) newErrors.delegationSize = 'Delegation Size is required';
+    if (!applicant.schoolMailingAddress) newErrors.schoolMailingAddress = 'School Mailing Address is required';
+    if (!applicant.isAgreeWithTerms) newErrors.isAgreeWithTerms = 'You must agree to the terms';
+    return newErrors;
+}
 
 /**
  * Different categories of invoices
@@ -14,4 +80,5 @@ export function invoiceStatusToString(number) {
         return "Invalid Invoice Status";
     }
     return invoiceStatusCategories[number];
-}
+}
+