Add login with Linkedin option to the UI (#146)

sef-global · Jul 26, 2024 · 88ec315 · 88ec315
1 parent e39bf16
commit 88ec315
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 8 deletions.
diff --git a/src/assets/svg/Icons/GoogleColorIcon.tsx b/src/assets/svg/Icons/GoogleColorIcon.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+const GoogleColorIcon: React.FC = () => {
+  return (
+    <div>
+      <svg
+        width="1rem"
+        height="1rem"
+        viewBox="0 0 48 48"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Google-color</title>
+        <desc>Created with Sketch.</desc>
+        <defs></defs>
+        <g
+          id="Icons"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g id="Color-" transform="translate(-401.000000, -860.000000)">
+            <g id="Google" transform="translate(401.000000, 860.000000)">
+              <path
+                d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24"
+                id="Fill-1"
+                fill="#FBBC05"
+              ></path>
+              <path
+                d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333"
+                id="Fill-2"
+                fill="#EB4335"
+              ></path>
+              <path
+                d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667"
+                id="Fill-3"
+                fill="#34A853"
+              ></path>
+              <path
+                d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24"
+                id="Fill-4"
+                fill="#4285F4"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default GoogleColorIcon;
diff --git a/src/assets/svg/Icons/LinkedInColorIcon.tsx b/src/assets/svg/Icons/LinkedInColorIcon.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const LinkedinColorIcon: React.FC = () => {
+  return (
+    <div>
+      <svg
+        width="1rem"
+        height="1rem"
+        viewBox="0 0 48 48"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>LinkedIn-color</title>
+        <desc>Created with Sketch.</desc>
+        <defs></defs>
+        <g
+          id="Icons"
+          stroke="none"
+          strokeWidth="1"
+          fill="none"
+          fillRule="evenodd"
+        >
+          <g
+            id="Color-"
+            transform="translate(-702.000000, -265.000000)"
+            fill="#007EBB"
+          >
+            <path
+              d="M746,305 L736.2754,305 L736.2754,290.9384 C736.2754,287.257796 734.754233,284.74515 731.409219,284.74515 C728.850659,284.74515 727.427799,286.440738 726.765522,288.074854 C726.517168,288.661395 726.555974,289.478453 726.555974,290.295511 L726.555974,305 L716.921919,305 C716.921919,305 717.046096,280.091247 716.921919,277.827047 L726.555974,277.827047 L726.555974,282.091631 C727.125118,280.226996 730.203669,277.565794 735.116416,277.565794 C741.21143,277.565794 746,281.474355 746,289.890824 L746,305 L746,305 Z M707.17921,274.428187 L707.117121,274.428187 C704.0127,274.428187 702,272.350964 702,269.717936 C702,267.033681 704.072201,265 707.238711,265 C710.402634,265 712.348071,267.028559 712.41016,269.710252 C712.41016,272.34328 710.402634,274.428187 707.17921,274.428187 L707.17921,274.428187 L707.17921,274.428187 Z M703.109831,277.827047 L711.685795,277.827047 L711.685795,305 L703.109831,305 L703.109831,277.827047 L703.109831,277.827047 Z"
+              id="LinkedIn"
+            ></path>
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default LinkedinColorIcon;
diff --git a/src/components/Layout/Navbar/index.tsx b/src/components/Layout/Navbar/index.tsx
@@ -76,7 +76,7 @@ const Navbar: React.FC = () => {
   }, []);
 
   return (
-    <div className="fixed top-0 start-0 flex justify-between w-full">
+    <div className="fixed top-0 start-0 flex justify-between w-full z-20">
       <nav className="bg-white border-gray-200 container mx-auto">
         <div className="flex flex-wrap items-center justify-between p-4">
           <Link to="/">

diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
@@ -4,6 +4,7 @@ import { API_URL } from '../../constants';
 import closeIcon from '../../assets/svg/closeIcon.svg';
 import useProfile from '../../hooks/useProfile';
 import GoogleLoginButton from '../OAuth/Google';
+import LinkedInLoginButton from '../OAuth/LinkedIn';
 
 interface LoginModalProps {
   handleClose: () => void;
@@ -143,6 +144,7 @@ const LoginModal: React.FC<LoginModalProps> = ({
                 </button>
                 <p className="text-red-600 text-center">{error}</p>
                 <GoogleLoginButton />
+                <LinkedInLoginButton />
                 <div className="text-sm font-thin text-center text-gray-900">
                   Not registered yet?
                   <p

diff --git a/src/components/OAuth/Google.tsx b/src/components/OAuth/Google.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { API_URL } from '../../constants';
+import GoogleColorIcon from '../../assets/svg/Icons/GoogleColorIcon';
 
 const handleLoginGoogle = (e: React.FormEvent): void => {
   e.preventDefault();
@@ -15,14 +16,9 @@ const GoogleLoginButton = () => {
       <div className="m-0 items-center flex justify-center">
         <button
           onClick={handleLoginGoogle}
-          className="px-10 py-1.5 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-700 dark:text-black hover:border-gray-400 daDon't have an account? Sign Uprk:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-300 hover:shadow transition duration-150 flex items-center gap-2"
+          className="pl-9 pr-11 py-1.5 border border-gray-300 dark:border-gray-400 rounded-lg text-sm text-gray-700 dark:text-black hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-300 hover:shadow transition duration-150 flex items-center gap-2"
         >
-          <img
-            className="w-4 h-4"
-            src="https://www.svgrepo.com/show/475656/google-color.svg"
-            loading="lazy"
-            alt="google logo"
-          />
+          <GoogleColorIcon />
           <span>Continue with Google</span>
         </button>
       </div>

diff --git a/src/components/OAuth/LinkedIn.tsx b/src/components/OAuth/LinkedIn.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { API_URL } from '../../constants';
+import LinkedinColorIcon from '../../assets/svg/Icons/LinkedInColorIcon';
+
+const handleLoginLinkedIn = (e: React.FormEvent): void => {
+  e.preventDefault();
+  window.location.href = `${API_URL}/auth/linkedin`;
+};
+
+const LinkedInLoginButton = () => {
+  return (
+    <>
+      <div className="m-0 items-center flex justify-center">
+        <button
+          onClick={handleLoginLinkedIn}
+          className="px-9 py-1.5 border border-gray-300 dark:border-gray-400 rounded-lg text-sm text-gray-700 dark:text-black hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-300 hover:shadow transition duration-150 flex items-center gap-2"
+        >
+          <LinkedinColorIcon />
+          <span>Continue with LinkedIn</span>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default LinkedInLoginButton;
diff --git a/src/components/RegisterModal/index.tsx b/src/components/RegisterModal/index.tsx
@@ -4,6 +4,7 @@ import { API_URL } from '../../constants';
 import closeIcon from '../../assets/svg/closeIcon.svg';
 import GoogleLoginButton from '../OAuth/Google';
 import useProfile from '../../hooks/useProfile';
+import LinkedInLoginButton from '../OAuth/LinkedIn';
 
 interface RegisterModalProps {
   handleClose: () => void;
@@ -185,6 +186,7 @@ const RegisterModal: React.FC<RegisterModalProps> = ({
                   Register
                 </button>
                 <GoogleLoginButton />
+                <LinkedInLoginButton />
                 <div className="text-sm font-thin text-center text-gray-900">
                   Already have an account?
                   <p