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
Split 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",
"build": "astro build",
"preview": "astro preview",
"format": "prettier --write .",
"format": "prettier --write .",
"astro": "astro",
"deploy": "NODE_DEBUG=gh-pages gh-pages -d dist -t",
"compress:jsons": "node bin/compress-jsons.cjs",
@ -25,6 +25,8 @@
"@astrojs/tailwind": "^3.1.1",
"astro": "^2.1.7",
"astro-compress": "^1.1.35",
"jose": "^4.13.1",
"js-cookie": "^3.0.1",
"node-html-parser": "^6.1.5",
"npm-check-updates": "^16.8.0",
"preact": "^10.6.5",
@ -35,12 +37,13 @@
"devDependencies": {
"@playwright/test": "^1.32.1",
"@tailwindcss/typography": "^0.5.9",
"@types/js-cookie": "^3.0.3",
"gh-pages": "^5.0.0",
"js-yaml": "^4.1.0",
"markdown-it": "^13.0.1",
"openai": "^3.2.1",
"prettier": "^2.8.7",
"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 EmailLoginForm from './email-login-form';
export default function LoginComponent() {
return (
<div>
<div className="text-center">
<h2 className="font-semibold text-2xl leading-5 text-slate-900">
Welcome back
</h2>
<p className="text-slate-600 mt-2 text-sm leading-4">
Please enter your details.
</p>
</div>
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="space-y-2 mt-10">
<GithubLoginButton />
<GoogleLoginButton />
</div>
<div className="mt-10 space-y-2">
<GithubLoginButton />
<GoogleLoginButton />
</div>
<Divider />
<Divider />
<EmailLoginForm />
<EmailLoginForm />
<div className="text-center text-slate-600 text-sm mt-6">
Don't have an account?{' '}
<a href="/signup" className="font-medium text-[#4285f4]">
Sign up
</a>
</div>
</div>
);
<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,
className,
}) => {
return (
<div className="flex items-center gap-2 text-sm text-slate-600 py-6">
<div className="h-px w-full bg-slate-200" />
OR
<div className="h-px w-full bg-slate-200" />
</div>
);
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,
className,
}) => {
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">
<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>
);
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>
);
};
export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({
className,
className,
}) => {
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">
<GoogleLogo />
<span className="ml-2">Continue with Google</span>
</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>
);
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">
<GoogleLogo />
<span className="ml-2">Continue with Google</span>
</button>
);
};
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>
);
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>
);
}

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 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'>
<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' />
<span class='ml-3'>roadmap.sh</span>
</a>
<!-- Desktop navigation items -->
<ul class='hidden sm:flex space-x-5'>
<ul class='hidden space-x-5 sm:flex'>
<li>
<a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a>
</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>
<a href='/guides' class='text-gray-400 hover:text-white'>Guides</a>
@ -25,43 +28,66 @@ import Icon from './Icon.astro';
</li>
<li>
<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'
>
Subscribe
</a>
</li>
<li>
<AccountNavigation client:load />
</li>
</ul>
<!-- 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' />
</button>
<!-- 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
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'
>
<Icon icon='close' />
</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>
<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>
<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>
<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>
<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>
<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>
</ul>
</div>
@ -73,7 +99,9 @@ import Icon from './Icon.astro';
document.querySelector('[mobile-nav]')?.classList.remove('hidden');
});
document.querySelector('[close-mobile-nav]')?.addEventListener('click', () => {
document.querySelector('[mobile-nav]')?.classList.add('hidden');
});
document
.querySelector('[close-mobile-nav]')
?.addEventListener('click', () => {
document.querySelector('[mobile-nav]')?.classList.add('hidden');
});
</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 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';
---
@ -32,7 +33,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<Divider />
<EmailLoginForm />
<EmailLoginForm client:load />
</div>
</div>

Write Preview
Loading…
Cancel
Save