github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: login feature

Browse Source
feat/preact-migrate
Arik Chakma 2 years ago
parent b5d47349a1
commit b2934993b0
9 changed files with 1514 additions and 3675 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      package.json
  2. 4767
      pnpm-lock.yaml
  3. 212
      src/components/Login/LoginComponent.tsx
  4. 30
      src/components/Login/account-nav.tsx
  5. 74
      src/components/Login/email-login-form.tsx
  6. 62
      src/components/Navigation.astro
  7. 19
      src/hooks/use-auth.ts
  8. 13
      src/lib/utils.ts
  9. 5
      src/pages/signup.astro

7
package.json
Unescape View File

@ -8,7 +8,7 @@
"start": "astro dev", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"format": "prettier --write .", "format": "prettier --write .",
"astro": "astro", "astro": "astro",
"deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t", "deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
"compress:jsons": "node bin/compress-jsons.cjs", "compress:jsons": "node bin/compress-jsons.cjs",
@ -25,6 +25,8 @@
"@astrojs/tailwind": "^3.1.1", "@astrojs/tailwind": "^3.1.1",
"astro": "^2.1.7", "astro": "^2.1.7",
"astro-compress": "^1.1.35", "astro-compress": "^1.1.35",
"jose": "^4.13.1",
"js-cookie": "^3.0.1",
"node-html-parser": "^6.1.5", "node-html-parser": "^6.1.5",
"npm-check-updates": "^16.8.0", "npm-check-updates": "^16.8.0",
"preact": "^10.6.5", "preact": "^10.6.5",
@ -35,12 +37,13 @@
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.32.1", "@playwright/test": "^1.32.1",
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"@types/js-cookie": "^3.0.3",
"gh-pages": "^5.0.0", "gh-pages": "^5.0.0",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"openai": "^3.2.1", "openai": "^3.2.1",
"prettier": "^2.8.7", "prettier": "^2.8.7",
"prettier-plugin-astro": "^0.8.0", "prettier-plugin-astro": "^0.8.0",
"prettier-plugin-tailwindcss": "^0.2.6" "prettier-plugin-tailwindcss": "^0.2.6"
} }
} }

4767
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

212
src/components/Login/LoginComponent.tsx
Unescape View File

@ -1,141 +1,117 @@
import type { FunctionComponent } from 'preact'; import type { FunctionComponent } from 'preact';
import EmailLoginForm from './email-login-form';
export default function LoginComponent() { export default function LoginComponent() {
return ( return (
<div> <div>
<div className="text-center"> <div className="text-center">
<h2 className="font-semibold text-2xl leading-5 text-slate-900"> <h2 className="text-2xl font-semibold leading-5 text-slate-900">
Welcome back Welcome back
</h2> </h2>
<p className="text-slate-600 mt-2 text-sm leading-4"> <p className="mt-2 text-sm leading-4 text-slate-600">
Please enter your details. Please enter your details.
</p> </p>
</div> </div>
<div className="space-y-2 mt-10"> <div className="mt-10 space-y-2">
<GithubLoginButton /> <GithubLoginButton />
<GoogleLoginButton /> <GoogleLoginButton />
</div> </div>
<Divider /> <Divider />
<EmailLoginForm /> <EmailLoginForm />
<div className="text-center text-slate-600 text-sm mt-6"> <div className="mt-6 text-center text-sm text-slate-600">
Don't have an account?{' '} Don't have an account?{' '}
<a href="/signup" className="font-medium text-[#4285f4]"> <a href="/signup" className="font-medium text-[#4285f4]">
Sign up Sign up
</a> </a>
</div> </div>
</div> </div>
); );
} }
export const Divider: FunctionComponent<{ className?: string }> = ({ export const Divider: FunctionComponent<{ className?: string }> = ({
className, className,
}) => { }) => {
return ( return (
<div className="flex items-center gap-2 text-sm text-slate-600 py-6"> <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" /> <div className="h-px w-full bg-slate-200" />
OR OR
<div className="h-px w-full bg-slate-200" /> <div className="h-px w-full bg-slate-200" />
</div> </div>
); );
}; };
export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({ export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({
className, className,
}) => { }) => {
return ( return (
<button className="inline-flex h-10 w-full bg-white text-black focus:ring-[#333] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1"> <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 <svg
width="18" width="18"
height="18" height="18"
viewBox="0 0 96 96" viewBox="0 0 96 96"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-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" 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" fill="#24292f"
/> />
</svg> </svg>
<span className="ml-2">Continue with Github</span> <span className="ml-2">Continue with Github</span>
</button> </button>
); );
}; };
export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({ export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({
className, className,
}) => { }) => {
return ( return (
<button className="inline-flex h-10 w-full bg-white text-black focus:ring-[#333] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1"> <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">
<GoogleLogo /> <GoogleLogo />
<span className="ml-2">Continue with Google</span> <span className="ml-2">Continue with Google</span>
</button> </button>
); );
};
export const EmailLoginForm: FunctionComponent<{}> = () => {
return (
<form className="w-full">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="block w-full appearance-none border border-gray-300 px-3 py-2 shadow-sm placeholder:text-gray-400 focus:ring-black rounded-lg outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-offset-1"
placeholder="Enter you email"
/>
<button
type="submit"
className="inline-flex h-10 w-full bg-black text-white focus:ring-black items-center justify-center rounded-lg border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1 mt-3"
>
Continue
</button>
</form>
);
}; };
function GoogleLogo() { function GoogleLogo() {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
height={18} height={18}
viewBox="0 0 186.69 190.5" viewBox="0 0 186.69 190.5"
> >
<g transform="translate(1184.583 765.171)"> <g transform="translate(1184.583 765.171)">
<path <path
clipPath="none" clipPath="none"
mask="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" 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" fill="#4285f4"
/> />
<path <path
clipPath="none" clipPath="none"
mask="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" 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" fill="#34a853"
/> />
<path <path
clipPath="none" clipPath="none"
mask="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" 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" fill="#fbbc05"
/> />
<path <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" 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" fill="#ea4335"
clipPath="none" clipPath="none"
mask="none" mask="none"
/> />
</g> </g>
</svg> </svg>
); );
} }

