import type { CurrentUser, SiteSettings } from '../env';
import { Layout } from './layout';

export function LoginPage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
}) {
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title="登录" showHero={false}>
      <section class="standalone-auth">
        <h1>登录微记</h1>
        <form data-auth-form="login">
          <label><span>用户名或邮箱</span><input name="identifier" autocomplete="username" required /></label>
          <label><span>密码</span><input name="password" type="password" autocomplete="current-password" required /></label>
          <button class="primary-button" type="submit">登录</button>
        </form>
      </section>
    </Layout>
  );
}
