2026_09_5H_Spring_KIZAKI/Monegement
16
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: 2026_09_5H_Spring_KIZAKI:3b97d1f4324bd876040c235f6011b27b6bbb42e5
Branches Tags
2026_09_5H_Spring_KIZAKI:master 2026_09_5H_Spring_KIZAKI:n-kawahito 2026_09_5H_Spring_KIZAKI:s-choi 2026_09_5H_Spring_KIZAKI:s-morimoto 2026_09_5H_Spring_KIZAKI:k-oshita 2026_09_5H_Spring_KIZAKI:k-kobayashi 2026_09_5H_Spring_KIZAKI:s-morimto 2026_09_5H_Spring_KIZAKI:s-kikuchi
..
compare: 2026_09_5H_Spring_KIZAKI:d0e14ce2dc654f5087b299b70a89075f811a4489
Branches Tags
2026_09_5H_Spring_KIZAKI:master 2026_09_5H_Spring_KIZAKI:n-kawahito 2026_09_5H_Spring_KIZAKI:s-choi 2026_09_5H_Spring_KIZAKI:s-morimoto 2026_09_5H_Spring_KIZAKI:k-oshita 2026_09_5H_Spring_KIZAKI:k-kobayashi 2026_09_5H_Spring_KIZAKI:s-morimto 2026_09_5H_Spring_KIZAKI:s-kikuchi

7 Commits
3b97d1f432 ... d0e14ce2dc

Author SHA1 Message Date
n-kawahito
d0e14ce2dc [ADD]全画面共通cssファイルを作成しました 2026-09-24 15:18:56 +09:00
n-kawahito
ab2bb89d24 [EDIT]スマホ画面のデザインに統一しました 2026-09-24 15:18:15 +09:00
kkazuya
87fbc67a02 Merge branch 'n-kawahito' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into k-kobayashi 2026-09-24 11:05:52 +09:00
kkazuya
2139cad2b7 [EDIT] コース変更画面のみフッターが表示されるよう修正しました。 2026-09-24 11:05:26 +09:00
n-kawahito
2fcc56b24b Merge branch 's-morimto' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into n-kawahito 2026-09-24 11:01:36 +09:00
n-kawahito
8fa363ad56 Merge branch 'k-kobayashi' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into n-kawahito 2026-09-24 10:53:24 +09:00
n-kawahito
149f9b220c Merge branch 's-morimto' of https://gitea.it-college.co.jp/2026_09_5H_Spring_KIZAKI/Monegement into n-kawahito 2026-09-24 10:47:05 +09:00
21 changed files with 1493 additions and 669 deletions
Expand all files Collapse all files

3
src/main/resources/static/css/menu.css
View File

@@ -1,6 +1,7 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding-top:80px;
padding-bottom:120px;
} }
#calendar { #calendar {

214
src/main/resources/static/css/style.css Normal file
View File

@@ -0,0 +1,214 @@
/* =======================
全体
======================= */
body {
padding-top: 80px;
padding-bottom: 80px;
background-color: #f8f9fa;
}
/* =======================
コンテンツ
======================= */
.main-container {
max-width: 480px;
margin: 0 auto;
padding: 0 12px;
}
/* =======================
タイトル
======================= */
.page-title {
text-align: center;
font-weight: bold;
margin-bottom: 20px;
}
/* =======================
ヘッダー
======================= */
.app-header {
background-color: #E3F2FD;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.app-logo {
font-size: 1.2rem;
font-weight: bold;
}
/* =======================
フッター
======================= */
.app-footer {
background-color: #E3F2FD;
border-top: 1px solid #d0d7de;
}
/* =======================
カード
======================= */
.app-card {
background-color: #ffffff;
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.card {
border-radius: 12px;
margin-bottom: 12px;
}
.card-body {
padding: 12px;
}
/* =======================
カレンダー
======================= */
#calendar {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#calendar th,
#calendar td {
border: 1px solid black;
}
th {
font-weight: bold;
height: 35px;
font-size: 13px;
text-align: center;
}
td {
width: 14%;
height: 70px;
padding: 5px;
text-align: left;
vertical-align: top;
}
td:hover {
background-color: lightblue;
}
.holiday {
color: red;
}
#today {
font-weight: bold;
background-color: bisque;
}
.calendar-title {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
text-align: center;
}
.calendar-date {
display: flex;
align-items: baseline;
gap: 10px;
}
.year {
font-size: 20px;
}
.month {
font-size: 30px;
font-weight: bold;
}
.month-button {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 28px;
text-decoration: none;
color: #333;
border-radius: 50%;
}
.month-button:hover {
background-color: #eee;
}
.month-button:last-child {
justify-self: end;
}
.date {
font-size: 13px;
font-weight: bold;
}
.income {
color: blue;
font-size: 10px;
}
.expense {
color: red;
font-size: 10px;
}
.total {
margin: 15px 10px;
padding: 10px;
border-top: 1px solid #ddd;
font-size: 16px;
text-align: right;
}
/* =======================
金額表示
======================= */
.plus {
color: #dc3545;
font-weight: bold;
}
.minus {
color: #0d6efd;
font-weight: bold;
}
/* =======================
テーブル
======================= */
.table {
background-color: white;
}
.table th {
vertical-align: middle;
}
.table td {
vertical-align: middle;
}
/* =======================
ボタン
======================= */
.btn {
border-radius: 10px;
}

21
src/main/resources/templates/analysis.html
View File

