Arik Chakma
2 years ago
parent
b5d47349a1
commit
b2934993b0
9 changed files with 1514 additions and 3675 deletions
File diff suppressed because it is too large
Load Diff
@ -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> |
||||||
|
); |
||||||
|
} |
||||||
@ -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; |
||||||
@ -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 }; |
||||||
|
}; |
||||||
@ -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; |
||||||
|
} |
||||||
Loading…
Reference in new issue