Add Google Auth, Profile New Pic Set, styling done a bit

Martial-Geek · Sep 8, 2023 · 43eaf72 · 43eaf72
1 parent 5410cff
commit 43eaf72
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 38 deletions.
diff --git a/app/api/auth/[...nextauth]/route.js b/app/api/auth/[...nextauth]/route.js
@@ -1,11 +1,17 @@
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
+import GoogleProvider from "next-auth/providers/google";
 import Detail from "@models/details";
 import { connectToDB } from "@utils/database.js";
 import bcrypt from "bcrypt";
 
 const handler = NextAuth({
   providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+      prompt: "select_account",
+    }),
     CredentialsProvider({
       name: "Credentials",
       authorize: async (credentials) => {
@@ -57,6 +63,30 @@ const handler = NextAuth({
 
       return session;
     },
+    async signIn({ profile, user, credentials }) {
+      try {
+        await connectToDB();
+
+        if (profile) {
+          // check if user already exists
+          const userExists = await Detail.findOne({ email: profile.email });
+
+          // if not, create a new document and save user in MongoDB
+          if (!userExists) {
+            await Detail.create({
+              email: profile.email,
+              name: profile.name,
+            });
+          }
+          return true;
+        }
+
+        if (credentials) return true;
+      } catch (error) {
+        console.log("Error checking if user exists: ", error.message);
+        return false;
+      }
+    },
   },
 });
 

diff --git a/app/api/auth/register/route.js b/app/api/auth/register/route.js
@@ -6,7 +6,17 @@ import bcrypt from "bcrypt";
 export const POST = async (request) => {
   await connectToDB();
   const data = await request.json();
-  console.log(data);
+  if (!data.password || !data.name || !data.phone) {
+    return new Response(
+      JSON.stringify({ message: "Password/Name/Phone field is required" }),
+      {
+        status: 400,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
   try {
     const isPresent = Detail.findOne({ email: data.email });
     if (isPresent) {

diff --git a/app/page.jsx b/app/page.jsx
@@ -3,18 +3,18 @@ import RegisterForm from "@components/RegisterForm";
 
 const Home = () => {
   return (
-    <section className="w-full flex-center flex-col">
+    <section className="w-full flex-center flex-col pb-9 px-7 sm:px-0">
       <h1 className="head_text text-center">
-        <span className="blue_gradient">Welcome to </span>
+        <span className="blue_gradient text-7xl">Welcome to </span>
         <br className="sm:hidden" />
-        <span className="green_gradient">Linkyfy</span>
+        <span className="green_gradient text-7xl">Linkyfy</span>
       </h1>
       <br className="max-md:hidden" />
-      <span className="orange_gradient text-4xl sm:text-7xl text-center my-5">
+      <span className="orange_gradient text-3xl sm:text-5xl text-center font-semibold mt-7 sm:mt-0">
         Connect to professionals
       </span>
 
-      <p className="desc text-center font-semibold px-4">
+      <p className="font-satoshi text-slate-600 sm:text-lg text-md text-center font-semibold px-9 my-5">
         Linkyfy is a place where you can customize your resume and connect with
         other professionals
       </p>

diff --git a/components/PersonalInfo.jsx b/components/PersonalInfo.jsx
@@ -15,12 +15,18 @@ const PersonalInfo = () => {
       <p className="text-lg text-slate-600 ml-3 my-3 font-satoshi">
         {session?.user.email}
       </p>
-      <span className="text-xl ml-2 mt-2 font-satoshi font-semibold">
-        Phone Number
-      </span>
-      <p className="text-lg text-slate-600 ml-3 my-3 font-satoshi">
-        {session?.user.phone}
-      </p>
+      {session?.user.phone ? (
+        <>
+          <span className="text-xl ml-2 mt-2 font-satoshi font-semibold">
+            Phone Number
+          </span>
+          <p className="text-lg text-slate-600 ml-3 my-3 font-satoshi">
+            {session?.user.phone}
+          </p>
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

diff --git a/components/ProfilePic.jsx b/components/ProfilePic.jsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import Cropper from "cropperjs";
 import Image from "next/image";
 import storage from "../firebaseConfig";
 import { useState, useEffect } from "react";
@@ -37,13 +38,15 @@ const ProfilePic = () => {
     const imgParentRef = ref(storage, `Oruphones/images/${email}`);
     listAll(imgParentRef).then((res) => {
       const imgRef = res.items[0];
-      deleteObject(imgRef)
-        .then(() => {
-          console.log("File deleted Successfully");
-        })
-        .catch((error) => {
-          console.error(error);
-        });
+      if (imgRef) {
+        deleteObject(imgRef)
+          .then(() => {
+            console.log("File deleted Successfully");
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+      }
     });
 
     const imageRef = ref(storage, `Oruphones/images/${email}/${file.name}`);

diff --git a/components/RegisterForm.jsx b/components/RegisterForm.jsx
@@ -2,11 +2,13 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { getProviders, signIn } from "next-auth/react";
 import Link from "next/link";
 
-function RegisterForm({ onChange, onSubmit }) {
+function RegisterForm() {
   const router = useRouter();
   const { data: session } = useSession();
+  const [providers, setProviders] = useState(null);
   const [formData, setFormData] = useState({
     name: "",
     phone: "",
@@ -20,6 +22,13 @@ function RegisterForm({ onChange, onSubmit }) {
     }
   }, [session, router]);
 
+  useEffect(() => {
+    (async () => {
+      const res = await getProviders();
+      setProviders(res);
+    })();
+  }, []);
+
   const handleChange = async (e) => {
     setFormData((prevData) => ({
       ...prevData,
@@ -44,6 +53,9 @@ function RegisterForm({ onChange, onSubmit }) {
       } else if (response.status === 302) {
         const data = await response.json();
         router.push(`/signin?message=${data.message}`);
+      } else if (response.status === 400) {
+        const data = await response.json();
+        alert(data.message);
       } else {
         console.log("Register request unsuccessful");
       }
@@ -53,9 +65,9 @@ function RegisterForm({ onChange, onSubmit }) {
   };
 
   return (
-    <div>
+    <div className="flex">
       {!session && (
-        <form className="mt-10 w-full max-w-3xl flex flex-col gap-7 glassmorphism">
+        <form className="mt-10 w-96 flex flex-col gap-5 glassmorphism">
           <label>
             <span className="font-satoshi font-semibold text-base text-gray-700">
               Name
@@ -69,7 +81,6 @@ function RegisterForm({ onChange, onSubmit }) {
               value={formData.name}
             />
           </label>
-
           <label>
             <span className="font-satoshi font-semibold text-base text-gray-700">
               Phone Number
@@ -83,7 +94,6 @@ function RegisterForm({ onChange, onSubmit }) {
               value={formData.phone}
             />
           </label>
-
           <label>
             <span className="font-satoshi font-semibold text-base text-gray-700">
               Email/Username
@@ -97,7 +107,6 @@ function RegisterForm({ onChange, onSubmit }) {
               value={formData.email}
             />
           </label>
-
           <label>
             <span className="font-satoshi font-semibold text-base text-gray-700">
               Password
@@ -111,23 +120,38 @@ function RegisterForm({ onChange, onSubmit }) {
               value={formData.password}
             />
           </label>
-
           <button
             type="submit"
-            className="px-5 py-1.5 text-sm bg-primary-orange rounded-full text-white"
+            className="px-5 py-1.5 w-full mx-auto text-sm bg-primary-orange rounded-full text-white"
             onClick={handleRegister}
           >
             Register
           </button>
-          <p className="space-x-2">
-            <span className="font-satoshi text-sm">Already a user?</span>{" "}
-            <Link
-              href="/signin"
-              className="w-full bg-blue-400 rounded-xl text-white text-sm px-2 py-1"
-            >
-              Sign In
+          <hr />
+          <span className="font-satoshi text-sm text-slate-600 mx-auto my-auto">
+            Already a user?
+          </span>
+          {providers &&
+            Object.values(providers)
+              .filter((provider) => provider.name !== "Credentials")
+              .map((provider) => (
+                <button
+                  type="button"
+                  key={provider.name}
+                  onClick={() => {
+                    signIn(provider.id);
+                  }}
+                  className="black_btn space-x-4"
+                >
+                  <img src="/google-logo.svg" alt="lol" />
+                  <div>Sign in with {provider.name}</div>
+                </button>
+              ))}
+          <span>
+            <Link href="/signin" className="black_btn">
+              Sign In with Credentials
             </Link>
-          </p>
+          </span>
         </form>
       )}
     </div>

diff --git a/models/details.js b/models/details.js
@@ -3,7 +3,6 @@ import { Schema, model, models } from "mongoose";
 const DetailSchema = new Schema({
   name: {
     type: String,
-    required: [true, "Name is required."],
   },
   email: {
     type: String,
@@ -12,12 +11,10 @@ const DetailSchema = new Schema({
   },
   phone: {
     type: String,
-    required: [true, "Phone Number is required"],
     match: [/^[6-9]\d{9}$/, "Phone Number should be 10 digits long"],
   },
   password: {
     type: String,
-    required: [true, "Phone Number is required"],
   },
   connections: [
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
     "bcrypt": "^5.1.1",
+    "cropperjs": "^1.6.0",
     "encoding": "^0.1.13",
     "firebase": "^10.3.0",
     "form-data": "^4.0.0",

diff --git a/public/google-logo.svg b/public/google-logo.svg