Kamran Ahmed
2 years ago
parent
1950404b20
commit
3cd8468c8f
7 changed files with 136 additions and 253 deletions
@ -0,0 +1,102 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import type { FunctionComponent } from 'preact'; |
||||
import { useState } from 'preact/hooks'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
import Spinner from '../Spinner'; |
||||
|
||||
const EmailLoginForm: FunctionComponent<{}> = () => { |
||||
const [email, setEmail] = useState<string>(''); |
||||
const [password, setPassword] = useState<string>(''); |
||||
const [error, setError] = useState(''); |
||||
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false); |
||||
|
||||
const handleFormSubmit = async (e: Event) => { |
||||
e.preventDefault(); |
||||
setIsLoading(true); |
||||
setError(''); |
||||
|
||||
const res = await fetch('http://localhost:8080/v1-login', { |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
body: JSON.stringify({ |
||||
email, |
||||
password, |
||||
}), |
||||
}); |
||||
|
||||
const json = await res.json(); |
||||
|
||||
if (json.type === 'user_not_verified') { |
||||
window.location.href = `/verification-pending?email=${encodeURIComponent( |
||||
email |
||||
)}`;
|
||||
return; |
||||
} |
||||
|
||||
if (!json.token) { |
||||
setIsLoading(false); |
||||
setError(json.message || 'Something went wrong. Please try again later.'); |
||||
|
||||
return; |
||||
} |
||||
|
||||
// If the response is ok, we'll set the token in a cookie
|
||||
Cookies.set(TOKEN_COOKIE_NAME, json.token); |
||||
window.location.href = '/'; |
||||
}; |
||||
|
||||
return ( |
||||
<form className="w-full" onSubmit={handleFormSubmit}> |
||||
<label htmlFor="email" className="sr-only"> |
||||
Email address |
||||
</label> |
||||
<input |
||||
name="email" |
||||
type="email" |
||||
autoComplete="email" |
||||
required |
||||
className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1" |
||||
placeholder="Email Address" |
||||
value={email} |
||||
onInput={(e) => setEmail(String((e.target as any).value))} |
||||
/> |
||||
<label htmlFor="password" className="sr-only"> |
||||
Password |
||||
</label> |
||||
<input |
||||
name="password" |
||||
type="password" |
||||
autoComplete="current-password" |
||||
required |
||||
className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1" |
||||
placeholder="Password" |
||||
value={password} |
||||
onInput={(e) => setPassword(String((e.target as any).value))} |
||||
/> |
||||
|
||||
<p class="mb-3 mt-2 text-sm text-gray-500"> |
||||
<a |
||||
href="/forgot-password" |
||||
className="text-blue-800 hover:text-blue-600" |
||||
> |
||||
Reset your password? |
||||
</a> |
||||
</p> |
||||
|
||||
{error && <p className="bg-red-100 text-red-800">{error}</p>} |
||||
|
||||
<button |
||||
type="submit" |
||||
disabled={isLoading} |
||||
className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400" |
||||
> |
||||
{isLoading ? 'Please wait...' : 'Continue'} |
||||
</button> |
||||
</form> |
||||
); |
||||
}; |
||||
|
||||
export default EmailLoginForm; |
||||
@ -1,210 +0,0 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import type { FunctionComponent } from 'preact'; |
||||
import { useState } from 'preact/hooks'; |
||||
import { TOKEN_COOKIE_NAME } from '../../lib/constants'; |
||||
import Spinner from '../Spinner'; |
||||
|
||||
const EmailLoginForm: FunctionComponent<{}> = () => { |
||||
const [email, setEmail] = useState<string>(''); |
||||
const [password, setPassword] = useState<string>(''); |
||||
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false); |
||||
const [message, setMessage] = useState<{ |
||||
type: 'success' | 'error' | 'verification' | 'warning'; |
||||
message: string; |
||||
} | null>(null); |
||||
|
||||
const handleFormSubmit = async (e: Event) => { |
||||
e.preventDefault(); |
||||
setIsLoading(true); |
||||
setMessage(null); |
||||
// Check if the verification-email-sent-at is less than 5 seconds ago
|
||||
const verificationEmailSentAt = localStorage.getItem( |
||||
'verification-email-sent-at' |
||||
); |
||||
|
||||
if (verificationEmailSentAt) { |
||||
const now = new Date(); |
||||
if (Number(verificationEmailSentAt) > now.getTime()) { |
||||
setIsLoading(false); |
||||
setEmail(''); |
||||
setPassword(''); |
||||
return setMessage({ |
||||
type: 'error', |
||||
message: 'Please wait before sending another verification email.', |
||||
}); |
||||
} |
||||
} |
||||
|
||||
const res = await fetch('http://localhost:8080/v1-login', { |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
body: JSON.stringify({ |
||||
email, |
||||
password, |
||||
}), |
||||
}); |
||||
|
||||
// TODO: Remove this on production
|
||||
// Simulate slow network - 2 seconds
|
||||
// await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
const json = await res.json(); |
||||
|
||||
// If the response isn't ok, we'll throw an error
|
||||
if (json.type === 'user_not_verified') { |
||||
setIsLoading(false); |
||||
return setMessage({ |
||||
type: 'verification', |
||||
message: |
||||
'Your account is not verified. Please click the verification link in your email. Or resend verification email.', |
||||
}); |
||||
} |
||||
|
||||
if (json.token) { |
||||
// If the response is ok, we'll set the token in a cookie
|
||||
Cookies.set(TOKEN_COOKIE_NAME, json.token); |
||||
window.location.href = '/'; |
||||
} else { |
||||
setMessage({ |
||||
type: 'error', |
||||
message: json.message, |
||||
}); |
||||
} |
||||
|
||||
setIsLoading(false); |
||||
}; |
||||
|
||||
const handleResendVerificationEmail = async () => { |
||||
setIsLoading(true); |
||||
// Check if the verification-email-sent-at is less than 5 seconds ago
|
||||
const verificationEmailSentAt = localStorage.getItem( |
||||
'verification-email-sent-at' |
||||
); |
||||
|
||||
if (verificationEmailSentAt) { |
||||
const now = new Date(); |
||||
if (Number(verificationEmailSentAt) > now.getTime()) { |
||||
setIsLoading(false); |
||||
return setMessage({ |
||||
type: 'error', |
||||
message: 'Please wait before sending another verification email.', |
||||
}); |
||||
} |
||||
} |
||||
|
||||
const res = await fetch( |
||||
'http://localhost:8080/v1-send-verification-email', |
||||
{ |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
body: JSON.stringify({ |
||||
email, |
||||
}), |
||||
} |
||||
); |
||||
const json = await res.json(); |
||||
|
||||
// If the response isn't ok, we'll throw an error
|
||||
if (!res.ok) { |
||||
return setMessage({ |
||||
type: 'error', |
||||
message: json.message, |
||||
}); |
||||
} |
||||
// If the response is ok, we'll set the token in a cookie
|
||||
setEmail(''); |
||||
setPassword(''); |
||||
setMessage({ |
||||
type: 'success', |
||||
message: 'Verification instructions have been sent to your email.', |
||||
}); |
||||
|
||||
// Current time + 5 seconds, save it to localStorage
|
||||
const now = new Date(); |
||||
const time = now.getTime(); |
||||
const expireTime = time + 5000; |
||||
now.setTime(expireTime); |
||||
localStorage.setItem( |
||||
'verification-email-sent-at', |
||||
now.getTime().toString() |
||||
); |
||||
|
||||
setIsLoading(false); |
||||
}; |
||||
|
||||
return ( |
||||
<form className="w-full" onSubmit={handleFormSubmit}> |
||||
<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="john@example.com" |
||||
value={email} |
||||
onInput={(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} |
||||
onInput={(e) => setPassword(String((e.target as any).value))} |
||||
/> |
||||
|
||||
{message && ( |
||||
<> |
||||
{message.type === 'verification' ? ( |
||||
<div className="mt-2 rounded-lg bg-yellow-100 p-2 text-sm text-yellow-800"> |
||||
Your account is not verified. Please click the verification link |
||||
in your email. Or{' '} |
||||
<button |
||||
type="button" |
||||
className="font-semibold text-yellow-900 underline hover:text-yellow-800 hover:no-underline" |
||||
onClick={handleResendVerificationEmail} |
||||
> |
||||
resend verification email. |
||||
</button> |
||||
</div> |
||||
) : ( |
||||
<div |
||||
className={`mt-2 rounded-lg p-2 ${ |
||||
message.type === 'success' && 'bg-green-100 text-green-800' |
||||
} ${message.type === 'error' && 'bg-red-100 text-red-800'} ${ |
||||
message.type === 'warning' && 'bg-yellow-100 text-yellow-800' |
||||
}`}
|
||||
> |
||||
{message.message} |
||||
</div> |
||||
)} |
||||
</> |
||||
)} |
||||
|
||||
<button |
||||
disabled={isLoading || !email || !password} |
||||
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" |
||||
> |
||||
{isLoading ? <Spinner className="text-white" /> : 'Continue'} |
||||
</button> |
||||
</form> |
||||
); |
||||
}; |
||||
|
||||
export default EmailLoginForm; |
||||
Loading…
Reference in new issue