@@ -4,17 +4,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type"> <meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>分析画面</title> <title>分析画面</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<div class="container mt-4"> <div class="main-container">
<h2 class="text-center">支出分析</h2> <h2 class="page-title">支出分析</h2>
<div class="text-center"> <div class="calendar-title">
<a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}"> <a class="month-button" th:href="@{/analysis(year=${previousYear}, month=${previousMonth})}">
← ←
@@ -49,8 +50,8 @@
? '＋' + ${analysisForm.totalDifferenceAmount} ? '＋' + ${analysisForm.totalDifferenceAmount}
: ${analysisForm.totalDifferenceAmount}" : ${analysisForm.totalDifferenceAmount}"
th:class="${analysisForm.totalDifferenceAmount >= 0} th:class="${analysisForm.totalDifferenceAmount >= 0}
? 'color-danger;' ? 'text-danger'
: 'color-primary;'"> : 'text-primary'">
0 0
</td> </td>
</tr> </tr>
@@ -84,16 +85,16 @@
? '＋' + ${category.monthDifferenceAmount} ? '＋' + ${category.monthDifferenceAmount}
: ${category.monthDifferenceAmount}" : ${category.monthDifferenceAmount}"
th:class="${category.monthDifferenceAmount >= 0} th:class="${category.monthDifferenceAmount >= 0}
? 'color-danger;' ? 'text-danger'
: 'color-primary;'"> : 'text-primary'">
</span> </span>
<br> <br>
<span th:text="${category.courseDifferenceAmount >= 0} <span th:text="${category.courseDifferenceAmount >= 0}
? '＋' + ${category.courseDifferenceAmount} ? '＋' + ${category.courseDifferenceAmount}
: ${category.courseDifferenceAmount}" : ${category.courseDifferenceAmount}"
th:class="${category.courseDifferenceAmount >= 0} th:class="${category.courseDifferenceAmount >= 0}
? 'color-danger;' ? 'text-danger'
: 'color-primary;'"> : 'text-primary'">
</span> </span>
</td> </td>
</tr> </tr>

159
src/main/resources/templates/authentication.html
View File

@@ -2,59 +2,122 @@
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>認証</title> <title>認証</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<main> <div class="main-container">
<h1>本人認証確認</h1>
<h1 class="page-title">
<form th:action="@{/authentication}" th:object="${authenticationForm}" method="post"> 本人認証
</h1>
<div>
<label for="mailAddress">メールアドレス</label> <div class="card shadow-sm">
<input type="email" id="mailAddress" th:field="*{mailAddress}">
</div> <div class="card-body">
<div> <form th:action="@{/authentication}"
<label for="secretQuestionId">秘密の質問</label> th:object="${authenticationForm}"
<select id="secretQuestionId" th:field="*{secretQuestionId}"> method="post">
<option value="">選択してください</option> <div class="mb-3">
<option th:each="question : ${questionList}" th:value="${question.secretQuestionId}" <label for="mailAddress"
th:text="${question.questionText}"> class="form-label">
</option> メールアドレス
</label>
</select>
</div> <input type="email"
id="mailAddress"
<div> class="form-control"
<label for="secretAnswer">秘密の質問の回答</label> th:field="*{mailAddress}"
<input type="text" id="secretAnswer" th:field="*{secretAnswer}"> required>
</div>
</div>
<button type="submit">確認</button>
<div class="mb-3">
</form>
<label for="secretQuestionId"
<form th:action="@{/login}" method="get"> class="form-label">
<button type="submit">戻る</button> 秘密の質問
</form> </label>
</main>
<select id="secretQuestionId"
<script th:if="${errorMessage}" th:inline="javascript"> class="form-select"
alert(/*[[${errorMessage}]]*/); th:field="*{secretQuestionId}">
</script>
<option value="">
選択してください
</option>
<option th:each="question : ${questionList}"
th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
<div class="mb-3">
<label for="secretAnswer"
class="form-label">
秘密の質問の回答
</label>
<input type="text"
id="secretAnswer"
class="form-control"
th:field="*{secretAnswer}"
required>
</div>
<div class="d-grid gap-2">
<button type="submit"
class="btn btn-primary">
確認
</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}"
method="get">
<button type="submit"
class="btn btn-outline-secondary w-100">
戻る
</button>
</form>
</div>
</div>
<script th:if="${errorMessage}"
th:inline="javascript">
alert(/*[[${errorMessage}]]*/);
</script>
</body> </body>
</html> </html>

3
src/main/resources/templates/footer.html
View File

@@ -4,10 +4,11 @@
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>フッター</title> <title>フッター</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body> <body>
<footer th:fragment="footer" class="fixed-bottom border-top py-2" style="background-color:#E3F2FD;"> <footer th:fragment="footer" class="fixed-bottom border-top py-2 app-footer" style="background-color:#E3F2FD;">
<nav data-bs-theme="light"> <nav data-bs-theme="light">
<div class="card-footer text-center"> <div class="card-footer text-center">

66
src/main/resources/templates/goal_edit.html
View File

@@ -1,43 +1,55 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>目標編集</title> <title>目標編集</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<div class="main-container">
<h1>目標編集</h1> <h1 class="page-title">目標編集</h1>
<div class="card shadow-sm">
<div class="card-body">
<form th:action="@{/goal/update}" th:object="${goalForm}" method="post">
<input type="hidden" th:field="*{goalId}">
<form th:action="@{/goal/update}" th:object="${goalForm}" method="post"> <div>
<input type="hidden" th:field="*{goalId}"> <label>目標名</label>
<input type="text" th:field="*{goalTitle}" required>
</div>
<div> <div>
<label>目標名</label> <label>目標説明</label>
<input type="text" th:field="*{goalTitle}" required> <textarea th:field="*{goalSubtitle}" required></textarea>
</div>
<div>
<label>目標金額</label>
<input type="number" th:field="*{targetAmount}" required min="1">
</div>
<div>
<label>目標達成期限</label>
<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
</div>
</form>
</div> </div>
</div>
<div>
<label>目標説明</label> <button type="submit" class="btn btn-sm btn-primary w-100">更新する</button>
<textarea th:field="*{goalSubtitle}" required></textarea>
</div> </div>
<div>
<label>目標金額</label>
<input type="number" th:field="*{targetAmount}" required min="1">
</div>
<div>
<label>目標達成期限</label>
<input type="date" th:field="*{deadline}" th:min="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd')}" required>
</div>
<button type="submit">更新する</button>
</form>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>

