Implement Two-Factor Authentication (2FA) features and enhancements

- Added configuration options for Two-Factor Authentication, including TOTP encryption key.
- Updated user profile components to manage 2FA status and backup codes.
- Implemented encryption and decryption of TOTP secrets using AES-256-GCM.
- Enhanced backup code generation and validation processes, storing hashed codes securely.
- Introduced new routes and handlers for managing backup codes and 2FA setup.
- Updated README with detailed instructions and security considerations for 2FA implementation.

components/profile.templ

@@ -153,27 +153,39 @@ templ Profile(ctx context.Context, user db.User) {
 								<dt class="text-sm font-medium text-secondary-500 dark:text-secondary-400 sm:w-1/3 mb-1 sm:mb-0">Two-Factor Authentication</dt>
 								<dd class="text-sm text-secondary-900 dark:text-secondary-100 sm:w-2/3">
 									if user.TwoFactorEnabled {
-										<div class="flex items-center space-x-4">
-											<span class="badge badge-success">
-												<i class="fas fa-shield-alt mr-1"></i> Enabled
-											</span>
-											<button
-												type="button"
-												class="btn-danger btn-sm"
-												onclick="showDisable2FADialog()">
-												<i class="fas fa-times mr-1"></i>
-												Disable 2FA
-											</button>
+										<div class="flex flex-col space-y-3">
+											<div class="flex items-center">
+												<span class="badge badge-success">
+													<i class="fas fa-shield-alt mr-1"></i> Enabled
+												</span>
+											</div>
+											<div class="flex flex-wrap gap-2">
+												<a href="/profile/2fa/backup-codes" class="btn-secondary btn-sm">
+													<i class="fas fa-key mr-1"></i>
+													Manage Backup Codes
+												</a>
+												<button
+													type="button"
+													class="btn-danger btn-sm"
+													onclick="showDisable2FADialog()">
+													<i class="fas fa-times mr-1"></i>
+													Disable 2FA
+												</button>
+											</div>
 										</div>
 									} else {
-										<div class="flex items-center space-x-4">
-											<span class="badge badge-warning">
-												<i class="fas fa-shield-alt mr-1"></i> Disabled
-											</span>
-											<a href="/profile/2fa/setup" class="btn-primary btn-sm">
-												<i class="fas fa-lock mr-1"></i>
-												Enable 2FA
-											</a>
+										<div class="flex flex-col space-y-3">
+											<div class="flex items-center">
+												<span class="badge badge-warning">
+													<i class="fas fa-shield-alt mr-1"></i> Disabled
+												</span>
+											</div>
+											<div>
+												<a href="/profile/2fa/setup" class="btn-primary btn-sm">
+													<i class="fas fa-lock mr-1"></i>
+													Enable 2FA
+												</a>
+											</div>
 										</div>
 									}
 								</dd>