feat: auth migrated

G-Techs · Dec 28, 2022 · 5073435 · 5073435
1 parent 4bfb92d
commit 5073435
Show file tree

Hide file tree

Showing 8 changed files with 207 additions and 185 deletions.
diff --git a/components/Auth/ConfirmEmail/index.jsx b/components/Auth/ConfirmEmail/index.jsx
diff --git a/components/Auth/ConfirmEmail/index.tsx b/components/Auth/ConfirmEmail/index.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+const ConfirmEmail = () => {
+  return (
+    <div className="auth h-screen">
+      <div className="flex justify-center items-center w-full h-full">
+        <div className="lg:min-w-[50%] lg:max-w-[900px] px-5 w-full bg-opacity-10 border mx-2 border-gray-800 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
+          <div className="w-full -mt-12 flex justify-center">
+            <div className="lg:w-[8rem] w-[6rem] ring-2 ring-primary rounded-full overflow-hidden">
+              <img
+                alt="Pic"
+                src="https://templates.iqonic.design/muzik/html/images/login/user.png"
+              />
+            </div>
+          </div>
+          <div>
+            <div className="lg:w-full">
+              <img
+                src="https://templates.iqonic.design/muzik/html/images/login/mail.png"
+                alt="email"
+              />
+            </div>
+          </div>
+          <div className="mt-6 text-gray-200">
+            <p className="md:text-7xl text-3xl">Success !</p>
+            <p className="md:text-xl text-md">
+              A email has been send to [email protected]. Please check for an
+              email from company and click on the included link to reset your
+              password.
+            </p>
+          </div>
+          <button className="mt-6 text-lg text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
+            back to Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmEmail;
diff --git a/components/Auth/LoginPage/index.jsx b/components/Auth/LoginPage/index.jsx
diff --git a/components/Auth/LoginPage/index.tsx b/components/Auth/LoginPage/index.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const LoginPage = () => {
+  const router = useRouter();
+  return (
+    <div className="flex items-center h-full">
+      <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
+        <div>
+          <h1 className="text-3xl text-center">Yokaa</h1>
+          <h1 className="text-4xl font-bold text-center pt-3">Log In</h1>
+        </div>
+        <div>
+          <form className="flex flex-col">
+            <div className="flex flex-col py-2">
+              <label htmlFor="email" className="py-2">
+                Email address
+              </label>
+              <input
+                type="email"
+                name="email"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="password" className="py-2">
+                Password
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+          </form>
+        </div>
+        <div className="flex justify-start w-[-webkit-fill-available] py-2">
+          You don't have an account ?
+          <span
+            className="text-primary text-left px-2 cursor-pointer"
+            onClick={() => router.push("/signup")}
+          >
+            Sign up
+          </span>
+        </div>
+        <button className="bg-primary hover:bg-opacity-80 transition-all w-full py-3 mt-3 rounded-lg text-white">
+          Log in
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/components/Auth/ResetPassword/index.jsx b/components/Auth/ResetPassword/index.jsx
diff --git a/components/Auth/ResetPassword/index.tsx b/components/Auth/ResetPassword/index.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+const ResetPassword = () => {
+  return (
+    <div className="auth h-screen">
+      <div className="flex justify-center items-center w-full h-full">
+        <div className="lg:max-w-[40%] px-6 w-full bg-opacity-10 border border-gray-700 rounded-md backdrop-filter backdrop-blur-lg bg-gray-200 pb-8">
+          <div className="w-full -mt-12 flex justify-center">
+            <div className="w-[8rem] ring-2 ring-primary rounded-full overflow-hidden">
+              <img
+                alt="Pic"
+                src={
+                  "https://templates.iqonic.design/muzik/html/images/login/user.png"
+                }
+              />
+            </div>
+          </div>
+          <div className="mt-6">
+            <p className=" text-gray-200 lg:text-7xl text-3xl">
+              Reset password
+            </p>
+            <p className="mt-6 md:text-xl text-md text-gray-100">
+              Enter your email address and we'll send you an email with
+              instructions to reset your password{" "}
+            </p>
+            <form className="flex flex-col mt-3">
+              <label className="text-gray-300 font-bold my-2">Password</label>
+              <input
+                type="email"
+                required
+                placeholder="Enter email"
+                className="p-3 bg-transparent border-2 rounded-lg "
+              />
+            </form>
+          </div>
+          <button className="mt-6 text-lg  text-gray-200 bg-primary rounded-lg p-4 shadow-lg w-full">
+            Reset password
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;
diff --git a/components/Auth/SignupPage/index.jsx b/components/Auth/SignupPage/index.jsx
diff --git a/components/Auth/SignupPage/index.tsx b/components/Auth/SignupPage/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const SignupPage = () => {
+  const router = useRouter();
+  return (
+    <div className="flex items-center h-full">
+      <div className="flex flex-col items-center h-fit w-fit m-auto px-10 mobilexs:px-2 mobilexs:py-2 transition-all rounded-md mobile:px-5 mobile:py-5 py-10 backdrop-blur-2xl bg-white bg-opacity-10 text-white">
+        <div>
+          <h1 className="text-3xl text-center">Yokaa</h1>
+          <h1 className="text-4xl font-bold text-center pt-3">Sign Up</h1>
+        </div>
+        <div>
+          <form className="flex flex-col">
+            <div className="flex flex-col py-2">
+              <label htmlFor="name" className="py-2">
+                Your Full Name
+              </label>
+              <input
+                type="text"
+                name="name"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80 mobilexs:w-72 transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="email" className="py-2">
+                Email address
+              </label>
+              <input
+                type="email"
+                name="email"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+            <div className="flex flex-col py-2">
+              <label htmlFor="password" className="py-2">
+                Password
+              </label>
+              <input
+                type="password"
+                name="password"
+                className="bg-transparent border border-white px-3 w-[500px] mobile:w-96 mobilesm:w-80  mobilexs:w-72  transition-all py-2 rounded-md outline-none"
+              />
+            </div>
+          </form>
+        </div>
+        <div className="flex justify-between w-[-webkit-fill-available] py-5 accent-primary">
+          <div>
+            <input type="checkbox" className="rounded-md " />
+            <label className="px-2">
+              I accpet
+              <span className="text-primary px-2">Terms and Conditions</span>
+            </label>
+          </div>
+          <p onClick={() => router.push("/login")} className="cursor-pointer">
+            Log In
+          </p>
+        </div>
+        <button className="bg-primary w-full py-3 mt-3 rounded-lg text-white hover:bg-opacity-80 transition-all">
+          Sign up
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SignupPage;