15
src/main/resources/templates/goal_view.html
View File

@@ -1,19 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>目標詳細</title> <title>目標詳細</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<h1>目標詳細</h1> <div class="main-container">
<h1 class="page-title">目標詳細</h1>
<table> <table class="table">
<tr> <tr>
<th>目標名</th> <th>目標名</th>
<td th:text="${goalForm.goalTitle}"></td> <td th:text="${goalForm.goalTitle}"></td>
@@ -40,7 +43,9 @@
</table> </table>
<a th:href="@{/goal/edit}">編集する</a> <a th:href="@{/goal/edit}" class="btn btn-sm btn-primary w-100">編集する</a>
</div>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>

3
src/main/resources/templates/header.html
View File

@@ -4,12 +4,13 @@
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ヘッダー</title> <title>ヘッダー</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body> <body>
<header th:fragment="header" class="fixed-top"> <header th:fragment="header" class="fixed-top">
<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light"> <nav class="navbar app-header" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid"> <div class="container-fluid">
<a th:href="@{/menu}" class="navbar-brand fw-bold">Monegement</a> <a th:href="@{/menu}" class="navbar-brand fw-bold">Monegement</a>
<div class="d-flex gap-2"> <div class="d-flex gap-2">

133
src/main/resources/templates/login.html
View File

@@ -1,50 +1,101 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org"> <html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>ログイン</title> <title>ログイン</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div> <div th:replace="~{header :: header}">
</div>
<main>
<h1>ログイン</h1> <div class="main-container">
<div th:if="${errorMessage}" th:text="${errorMessage}"></div> <h1 class="page-title">
<form th:action="@{/login}" th:object="${loginForm}" method="post"> ログイン
<div> </h1>
<label for="mailAddress">メールアドレス</label>
<div class="card shadow-sm">
<input type="email"
id="mailAddress" <div class="card-body">
th:field="*{mailAddress}"
required> <div th:if="${errorMessage}"
</div> class="alert alert-danger">
<div> <span th:text="${errorMessage}">
<label for="password">パスワード</label> </span>
<input type="password" </div>
id="password"
th:field="*{password}" <form th:action="@{/login}"
required> th:object="${loginForm}"
</div> method="post">
<div> <div class="mb-3">
<button type="submit">ログイン</button>
</div> <label for="mailAddress"
</form> class="form-label">
メールアドレス
<div> </label>
<a th:href="@{user/register}">新規会員登録</a>
</div> <input type="email"
id="mailAddress"
<div> class="form-control"
<a th:href="@{/authentication}">パスワードを忘れた方</a> th:field="*{mailAddress}"
</div> required>
</main>
</div>
<div class="mb-3">
<label for="password"
class="form-label">
パスワード
</label>
<input type="password"
id="password"
class="form-control"
th:field="*{password}"
required>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
ログイン
</button>
</div>
</form>
</div>
</div>
<div class="text-center mt-3">
<a th:href="@{/user/register}">
新規会員登録
</a>
</div>
<div class="text-center mt-2">
<a th:href="@{/authentication}">
パスワードを忘れた方
</a>
</div>
</div>
</body> </body>
</html> </html>

92
src/main/resources/templates/menu.html
View File

@@ -8,13 +8,13 @@
<title>Calendar</title> <title>Calendar</title>
<link rel="stylesheet" th:href="@{/css/menu.css}"> <link rel="stylesheet" th:href="@{/css/style.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
@@ -97,51 +97,67 @@
</table> </table>
<div class="total"> <div class="card shadow-sm mb-3">
<div> <div class="card-body">
<span>収入：</span>
<span th:text="${totalIncome}"></span>
<span>円</span>
</div>
<div> <div class="d-flex justify-content-between mb-2">
<span>支出：</span> <span>収入</span>
<span th:text="${totalExpense}"></span> <span th:text="'￥' + ${totalIncome}"></span>
<span>円</span> </div>
</div>
</div> <div class="d-flex justify-content-between">
<span>支出</span>
<span th:text="'￥' + ${totalExpense}"></span>
</div>
</div>
<div>
<span>目標貯金</span>
<span th:text="${targetAmount}"></span>
<span>円</span>
</div> </div>
<div> <hr class="border border-primary border-2 opacity-50">
<span>現在高</span>
<span th:text="${currentAmount}"></span> <div class="card shadow-sm mb-3">
<span>円</span>
</div> <div class="card-body">
<div class="d-flex justify-content-between mb-2">
<span>目標資金</span>
<span th:text="'￥' + ${targetAmount}"></span>
</div>
<div class="d-flex justify-content-between mb-2">
<span>現在高</span>
<span th:text="'￥' + ${currentAmount}"></span>
</div>
<div class="d-flex justify-content-between">
<span>貯金額</span>
<span th:text="'￥' + ${saving}"></span>
</div>
</div>
<div>
<span>貯金額</span>
<span th:text="${saving}"></span>
<span>円</span>
</div> </div>
<hr> <div class="card shadow-sm">
<div> <div class="card-body">
<span>達成率</span>
<span th:text="${achievementRate}"></span> <div class="d-flex justify-content-between mb-2">
<span>%</span> <span>達成率</span>
</div> <span th:text="${achievementRate} + '%'"
<div> class="badge bg-success">
<span>達成期限</span> </span>
<span th:text="${deadline}"></span> </div>
<span>円</span>
<div class="d-flex justify-content-between">
<span>達成期限</span>
<span th:text="${deadline}"></span>
</div>
</div>
</div> </div>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>

119
src/main/resources/templates/password_reset.html
View File

