Merge branch 'main' of https://gitea.it-college.co.jp/2026_0910_AI_5G_Java_MUN/last-group-delevelopment-team2 into h-hein2

book-rent/src/main/java/com/example/demo/service/BookAdminService.java

@@ -32,8 +32,10 @@ public class BookAdminService {
         else if (f.getIsbn().length() > 13) e.add("ISBNは13文字以内で入力してください。");
         if (f.getNmBook().isEmpty()) e.add("書籍名を入力してください。");
         else if (f.getNmBook().length() > 50) e.add("書籍名は50文字以内で入力してください。");
-        if (f.getKnBook().length() > 100) e.add("書籍名よみは100文字以内で入力してください。");
+        if(!f.getKnBook().matches("^[\\u3040-\\u309F]+$")) e.add("書籍名よみはひらがなで入力してください");
+        else if (f.getKnBook().length() > 100) e.add("書籍名よみは100文字以内で入力してください。");
         if (f.getPublisher().length() > 50) e.add("出版社は50文字以内で入力してください。");
+        
         return e;
     }
 

book-rent/src/main/java/com/example/demo/service/EmployeeService.java

@@ -20,145 +20,167 @@ import com.example.demo.repository.EmployeeRepository;
 /** EMP-01：社員登録、EMP-02：社員編集 */
 @Service
 public class EmployeeService {
-    private static final Pattern MAIL = Pattern.compile("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$");
+	private static final Pattern MAIL = Pattern.compile("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$");
-    private static final String MSG_DUP = "このメールアドレスは既に登録されています。";
+	private static final String MSG_DUP = "このメールアドレスは既に登録されています。";
 
-    private final EmployeeRepository employeeRepository;
+	private final EmployeeRepository employeeRepository;
 
-    public EmployeeService(EmployeeRepository employeeRepository) {
+	public EmployeeService(EmployeeRepository employeeRepository) {
-        this.employeeRepository = employeeRepository;
+		this.employeeRepository = employeeRepository;
-    }
+	}
 
-    // ---------- 検索 ----------
+	// ---------- 検索 ----------
 
-    @Transactional(readOnly = true)
+	@Transactional(readOnly = true)
-    public Optional<Employee> findByMail(String mail) {
+	public Optional<Employee> findByMail(String mail) {
-        return employeeRepository.findByMailAddress(mail == null ? "" : mail.trim());
+		return employeeRepository.findByMailAddress(mail == null ? "" : mail.trim());
-    }
+	}
 
-    @Transactional(readOnly = true)
+	@Transactional(readOnly = true)
-    public Employee find(Integer id) {
+	public Employee find(Integer id) {
-        return employeeRepository.findById(id)
+		return employeeRepository.findById(id)
-                .orElseThrow(() -> new BusinessException("対象の社員が見つかりません。"));
+				.orElseThrow(() -> new BusinessException("対象の社員が見つかりません。"));
-    }
+	}
 
-    /** 編集画面の初期値（パスワードは空：管理者は変更時のみ入力） */
+	/** 編集画面の初期値（パスワードは空：管理者は変更時のみ入力） */
-    public EmployeeForm toForm(Employee e) {
+	public EmployeeForm toForm(Employee e) {
-        EmployeeForm f = new EmployeeForm();
+		EmployeeForm f = new EmployeeForm();
-        f.setIdEmployee(e.getIdEmployee());
+		f.setIdEmployee(e.getIdEmployee());
-        f.setNmEmployee(e.getNmEmployee());
+		f.setNmEmployee(e.getNmEmployee());
-        f.setKnEmployee(e.getKnEmployee());
+		f.setKnEmployee(e.getKnEmployee());
-        f.setMailAddress(e.getMailAddress());
+		f.setMailAddress(e.getMailAddress());
-        f.setFlgAdmin(e.getFlgAdmin());
+		f.setFlgAdmin(e.getFlgAdmin());
-        f.setFlgRetirement(e.getFlgRetirement());
+		f.setFlgRetirement(e.getFlgRetirement());
-        return f;
+		return f;
-    }
+	}
 
-    // ---------- 入力チェック ----------
+	// ---------- 入力チェック ----------
 
-    /** 社員登録：社員名・よみ・メール・管理者フラグ。パスワードは初期値で登録する。 */
+	/** 社員登録：社員名・よみ・メール・管理者フラグ。パスワードは初期値で登録する。 */
-    public List<String> validateRegist(EmployeeForm f) {
+	public List<String> validateRegist(EmployeeForm f) {
-        f.trim();
+		f.trim();
-        List<String> e = new ArrayList<>();
+		List<String> e = new ArrayList<>();
-        checkBasic(f, e);
+		checkBasic(f, e);
-        checkMail(f, null, e);
+		checkMail(f, null, e);
-        checkFlag(f.getFlgAdmin(), "管理者フラグ", e);
+		checkFlag(f.getFlgAdmin(), "管理者フラグ", e);
-        return e;
+		return e;
-    }
+	}
 
-    /** 管理者による編集：全項目。パスワードは空なら変更しない。 */
+	/** 管理者による編集：全項目。パスワードは空なら変更しない。 */
-    public List<String> validateUpdateByAdmin(EmployeeForm f) {
+	public List<String> validateUpdateByAdmin(EmployeeForm f) {
-        f.trim();
+		f.trim();
-        List<String> e = new ArrayList<>();
+		List<String> e = new ArrayList<>();
-        checkBasic(f, e);
+		checkBasic(f, e);
-        checkMail(f, f.getIdEmployee(), e);
+		checkMail(f, f.getIdEmployee(), e);
-        checkFlag(f.getFlgAdmin(), "管理者フラグ", e);
+		checkFlag(f.getFlgAdmin(), "管理者フラグ", e);
-        checkFlag(f.getFlgRetirement(), "退職フラグ", e);
+		checkFlag(f.getFlgRetirement(), "退職フラグ", e);
-        if (f.getPassword().length() > 256) e.add("パスワードは256文字以内で入力してください。");
+		if (f.getPassword().length() > 256)
-        return e;
+			e.add("パスワードは256文字以内で入力してください。");
-    }
+		return e;
+	}
 
-    /** 一般ユーザーによる編集：パスワードのみ（必須）。 */
+	/** 一般ユーザーによる編集：パスワードのみ（必須）。 */
-    public List<String> validateUpdateBySelf(EmployeeForm f) {
+	public List<String> validateUpdateBySelf(EmployeeForm f) {
-        f.trim();
+		f.trim();
-        List<String> e = new ArrayList<>();
+		List<String> e = new ArrayList<>();
-        if (f.getPassword().isEmpty()) e.add("パスワードを入力してください。");
+		if (f.getPassword().isEmpty())
-        else if (f.getPassword().length() > 256) e.add("パスワードは256文字以内で入力してください。");
+			e.add("パスワードを入力してください。");
-        return e;
+		else if (f.getPassword().length() > 256)
-    }
+			e.add("パスワードは256文字以内で入力してください。");
+		return e;
+	}
 
-    private void checkBasic(EmployeeForm f, List<String> e) {
+	private void checkBasic(EmployeeForm f, List<String> e) {
-        if (f.getNmEmployee().isEmpty()) e.add("社員名を入力してください。");
+		if (f.getNmEmployee().isEmpty())
-        else if (f.getNmEmployee().length() > 50) e.add("社員名は50文字以内で入力してください。");
+			e.add("社員名を入力してください。");
-        // ※社員名よみの文字種（ひらがなのみ等）は設計で確定する。現状は文字数のみチェック
+		else if (f.getNmEmployee().length() > 50)
-        if (f.getKnEmployee().isEmpty()) e.add("社員名よみを入力してください。");
+			e.add("社員名は50文字以内で入力してください。");
-        else if (f.getKnEmployee().length() > 100) e.add("社員名よみは100文字以内で入力してください。");
+		// ※社員名よみの文字種（ひらがなのみ等）は設計で確定する。現状は文字数のみチェック
-    }
+		if (f.getKnEmployee().isEmpty())
+			e.add("社員名よみを入力してください。");
+		else if (f.getKnEmployee().length() > 100)
+			e.add("社員名よみは100文字以内で入力してください。");
+		else if (!f.getKnEmployee().matches("^[\\u3040-\\u309F]+$"))
+			e.add("社員名よみはひらがなで入力してください");
+	}
 
-    private void checkMail(EmployeeForm f, Integer selfId, List<String> e) {
+	private void checkMail(EmployeeForm f, Integer selfId, List<String> e) {
-        String m = f.getMailAddress();
+		String m = f.getMailAddress();
-        if (m.isEmpty()) { e.add("メールアドレスを入力してください。"); return; }
+		if (m.isEmpty()) {
-        if (m.length() > 256) { e.add("メールアドレスは256文字以内で入力してください。"); return; }
+			e.add("メールアドレスを入力してください。");
-        if (!MAIL.matcher(m).matches()) { e.add("メールアドレスの形式が正しくありません。"); return; }
+			return;
-        Optional<Employee> dup = employeeRepository.findByMailAddress(m);
+		}
-        if (dup.isPresent() && !dup.get().getIdEmployee().equals(selfId)) e.add(MSG_DUP);
+		if (m.length() > 256) {
-    }
+			e.add("メールアドレスは256文字以内で入力してください。");
+			return;
+		}
+		if (!MAIL.matcher(m).matches()) {
+			e.add("メールアドレスの形式が正しくありません。");
+			return;
+		}
+		Optional<Employee> dup = employeeRepository.findByMailAddress(m);
+		if (dup.isPresent() && !dup.get().getIdEmployee().equals(selfId))
+			e.add(MSG_DUP);
+	}
 
-    private static void checkFlag(String v, String label, List<String> e) {
+	private static void checkFlag(String v, String label, List<String> e) {
-        if (!"0".equals(v) && !"1".equals(v)) e.add(label + "が正しくありません。");
+		if (!"0".equals(v) && !"1".equals(v))
-    }
+			e.add(label + "が正しくありません。");
+	}
 
-    // ---------- 登録・更新 ----------
+	// ---------- 登録・更新 ----------
 
-    @Transactional
+	@Transactional
-    public Integer register(EmployeeForm f, LoginUser admin) {
+	public Integer register(EmployeeForm f, LoginUser admin) {
-        raise(validateRegist(f));
+		raise(validateRegist(f));
-        Employee e = new Employee();
+		Employee e = new Employee();
-        e.setNmEmployee(f.getNmEmployee());
+		e.setNmEmployee(f.getNmEmployee());
-        e.setKnEmployee(f.getKnEmployee());
+		e.setKnEmployee(f.getKnEmployee());
-        e.setMailAddress(f.getMailAddress());
+		e.setMailAddress(f.getMailAddress());
-        e.setPassword(Const.DEFAULT_PASSWORD);
+		e.setPassword(Const.DEFAULT_PASSWORD);
-        e.setFlgAdmin(f.getFlgAdmin());
+		e.setFlgAdmin(f.getFlgAdmin());
-        e.setFlgRetirement(Const.RETIRE_NO);
+		e.setFlgRetirement(Const.RETIRE_NO);
-        e.setIdUpdate(admin.getIdEmployee());
+		e.setIdUpdate(admin.getIdEmployee());
-        e.setDateUpdate(LocalDateTime.now());
+		e.setDateUpdate(LocalDateTime.now());
-        try {
+		try {
-            return employeeRepository.saveAndFlush(e).getIdEmployee();
+			return employeeRepository.saveAndFlush(e).getIdEmployee();
-        } catch (DataIntegrityViolationException ex) {
+		} catch (DataIntegrityViolationException ex) {
-            throw new BusinessException(MSG_DUP);   // 同時登録によるUNIQUE制約違反
+			throw new BusinessException(MSG_DUP); // 同時登録によるUNIQUE制約違反
-        }
+		}
-    }
+	}
 
-    @Transactional
+	@Transactional
-    public void updateByAdmin(EmployeeForm f, LoginUser admin) {
+	public void updateByAdmin(EmployeeForm f, LoginUser admin) {
-        raise(validateUpdateByAdmin(f));
+		raise(validateUpdateByAdmin(f));
-        Employee e = find(f.getIdEmployee());
+		Employee e = find(f.getIdEmployee());
-        e.setNmEmployee(f.getNmEmployee());
+		e.setNmEmployee(f.getNmEmployee());
-        e.setKnEmployee(f.getKnEmployee());
+		e.setKnEmployee(f.getKnEmployee());
-        e.setMailAddress(f.getMailAddress());
+		e.setMailAddress(f.getMailAddress());
-        if (!f.getPassword().isEmpty()) e.setPassword(f.getPassword());
+		if (!f.getPassword().isEmpty())
-        e.setFlgAdmin(f.getFlgAdmin());
+			e.setPassword(f.getPassword());
-        e.setFlgRetirement(f.getFlgRetirement());
+		e.setFlgAdmin(f.getFlgAdmin());
-        e.setIdUpdate(admin.getIdEmployee());
+		e.setFlgRetirement(f.getFlgRetirement());
-        e.setDateUpdate(LocalDateTime.now());
+		e.setIdUpdate(admin.getIdEmployee());
-        try {
+		e.setDateUpdate(LocalDateTime.now());
-            employeeRepository.saveAndFlush(e);
+		try {
-        } catch (DataIntegrityViolationException ex) {
+			employeeRepository.saveAndFlush(e);
-            throw new BusinessException(MSG_DUP);
+		} catch (DataIntegrityViolationException ex) {
-        }
+			throw new BusinessException(MSG_DUP);
-    }
+		}
+	}
 
-    /** 一般ユーザー：自分自身（セッションの社員ID）のパスワードのみ更新する。 */
+	/** 一般ユーザー：自分自身（セッションの社員ID）のパスワードのみ更新する。 */
-    @Transactional
+	@Transactional
-    public void updateBySelf(EmployeeForm f, LoginUser self) {
+	public void updateBySelf(EmployeeForm f, LoginUser self) {
-        raise(validateUpdateBySelf(f));
+		raise(validateUpdateBySelf(f));
-        Employee e = find(self.getIdEmployee());
+		Employee e = find(self.getIdEmployee());
-        e.setPassword(f.getPassword());
+		e.setPassword(f.getPassword());
-        e.setIdUpdate(self.getIdEmployee());
+		e.setIdUpdate(self.getIdEmployee());
-        e.setDateUpdate(LocalDateTime.now());
+		e.setDateUpdate(LocalDateTime.now());
-    }
+	}
 
-    private static void raise(List<String> errors) {
+	private static void raise(List<String> errors) {
-        if (!errors.isEmpty()) throw new BusinessException(String.join(" ", errors));
+		if (!errors.isEmpty())
-    }
+			throw new BusinessException(String.join(" ", errors));
+	}
 }

