WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

facebook login initiated

Browse Source
This commit was merged in pull request #290.
This commit is contained in:
victorAnumudu
2023-07-11 07:56:45 +01:00
parent 6c29f37a60
commit 960579384c
4 changed files with 128 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/Login/index.jsx
+44 -21
View File
@@ -321,25 +321,32 @@ export default function Login() {
</button>
</div>
<div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
<BrandBtn
link="#"
imgSrc={googleLogo}
brand="Google"
onClick={googleLogin}
/>
<BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
<BrandBtn
link="#"
imgSrc={googleLogo}
brand="Google"
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"
imgSrc={appleLogo}
brand="Apple"
isAnchor={true}
/>
</div>
<div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
<BrandBtn
link="#"
imgSrc={facebookLogo}
brand="Facebook"
/>
<BrandBtn
link="#"
imgSrc={linkedInLogo}
brand="LinkedIn"
/>
<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}`}
imgSrc={facebookLogo}
brand="Facebook"
isAnchor={true}
/>
<BrandBtn
// link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
imgSrc={linkedInLogo}
brand="LinkedIn"
isAnchor={true}
/>
</div>
</div>
</div>
@@ -427,7 +434,7 @@ export default function Login() {
);
}
const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => {
// const doGoogle = async () => {
// alert("start google");
// };
@@ -446,10 +453,23 @@ const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
// const doFacebook = async () => {
// alert("start facebook");
// };
return (
<div className="w-full sm:w-1/2 flex justify-center bottomMargin">
<button
{isAnchor ?
(
<a
href={link}
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer"
>
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
<span className="text-lg text-thin-light-gray font-normal text-[15px]">
Continue with {brand}
</span>
</a>
)
:
(
<button
onClick={onClick}
// href="#dd"
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer"
@@ -459,6 +479,9 @@ const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
Continue with {brand}
</span>
</button>
)
}
</div>
);
)
};