import type { SiteSettings } from '../../env';
import { safeJson } from '../../utils/html';

export function AdminBootstrapPage(props: { settings: SiteSettings; csrfToken: string }) {
  return (
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>初始化 - {props.settings.site_name}</title>
        <link rel="stylesheet" href="/assets/css/wemoments.css" />
        <script dangerouslySetInnerHTML={{ __html: `window.WEMOMENTS_CONFIG=${safeJson({ csrfToken: props.csrfToken })};` }} />
      </head>
      <body>
        <main class="bootstrap-page">
          <section class="standalone-auth">
            <h1>创建首个管理员</h1>
            <form data-bootstrap-form>
              <label><span>Bootstrap Token</span><input name="bootstrapToken" required /></label>
              <label><span>用户名</span><input name="username" pattern="[a-zA-Z0-9_]{3,20}" required /></label>
              <label><span>邮箱</span><input name="email" type="email" required /></label>
              <label><span>昵称</span><input name="displayName" required /></label>
              <label><span>密码</span><input name="password" type="password" minlength={8} required /></label>
              <button class="primary-button" type="submit">创建管理员</button>
            </form>
          </section>
        </main>
        <script defer src="/assets/js/axios.min.js"></script>
        <script defer src="/assets/js/wemoments-admin.js"></script>
      </body>
    </html>
  );
}
