This commit is contained in:
kkazuya
2026-09-28 10:52:52 +09:00
5 changed files with 283 additions and 317 deletions

View File

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

View File

@@ -2,229 +2,192 @@
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta 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}">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body style="padding-top:80px; padding-bottom:80px;">
<div th:replace="~{header :: header}">
</div>
<div th:replace="~{header :: header}">
</div>
<div class="main-container">
<div class="main-container">
<h1 class="page-title">
新規会員登録
</h1>
<h1 class="page-title">
新規会員登録
</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}"
th:object="${userForm}"
method="post">
<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
<div class="mb-3">
<label for="userName"
class="form-label">
氏名
</label>
<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>
<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>
<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>
<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>
<div class="mb-3">
<label for="birthDate" class="form-label">
生年月日
</label>
<input type="date"
id="birthDate"
class="form-control"
th:field="*{birthDate}"
required>
</div>
<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}" required>
</div>
<div class="mb-3">
<label for="password"
class="form-label">
パスワード
</label>
<div class="mb-3">
<label for="password" class="form-label">
パスワード
</label>
<input type="password"
id="password"
class="form-control"
th:field="*{password}"
minlength="8"
maxlength="24"
required>
</div>
<input type="password" id="password" class="form-control" th:field="*{password}" minlength="8"
maxlength="24" required>
</div>
<div class="mb-3">
<label for="secretQuestionId"
class="form-label">
秘密の質問
</label>
<div class="mb-3">
<label for="secretQuestionId" class="form-label">
秘密の質問
</label>
<select id="secretQuestionId"
class="form-select"
th:field="*{secretQuestionId}"
required>
<select id="secretQuestionId" class="form-select" th:field="*{secretQuestionId}" required>
<option value="">
選択してください
</option>
<option value="">
選択してください
</option>
<option th:each="question : ${session.questionList}"
th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
</option>
</select>
</div>
</select>
</div>
<div class="mb-3">
<label for="secretAnswer"
class="form-label">
秘密の質問の回答
</label>
<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>
<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>
<div class="mb-3">
<label for="saving" class="form-label">
貯蓄金
</label>
<input type="number"
id="saving"
class="form-control"
th:field="*{saving}"
min="0"
max="1000000000"
required>
</div>
<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0"
max="1000000000" required>
</div>
<div class="mb-3">
<label for="annualIncome"
class="form-label">
年収
</label>
<div class="mb-3">
<label for="annualIncome" class="form-label">
年収
</label>
<input type="number"
id="annualIncome"
class="form-control"
th:field="*{annualIncome}"
min="0"
max="100000000"
required>
</div>
<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0"
max="100000000" required>
</div>
<div class="mb-3">
<label for="monthlyBudget"
class="form-label">
月別使用可能金額
</label>
<div class="mb-3">
<label for="monthlyBudget" class="form-label">
月別使用可能金額
</label>
<input type="number"
id="monthlyBudget"
class="form-control"
th:field="*{monthlyBudget}"
min="0"
max="10000000"
required>
</div>
<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0"
max="10000000" required>
</div>
<div class="mb-3">
<label for="goalId"
class="form-label">
目標貯金額
</label>
<div class="mb-3">
<label for="goalId" class="form-label">
目標貯金額
</label>
<input type="number"
id="goalId"
class="form-control"
th:field="*{goalId}"
min="0"
max="1000000000"
required>
</div>
<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0"
max="1000000000" required>
</div>
<input type="hidden"
th:field="*{courseId}">
<input type="hidden" th:field="*{courseId}">
<div class="d-grid gap-2 mt-4">
<div class="d-grid gap-2 mt-4">
<button type="submit"
class="btn btn-outline-primary">
コース選択
</button>
<button type="submit" class="btn btn-outline-primary">
コース選択
</button>
<button type="submit"
class="btn btn-primary">
作成
</button>
<button type="submit" class="btn btn-primary">
作成
</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}"
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>

View File

@@ -44,14 +44,14 @@
<div class="mb-3">
<label for="secretQuestionId" class="form-label">秘密の質問</label>
<select id="secretQuestionId" th:field="*{secretQuestionId}" required readonly>
<option value="">選択してください</option>
<select id="secretQuestionId" th:field="*{secretQuestionId}" required disabled>
<option value="" readonly>選択してください</option>
<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
th:text="${question.questionText}">
th:text="${question.questionText}" readonly>
</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" readonly>
@@ -82,7 +82,7 @@
<div class="d-flex justify-content-between align-items-center">
<input type="hidden" class="form-control" th:field="*{courseId}">
<span th:text="${selectedCourseName}">未選択</span>
<button type="submit" class="btn btn-outline-primary btn-sm">コース選択</button>
<button type="submit" class="btn btn-outline-primary btn-sm" disabled>コース選択</button>
</div>
</div>

View File

@@ -1,153 +1,145 @@
<!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" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<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}">
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
<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>
<body>
<div th:replace="~{header :: header}">
</div>
</div>
<div class="main-container">
<h1 class="page-title">新規会員登録</h1>
<div class="card shadow-sm">
<div class="card-body">
<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>
<div class="card-body">
<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>
</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 class="btn btn-outline-primary btn-sm" disabled>
コース選択
</button>
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">作成</button>
</div>
</form>
</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 class="d-grid mt-3">
<form th:action="@{/login}" method="get">
<button type="submit" class="btn btn-outline-secondary">戻る</button>
</form>
<form th:action="@{/login}" method="get">
<button type="submit" class="btn btn-outline-secondary">戻る</button>
</form>
</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);
}
}
</div>
</div>
</script>
</body>
</html>