Kamran Ahmed
2 years ago
parent
983476eb37
commit
6b4be3f0ab
29 changed files with 128 additions and 34 deletions
@ -0,0 +1 @@ |
||||
PUBLIC_API_URL=http://api.roadmap.sh |
||||
@ -0,0 +1,92 @@ |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
|
||||
import GitHubIcon from '../../icons/github.svg'; |
||||
import SpinnerIcon from '../../icons/spinner.svg'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
import Cookies from 'js-cookie'; |
||||
|
||||
type GitHubButtonProps = {}; |
||||
|
||||
export function GitHubButton(props: GitHubButtonProps) { |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const icon = isLoading ? SpinnerIcon : GitHubIcon; |
||||
|
||||
useEffect(() => { |
||||
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') { |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(true); |
||||
fetch( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-github-callback${ |
||||
window.location.search |
||||
}`,
|
||||
{ |
||||
method: 'GET', |
||||
credentials: 'include', |
||||
} |
||||
) |
||||
.then((res) => res.json()) |
||||
.then((data: any) => { |
||||
if (!data.token) { |
||||
setError('Something went wrong. Please try again later.'); |
||||
setIsLoading(false); |
||||
} else { |
||||
Cookies.set(TOKEN_COOKIE_NAME, data.token); |
||||
window.location.href = '/'; |
||||
} |
||||
}) |
||||
.catch((err) => { |
||||
setError('Something went wrong. Please try again later.'); |
||||
setIsLoading(false); |
||||
}); |
||||
}, []); |
||||
|
||||
const handleClick = () => { |
||||
setIsLoading(true); |
||||
fetch(`${import.meta.env.PUBLIC_API_URL}/v1-github-login`, { |
||||
credentials: 'include', |
||||
redirect: 'follow', |
||||
}) |
||||
.then((res) => res.json()) |
||||
.then((data: any) => { |
||||
// @todo proper typing for API response
|
||||
if (data.loginUrl) { |
||||
window.location.href = data.loginUrl; |
||||
} else { |
||||
setError('Something went wrong. Please try again later.'); |
||||
setIsLoading(false); |
||||
} |
||||
}) |
||||
.catch((err) => { |
||||
setError('Something went wrong. Please try again later.'); |
||||
setIsLoading(false); |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<button |
||||
class="inline-flex h-10 w-full items-center justify-center gap-2 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:cursor-not-allowed disabled:opacity-60" |
||||
disabled={isLoading} |
||||
onClick={handleClick} |
||||
> |
||||
<img |
||||
src={icon} |
||||
alt="GitHub" |
||||
class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`} |
||||
/> |
||||
Continue with GitHub |
||||
</button> |
||||
{error && ( |
||||
<p className="mb-2 mt-1 text-sm font-medium text-red-600">{error}</p> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue