<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>登录</title>
    {% include 'includes/script.html' %}
    <link rel="stylesheet" href="/static/admin/css/other/login.css" />
  </head>

  <body background="/static/admin/images/background.svg">
    <form class="layui-form">
      <div class="demo-login-container">
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input
              type="text"
              name="username"
              value="正心全栈编程"
              lay-verify="required"
              placeholder="用户名"
              lay-reqtext="请填写用户名"
              autocomplete="off"
              class="layui-input"
              lay-affix="clear"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input
              type="password"
              name="password"
              value="123654"
              lay-verify="required"
              placeholder="密   码"
              lay-reqtext="请填写密码"
              autocomplete="off"
              class="layui-input"
              lay-affix="eye"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <input
            type="checkbox"
            name="remember"
            lay-skin="primary"
            title="记住密码"
            checked
          />
          <a href="#forget" style="float: right; margin-top: 7px">忘记密码？</a>
        </div>
        <div class="layui-form-item">
          <button
            class="layui-btn layui-btn-fluid login"
            lay-submit
            lay-filter="login-in"
          >
            登录
          </button>
        </div>
        <div class="layui-form-item demo-login-other">
          <label>社交账号登录</label>
          <span style="padding: 0 21px 0 6px">
            <a href="javascript:;">
              <i
                class="layui-icon layui-icon-login-qq"
                style="color: #3492ed"
              ></i
            ></a>
            <a href="javascript:;"
              ><i
                class="layui-icon layui-icon-login-wechat"
                style="color: #4daf29"
              ></i
            ></a>
            <a href="javascript:;"
              ><i
                class="layui-icon layui-icon-login-weibo"
                style="color: #cf1900"
              ></i
            ></a>
          </span>
          或 <a href="#reg">注册帐号</a>
        </div>
      </div>
    </form>
    <script>
      layui.use(["form", "button", "popup"], function () {
        var form = layui.form;
        var button = layui.button;
        var popup = layui.popup;
        var $ = layui.$;

        // 登 录 提 交
        form.on("submit(login-in)", function (data) {
          /// 验证

          /// 动画
          let btn = button.load({ elem: ".login" });

          /// 登录
          $.ajax({
            url: "/api/v1/login",
            type: "POST",
            data: JSON.stringify(data.field),
            contentType: "application/json",
            success: function (res) {
              btn.stop(function () {
                popup.success("登录成功", function () {
                  location.href = "/";
                });
              });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              btn.stop(function () {
                popup.failure(XMLHttpRequest.responseJSON.message);
              });
            },
          });
          return false;
        });
      });
    </script>
  </body>
</html>
