chore(frontend): changed source code to src folder from root

2026-10-11 07:28:51 +00:00 · 2023-01-16 00:34:22 +05:30
parent c563548a1c
commit 63e9d83ba4
193 changed files with 280 additions and 33 deletions
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+
+import sendVerificationEmail from "~/pages/api/auth/SendVerificationEmail";
+
+import Button from "../basic/buttons/Button";
+import InputField from "../basic/InputField";
+
+
+interface DownloadBackupPDFStepProps {
+  incrementStep: () => void;
+  email: string; 
+  setEmail: (value: string) => void;
+}
+
+/**
+ * This is the first step of the sign up process - users need to enter their email
+ * @param {object} obj 
+ * @param {string} obj.email - email of a user signing up
+ * @param {function} obj.setEmail - funciton that manages the state of the email variable
+ * @param {function} obj.incrementStep - function to go to the next step of the signup flow
+ * @returns 
+ */
+export default function EnterEmailStep({ email, setEmail, incrementStep }: DownloadBackupPDFStepProps): JSX.Element {
+  const [emailError, setEmailError] = useState(false);
+  const [emailErrorMessage, setEmailErrorMessage] = useState("");
+  const { t } = useTranslation();
+
+  /**
+   * Verifies if the entered email "looks" correct
+   */
+  const emailCheck = () => {
+    let emailCheckBool = false;
+    if (!email) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter your email.");
+      emailCheckBool = true;
+    } else if (
+      !email.includes("@") ||
+      !email.includes(".") ||
+      !/[a-z]/.test(email)
+    ) {
+      setEmailError(true);
+      setEmailErrorMessage("Please enter a valid email.");
+      emailCheckBool = true;
+    } else {
+      setEmailError(false);
+    }
+
+    // If everything is correct, go to the next step
+    if (!emailCheckBool) {
+      sendVerificationEmail(email);
+      incrementStep();
+    }
+  };
+
+  return (
+    <div>
+      <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-8 md:px-6 mx-1 rounded-xl drop-shadow-xl">
+        <p className="text-4xl font-semibold flex justify-center text-primary">
+          {t("signup:step1-start")}
+        </p>
+        <div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
+          <InputField
+            label={t("common:email") ?? ""}
+            onChangeHandler={setEmail}
+            type="email"
+            value={email}
+            placeholder=""
+            isRequired
+            error={emailError}
+            errorText={emailErrorMessage}
+            autoComplete="username"
+          />
+        </div>
+        <div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
+          <p className="text-gray-400 mt-2 md:mx-0.5">
+            {t("signup:step1-privacy")}
+          </p>
+          <div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
+            <Button text={t("signup:step1-submit") ?? ""} type="submit" onButtonPressed={emailCheck} size="lg" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
+        <Link href="/login">
+          <button type="button" className="w-max pb-3 hover:opacity-90 duration-200">
+            <u className="font-normal text-sm text-primary-500">
+              {t("signup:already-have-account")}
+            </u>
+          </button>
+        </Link>
+      </div>
+    </div>
+  );
+}