2 Commits

3 changed files with 266 additions and 312 deletions

View File

@@ -112,7 +112,7 @@
<ul> <ul>
<li th:each="goalForm : ${goalFormList}" class="transaction-item"> <li th:each="goalForm : ${goalFormList}">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">

View File

@@ -2,229 +2,192 @@
<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">
<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1">
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" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
rel="stylesheet">
<link rel="stylesheet" <link rel="stylesheet" th:href="@{/css/style.css}">
th:href="@{/css/style.css}">
</head> </head>
<body style="padding-top:80px; padding-bottom:80px;"> <body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<div class="main-container"> <div class="main-container">
<h1 class="page-title"> <h1 class="page-title">
新規会員登録 新規会員登録
</h1> </h1>
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body"> <div class="card-body">
<form th:action="@{/user/register/course}" <form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
th:object="${userForm}"
method="post">
<div class="mb-3"> <div class="mb-3">
<label for="userName" <label for="userName" class="form-label">
class="form-label"> 氏名
氏名 </label>
</label>
<input type="text" <input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100"
id="userName" required>
class="form-control" </div>
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="mailAddress" <label for="mailAddress" class="form-label">
class="form-label"> メールアドレス
メールアドレス </label>
</label>
<input type="email" <input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}"
id="mailAddress" maxlength="255" required>
class="form-control" </div>
th:field="*{mailAddress}"
maxlength="255"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="birthDate" <label for="birthDate" class="form-label">
class="form-label"> 生年月日
生年月日 </label>
</label>
<input type="date" <input type="date" id="birthDate" class="form-control" th:field="*{birthDate}" required>
id="birthDate" </div>
class="form-control"
th:field="*{birthDate}"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="password" <label for="password" class="form-label">
class="form-label"> パスワード
パスワード </label>
</label>
<input type="password" <input type="password" id="password" class="form-control" th:field="*{password}" minlength="8"
id="password" maxlength="24" required>
class="form-control" </div>
th:field="*{password}"
minlength="8"
maxlength="24"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="secretQuestionId" <label for="secretQuestionId" class="form-label">
class="form-label"> 秘密の質問
秘密の質問 </label>
</label>
<select id="secretQuestionId" <select id="secretQuestionId" class="form-select" th:field="*{secretQuestionId}" required>
class="form-select"
th:field="*{secretQuestionId}"
required>
<option value=""> <option value="">
選択してください 選択してください
</option> </option>
<option th:each="question : ${session.questionList}" <option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
th:value="${question.secretQuestionId}" th:text="${question.questionText}">
th:text="${question.questionText}"> </option>
</option>
</select> </select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="secretAnswer" <label for="secretAnswer" class="form-label">
class="form-label"> 秘密の質問の回答
秘密の質問の回答 </label>
</label>
<input type="text" <input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}"
id="secretAnswer" maxlength="100" required>
class="form-control" </div>
th:field="*{secretAnswer}"
maxlength="100"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="saving" <label for="saving" class="form-label">
class="form-label"> 貯蓄金
貯蓄金 </label>
</label>
<input type="number" <input type="number" id="saving" class="form-control" th:field="*{saving}" min="0"
id="saving" max="1000000000" required>
class="form-control" </div>
th:field="*{saving}"
min="0"
max="1000000000"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="annualIncome" <label for="annualIncome" class="form-label">
class="form-label"> 年収
年収 </label>
</label>
<input type="number" <input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0"
id="annualIncome" max="100000000" required>
class="form-control" </div>
th:field="*{annualIncome}"
min="0"
max="100000000"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="monthlyBudget" <label for="monthlyBudget" class="form-label">
class="form-label"> 月別使用可能金額
月別使用可能金額 </label>
</label>
<input type="number" <input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0"
id="monthlyBudget" max="10000000" required>
class="form-control" </div>
th:field="*{monthlyBudget}"
min="0"
max="10000000"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="goalId" <label for="goalId" class="form-label">
class="form-label"> 目標貯金額
目標貯金額 </label>
</label>
<input type="number" <input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0"
id="goalId" max="1000000000" required>
class="form-control" </div>
th:field="*{goalId}"
min="0"
max="1000000000"
required>
</div>
<input type="hidden" <input type="hidden" th:field="*{courseId}">
th:field="*{courseId}">
<div class="d-grid gap-2 mt-4"> <div class="d-grid gap-2 mt-4">
<button type="submit" <button type="submit" class="btn btn-outline-primary">
class="btn btn-outline-primary"> コース選択
コース選択 </button>
</button>
<button type="submit" <button type="submit" class="btn btn-primary">
class="btn btn-primary"> 作成
作成 </button>
</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="d-grid mt-3"> <div class="d-grid mt-3">
<form th:action="@{/login}" <form th:action="@{/login}" method="get">
method="get">
<button type="submit" <button type="submit" class="btn btn-outline-secondary">
class="btn btn-outline-secondary"> 戻る
戻る </button>
</button>
</form> </form>
</div> </div>
</div> </div>
<script>
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const birthDate = document.getElementById("birthDate");
if (month < 10) {
if (day < 10) {
birthDate.setAttribute("max", year + "-0" + month + "-0" + day);
} else {
birthDate.setAttribute("max", year + "-0" + month + "-" + day);
}
} else {
if (day < 10) {
birthDate.setAttribute("max", year + "-" + month + "-0" + day);
} else {
birthDate.setAttribute("max", year + "-" + month + "-" + day);
}
}
</script>
</body> </body>

