apple login initialization

.env

@@ -44,7 +44,16 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
 REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
 REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
+
+REACT_APP_APPLE_CLIENT_ID='com.wrenchboard.users.client'
+REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
+
+
+# /* 'client_id' => */ 'com.wrenchboard.users.client',
+# /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
+# /* 'redirect_uri' => */ site_url('login/auth/apple')
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

src/Routers.jsx

@@ -48,6 +48,7 @@ import ManageInterestOfferPage from './views/ManageInterestOfferPage'
 import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
 import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";
 
 export default function Routers() {
   return (
@@ -58,6 +59,7 @@ export default function Routers() {
         <Route exact path="/signup" element={<SignupPage />} />
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
+        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
         <Route
           exact
           path="/forgot-password"

src/components/AuthPages/AuthRedirect/AppleRedirect.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function AppleRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+
+      setTimeout(()=>{ // remove LATER
+        navigate('/login', {state: {error: true}})
+      },2000)
+      
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "APPLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+    //   userApi
+    //     .authStart(reqData)
+    //     .then((res) => {
+    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+    //         localStorage.setItem("member_id", `${res.data.member_id}`);
+    //         localStorage.setItem("uid", `${res.data.uid}`);
+    //         localStorage.setItem("session_token", `${res.data.session}`);
+    //         dispatch(updateUserDetails({...res.data}));
+    //         navigate('/', {replace: true})
+    //         return
+    //       }
+    //       navigate('/login', {state: {error: true}})
+    //     })
+    //     .catch((error) => {
+    //       navigate('/login', {state: {error: true}})
+    //       console.log(error);
+    //     });
+    },[])
+  return (
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
+  )
+}
+
+export default AppleRedirect

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -37,7 +37,7 @@ function FbookRedirect() {
       grant_type=authorization_code
       */
       var reqData = {
-        auth_type: "GOOGLE",
+        auth_type: "FACEBOOK",
         code: codeResponse,
         redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
       };

src/components/AuthPages/Login/index.jsx

@@ -328,7 +328,8 @@ export default function Login() {
                         onClick={googleLogin}
                       />
                       <BrandBtn 
-                        // link="https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=com.wrenchboard.users.client&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email" 
+                        // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`} 
+                        link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`} 
                         imgSrc={appleLogo} 
                         brand="Apple" 
                         isAnchor={true}
@@ -336,7 +337,7 @@ export default function Login() {
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
                       <BrandBtn
-                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${'1287693041832191'}&redirect_uri=http://localhost:9082/login/auth/flogin&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
                         imgSrc={facebookLogo}
                         brand="Facebook"
                         isAnchor={true}

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -214,28 +214,28 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
-              <div className="mt-4 flex justify-center items-center gap-2">
+              <div className="mt-4 flex justify-start items-center gap-2">
                 <button
                   onClick={() => tabHandler("Account")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/account.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                  <p className="text-lg text-sky-blue">Acc.</p>
                 </button>
                 <button
                   onClick={() => tabHandler("Profile")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/profile.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                  <p className="text-lg text-sky-blue">Profile</p>
                 </button>
               </div>
             </div>

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -8,13 +8,13 @@ export default function ProfileInfo({
   accountDetails,
 }) {
   return (
-    <div className="flex flex-col items-center gap-6">
+    <div className="flex flex-col items-center gap-4">
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
             src={profileImg}
             alt=""
-            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+            className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />
           <input
             ref={profileImgInput}

src/components/MyWallet/AddFundPop.jsx

@@ -72,11 +72,9 @@ function AddFundPop({ _payment }) {
                 )}
               </div>
             </form>
-            {currency == "US Dollars" && (
+            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-              <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4">
+              {currency == "US Dollars" && "Payment Method"}
-                Payment Method
+            </h1>
-              </h1>
-            )}
             <hr />
 
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}

src/views/AppleRedirectPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import AppleRedirect from '../components/AuthPages/AuthRedirect/AppleRedirect'
+
+function AppleRedirectPage() {
+  return (
+    <>
+      <AppleRedirect />
+    </>
+  )
+}
+
+export default AppleRedirectPage