TA/web_JMW/resources/views/reset-password.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Reset Password</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f0f4f8;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .password-container {
      background-color: #ffffff;
      border: 2px solid #4a90d9;
      border-radius: 4px;
      width: 668px;
      padding: 60px 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .password-container h1 {
      font-size: 28px;
      font-weight: bold;
      color: #111111;
      margin-bottom: 40px;
    }

    .form-group {
      width: 100%;
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 15px;
      color: #222222;
      margin-bottom: 6px;
    }

    .form-group input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
    }

    .password-field {
      position: relative;
    }

    .password-field input {
      padding-right: 46px;
    }

    .toggle-password {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border: none;
      background: transparent;
      color: #555555;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .toggle-password:hover {
      color: #111111;
    }

    .toggle-password svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
    }

    .form-group input:focus {
      border-color: #4a90d9;
      box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
    }

    .alert-error {
      width: 100%;
      background-color: #fee2e2;
      border: 1px solid #fca5a5;
      color: #b91c1c;
      padding: 10px 14px;
      border-radius: 4px;
      font-size: 14px;
      margin-bottom: 16px;
    }

    .btn-primary {
      width: 100%;
      padding: 13px;
      background-color: #4a90d9;
      color: #ffffff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 8px;
      transition: background-color 0.2s;
    }

    .btn-primary:hover {
      background-color: #357abd;
    }
  </style>
</head>
<body>
  <div class="password-container">
    <h1>Reset Password</h1>

    @if ($errors->any())
      <div class="alert-error">
        @foreach ($errors->all() as $error)
          <p>{{ $error }}</p>
        @endforeach
      </div>
    @endif

    @if (session('error'))
      <div class="alert-error">
        {{ session('error') }}
      </div>
    @endif

    <form action="{{ route('password.update') }}" method="POST" style="width: 100%;">
      @csrf

      <input type="hidden" name="token" value="{{ $token }}" />

      <div class="form-group">
        <label for="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value="{{ old('email', $email) }}"
          autocomplete="email"
        />
      </div>

      <div class="form-group">
        <label for="password">Password Baru:</label>
        <div class="password-field">
          <input
            type="password"
            id="password"
            name="password"
            autocomplete="new-password"
          />
          <button type="button" class="toggle-password" data-target="password" aria-label="Tampilkan password">
            <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path>
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
          </button>
        </div>
      </div>

      <div class="form-group">
        <label for="password_confirmation">Konfirmasi Password Baru:</label>
        <div class="password-field">
          <input
            type="password"
            id="password_confirmation"
            name="password_confirmation"
            autocomplete="new-password"
          />
          <button type="button" class="toggle-password" data-target="password_confirmation" aria-label="Tampilkan konfirmasi password">
            <svg class="icon-eye" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path>
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
          </button>
        </div>
      </div>

      <button type="submit" class="btn-primary">Simpan Password Baru</button>
    </form>
  </div>
  <script>
    document.querySelectorAll('.toggle-password').forEach((button) => {
      button.addEventListener('click', () => {
        const input = document.getElementById(button.dataset.target);
        const isHidden = input.type === 'password';

        input.type = isHidden ? 'text' : 'password';
        button.setAttribute('aria-label', isHidden ? 'Sembunyikan password' : 'Tampilkan password');
      });
    });
  </script>
</body>
</html>