You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.2 KiB
132 lines
3.2 KiB
import { GetStaticProps, NextPage } from "next";
|
|
import { NextSeo } from "next-seo";
|
|
|
|
import Layout from "@components/Layout";
|
|
|
|
import multipleClassNames from "@utils/multipleClassNames";
|
|
|
|
import styles from "./login.module.scss";
|
|
import { registrationIsEnabled } from "@utils/config";
|
|
|
|
const Login: NextPage = () => {
|
|
return (
|
|
<Layout>
|
|
<NextSeo title="Login" />
|
|
<div className={styles.body}>
|
|
<div className="columns">
|
|
<div
|
|
className={`col-md-4 ${
|
|
registrationIsEnabled ? "col-ml-auto" : "col-mx-auto"
|
|
}`}
|
|
>
|
|
<h2 className={styles.title}>Login to blog</h2>
|
|
<form action="/api/blog/login" method="post">
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="email">
|
|
Email address
|
|
</label>
|
|
<input
|
|
required
|
|
className="form-input"
|
|
name="username"
|
|
type="email"
|
|
id="email"
|
|
placeholder="mail@example.com"
|
|
/>
|
|
<label className="form-label" htmlFor="password">
|
|
Password
|
|
</label>
|
|
<input
|
|
required
|
|
className="form-input"
|
|
placeholder="Password"
|
|
minLength={8}
|
|
maxLength={128}
|
|
name="password"
|
|
type="password"
|
|
id="password"
|
|
/>
|
|
<label className="form-checkbox">
|
|
<input name="rememberMe" type="checkbox" />
|
|
<i className="form-icon" /> Remember me
|
|
</label>
|
|
<input
|
|
className={multipleClassNames(
|
|
"btn btn-primary",
|
|
styles.loginButton
|
|
)}
|
|
type="submit"
|
|
value="Login"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{registrationIsEnabled && (
|
|
<>
|
|
<div
|
|
className={multipleClassNames("divider-vert", styles.divider)}
|
|
data-content="OR"
|
|
/>
|
|
<div className="col-md-4 col-mr-auto">
|
|
<h2 className={styles.title}>Create new account</h2>
|
|
<form action="/api/blog/signup" method="post">
|
|
<div className="form-group">
|
|
<label className="form-label" htmlFor="email">
|
|
Email address
|
|
</label>
|
|
<input
|
|
required
|
|
className="form-input"
|
|
name="email"
|
|
type="email"
|
|
id="email"
|
|
placeholder="mail@example.com"
|
|
/>
|
|
<label className="form-label" htmlFor="password">
|
|
Password
|
|
</label>
|
|
<input
|
|
required
|
|
className="form-input"
|
|
placeholder="Password"
|
|
minLength={8}
|
|
maxLength={128}
|
|
name="password"
|
|
type="password"
|
|
id="password"
|
|
/>
|
|
|
|
<label className="form-label" htmlFor="password">
|
|
Name
|
|
</label>
|
|
<input
|
|
required
|
|
className="form-input"
|
|
placeholder="Full name"
|
|
maxLength={32}
|
|
name="name"
|
|
type="text"
|
|
id="name"
|
|
/>
|
|
|
|
<input
|
|
className={multipleClassNames(
|
|
"btn btn-primary",
|
|
styles.signupButton
|
|
)}
|
|
type="submit"
|
|
value="Signup"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Login;
|