@extends('layouts.auth')
@section('title', 'Choose a new password')
@section('content')
  @empty($done)
  <div id="rp-form-wrap">
    <h1>Choose a new password</h1>
    <p>For {{ $email }}. You'll be signed out of other devices.</p>
    <form id="rp" method="POST" action="{{ route('password.update') }}" style="margin-top:26px">
      @csrf
      <input type="hidden" name="token" value="{{ $token }}">
      <input type="hidden" name="email" value="{{ $email }}">
      <div class="field"><label for="np1">New password</label><input class="input" id="np1" name="password" type="password" required minlength="8" autocomplete="new-password">
        <div class="pw-meter" id="meter"><i></i><i></i><i></i><i></i></div><span class="help" id="pw-hint">Use at least 8 characters with a number or symbol.</span></div>
      <div class="field"><label for="np2">Confirm new password</label><input class="input" id="np2" name="password_confirmation" type="password" required autocomplete="new-password"><span class="help {{ $errors->any() ? '' : 'hidden' }}" id="pw-err" style="color:var(--red)">{{ $errors->first() ?: "Passwords don't match. Type the same password in both fields." }}</span></div>
      <button class="btn btn-primary btn-lg btn-block" type="submit">Save new password</button>
    </form>
  </div>
  @else
  <div id="rp-done">
    <div class="success-mark" style="margin:0 0 18px"><i data-icon="check"></i></div>
    <h1>Password updated</h1>
    <p>You can now sign in with your new password.</p>
    <a class="btn btn-primary btn-lg btn-block" style="margin-top:26px" href="{{ route('login') }}">Sign in</a>
  </div>
  @endempty
@endsection
@push('scripts')
@empty($done)
<script>
var p1 = document.getElementById("np1"), p2 = document.getElementById("np2"), m = document.getElementById("meter");
p1.addEventListener("input", function(){
  var v = p1.value, s = 0;
  if (v.length >= 8) s++; if (/[0-9]/.test(v)) s++; if (/[^A-Za-z0-9]/.test(v)) s++; if (v.length >= 12 && /[A-Z]/.test(v)) s++;
  m.className = "pw-meter" + (v ? " s" + Math.max(1, s) : "");
  document.getElementById("pw-hint").textContent = ["Use at least 8 characters with a number or symbol.","Weak. Add a number or symbol.","Getting there. Add a symbol or make it longer.","Strong password.","Very strong password."][v ? Math.max(1,s) : 0];
});
document.getElementById("rp").addEventListener("submit", function(e){
  var bad = p1.value !== p2.value, err = document.getElementById("pw-err");
  if (bad) { e.preventDefault(); err.textContent = "Passwords don't match. Type the same password in both fields."; err.classList.remove("hidden"); p2.focus(); }
});
</script>
@endempty
@endpush