book-rent/src/main/resources/static/css/style.css

@@ -1,90 +1,113 @@
-body
+/* ----------------------------------------------------
-{font-family:
+   Login Layout & Animation Styles (Updated)
-	"Meiryo","Hiragino Sans",sans-serif;
+---------------------------------------------------- */
-	margin:0;color:#222;
+body {
-	background:#f6f7f9}
+    font-family: "Meiryo", "Hiragino Sans", sans-serif;
-header.top
+    margin: 0;
-{display:flex;
+    color: #222;
-	justify-content:space-between;
+    background: #f6f7f9;
-	align-items:center;
-	background:#176a78;color:#fff;
-	padding:10px 20px
 }
-header.top form
+header.top {
-{display:inline;
+    display: flex;
-	margin:0}
+    justify-content: space-between;
-header.top .user
+    align-items: center;
-{margin-right:12px
+    background: #176a78;
+    color: #fff;
+    padding: 10px 20px;
 }
-main
+header.top form { display: inline; margin: 0; }
-{max-width:960px;
+header.top .user { margin-right: 12px; }
-	margin:24px auto;
+main { max-width: 960px; margin: 24px auto; padding: 0 16px; }
-	padding:0 16px
+h1 { font-size: 20px; }
+.card { background: #fff; border: 1px solid #dde; border-radius: 6px; padding: 20px; margin-bottom: 16px; }
+label { display: block; margin: 10px 0 4px; font-weight: bold; }
+input[type=text], input[type=password], input[type=email] { width: 100%; max-width: 360px; padding: 6px; box-sizing: border-box; }
+button, .btn { display: inline-block; background: #176a78; color: #fff; border: 0; border-radius: 4px; padding: 7px 16px; cursor: pointer; text-decoration: none; font-size: 14px; }
+button.sub, .btn.sub { background: #6b7b80; }
+.error { background: #fdecea; color: #b3261e; border: 1px solid #f5c2be; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
+.info { background: #e8f4ea; color: #1b5e20; border: 1px solid #bfdcc3; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; }
+table { border-collapse: collapse; width: 100%; background: #fff; }
+th, td { border: 1px solid #dde; padding: 6px 8px; text-align: left; font-size: 14px; }
+th { background: #eaf4f6; }
+.menu a { display: block; margin: 8px 0; }
+
+/* Flexbox Layout: ဘယ်ဘက် Icon နှင့် ညာဘက် Login အချက်အလက်များ ဘေးချင်းယှဉ်ရန် */
+.login-container-flex {
+    display: flex;
+    align-items: flex-start;
+    gap: 35px; /* Icon နှင့် Form ကြား အကွာအဝေး */
 }
-h1
+
-{font-size:20px
+/* ဘယ်ဘက်ခြမ်း Icon Box Styling */
+.avatar-box {
+    flex-shrink: 0;
+    width: 90px;
+    height: 90px;
+    background: #eaf4f6;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.4s ease;
+    cursor: pointer;
+    margin-top: 5px;
 }
-.card
+
-{background:#fff;
+.avatar-box:hover {
-	border:1px solid #dde;
+    transform: scale(1.08);
-	border-radius:6px;
+    background: #d5edf1;
-	padding:20px;
-	margin-bottom:16px
 }
-label
+
-{display:block;
+/* ညာဘက်ခြမ်း Form Area ကို အပြည့်အသုံးပြုရန် */
-	margin:10px 0 4px;
+.form-content-area {
-	font-weight:bold
+    flex-grow: 1;
 }
-input[type=text],input[type=password],input[type=email]
+
-{width:100%;
+/* 1. FALSE / ERROR State (တုန်ခါမည်) */
-	max-width:360px;
+.card.shake {
-	padding:6px;
+    animation: shake 0.4s ease-in-out;
-	box-sizing:border-box
 }
-button,.btn
+
-{display:inline-block;
+.avatar-box.error-state {
-	background:#176a78;
+    background: #fdecea !important;
-	color:#fff;border:0;
+    animation: pulseError 0.4s ease-in-out;
-	border-radius:4px;
-	padding:7px 16px;
-	cursor:pointer;
-	text-decoration:none;
-	font-size:14px
 }
-button.sub,.btn.sub
+
-{background:#6b7b80
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20%, 60% { transform: translateX(-8px); }
+    40%, 80% { transform: translateX(8px); }
 }
-.error
+
-{background:#fdecea;color:#b3261e;
+@keyframes pulseError {
-	border:1px solid #f5c2be;
+    0% { transform: scale(1); }
-	padding:8px 12px;
+    50% { transform: scale(1.15); }
-	border-radius:4px;
+    100% { transform: scale(1); }
-	margin-bottom:12px
 }
-.info
+
-{background:#e8f4ea;
+/* 2. TRUE / SUCCESS State (အောင်မြင်မှု Animation) */
-	color:#1b5e20;
+.avatar-box.success-state {
-	border:1px solid #bfdcc3;
+    background: #e8f4ea !important;
-	padding:8px 12px;
+    animation: successFly 0.6s ease-in-out forwards;
-	border-radius:4px;
-	margin-bottom:12px
 }
-table
+
-{border-collapse:collapse;
+@keyframes successFly {
-	width:100%;
+    0% { transform: scale(1); }
-	background:#fff
+    40% { transform: scale(1.2) translateY(-8px); }
-}
+    100% { transform: scale(0.9) translateY(-20px); opacity: 0.8; }
-th,td
-{border:1px solid #dde;
-	padding:6px 8px;
-	text-align:left;
-	font-size:14px
-}
-th
-{background:#eaf4f6
-}
-.menu a
-{display:block;
-	margin:8px 0
 }
+
+/* Responsive (ဖုန်းစခရင်သေးများတွင် အောက်သို့ ဆင်းသွားစေရန်) */
+@media (max-width: 600px) {
+    .login-container-flex {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    .form-content-area {
+        width: 100%;
+    }
+    input[type=text], input[type=password], input[type=email] {
+        max-width: 100% !important;
+    }
+}

book-rent/src/main/resources/templates/login.html

@@ -1,123 +1,117 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
- 
 <head>
-	<meta charset="UTF-8">
+  <meta charset="UTF-8">
-	<title>ログイン</title>
+  <title>ログイン</title>
-	<link rel="stylesheet" th:href="@{/css/style.css}">
+  
+  <!-- Lordicon Script -->
+  <script src="https://cdn.lordicon.com/lordicon.js"></script>
+  
+  <link rel="stylesheet" th:href="@{/css/style.css}">
 </head>
- 
 <body>
-	<main>
+<main>
-		<h1>書籍貸出管理システム</h1>
+  <h1>書籍貸出管理システム</h1>
-		<div class="card">
+  <div class="card" id="loginCard">
-			<h2>ログイン</h2>
+    
-			<div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>
+    <!-- Main Flex Container: ဘယ်ဘက် Icon နှင့် ညာဘက် Form Area ကို ဘေးချင်းယှဉ်ရန် -->
-			<form th:action="@{/login}" method="post">
+    <div class="login-container-flex">
-				<label for="mailAddress">メールアドレス</label>
+      
-				<input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}"
+      <!-- ဘယ်ဘက်ခြမ်းရှိ Lordicon Avatar Box -->
-					autocomplete="username">
+      <div class="avatar-box" id="avatarBox">
-				<label for="password">パスワード</label>
+        <lord-icon
-				<input type="password" id="password" name="password" autocomplete="current-password">
+          id="lordIcon"
-				<p><button type="submit">ログイン</button></p>
+          src="https://cdn.lordicon.com/dxjqoygy.json"
-			</form>
+          trigger="hover"
-		</div>
+          colors="primary:#176a78,secondary:#08a88a"
-	</main>
+          style="width:90px;height:90px">
+        </lord-icon>
+      </div>
+
+      <!-- ညာဘက်ခြမ်းရှိ Login Content (ခေါင်းစဉ်နှင့် Form အားလုံး ပါဝင်သည်) -->
+      <div class="form-content-area">
+        <h2>ログイン</h2>
+        
+        <!-- Error Message -->
+        <div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>
+        
+        <form th:action="@{/login}" method="post" id="loginForm">
+          <label for="mailAddress">メールアドレス</label>
+          <input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}" autocomplete="username">
+          
+          <label for="password">パスワード</label>
+          <input type="password" id="password" name="password" autocomplete="current-password">
+          
+          <p><button type="submit">ログイン</button></p>
+        </form>
+      </div>
+
+    </div>
+
+  </div>
+</main>
+
+<script>
+  const loginCard = document.getElementById('loginCard');
+  const lordIcon = document.getElementById('lordIcon');
+  const avatarBox = document.getElementById('avatarBox');
+  const errorDiv = document.querySelector('.error');
+  const loginForm = document.getElementById('loginForm');
+
+  // 1. Icon နှိပ်လျှင် Animation လှုပ်ရှားရန်
+  if (lordIcon) {
+      lordIcon.addEventListener('click', () => {
+          lordIcon.setAttribute('trigger', 'morph');
+          setTimeout(() => {
+              lordIcon.setAttribute('trigger', 'hover');
+          }, 1000);
+      });
+  }
+
+  // 2. Login မှားယွင်းသောအခါ (False / Error) -> Card Shake Animation & Icon Color Change
+  if (errorDiv) {
+      loginCard.classList.add('shake');
+      if (avatarBox) {
+          avatarBox.classList.add('error-state');
+      }
+      if (lordIcon) {
+          lordIcon.setAttribute('colors', 'primary:#b3261e,secondary:#f5c2be');
+      }
+  }
+
+  // 3. Login နှိပ်လိုက်ချိန် (True / Success Animation State)
+  if (loginForm) {
+      loginForm.addEventListener('submit', function(e) {
+          if (avatarBox && lordIcon) {
+              avatarBox.classList.add('success-state');
+              lordIcon.setAttribute('colors', 'primary:#1b5e20,secondary:#81c784');
+          }
+      });
+  }
+</script>
 </body>
- 
 </html>
- 
 <!--<!DOCTYPE html>-->
 <!--<html xmlns:th="http://www.thymeleaf.org">-->
- 
+<!--<head>>-->
-<!--<head>-->
+<!--  <meta charset="UTF-8">-->
-<!--    <meta charset="UTF-8">-->
+<!--  <title>ログイン</title>-->
-<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
+<!--  <link rel="stylesheet" th:href="@{/css/style.css}">-->
- 
-<!--     外部スクリプトの読み込み -->
-<!--    <script th:src="@{/js/common.js}"></script>-->
- 
-<!--     CSSの読み込み -->
-<!--    <link rel="stylesheet" th:href="@{/css/all.css}" type="text/css">-->
-<!--    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css">-->
- 
-<!--    <title>ログイン</title>-->
 <!--</head>-->
- 
 <!--<body>-->
- 
+<!--<main>-->
-<!--    <div class="loginContainer">-->
+<!--  <h1>書籍貸出管理システム</h1>-->
- 
+<!--  <div class="card">-->
-<!--        <h1>ログイン</h1>-->
+<!--    <h2>ログイン</h2>-->
- 
+<!--    <div class="error" th:if="${errorMessage}" th:text="${errorMessage}"></div>-->
-<!--        <form th:action="@{/doLogin}"-->
+<!--    <form th:action="@{/login}" method="post">-->
-<!--              method="post"-->
+<!--      <label for="mailAddress">メールアドレス</label>-->
-<!--              th:object="${loginInfoForm}">-->
+<!--      <input type="text" id="mailAddress" name="mailAddress" th:value="${mailAddress}" autocomplete="username">-->
- 
+<!--      <label for="password">パスワード</label>-->
-<!--             エラーメッセージ -->
+<!--      <input type="password" id="password" name="password" autocomplete="current-password">-->
-<!--            <div class="msgBox error"-->
+<!--      <p><button type="submit">ログイン</button></p>-->
-<!--                 th:if="${messageError != null}">-->
+<!--    </form>-->
-<!--                <span class="error"-->
+<!--  </div>-->
-<!--                      th:text="${messageError.message}"></span>-->
+<!--</main>-->
-<!--            </div>-->
- 
-<!--            <table>-->
-<!--                 メールアドレス -->
-<!--                <tr>-->
-<!--                    <th class="header">メールアドレス</th>-->
-<!--                    <td>-->
-<!--                        <input-->
-<!--                            id="mailAddress"-->
-<!--                            type="text"-->
-<!--                            th:field="*{mailAddress}"-->
-<!--                            placeholder="メールアドレス"-->
-<!--                            required-->
-<!--                        />-->
-<!--                    </td>-->
-<!--                </tr>-->
- 
-<!--                 パスワード -->
-<!--                <tr>-->
-<!--                    <th class="header">パスワード</th>-->
-<!--                    <td>-->
-<!--                        <input-->
-<!--                            id="password"-->
-<!--                            type="password"-->
-<!--                            th:field="*{password}"-->
-<!--                            placeholder="パスワード"-->
-<!--                            required-->
-<!--                        />-->
-<!--                    </td>-->
-<!--                </tr>-->
- 
-<!--                 ボタン -->
-<!--                <tr>-->
-<!--                    <td class="btnArea" colspan="2">-->
-<!--                        <input-->
-<!--                            type="submit"-->
-<!--                            value="ログイン"-->
-<!--                        />-->
- 
-<!--                        <button-->
-<!--                            type="button"-->
-<!--                            onclick="clearInput()">-->
-<!--                            リセット-->
-<!--                        </button>-->
-<!--                    </td>-->
-<!--                </tr>-->
-<!--            </table>-->
- 
-<!--        </form>-->
- 
-<!--    </div>-->
- 
-<!--     入力内容のリセット -->
-<!--    <script>-->
-<!--        function clearInput() {-->
-<!--            document.getElementById('mailAddress').value = '';-->
-<!--            document.getElementById('password').value = '';-->
-<!--        }-->
-<!--    </script>-->
- 
 <!--</body>-->
-<!--</html>-->
+<!--</html>-->