View File

@@ -1,15 +1,17 @@
<!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" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type"> <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}"> <link rel="stylesheet" th:href="@{/css/style.css}">
</head> </head>
<body> <body>
<div th:replace="~{header :: header}"> <div th:replace="~{header :: header}">
</div> </div>
<div class="main-container"> <div class="main-container">
@@ -17,137 +19,126 @@
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-body"> <div class="card-body">
<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get"> <form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
<div class="mb-3"> <div class="mb-3">
<label for="userName" class="form-label">氏名</label> <label for="userName" class="form-label">氏名</label>
<input type="text" <input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100"
id="userName" required>
class="form-control" </div>
th:field="*{userName}"
maxlength="100"
required>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="mailAddress" class="form-label">メールアドレス</label> <label for="mailAddress" class="form-label">メールアドレス</label>
<input type="email" <input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}"
id="mailAddress" maxlength="255" required>
class="form-control" </div>
th:field="*{mailAddress}"
maxlength="255" <div class="mb-3">
required> <label for="birthDate" class="form-label">生年月日</label>
</div> <input type="date" id="birthDate" name="birthDate" class="form-control" th:value="*{birthDate}"
required>
</div>
<div class="mb-3">
<label for="password" class="form-label">パスワード</label>
<input type="password" id="password" name="password" class="form-control" th:value="*{password}"
minlength="8" maxlength="24" required>
</div>
<div class="mb-3">
<label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId" th:field="*{secretQuestionId}" required>
<option value="">選択してください</option>
<option th:each="question : ${session.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}"
maxlength="100" required>
</div>
<div class="mb-3">
<label for="saving" class="form-label">貯蓄金</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">目標</label>
<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" required>
</div>
<div class="mb-4">
<label class="form-label">コース</label>
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span>
<button type="submit" class="btn btn-outline-primary btn-sm">
コース選択
</button>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">作成</button>
</div>
</form>
<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>
</div> </div>
<div class="mb-3">
<label for="password" class="form-label">パスワード</label>
<input type="password"
id="password"
name="password"
class="form-control"
th:value="*{password}"
minlength="8"
maxlength="24"
required>
</div>
<div class="mb-3">
<label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId"
th:field="*{secretQuestionId}"
required>
<option value="">選択してください</option>
<option th:each="question : ${session.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}"
maxlength="100"
required>
</div>
<div class="mb-3">
<label for="saving" class="form-label">貯蓄金</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">目標</label>
<input type="number"
id="goalId"
class="form-control"
th:field="*{goalId}"
min="0"
required>
</div>
<div class="mb-4">
<label class="form-label">コース</label>
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span>
<button type="submit" class="btn btn-outline-primary btn-sm">
コース選択
</button>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">作成</button>
</div>
</form>
</div>
</div> </div>
<div class="d-grid mt-3"> <div class="d-grid mt-3">
<form th:action="@{/login}" method="get"> <form th:action="@{/login}" method="get">
<button type="submit" class="btn btn-outline-secondary">戻る</button> <button type="submit" class="btn btn-outline-secondary">戻る</button>
</form> </form>
</div>
</div> </div>
</div> <script>
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const birthDate = document.getElementById("birthDate");
if (month < 10) {
if (day < 10) {
birthDate.setAttribute("max", year + "-0" + month + "-0" + day);
} else {
birthDate.setAttribute("max", year + "-0" + month + "-" + day);
}
} else {
if (day < 10) {
birthDate.setAttribute("max", year + "-" + month + "-0" + day);
} else {
birthDate.setAttribute("max", year + "-" + month + "-" + day);
}
}
</script>
</body> </body>
</html> </html>