260 lines
8.3 KiB
PHP
260 lines
8.3 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>パスワード変更 - So-Manager</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
|
||
<style>
|
||
body {
|
||
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
.password-change-container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||
max-width: 600px;
|
||
width: 100%;
|
||
padding: 40px;
|
||
}
|
||
|
||
.panel-title {
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 30px;
|
||
border-bottom: 3px solid #007bff;
|
||
padding-bottom: 15px;
|
||
}
|
||
|
||
.alert-warning-custom {
|
||
background-color: #fff3cd;
|
||
border: 2px solid #dc3545;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
color: #333;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.alert-warning-custom .text-danger {
|
||
color: #dc3545;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group label {
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.form-group input[type="password"] {
|
||
padding: 12px 15px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
transition: all 0.3s ease;
|
||
width: 100%;
|
||
}
|
||
|
||
.form-group input[type="password"]:focus {
|
||
border-color: #007bff;
|
||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
||
outline: none;
|
||
}
|
||
|
||
.form-group input.is-invalid {
|
||
border-color: #dc3545;
|
||
}
|
||
|
||
.form-group input.is-invalid:focus {
|
||
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
|
||
}
|
||
|
||
.invalid-feedback {
|
||
color: #dc3545;
|
||
font-size: 13px;
|
||
margin-top: 5px;
|
||
display: block;
|
||
}
|
||
|
||
.requirements {
|
||
background-color: #f8f9fa;
|
||
border-left: 4px solid #dc3545;
|
||
padding: 15px;
|
||
margin-bottom: 25px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #555;
|
||
}
|
||
|
||
.requirements ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.requirements li {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
background-color: #f5f5f5;
|
||
border: 2px solid #333;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.submit-btn:hover {
|
||
background-color: #e8e8e8;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.submit-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.error-message {
|
||
background-color: #f8d7da;
|
||
border: 1px solid #f5c6cb;
|
||
border-radius: 6px;
|
||
padding: 12px 15px;
|
||
margin-bottom: 20px;
|
||
color: #721c24;
|
||
}
|
||
|
||
.error-message ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.error-message li {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.password-change-container {
|
||
max-width: 720px;
|
||
/* 或者 800 */
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="password-change-container">
|
||
{{-- パネルタイトル --}}
|
||
<div class="panel-title">So-Manager 管理パネル</div>
|
||
|
||
{{-- バリデーションエラー表示 --}}
|
||
@if ($errors->any())
|
||
<div class="error-message">
|
||
<ul>
|
||
@foreach ($errors->all() as $error)
|
||
<li>{{ $error }}</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- 警告メッセージ --}}
|
||
<div class="alert-warning-custom">
|
||
<p>
|
||
セキュリティを維持するため、
|
||
<span class="text-danger">
|
||
パスワードの有効期限が切れました（3ヶ月）。<br>
|
||
</span>
|
||
<span class="text-danger">
|
||
新しいパスワードへの変更をお願いいたします。<br>
|
||
</span>
|
||
安全にご利用いただくため、定期的なパスワード更新が必要です。<br>
|
||
変更後、引き続きシステムをご利用いただけます。
|
||
</p>
|
||
</div>
|
||
|
||
{{-- パスワード変更フォーム --}}
|
||
<form action="{{ route('password.change.update') }}" method="POST">
|
||
@csrf
|
||
|
||
{{-- 当前パスワード --}}
|
||
<div class="form-group">
|
||
<label for="current_password">現在のパスワード:</label>
|
||
<input type="password" class="@error('current_password') is-invalid @enderror" id="current_password"
|
||
name="current_password" required minlength="8" maxlength="64">
|
||
@error('current_password')
|
||
<div class="invalid-feedback">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- 新パスワード --}}
|
||
<div class="form-group">
|
||
<label for="password">新しいパスワード:</label>
|
||
<input type="password" class="@error('password') is-invalid @enderror" id="password" name="password"
|
||
required minlength="8" maxlength="64" pattern="[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};:'\",.<>?/\\|`~]+">
|
||
@error('password')
|
||
<div class="invalid-feedback">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- 新パスワード確認 --}}
|
||
<div class="form-group">
|
||
<label for="password_confirmation">新しいパスワード（確認):</label>
|
||
<input type="password" class="@error('password_confirmation') is-invalid @enderror"
|
||
id="password_confirmation" name="password_confirmation" required minlength="8" maxlength="64"
|
||
pattern="[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};:'\",.<>?/\\|`~]+">
|
||
@error('password_confirmation')
|
||
<div class="invalid-feedback">{{ $message }}</div>
|
||
@enderror
|
||
</div>
|
||
|
||
{{-- 要件説明 --}}
|
||
<div class="requirements">
|
||
<strong>※新しいパスワードは、以下の条件を満たす必要があります。</strong>
|
||
<ul>
|
||
<li>8文字以上64文字以内</li>
|
||
<li>半角英数字および記号のみ使用可能</li>
|
||
<li>現在のパスワードと同一のものは使用できません</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{{-- Hidden フィールド（設計書に記載） --}}
|
||
<input type="hidden" name="updated_at" value="{{ now()->format('Y-m-d H:i:s') }}">
|
||
<input type="hidden" name="ope_pass_changed_at" value="{{ now()->format('Y-m-d H:i:s') }}">
|
||
|
||
{{-- 送信ボタン & キャンセルボタン --}}
|
||
<div class="button-group">
|
||
<button type="submit" class="submit-btn">
|
||
パスワードを変更する
|
||
</button>
|
||
<a href="{{ route('logout') }}" class="cancel-btn">
|
||
ログイン画面へ
|
||
</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
|
||
</html>
|