46 lines
2 KiB
JavaScript
46 lines
2 KiB
JavaScript
import { ArrowRight, LockKeyhole, Mail } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { login } from "../api";
|
|
import AuthLayout from "./AuthLayout";
|
|
|
|
export default function LoginPage() {
|
|
const [status, setStatus] = useState({ loading: false, error: "" });
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault();
|
|
setStatus({ loading: true, error: "" });
|
|
const form = new FormData(event.currentTarget);
|
|
try {
|
|
const result = await login({
|
|
email: form.get("email"),
|
|
password: form.get("password"),
|
|
});
|
|
sessionStorage.setItem("agmail_access_token", result.access_token);
|
|
sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
|
|
window.location.assign("/app");
|
|
} catch (error) {
|
|
setStatus({ loading: false, error: error.message });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthLayout
|
|
eyebrow="Welcome back"
|
|
title={<>Your inbox<br /><em>missed you.</em></>}
|
|
description="Sign in to continue working alongside your agents."
|
|
>
|
|
<>
|
|
<div className="card-heading"><h2>Log in to agmail</h2><p>Enter your account details below.</p></div>
|
|
<form className="auth-form" onSubmit={handleSubmit}>
|
|
<label>Email address<div className="input-wrap"><Mail size={16} /><input name="email" type="email" placeholder="you@getall.help" required autoComplete="email" /></div></label>
|
|
<label>Password<div className="input-wrap"><LockKeyhole size={16} /><input name="password" type="password" placeholder="Your password" required autoComplete="current-password" /></div></label>
|
|
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
|
<button className="button button-coral auth-submit" disabled={status.loading}>
|
|
{status.loading ? "Signing in…" : "Log in"} <ArrowRight size={16} />
|
|
</button>
|
|
</form>
|
|
<p className="auth-switch">New to agmail? <a href="/signup">Create an account</a></p>
|
|
</>
|
|
</AuthLayout>
|
|
);
|
|
}
|