Arik Chakma
2 years ago
parent
8d923c4135
commit
e1f6ac68f9
10 changed files with 186 additions and 204 deletions
@ -0,0 +1,5 @@ |
|||||||
|
<div class='flex w-full items-center gap-2 py-6 text-sm text-slate-600'> |
||||||
|
<div class='h-px w-full bg-slate-200'></div> |
||||||
|
OR |
||||||
|
<div class='h-px w-full bg-slate-200'></div> |
||||||
|
</div> |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
--- |
||||||
|
import Icon from '../Icon.astro'; |
||||||
|
import Spinner from '../Spinner.astro'; |
||||||
|
--- |
||||||
|
|
||||||
|
<button |
||||||
|
class='inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60' |
||||||
|
id='github-login-button' |
||||||
|
> |
||||||
|
<Spinner className='text-black hidden' id='github-login-spinner' /> |
||||||
|
<div class='flex items-center' data-github-text> |
||||||
|
<Icon icon='github' /> |
||||||
|
<span class='ml-2'>Continue with Github</span> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { TOKEN_COOKIE_NAME } from '../../lib/utils'; |
||||||
|
const githubLoginButton = document.getElementById('github-login-button'); |
||||||
|
const githubLoginSpinner = document.getElementById('github-login-spinner'); |
||||||
|
const githubLoginText = document.querySelector('[data-github-text]'); |
||||||
|
|
||||||
|
githubLoginButton?.addEventListener('click', () => { |
||||||
|
githubLoginSpinner?.classList.remove('hidden'); |
||||||
|
githubLoginText?.classList.add('hidden'); |
||||||
|
fetch('http://localhost:8080/v1-github-login', { |
||||||
|
credentials: 'include', |
||||||
|
}) |
||||||
|
.then((res) => res.json()) |
||||||
|
.then((data) => { |
||||||
|
githubLoginText?.classList.remove('hidden'); |
||||||
|
githubLoginSpinner?.classList.add('hidden'); |
||||||
|
window.location.href = data.loginUrl; |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
window.addEventListener('load', () => { |
||||||
|
// Get all query params and send them to v1-github-callback |
||||||
|
const urlParams = new URLSearchParams(window.location.search); |
||||||
|
const code = urlParams.get('code'); |
||||||
|
const state = urlParams.get('state'); |
||||||
|
const provider = urlParams.get('provider'); |
||||||
|
|
||||||
|
if (code && state && provider === 'github') { |
||||||
|
githubLoginSpinner?.classList.remove('hidden'); |
||||||
|
githubLoginText?.classList.add('hidden'); |
||||||
|
fetch( |
||||||
|
`http://localhost:8080/v1-github-callback${window.location.search}`, |
||||||
|
{ |
||||||
|
method: 'GET', |
||||||
|
credentials: 'include', |
||||||
|
} |
||||||
|
) |
||||||
|
.then((res) => res.json()) |
||||||
|
.then((data) => { |
||||||
|
if (data.token) { |
||||||
|
Cookies.set(TOKEN_COOKIE_NAME, data.token); |
||||||
|
githubLoginText?.classList.remove('hidden'); |
||||||
|
githubLoginSpinner?.classList.add('hidden'); |
||||||
|
window.location.href = '/'; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
--- |
||||||
|
import Icon from '../Icon.astro'; |
||||||
|
import Spinner from '../Spinner.astro'; |
||||||
|
--- |
||||||
|
|
||||||
|
<button |
||||||
|
class='inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60' |
||||||
|
id='google-login-button' |
||||||
|
> |
||||||
|
<Spinner className='text-black hidden' id='google-login-spinner' /> |
||||||
|
<div class='flex items-center' data-google-text> |
||||||
|
<Icon icon='google' /> |
||||||
|
<span class='ml-2'>Continue with Google</span> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { TOKEN_COOKIE_NAME } from '../../lib/utils'; |
||||||
|
const googleLoginButton = document.getElementById('google-login-button'); |
||||||
|
const googleLoginSpinner = document.getElementById('google-login-spinner'); |
||||||
|
const googleLoginText = document.querySelector('[data-google-text]'); |
||||||
|
|
||||||
|
googleLoginButton?.addEventListener('click', () => { |
||||||
|
googleLoginSpinner?.classList.remove('hidden'); |
||||||
|
googleLoginText?.classList.add('hidden'); |
||||||
|
fetch('http://localhost:8080/v1-google-login', { |
||||||
|
credentials: 'include', |
||||||
|
}) |
||||||
|
.then((res) => res.json()) |
||||||
|
.then((data) => { |
||||||
|
googleLoginText?.classList.remove('hidden'); |
||||||
|
googleLoginSpinner?.classList.add('hidden'); |
||||||
|
window.location.href = data.loginUrl; |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
window.addEventListener('load', () => { |
||||||
|
// Get all query params and send them to v1-google-callback |
||||||
|
const urlParams = new URLSearchParams(window.location.search); |
||||||
|
const code = urlParams.get('code'); |
||||||
|
const state = urlParams.get('state'); |
||||||
|
const prompt = urlParams.get('prompt'); |
||||||
|
const provider = urlParams.get('provider'); |
||||||
|
|
||||||
|
if (code && state && prompt && provider === 'google') { |
||||||
|
googleLoginSpinner?.classList.remove('hidden'); |
||||||
|
googleLoginText?.classList.add('hidden'); |
||||||
|
fetch( |
||||||
|
`http://localhost:8080/v1-google-callback${window.location.search}`, |
||||||
|
{ |
||||||
|
method: 'GET', |
||||||
|
credentials: 'include', |
||||||
|
} |
||||||
|
) |
||||||
|
.then((res) => res.json()) |
||||||
|
.then((data) => { |
||||||
|
if (data.token) { |
||||||
|
Cookies.set(TOKEN_COOKIE_NAME, data.token); |
||||||
|
googleLoginText?.classList.remove('hidden'); |
||||||
|
googleLoginSpinner?.classList.add('hidden'); |
||||||
|
window.location.href = '/'; |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
@ -1,69 +0,0 @@ |
|||||||
import type { FunctionComponent } from 'preact'; |
|
||||||
import EmailLoginForm from './email-login-form'; |
|
||||||
import GoogleLoginButton from './google-login'; |
|
||||||
|
|
||||||
export default function LoginComponent() { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<div className="text-center"> |
|
||||||
<h2 className="text-2xl font-semibold leading-5 text-slate-900"> |
|
||||||
Welcome back |
|
||||||
</h2> |
|
||||||
<p className="mt-2 text-sm leading-4 text-slate-600"> |
|
||||||
Please enter your details. |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div className="mt-10 space-y-2"> |
|
||||||
<GithubLoginButton /> |
|
||||||
<GoogleLoginButton /> |
|
||||||
</div> |
|
||||||
|
|
||||||
<Divider /> |
|
||||||
|
|
||||||
<EmailLoginForm /> |
|
||||||
|
|
||||||
<div className="mt-6 text-center text-sm text-slate-600"> |
|
||||||
Don't have an account?{' '} |
|
||||||
<a href="/signup" className="font-medium text-[#4285f4]"> |
|
||||||
Sign up |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export const Divider: FunctionComponent<{ className?: string }> = ({ |
|
||||||
className, |
|
||||||
}) => { |
|
||||||
return ( |
|
||||||
<div className="flex w-full items-center gap-2 py-6 text-sm text-slate-600"> |
|
||||||
<div className="h-px w-full bg-slate-200" /> |
|
||||||
OR |
|
||||||
<div className="h-px w-full bg-slate-200" /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({ |
|
||||||
className, |
|
||||||
}) => { |
|
||||||
return ( |
|
||||||
<button className="inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60"> |
|
||||||
<svg |
|
||||||
width="18" |
|
||||||
height="18" |
|
||||||
viewBox="0 0 96 96" |
|
||||||
xmlns="http://www.w3.org/2000/svg" |
|
||||||
> |
|
||||||
<path |
|
||||||
fill-rule="evenodd" |
|
||||||
clip-rule="evenodd" |
|
||||||
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" |
|
||||||
fill="#24292f" |
|
||||||
/> |
|
||||||
</svg> |
|
||||||
<span className="ml-2">Continue with Github</span> |
|
||||||
</button> |
|
||||||
); |
|
||||||
}; |
|
||||||
@ -0,0 +1,31 @@ |
|||||||
|
--- |
||||||
|
import Divider from './Divider.astro'; |
||||||
|
import GithubLogin from './GithubLogin.astro'; |
||||||
|
import GoogleLogin from './GoogleLogin.astro'; |
||||||
|
import EmailLoginForm from './email-login-form'; |
||||||
|
--- |
||||||
|
|
||||||
|
<div> |
||||||
|
<div class='text-center'> |
||||||
|
<h2 class='text-2xl font-semibold leading-5 text-slate-900'> |
||||||
|
Welcome back |
||||||
|
</h2> |
||||||
|
<p class='mt-2 text-sm leading-4 text-slate-600'> |
||||||
|
Please enter your details. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class='mt-10 space-y-2'> |
||||||
|
<GithubLogin /> |
||||||
|
<GoogleLogin /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<Divider /> |
||||||
|
|
||||||
|
<EmailLoginForm client:load /> |
||||||
|
|
||||||
|
<div class='mt-6 text-center text-sm text-slate-600'> |
||||||
|
Don't have an account?{' '} |
||||||
|
<a href='/signup' class='font-medium text-[#4285f4]'> Sign up</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -1,127 +0,0 @@ |
|||||||
import Cookies from 'js-cookie'; |
|
||||||
import { useEffect, useState } from 'preact/hooks'; |
|
||||||
import { TOKEN_COOKIE_NAME } from '../../lib/utils'; |
|
||||||
|
|
||||||
export default function GoogleLoginButton() { |
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false); |
|
||||||
|
|
||||||
const handleRedirect = () => { |
|
||||||
setIsLoading(true); |
|
||||||
fetch('http://localhost:8080/v1-google-login', { |
|
||||||
credentials: 'include', |
|
||||||
}) |
|
||||||
.then((res) => res.json()) |
|
||||||
.then((data) => { |
|
||||||
setIsLoading(false); |
|
||||||
window.location.href = data.loginUrl; |
|
||||||
}); |
|
||||||
}; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
// Get all query params and send them to v1-google-callback
|
|
||||||
const urlParams = new URLSearchParams(window.location.search); |
|
||||||
const code = urlParams.get('code'); |
|
||||||
const state = urlParams.get('state'); |
|
||||||
const prompt = urlParams.get('prompt'); |
|
||||||
|
|
||||||
if (code && state && prompt) { |
|
||||||
setIsLoading(true); |
|
||||||
fetch( |
|
||||||
`http://localhost:8080/v1-google-callback${window.location.search}`, |
|
||||||
{ |
|
||||||
method: 'GET', |
|
||||||
credentials: 'include', |
|
||||||
} |
|
||||||
) |
|
||||||
.then((res) => res.json()) |
|
||||||
.then((data) => { |
|
||||||
if (data.token) { |
|
||||||
Cookies.set(TOKEN_COOKIE_NAME, data.token); |
|
||||||
setIsLoading(false); |
|
||||||
window.location.href = '/'; |
|
||||||
} |
|
||||||
}) |
|
||||||
.catch((err) => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
} |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<button |
|
||||||
className="mt-2 inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:opacity-60" |
|
||||||
onClick={handleRedirect} |
|
||||||
> |
|
||||||
{isLoading ? ( |
|
||||||
<Spinner className="text-black" /> |
|
||||||
) : ( |
|
||||||
<> |
|
||||||
<GoogleLogo /> |
|
||||||
<span className="ml-2">Continue with Google</span> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</button> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
function Spinner({ className }: { className?: string }) { |
|
||||||
return ( |
|
||||||
<svg |
|
||||||
className={`animate-spin" h-5 w-5 ${className}`} |
|
||||||
xmlns="http://www.w3.org/2000/svg" |
|
||||||
fill="none" |
|
||||||
viewBox="0 0 24 24" |
|
||||||
> |
|
||||||
<circle |
|
||||||
className="stroke-[4px] opacity-25" |
|
||||||
cx={12} |
|
||||||
cy={12} |
|
||||||
r={10} |
|
||||||
stroke="currentColor" |
|
||||||
/> |
|
||||||
<path |
|
||||||
className="opacity-75" |
|
||||||
fill="currentColor" |
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" |
|
||||||
/> |
|
||||||
</svg> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
function GoogleLogo() { |
|
||||||
return ( |
|
||||||
<svg |
|
||||||
xmlns="http://www.w3.org/2000/svg" |
|
||||||
width="18" |
|
||||||
height={18} |
|
||||||
viewBox="0 0 186.69 190.5" |
|
||||||
> |
|
||||||
<g transform="translate(1184.583 765.171)"> |
|
||||||
<path |
|
||||||
clipPath="none" |
|
||||||
mask="none" |
|
||||||
d="M-1089.333-687.239v36.888h51.262c-2.251 11.863-9.006 21.908-19.137 28.662l30.913 23.986c18.011-16.625 28.402-41.044 28.402-70.052 0-6.754-.606-13.249-1.732-19.483z" |
|
||||||
fill="#4285f4" |
|
||||||
/> |
|
||||||
<path |
|
||||||
clipPath="none" |
|
||||||
mask="none" |
|
||||||
d="M-1142.714-651.791l-6.972 5.337-24.679 19.223h0c15.673 31.086 47.796 52.561 85.03 52.561 25.717 0 47.278-8.486 63.038-23.033l-30.913-23.986c-8.486 5.715-19.31 9.179-32.125 9.179-24.765 0-45.806-16.712-53.34-39.226z" |
|
||||||
fill="#34a853" |
|
||||||
/> |
|
||||||
<path |
|
||||||
clipPath="none" |
|
||||||
mask="none" |
|
||||||
d="M-1174.365-712.61c-6.494 12.815-10.217 27.276-10.217 42.689s3.723 29.874 10.217 42.689c0 .086 31.693-24.592 31.693-24.592-1.905-5.715-3.031-11.776-3.031-18.098s1.126-12.383 3.031-18.098z" |
|
||||||
fill="#fbbc05" |
|
||||||
/> |
|
||||||
<path |
|
||||||
d="M-1089.333-727.244c14.028 0 26.497 4.849 36.455 14.201l27.276-27.276c-16.539-15.413-38.013-24.852-63.731-24.852-37.234 0-69.359 21.388-85.032 52.561l31.692 24.592c7.533-22.514 28.575-39.226 53.34-39.226z" |
|
||||||
fill="#ea4335" |
|
||||||
clipPath="none" |
|
||||||
mask="none" |
|
||||||
/> |
|
||||||
</g> |
|
||||||
</svg> |
|
||||||
); |
|
||||||
} |
|
||||||
|
After Width: | Height: | Size: 990 B |
|
Before Width: | Height: | Size: 754 B After Width: | Height: | Size: 757 B |
Loading…
Reference in new issue