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