@@ -1,46 +1,91 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org"> <html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>パスワード再設定</title> <title>パスワード再設定</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body> <body style="padding-top:80px; padding-bottom:80px;">
<!--<body class="pb-5 pt-5">-->
<!-- <div th:replace="~{header :: header}">--> <div th:replace="~{header :: header}">
<!-- </div>--> </div>
<main> <div class="main-container">
<h1>パスワード再設定</h1>
<h1 class="page-title">
<form th:action="@{/password/reset}" th:object="${passwordResetForm}" method="post"> パスワード再設定
<div> </h1>
<label for="password">新しいパスワード</label>
<input type="password" <div class="card shadow-sm">
id="password"
th:field="*{password}" <div class="card-body">
minlength="8"
maxlength="255" <form th:action="@{/password/reset}"
required> th:object="${passwordResetForm}"
</div> method="post">
<div> <div class="mb-3">
<label for="passwordConfirm">パスワード確認</label>
<input type="password" <label for="password"
id="passwordConfirm" class="form-label">
th:field="*{passwordConfirm}" 新しいパスワード
minlength="8" </label>
maxlength="255"
required> <input type="password"
</div> id="password"
class="form-control"
<button type="submit">再設定</button> th:field="*{password}"
</form> minlength="8"
maxlength="255"
<div th:if="${Message}"> required>
<p th:text="${Message}"></p>
</div> </div>
</main>
<div class="mb-3">
<label for="passwordConfirm"
class="form-label">
パスワード確認
</label>
<input type="password"
id="passwordConfirm"
class="form-control"
th:field="*{passwordConfirm}"
minlength="8"
maxlength="255"
required>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
再設定
</button>
</div>
</form>
</div>
</div>
<div th:if="${Message}"
class="alert alert-danger mt-3">
<span th:text="${Message}">
</span>
</div>
</div>
</body> </body>
</html> </html>

149
src/main/resources/templates/profile.html
View File

@@ -1,69 +1,110 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>プロフィール</title> <title>プロフィール</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<main> <div class="main-container">
<div>
<p>氏名</p> <h2 class="page-title">
<p th:text="${profileForm.userName}"></p> プロフィール
</div> </h2>
<div class="card shadow-sm">
<div class="card-body">
<table class="table mb-0">
<tbody>
<tr>
<th>氏名</th>
<td th:text="${profileForm.userName}"></td>
</tr>
<tr>
<th>メールアドレス</th>
<td th:text="${profileForm.mailAddress}"></td>
</tr>
<tr>
<th>生年月日</th>
<td th:text="${profileForm.birthDate}"></td>
</tr>
<tr>
<th>貯蓄金</th>
<td th:text="'￥' + ${profileForm.saving}"></td>
</tr>
<tr>
<th>年収</th>
<td th:text="'￥' + ${profileForm.annualIncome}"></td>
</tr>
<tr>
<th>月別使用可能額</th>
<td th:text="'￥' + ${profileForm.monthlyBudget}"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div> <div class="d-grid gap-2 mt-4">
<p>メールアドレス</p>
<p th:text="${profileForm.mailAddress}"></p> <form th:action="@{/profile/edit}" method="get">
</div>
<button class="btn btn-primary w-100"
<div> type="submit">
<p>生年月日</p> 編集
<p th:text="${profileForm.birthDate}"></p> </button>
</div>
</form>
<div>
<p>パスワード</p> <form th:action="@{/password/reset}" method="get">
<form th:action="@{/password/reset}" method="get">
<button type="submit">パスワード再設定</button> <button class="btn btn-outline-primary w-100"
</form> type="submit">
</div> パスワード再設定
</button>
<div>
<p>貯蓄金</p> </form>
<p th:text="${profileForm.saving}"></p>
</div> <form th:action="@{/logout}" method="post">
<div> <button class="btn btn-secondary w-100"
<p>年収</p> type="submit">
<p th:text="${profileForm.annualIncome}"></p> ログアウト
</div> </button>
<div> </form>
<p>月別使用可能額</p>
<p th:text="${profileForm.monthlyBudget}"></p> <form th:action="@{/withdraw}"
</div> method="post"
onsubmit="return confirm('本当に脱退しますか？');">
<div>
<form th:action="@{/profile/edit}" method="get"> <button class="btn btn-danger w-100"
<button type="submit">編集</button> type="submit">
</form> 脱退
</div> </button>
<form th:action="@{/logout}" method="post"> </form>
<button type="submit">ログアウト</button>
</form> </div>
<form th:action="@{/withdraw}" method="post"
onsubmit="return confirm('本当に脱退しますか？');">
<button type="submit">脱退</button>
</form>
</main>
<div th:replace="~{footer :: footer}"> <div th:replace="~{footer :: footer}">
</div> </div>

160
src/main/resources/templates/profile_edit.html
View File

@@ -1,72 +1,116 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>プロフィール編集</title> <title>プロフィール編集</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<main> <div class="main-container">
<h1>プロフィール編集</h1>
<h1 class="page-title">
<form th:action="@{/profile/edit}"th:object="${profileEditForm}"method="post"> プロフィール編集
<div> </h1>
<label>氏名</label>
<input type="text" <div class="card shadow-sm">
th:field="*{userName}"
maxlength="100" <form th:action="@{/profile/edit}"
required> th:object="${profileEditForm}"
</div> method="post">
<div> <div class="card-body">
<label>メールアドレス</label>
<input type="email" <div class="mb-3">
th:field="*{mailAddress}" <label class="form-label">
maxlength="255" 氏名
required> </label>
</div>
<input type="text"
<div> class="form-control"
<label>パスワード</label> th:field="*{userName}"
<input type="password" maxlength="100"
value="********" required>
disabled> </div>
</div>
<div class="mb-3">
<div> <label class="form-label">
<label>貯蓄金</label> メールアドレス
<input type="number" </label>
th:field="*{saving}"
min="0" <input type="email"
required> class="form-control"
</div> th:field="*{mailAddress}"
maxlength="255"
<div> required>
<label>年収</label> </div>
<input type="number"
th:field="*{annualIncome}" <div class="mb-3">
min="0" <label class="form-label">
required> パスワード
</div> </label>
<div> <input type="password"
<label>月別使用可能額</label> class="form-control"
<input type="number" value="********"
th:field="*{monthlyBudget}" disabled>
min="0" </div>
required>
</div> <div class="mb-3">
<label class="form-label">
<div> 貯蓄金
<button type="submit">確認</button> </label>
</div>
</form> <input type="number"
</main> class="form-control"
th:field="*{saving}"
min="0"
required>
</div>
<div class="mb-3">
<label class="form-label">
年収
</label>
<input type="number"
class="form-control"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div class="mb-3">
<label class="form-label">
月別使用可能額
</label>
<input type="number"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
確認
</button>
</div>
</form>
</div>
</div>
<div th:replace="~{footer :: footer}"> <div th:replace="~{footer :: footer}">
</div> </div>