30
src/components/Login/account-nav.tsx
Unescape View File

@ -0,0 +1,30 @@
import Cookies from 'js-cookie';
import { useEffect, useState } from 'preact/hooks';
import { TOKEN_COOKIE_NAME } from '../../lib/utils';
import { useAuth } from '../../hooks/use-auth';
export default function AccountNavigation() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const { user, status } = useAuth();
useEffect(() => {
const token = Cookies.get(TOKEN_COOKIE_NAME);
if (token) {
setIsAuthenticated(true);
} else {
setIsAuthenticated(false);
}
}, []);
console.log('user', user, status);
return (
<div>
{isAuthenticated ? (
<div>Authenticated: {user?.email}</div>
) : (
<div>Not Authenticated</div>
)}
</div>
);
}

74
src/components/Login/email-login-form.tsx
Unescape View File

@ -0,0 +1,74 @@
import Cookies from 'js-cookie';
import type { FunctionComponent } from 'preact';
import { useState } from 'preact/hooks';
import { TOKEN_COOKIE_NAME } from '../../lib/utils';
const EmailLoginForm: FunctionComponent<{}> = () => {
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
return (
<form
className="w-full"
onSubmit={(e) => {
e.preventDefault();
fetch('http://localhost:8080/v1-login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password,
// name: 'Arikko',
}),
}).then(async (res) => {
const json = await res.json();
if (res.status === 200) {
Cookies.set(TOKEN_COOKIE_NAME, json.token);
window.location.href = '/';
} else {
console.log('error', json);
}
});
}}
>
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="Enter you email"
value={email}
onChange={(e) => setEmail(String((e.target as any).value))}
/>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
placeholder="Enter you password"
value={password}
onChange={(e) => setPassword(String((e.target as any).value))}
/>
<button
type="submit"
className="mt-3 inline-flex h-10 w-full items-center justify-center rounded-lg border border-slate-300 bg-black p-2 text-sm font-medium text-white outline-none transition duration-150 ease-in-out focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:opacity-60"
>
Continue
</button>
</form>
);
};
export default EmailLoginForm;

62
src/components/Navigation.astro
Unescape View File

