task-bldg/src/main/resources/templates/login.html at dc2c34752a5ad18a928e7d410f6d2a425fc9afff

Fork: 0

haya4 / task-bldg

Find file

Newer

Older

task-bldg / src / main / resources / templates / login.html

haya4 on 11 Jul 2022 2 KB ログイン画面の実装

Raw Blame History

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{layout/layout}">
<head>
  <meta charset="UTF-8" th:remove="tag">
</head>
<body>

  <!-- サイドバーの表示 -->
  <div layout:fragment="sidebar"
    th:replace="~{fragments/sidebar :: sidebar}">
  </div>

  <!-- コンテンツの表示 -->
  <main layout:fragment="content" class="bg-image">
    <div class="container">
      <!-- 画面中央に配置 -->
      <div class="row vh-100 align-items-center justify-content-center">

        <div class="card shadow" style="max-width: 480px;">
          <div class="card-body">
            <h3 class="card-title mb-3 text-center text-navy">ログイン</h3>

            <!-- ログインメッセージ -->
            <div th:replace="~{fragments/message :: login}">
            </div>

            <form th:action="@{/login}" method="post">
              <div class="mb-3">
                <input class="form-control" type="text" name="username" placeholder="ユーザ名">
              </div>

              <div class="mb-3">
                <input class="form-control" type="password" name="password" placeholder="パスワード">
              </div>

              <div class="mb-3 form-check">
                <input class="form-check-input" type="checkbox" id="remember-me" name="remember-me">
                <label class="form-check-label" for="remember-me">
                  ログインしたままにする
                </label>
              </div>

              <button class="w-100 btn btn-navy" type="submit">ログイン</button>
            </form>

            <hr>
            <!-- こちらは、次（DBのユーザでログインする）で使います
            <div class="text-center">
              <a th:href="@{/register}" class="text-navy">
                新規登録はこちら
              </a>
            </div>
            -->
          </div>
        </div>

      </div>
    </div>
  </main>

</body>
</html>