13
src/main/resources/templates/select_course.html
View File

@@ -4,17 +4,18 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
<title>コース選択</title> <title>コース選択</title>
</head> </head>
<body> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<h1>コース選択</h1> <h1 class="page-title">コース選択</h1>
<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post"> <form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post">
<button type="submit">確定</button> <button type="submit" class="btn btn-primary">確定</button>
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<div class="accordion-item" th:each="course:${courseList}"> <div class="accordion-item" th:each="course:${courseList}">
<h2 class="accordion-header d-flex align-items-center"> <h2 class="accordion-header d-flex align-items-center">
@@ -41,6 +42,10 @@
</div> </div>
</form> </form>
<th:block th:if="${mode=='change'}">
<div th:replace="~{footer :: footer}"></div>
</th:block>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>

137
src/main/resources/templates/transaction_create.html
View File

@@ -2,70 +2,135 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>Insert title here</title> <title>Insert title here</title>
<link rel="stylesheet" th:href="@{/css/menu.css}"> <link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<h1>取引登録</h1> <div class="main-container">
<form th:action="@{/transaction/create}" th:object="${transactionForm}" method="post"> <h1 class="page-title">
取引登録
</h1>
<div> <div class="card shadow-sm">
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<br> <div class="card-body">
<div> <form th:action="@{/transaction/create}"
<label for="transactionType">収入・支出</label> th:object="${transactionForm}"
method="post">
<select id="transactionType" th:field="*{transactionType}"> <div class="mb-3">
<option value="">選択してください</option> <label for="transactionDate"
<option value="1">支出</option> class="form-label">
<option value="2">収入</option> 日付
</label>
</select> <input type="date"
</div> id="transactionDate"
class="form-control"
th:field="*{transactionDate}">
<br> </div>
<div> <div class="mb-3">
<label for="categoryId">カテゴリ</label>
<select id="categoryId" th:field="*{categoryId}"> <label for="transactionType"
class="form-label">
収入・支出
</label>
<option value="">選択してください</option> <select id="transactionType"
class="form-select"
th:field="*{transactionType}">
<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}" <option value="">
th:text="${category.categoryName}"> 選択してください
</option> </option>
</select> <option value="1">
</div> 支出
</option>
<br> <option value="2">
収入
</option>
<div> </select>
<label for="amount">金額</label>
<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください"> </div>
</div>
<br> <div class="mb-3">
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">登録</button> <label for="categoryId"
class="form-label">
カテゴリ
</label>
</form> <select id="categoryId"
class="form-select"
th:field="*{categoryId}">
<option value="">
選択してください
</option>
<option th:each="category : ${categoryFormList}"
th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
</select>
</div>
<div class="mb-3">
<label for="amount"
class="form-label">
金額
</label>
<input type="number"
id="amount"
class="form-control"
th:field="*{amount}"
min="0"
placeholder="金額を入力してください">
</div>
<input type="hidden"
name="today"
th:value="${today}">
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
登録
</button>
</div>
</form>
</div>
</div>
</div>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>

124
src/main/resources/templates/transaction_detail.html
View File

@@ -2,61 +2,109 @@
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>収支詳細</title> <title>収支詳細</title>
<link rel="stylesheet" th:href="@{/css/transaction_detail.css}"> <link rel="stylesheet" th:href="@{/css/transaction_detail.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<h1 th:text="${today}"></h1> <div class="main-container">
<div> <h2 class="page-title"
<ul> th:text="${today}">
<li th:each="transactionForm : ${transactionFormList}" class="transaction-item"> </h2>
<div> <div th:each="transactionForm : ${transactionFormList}"
<p> class="card shadow-sm mb-3">
カテゴリ名：
<span th:text="${transactionForm.categoryName}"></span>
<br>
金額：
<span th:text="${transactionForm.amount}"></span>
</p>
</div>
<div class="transaction-buttons"> <div class="card-body">
<form th:action="@{/transaction/delete}" method="post"> <div class="d-flex justify-content-between">
<input type="hidden" name="today" th:value="${today}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}">
<button type="submit">削除</button>
</form>
<form th:action="@{/transaction/update}" method="get"> <span class="fw-bold"
<input type="hidden" name="today" th:value="${today}"> th:text="${transactionForm.categoryName}">
<input type="hidden" name="transactionId" th:value="${transactionForm.transactionId}"> </span>
<button type="submit">編集</button>
</form>
</div> <span th:text="'￥' + ${transactionForm.amount}">
</span>
</div>
<div class="d-flex justify-content-end gap-2 mt-3">
<form th:action="@{/transaction/update}"
method="get">
<input type="hidden"
name="today"
th:value="${today}">
<input type="hidden"
name="transactionId"
th:value="${transactionForm.transactionId}">
<button class="btn btn-sm btn-primary"
type="submit">
編集
</button>
</form>
<form th:action="@{/transaction/delete}"
method="post">
<input type="hidden"
name="today"
th:value="${today}">
<input type="hidden"
name="transactionId"
th:value="${transactionForm.transactionId}">
<button class="btn btn-sm btn-danger"
type="submit">
削除
</button>
</form>
</div>
</div>
</div>
<div class="d-grid mt-4">
<form th:action="@{/transaction/create}"
method="get">
<input type="hidden"
name="today"
th:value="${today}">
<button class="btn btn-success w-100"
type="submit">
新規登録
</button>
</form>
</div>
<hr>
<hr>
</li>
</ul>
</div> </div>
<form th:action="@{/transaction/create}" method="get">
<input type="hidden" name="today" id="today" th:value="${today}">
<button type="submit">新規登録</button>
</form>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>
</body> </body>