@ -1,21 +1,24 @@
--- ---
import Icon from './Icon.astro'; import Icon from './Icon.astro';
import AccountNavigation from './Login/account-nav';
--- ---
<div class='bg-slate-900 text-white py-5 sm:py-8'> <div class='bg-slate-900 py-5 text-white sm:py-8'>
<nav class='container flex items-center justify-between'> <nav class='container flex items-center justify-between'>
<a class='font-medium text-lg flex items-center text-white' href='/'> <a class='flex items-center text-lg font-medium text-white' href='/'>
<Icon icon='logo' /> <Icon icon='logo' />
<span class='ml-3'>roadmap.sh</span> <span class='ml-3'>roadmap.sh</span>
</a> </a>
<!-- Desktop navigation items --> <!-- Desktop navigation items -->
<ul class='hidden sm:flex space-x-5'> <ul class='hidden space-x-5 sm:flex'>
<li> <li>
<a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a> <a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
</li> </li>
<li> <li>
<a href='/best-practices' class='text-gray-400 hover:text-white'>Best Practices</a> <a href='/best-practices' class='text-gray-400 hover:text-white'
>Best Practices</a
>
</li> </li>
<li> <li>
<a href='/guides' class='text-gray-400 hover:text-white'>Guides</a> <a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
@ -25,43 +28,66 @@ import Icon from './Icon.astro';
</li> </li>
<li> <li>
<a <a
class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white' class='font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm text-white hover:from-blue-500 hover:to-blue-600'
href='/signup' href='/signup'
> >
Subscribe Subscribe
</a> </a>
</li> </li>
<li>
<AccountNavigation client:load />
</li>
</ul> </ul>
<!-- Mobile Navigation Button --> <!-- Mobile Navigation Button -->
<button class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' aria-label='Menu' show-mobile-nav> <button
class='block cursor-pointer text-gray-400 hover:text-gray-50 sm:hidden'
aria-label='Menu'
show-mobile-nav
>
<Icon icon='hamburger' /> <Icon icon='hamburger' />
</button> </button>
<!-- Mobile Navigation Items --> <!-- Mobile Navigation Items -->
<div class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center flex hidden' mobile-nav> <div
class='fixed top-0 bottom-0 left-0 right-0 z-40 flex hidden items-center bg-slate-900'
mobile-nav
>
<button <button
close-mobile-nav close-mobile-nav
class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6' class='absolute top-6 right-6 block cursor-pointer text-gray-400 hover:text-gray-50'
aria-label='Close Menu' aria-label='Close Menu'
> >
<Icon icon='close' /> <Icon icon='close' />
</button> </button>
<ul class='flex flex-col gap-2 md:gap-3 items-center w-full'> <ul class='flex w-full flex-col items-center gap-2 md:gap-3'>
<li> <li>
<a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'>Roadmaps</a> <a href='/roadmaps' class='text-xl hover:text-blue-300 md:text-lg'
>Roadmaps</a
>
</li> </li>
<li> <li>
<a href='/best-practices' class='text-xl md:text-lg hover:text-blue-300'>Best Practices</a> <a
href='/best-practices'
class='text-xl hover:text-blue-300 md:text-lg'>Best Practices</a
>
</li> </li>
<li> <li>
<a href='/guides' class='text-xl md:text-lg hover:text-blue-300'>Guides</a> <a href='/guides' class='text-xl hover:text-blue-300 md:text-lg'
>Guides</a
>
</li> </li>
<li> <li>
<a href='/videos' class='text-xl md:text-lg hover:text-blue-300'>Videos</a> <a href='/videos' class='text-xl hover:text-blue-300 md:text-lg'
>Videos</a
>
</li> </li>
<li> <li>
<a href='/signup' class='text-xl md:text-lg text-red-300 hover:text-red-400'>Subscribe</a> <a
href='/signup'
class='text-xl text-red-300 hover:text-red-400 md:text-lg'
>Subscribe</a
>
</li> </li>
</ul> </ul>
</div> </div>
@ -73,7 +99,9 @@ import Icon from './Icon.astro';
document.querySelector('[mobile-nav]')?.classList.remove('hidden'); document.querySelector('[mobile-nav]')?.classList.remove('hidden');
}); });
document.querySelector('[close-mobile-nav]')?.addEventListener('click', () => { document
document.querySelector('[mobile-nav]')?.classList.add('hidden'); .querySelector('[close-mobile-nav]')
}); ?.addEventListener('click', () => {
document.querySelector('[mobile-nav]')?.classList.add('hidden');
});
</script> </script>

19
src/hooks/use-auth.ts
Unescape View File

@ -0,0 +1,19 @@
import { useEffect, useState } from 'preact/hooks';
import { TOKEN_COOKIE_NAME, TokenPayload, decodeToken } from '../lib/utils';
import Cookies from 'js-cookie';
export const useAuth = () => {
const [user, setUser] = useState<TokenPayload | null>(null);
const [status, setStatus] = useState<'loading' | 'success' | 'error'>(
'loading'
);
useEffect(() => {
const token = Cookies.get(TOKEN_COOKIE_NAME);
const payload = token ? decodeToken(token) : null;
setUser(payload);
setStatus('success');
}, []);
return { user, status };
};

13
src/lib/utils.ts
Unescape View File

@ -0,0 +1,13 @@
import * as jose from 'jose';
export const TOKEN_COOKIE_NAME = '__timefyi_jt__';
export type TokenPayload = {
id: string;
email: string;
};
export function decodeToken(token: string): TokenPayload {
const claims = jose.decodeJwt(token);
return claims as TokenPayload;
}

5
src/pages/signup.astro
Unescape View File

@ -1,7 +1,8 @@
--- ---
import CaptchaFields from '../components/Captcha/CaptchaFields.astro'; import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro'; import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
import { Divider, EmailLoginForm, GithubLoginButton, GoogleLoginButton } from '../components/Login/LoginComponent'; import { Divider, GithubLoginButton, GoogleLoginButton } from '../components/Login/LoginComponent';
import EmailLoginForm from '../components/Login/email-login-form';
import BaseLayout from '../layouts/BaseLayout.astro'; import BaseLayout from '../layouts/BaseLayout.astro';
--- ---
@ -32,7 +33,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<Divider /> <Divider />
<EmailLoginForm /> <EmailLoginForm client:load />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save