# 登录

没登录时侧边栏只有这一屏：标志、名字、一句话、新账号福利、Google 继续、或用邮箱（两步：邮箱 → 密码）、条款。

```html
<div class="xxd-auth" data-xxd-auth style="border:1px solid var(--line);background:var(--paper)">
  <span class="xxd-logo" data-size="lg"><span class="xxd-logo__mark"></span></span>
  <h2 class="xxd-auth__name">小小东 · 长文发布</h2>
  <p class="xxd-auth__line">把 Markdown 写进 X 文章，排版、图片一起带过去。</p>
  <span class="xxd-auth__gift">新账号送 7 天完整体验</span>
  <form>
    <button class="xxd-btn" data-block type="button"><i data-xxd-icon="Globe" data-size="16"></i>使用 Google 继续</button>
    <div class="xxd-auth__or">或使用邮箱</div>
    <div data-step="email" data-active>
      <input class="xxd-input" type="email" placeholder="you@example.com" aria-label="邮箱" required>
      <button class="xxd-btn" data-variant="primary" data-block data-auth-next="password" hidden>继续</button>
    </div>
    <div data-step="password">
      <p class="xxd-help">登录 <b data-auth-email></b></p>
      <input class="xxd-input" type="password" placeholder="密码" aria-label="密码">
      <div class="xxd-cluster"><button class="xxd-btn ui-dialog-cancel" data-auth-back="email">返回</button><button class="xxd-btn" data-variant="primary" style="flex:1">继续</button></div>
      <button class="xxd-link" type="button" style="justify-self:start">忘记密码？</button>
    </div>
  </form>
  <p class="xxd-auth__terms">继续即表示同意 <a class="xxd-link" href="#">服务条款</a> 和 <a class="xxd-link" href="#">隐私政策</a></p>
</div>
```
- <html data-account> 在首帧前就设好（不闪登录页）
- 邮箱里有字了「继续」才出现
- 会话过期回到这里时，要说一句为什么