35
src/main/resources/templates/transaction_list.html
View File

@@ -2,17 +2,19 @@
<html xmlns:th="http://www.thymeleaf.org"> <html xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>一覧</title> <title>一覧</title>
<link rel="stylesheet" th:href="@{/css/menu.css}"> <link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}"></div>
<div class="main-container">
<div class="calendar-title"> <div class="calendar-title">
<a class="month-button" th:href="@{/transaction/list( <a class="month-button" th:href="@{/transaction/list(
@@ -40,20 +42,27 @@
<div th:each="transactionForm : ${transactionFormMap}"> <div th:each="transactionForm : ${transactionFormMap}"
th:if="${!transactionForm.value.isEmpty()}"
class="card shadow-sm mb-3">
<div class="card-body">
<a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}"> <a th:href="@{/transaction/detail(todayDates=${transactionForm.key})}" class="text-decoration-none">
<h3 th:text="${transactionForm.key}"></h3> <h3 th:text="${transactionForm.key}" class="fw-bold"></h3>
</a> </a>
<ul> <div th:each="transaction : ${transactionForm.value}"
<li th:each="transaction : ${transactionForm.value}"> class="d-flex justify-content-between mb-2">
<p>カテゴリ名：<span th:text="${transaction.categoryName}"></span>  
<br>金額：<span th:text="${transaction.amount}"></span> <span th:text="${transaction.categoryName}">
</p> </span>
<hr />  
</li> <span th:text="'￥' + ${transaction.amount}">
</ul> </span>
 
</div>
</div>
</div> </div>
<div th:replace="~{footer :: footer}"></div> <div th:replace="~{footer :: footer}"></div>

149
src/main/resources/templates/transaction_update.html
View File

@@ -2,74 +2,139 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>Insert title here</title> <title>取引更新</title>
<link rel="stylesheet" th:href="@{/css/menu.css}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"></div> <div th:replace="~{header :: header}">
</div>
<h1>取引登録</h1> <div class="main-container">
<form th:action="@{/transaction/update}" th:object="${transactionForm}" method="post"> <h1 class="page-title">
取引更新
</h1>
<input type="hidden" name="transactionId" th:value="${transactionId}"> <div class="card shadow-sm">
<div>
<label for="transactionDate">日付</label>
<input type="date" id="transactionDate" name="transactionDate" th:value="*{transactionDate}">
</div>
<br> <div class="card-body">
<div> <form th:action="@{/transaction/update}"
<label for="transactionType">収入・支出</label> th:object="${transactionForm}"
method="post">
<select id="transactionType" th:field="*{transactionType}"> <input type="hidden"
name="transactionId"
th:value="${transactionId}">
<option value="">選択してください</option> <input type="hidden"
<option value="0">支出</option> name="today"
<option value="1">収入</option> th:value="${today}">
</select> <div class="mb-3">
</div> <label for="transactionDate" class="form-label">
日付
</label>
<input type="date"
id="transactionDate"
class="form-control"
name="transactionDate"
th:value="*{transactionDate}">
</div>
<br> <div class="mb-3">
<div> <label for="transactionType"
<label for="categoryId">カテゴリ</label> class="form-label">
収入・支出
</label>
<select id="categoryId" th:field="*{categoryId}"> <select id="transactionType"
class="form-select"
th:field="*{transactionType}">
<option value="">選択してください</option> <option value="">
選択してください
</option>
<option th:each="category : ${categoryFormList}" th:value="${category.categoryId}" <option value="0">
th:text="${category.categoryName}"> 支出
</option> </option>
</select> <option value="1">
</div> 収入
</option>
<br> </select>
<div> </div>
<label for="amount">金額</label>
<input type="number" id="amount" th:field="*{amount}" min="0" placeholder="金額を入力してください"> <div class="mb-3">
</div>
<br> <label for="categoryId"
<input type="hidden" name="today" id="today" th:value="${today}"> class="form-label">
カテゴリ
</label>
<button type="submit">登録</button> <select id="categoryId"
class="form-select"
th:field="*{categoryId}">
</form> <option value="">
選択してください
</option>
<div th:replace="~{footer :: footer}"></div> <option th:each="category : ${categoryFormList}"
th:value="${category.categoryId}"
th:text="${category.categoryName}">
</option>
</select>
</div>
<div class="mb-4">
<label for="amount"
class="form-label">
金額
</label>
<input type="number"
id="amount"
class="form-control"
th:field="*{amount}"
min="0"
placeholder="金額を入力してください">
</div>
<div class="d-grid">
<button type="submit"
class="btn btn-primary">
更新
</button>
</div>
</form>
</div>
</div>
</div>
<div th:replace="~{footer :: footer}">
</div>
</body> </body>

345
src/main/resources/templates/user_register.html
View File

@@ -1,128 +1,227 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org"> <html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet"
th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5">
<div th:replace="~{header :: header}"> <body style="padding-top:80px; padding-bottom:80px;">
</div>
<div th:replace="~{header :: header}">
<main> </div>
<h1>新規会員登録</h1>
<div class="main-container">
<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
<div> <h1 class="page-title">
<label for="userName">氏名</label> 新規会員登録
<input type="text" </h1>
id="userName"
th:field="*{userName}" <div class="card shadow-sm">
maxlength="100"
required> <div class="card-body">
</div>
<form th:action="@{/user/register/course}"
<div> th:object="${userForm}"
<label for="mailAddress">メールアドレス</label> method="post">
<input type="email"
id="mailAddress" <div class="mb-3">
th:field="*{mailAddress}" <label for="userName"
maxlength="255" class="form-label">
required> 氏名
</div> </label>
<div> <input type="text"
<label for="birthDate">生年月日</label> id="userName"
<input type="date" class="form-control"
id="birthDate" th:field="*{userName}"
th:field="*{birthDate}" maxlength="100"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="password">パスワード</label> <label for="mailAddress"
<input type="password" class="form-label">
id="password" メールアドレス
th:field="*{password}" </label>
minlength="8"
maxlength="255" <input type="email"
required> id="mailAddress"
</div> class="form-control"
th:field="*{mailAddress}"
<div> maxlength="255"
<label for="secretQuestionId">秘密の質問</label> required>
<select id="secretQuestionId" </div>
th:field="*{secretQuestionId}"
required> <div class="mb-3">
<option value="">選択してください</option> <label for="birthDate"
<option th:each="question : ${session.questionList}" class="form-label">
th:value="${question.secretQuestionId}" 生年月日
th:text="${question.questionText}"> </label>
</option>
</select> <input type="date"
</div> id="birthDate"
class="form-control"
<div> th:field="*{birthDate}"
<label for="secretAnswer">秘密の質問の回答</label> required>
<input type="text" </div>
id="secretAnswer"
th:field="*{secretAnswer}" <div class="mb-3">
maxlength="100" <label for="password"
required> class="form-label">
</div> パスワード
</label>
<div>
<label for="saving">貯蓄金</label> <input type="password"
<input type="number" id="password"
id="saving" class="form-control"
th:field="*{saving}" th:field="*{password}"
min="0" minlength="8"
required> maxlength="255"
</div> required>
</div>
<div>
<label for="annualIncome">年収</label> <div class="mb-3">
<input type="number" <label for="secretQuestionId"
id="annualIncome" class="form-label">
th:field="*{annualIncome}" 秘密の質問
min="0" </label>
required>
</div> <select id="secretQuestionId"
class="form-select"
<div> th:field="*{secretQuestionId}"
<label for="monthlyBudget">月別使用可能金額</label> required>
<input type="number"
id="monthlyBudget" <option value="">
th:field="*{monthlyBudget}" 選択してください
min="0" </option>
required>
</div> <option th:each="question : ${session.questionList}"
th:value="${question.secretQuestionId}"
<div> th:text="${question.questionText}">
<label for="goalId">目標</label> </option>
<input type="number"
id="goalId" </select>
th:field="*{goalId}" </div>
min="0"
required> <div class="mb-3">
</div> <label for="secretAnswer"
class="form-label">
<div> 秘密の質問の回答
<label>コース</label> </label>
<input type="hidden" th:field="*{courseId}">
<button type="submit">コース選択</button> <input type="text"
</div> id="secretAnswer"
class="form-control"
<div> th:field="*{secretAnswer}"
<button type="submit">作成</button> maxlength="100"
</div> required>
</form> </div>
<form th:action="@{/login}" method="get"> <div class="mb-3">
<button type="submit">戻る</button> <label for="saving"
</form> class="form-label">
貯蓄金
</main> </label>
<input type="number"
id="saving"
class="form-control"
th:field="*{saving}"
min="0"
required>
</div>
<div class="mb-3">
<label for="annualIncome"
class="form-label">
年収
</label>
<input type="number"
id="annualIncome"
class="form-control"
th:field="*{annualIncome}"
min="0"
required>
</div>
<div class="mb-3">
<label for="monthlyBudget"
class="form-label">
月別使用可能金額
</label>
<input type="number"
id="monthlyBudget"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
required>
</div>
<div class="mb-3">
<label for="goalId"
class="form-label">
目標ID
</label>
<input type="number"
id="goalId"
class="form-control"
th:field="*{goalId}"
min="0"
required>
</div>
<input type="hidden"
th:field="*{courseId}">
<div class="d-grid gap-2 mt-4">
<button type="submit"
class="btn btn-outline-primary">
コース選択
</button>
<button type="submit"
class="btn btn-primary">
作成
</button>
</div>
</form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}"
method="get">
<button type="submit"
class="btn btn-outline-secondary">
戻る
</button>
</form>
</div>
</div>
</body> </body>
</html> </html>

