DBのユーザでログインする

#Thymeleafテンプレート作成

register.htmlを編集

```
<!DOCTYPE html>
<html xmlns:th="http//www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body class="bg-gradient-primary">
	<!-- Main -->
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-xl-10 col-lg-12 col-md-9">
			<!-- card -->
				<div class="card o-hidden border-0 shadow-lg my-5">
					<div class="card-body p-0">
						<div class="row">
						<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
						<div class="col-lg-6">
						<div class="p-5">
						
						<!-- Reistration -->
						<div class="text-center">
							<h1 class="h4 text-gray-900 mb-4">ユーザ登録</h1>
						</div>
						<form th:action="@{/register}" th:object="${user}" method="post" novalidate>
							<div class="form-group">
								<label for="name">
								<span class="badge badge-danger">必須</span>ユーザ名								
								</label>
								<input type="text" class="form-control" th:errorclass="is-invalid" th:field="*{username}">
								<div class="invalid-feedback" th:errors="*{username}"></div>
							</div>
							<div class="form-group">
								<label for="password">
									<span class="badge badge-danger">必須</span>パスワード
								</label>
								<input type="password" class="form-control" th:errorclass="is-invalid" th:field="*{password}">
								<div class="invalid-feedback" th:errors="*{password}"></div>
							</div>
							<div class="form-group">
							<label for="email">
								<span class="badge badge-danger">必須</span>メールアドレス
							</label>
							<input type="email" class="form-control"
									th:errorclass="is-invalid" th:field="*{email}">
							<div class="invalid-feedback" th:errors="*{email}"></div>
							</div>
							<div class="form-group">
								<label for="email">性別</label>
								<div th:each="gender:${T(com.example.demo.util.Type).GENDERS}">
									<input type="radio" class="ml-2" th:field="*{gender}"
											th:value="${gender.key}">
									<label th:for="${#ids.prev('gender')}" th:text="${gender.value}">
									</label>
								</div>
							</div>
							<div class="form-check mb-2">
								<input type="checkbox" class="form-check-input" th:field="*{admin}">
								<label th:for="${#ids.prev('admin')}">管理者として登録する</label>
							</div>
							<button class="btn btn-primary btn-user btn-block">登録</button>
						</form>
						</div>
						</div>
						</div>				
					</div>								
				</div>									
			</div>
		</div>
	</div>
</body>
</html>
```

sidebar.htmlを編集

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
</head>
<body>
<th:block th:fragment="sidebar">

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">


<a class="sidebar-brand d-flex align-items-center justify-content-center" th:href="@{/}">
	<div class="sidebar-brand-icon rotate-n-15">
		<i class="fas fa-id-card"></i>
	</div>
	<div class="sidebar-brand-text mx-3">ユーザ管理</div>
</a>

<hr class="sidebar-divider d-none d-md-block">

<!-- Nav Item -->
<li class="nav-item active">
	<a class="nav-link pt-2" th:href="@{/}">
		<i class="fas fa-user">
		<span>ログイン情報</span>
	</a>
</li>
<th:block sec:authorize="hasRole('ADMIN')">
	<li class="nav-item active">
	<a class="nav-link pt-2" th:href="@{/admin/list}">
		<i class="fas fa-table"></i>
		<span>ユーザ一覧</span>
	</a>
	</li>
</th:block>
<hr class="sidebar-divider d-none d-md-block">
<li class="nav-item active">
	<a class="nav-link" th:href="@{/logout}">
		<i class="fas fa-sign-out-alt"></i>
		<span>ログアウト</span>
	</a>
</li>


<hr class="sidebar-divider d-none d-md-block">

<div class="text-center d-none d-md-inline">
	<button class="rounded-circle border-0" id="sidebarToggle">
	</button>
</div>

</ul>
</th:block>

</body>
</html>
```
base.htmlを編集

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:fragment="header">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ユーザ管理システム</title>
<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/all.min.css}">
<link rel="stylesheet" th:href="@{/webjars/startbootstrap-sb-admin-2/css/sb-admin-2.min.css}">
<link rel="stylesheet" th:href="@{/css/app.css}">
<link rel="stylesheet" th:href="@{/webjars/datatables/css/dataTables.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/webjars/datatables-buttons/css.buttons.dataTables.min.css}">
</th:block>
</head>
<body>
	<th:block th:fragment="scripts">
	<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
	<script th:src="@{/webjars/popper.js./umd/popper.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/webjars/startbootstrap-sb-admin-2/js/sb-admin-2.min.js}"></script>
	<script th:src="@{/webjars/chartjs/Chart.min.js}"></script>
	
	<script th:src="@{/webjars/datatables/js/jquery.dataTables.min.js}"></script>
	<script th:src="@{/webjars/datatables/js/dataTables.bootstrap4.min.js}"></script>
	<script th:src="@{/webjars/datatables-buttons/js/dataTables.buttons.min.js}"></script>
	<script th:src="@{/webjars/datatables-buttons/js/buttons.html5.min.js}"></script>
	<script th:src="@{/webjars/datatables-buttons/js.buttons-.print.min.js}"></script>
	<script th:src="@{/webjars/jszip/jszip.min.js}"></script>
	</th:block>
</body>
</html>
```
list.htmlを作成

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body id="page-top">
	<!-- Page Wrapper -->
	<div id="wrapper">
		<th:block th:insert="fragments/sidebar :: sidebar"></th:block>
		
	<div id="content-wrapper" class="d-flex flex-column">
	<div id="content">
	<div class="contaier-fluid">
	<!-- list -->
		<div class="card shadow my-4">
			<div class="card-header py-3">
				<h6 class="m-0 fontweight-bold text-primary">ユーザ一覧</h6>
			</div>
			<div class="card-body">
				<div class="tabel-reponsive">
					<table id="user-table" class="table table-bordered">
						<thead>
						<tr>
							<th>#</th>
							<th>ユーザ名</th>
							<th>Email</th>
							<th>性別</th>
							<th>権限</th>
						</tr>
						</thead>
						<tbody>
							<tr th:each="user:${users}" th:object="${user}">
							<td th:text="*{id}"></td>
							<td th:text="*{username}"></td>
							<td th:text="*{email}"></td>
							<td th:text="${T(com.example.demo.util.Type).GENDERS.get(user.gender)}"></td>
							<td th:text="*{role}"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	</div>
	</div>
	</div>
	<th:block th:insert="fragments/base :: scripts"></th:block>
	<script th:sec="@{/js/usertables.js}"></script>
</body>
</html>
```

#javaScriptを作成

```
$(function(){
	$("#user-table").tadaTable({
		"language":{"url": "/webjars/datatables-plugins/i18n/Japanese.json"},
					dom:'Bfrtip',buttons:[
							'excelHtml5',
							'csvHtml5',
							'print'
							]
							});
	});
```






#確認

1.DBにadminアカウントを登録ができるか確認
ブラウザでhttp://www.localhost:8080/login/　にアクセスしその後「新規登録はこちら」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/f811f2da-7ca8-6b13-7538-a129c1598b5d.png)
「ユーザ名」「パスワード」「メールアドレス」を入力後登録ボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/0c09961e-e073-a499-db91-6db52f005348.png)
「ユーザを新規登録しました」が表示されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/d4b487cd-6ee2-da67-a99d-f7199fe99e1b.png)


2.アカウント登録したアカウントでログインできるか確認

1で登録したアカウントを入力後ログインを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/d4afbff5-d073-5ef6-dc11-fe834659fad2.png)
ログインできたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/7c72f801-11a1-aeeb-9a6f-10f4f84d1c30.png)

#以上