103
src/main/resources/templates/user_register_confirm.html
View File

@@ -2,43 +2,48 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>新規会員登録確認</title> <title>新規会員登録確認</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<main> <div class="main-container">
<h1>新規会員登録確認</h1> <h1 class="page-title">新規会員登録確認</h1>
<div class="card shadow-sm">
 
<div class="card-body">
<form th:action="@{/user/register/complete}" th:object="${userForm}" method="post"> <form th:action="@{/user/register/complete}" th:object="${userForm}" method="post">
<div> <div class="mb-3">
<label for="userName">氏名</label> <label for="userName" class="form-label">氏名</label>
<input type="text" id="userName" th:field="*{userName}" maxlength="100" readonly> <input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="mailAddress">メールアドレス</label> <label for="mailAddress" class="form-label">メールアドレス</label>
<input type="email" id="mailAddress" th:field="*{mailAddress}" maxlength="255" readonly> <input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}" maxlength="255" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="birthDate">生年月日</label> <label for="birthDate" class="form-label">生年月日</label>
<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}" required readonly> <input type="date" id="birthDate" class="form-control" name="birthDate" th:value="*{birthDate}" required readonly>
</div> </div>
<div> <div class="mb-3">
<label for="password">パスワード</label> <label for="password" class="form-label">パスワード</label>
<input type="password" id="password" name="password" th:value="*{password}" minlength="8" <input type="password" id="password" class="form-control" name="password" th:value="*{password}" minlength="8"
maxlength="255" required readonly> maxlength="255" required readonly>
</div> </div>
<div> <div class="mb-3">
<label for="secretQuestionId">秘密の質問</label> <label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly> <select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly>
<option value="">選択してください</option> <option value="">選択してください</option>
<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}" <option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
@@ -47,50 +52,58 @@
</select> </select>
</div> </div>
<div> <div class="mb-3">
<label for="secretAnswer">秘密の質問の回答</label> <label for="secretAnswer" class="form-label">秘密の質問の回答</label>
<input type="text" id="secretAnswer" th:field="*{secretAnswer}" maxlength="100" readonly> <input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}" maxlength="100" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="saving">貯蓄金</label> <label for="saving" class="form-label">貯蓄金</label>
<input type="number" id="saving" th:field="*{saving}" min="0" readonly> <input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="annualIncome">年収</label> <label for="annualIncome" class="form-label">年収</label>
<input type="number" id="annualIncome" th:field="*{annualIncome}" min="0" readonly> <input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="monthlyBudget">月別使用可能金額</label> <label for="monthlyBudget" class="form-label">月別使用可能金額</label>
<input type="number" id="monthlyBudget" th:field="*{monthlyBudget}" min="0" readonly> <input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0" readonly>
</div> </div>
<div> <div class="mb-3">
<label for="goalId">目標</label> <label for="goalId" class="form-label">目標</label>
<input type="number" id="goalId" th:field="*{goalId}" min="0" readonly> <input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" readonly>
</div> </div>
<div> <div class="mb-4">
<label>コース</label> <label class="form-label">コース</label>
<input type="hidden" th:field="*{courseId}"> <div class="d-flex justify-content-between align-items-center">
<input type="hidden" class="form-control" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span> <span th:text="${selectedCourseName}">未選択</span>
<button type="submit">コース選択</button> <button type="submit" class="btn btn-outline-primary btn-sm">コース選択</button>
</div>
</div> </div>
<div> <div class="d-grid">
<button type="submit">作成</button> <button type="submit" class="btn btn-primary">
</div> 作成
<div> </button>
<form th:action="@{/user/register}" method="get">
<button type="submit">戻る</button>
</form>
</div> </div>
</form> </form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/user/register}" method="get">
<button type="submit" class="btn btn-outline-secondary">
戻る
</button>
</form>
</div>
</main> </div>
</body> </body>

119
src/main/resources/templates/user_register_return.html
View File

@@ -1,56 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ja"xmlns:th="http://www.thymeleaf.org"> <html lang="ja"xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<title>新規会員登録</title> <title>新規会員登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body class="pb-5 pt-5"> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<main> <div class="main-container">
<h1>新規会員登録</h1>
<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get"> <h1 class="page-title">新規会員登録</h1>
<div>
<label for="userName">氏名</label> <div class="card shadow-sm">
<input type="text"
id="userName" <div class="card-body">
th:field="*{userName}"
maxlength="100" <form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
<div class="mb-3">
<label for="userName" class="form-label">氏名</label>
<input type="text"
id="userName"
class="form-control"
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label for="mailAddress" class="form-label">メールアドレス</label>
<input type="email"
id="mailAddress"
class="form-control"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div class="mb-3">
<label for="birthDate" class="form-label">生年月日</label>
<input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="mailAddress">メールアドレス</label> <label for="password" class="form-label">パスワード</label>
<input type="email"
id="mailAddress"
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div>
<label for="birthDate">生年月日</label>
<input type="date" id="birthDate" name="birthDate" th:value="*{birthDate}"
required>
</div>
<div>
<label for="password">パスワード</label>
<input type="password" <input type="password"
id="password" id="password"
name="password" name="password"
class="form-control"
th:value="*{password}" th:value="*{password}"
minlength="8" minlength="8"
maxlength="255" maxlength="255"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="secretQuestionId">秘密の質問</label> <label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId" <select id="secretQuestionId"
th:field="*{secretQuestionId}" th:field="*{secretQuestionId}"
required> required>
@@ -62,67 +71,83 @@
</select> </select>
</div> </div>
<div> <div class="mb-3">
<label for="secretAnswer">秘密の質問の回答</label> <label for="secretAnswer" class="form-label">秘密の質問の回答</label>
<input type="text" <input type="text"
id="secretAnswer" id="secretAnswer"
class="form-control"
th:field="*{secretAnswer}" th:field="*{secretAnswer}"
maxlength="100" maxlength="100"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="saving">貯蓄金</label> <label for="saving" class="form-label">貯蓄金</label>
<input type="number" <input type="number"
id="saving" id="saving"
class="form-control"
th:field="*{saving}" th:field="*{saving}"
min="0" min="0"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="annualIncome">年収</label> <label for="annualIncome" class="form-label">年収</label>
<input type="number" <input type="number"
id="annualIncome" id="annualIncome"
class="form-control"
th:field="*{annualIncome}" th:field="*{annualIncome}"
min="0" min="0"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="monthlyBudget">月別使用可能金額</label> <label for="monthlyBudget" class="form-label">月別使用可能金額</label>
<input type="number" <input type="number"
id="monthlyBudget" id="monthlyBudget"
class="form-control"
th:field="*{monthlyBudget}" th:field="*{monthlyBudget}"
min="0" min="0"
required> required>
</div> </div>
<div> <div class="mb-3">
<label for="goalId">目標</label> <label for="goalId" class="form-label">目標</label>
<input type="number" <input type="number"
id="goalId" id="goalId"
class="form-control"
th:field="*{goalId}" th:field="*{goalId}"
min="0" min="0"
required> required>
</div> </div>
<div> <div class="mb-4">
<label>コース</label> <label class="form-label">コース</label>
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" th:field="*{courseId}"> <input type="hidden" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span> <span th:text="${selectedCourseName}">未選択</span>
<button type="submit">コース選択</button> <button type="submit" class="btn btn-outline-primary btn-sm">
コース選択
</button>
</div>
</div> </div>
<div> <div class="d-grid">
<button type="submit">作成</button> <button type="submit" class="btn btn-primary">作成</button>
</div> </div>
</form> </form>
</div>
</div>
<div class="d-grid mt-3">
<form th:action="@{/login}" method="get"> <form th:action="@{/login}" method="get">
<button type="submit">戻る</button> <button type="submit" class="btn btn-outline-secondary">戻る</button>
</form> </form>
</main> </div>
</div>
</body> </body>
</html> </html>