@layout('theme::layouts/main')

@section('title')Security@endsection

@section('breadcrumb')
<a href="/settings/profile">Settings</a> &raquo; <span>Security</span>
@endsection

@section('content')
<div class="page-header">
    <h2>Security</h2>
</div>

@include('theme::partials/settings-nav', ['settingsTab' => 'security'])

@if(!empty($required))
<div class="alert alert-warning">
    <strong>This site requires two-step verification of administrators.</strong>
    The admin panel is closed to you until it is set up. The rest of the forum
    is not &mdash; you can carry on as normal in the meantime.
</div>
@endif

@notempty($notice ?? null)
<div class="alert alert-success">{{ $notice }}</div>
@endnotempty

@notempty($problem ?? null)
<div class="alert alert-error">{{ $problem }}</div>
@endnotempty

@notempty($codes ?? null)
{#
    Shown once. They are hashed, exactly like passwords, so there is no way
    to show them again — and saying so is the difference between somebody
    saving them now and being locked out later.
#}
<div class="token-reveal">
    <strong>Save these recovery codes somewhere safe.</strong>
    <p>
        Each one works once, and only these ten. They are hashed like a password,
        so this is the only time they can be shown.
    </p>
    <div class="recovery-codes">
        @each ($codes as $code)
        <code>{{ $code }}</code>
        @endeach
    </div>
</div>
@endnotempty

@if(!$available)
<div class="alert alert-warning">
    <strong>Two-step verification is not available on this site yet.</strong>
    It stores a secret that has to be encrypted, and no application key is configured.
    An administrator needs to run <code>php tools/convoro key:generate</code>.
</div>
@endif

<div class="card">
    <h3 class="card-title">Two-step verification</h3>

    @if($enabled)
    <p class="security-state security-on">
        <strong>On.</strong> Signing in needs a code from your authenticator app.
    </p>

    <hr class="security-divider">

    <h4 class="security-heading">Recovery codes</h4>

    <p class="form-hint">
        You have <strong>{{ $remaining }}</strong> of {{ $codeTotal }} left.
        @if($remaining <= $lowWater)
        <strong>That is running low.</strong> Make a new set before you run out &mdash;
        with none left and no phone there is no way back into the account.
        @endif
    </p>

    <form method="POST" action="/settings/security/codes" class="security-form">
        @csrf
        <div class="form-group">
            <label for="codes_password">Your password</label>
            <input type="password" id="codes_password" name="password" class="form-input"
                   autocomplete="current-password" required>
            <div class="form-hint">
                Asked again here because somebody at a borrowed desk should not be able
                to mint themselves a fresh way in. The old codes stop working.
            </div>
        </div>
        <button type="submit" class="btn btn-outline">Replace my recovery codes</button>
    </form>

    <hr class="security-divider">

    <h4 class="security-heading">Turning it off</h4>

    <p class="form-hint">
        Both factors, because turning protection off is exactly when it is worth
        asking who is doing the asking.
    </p>

    <form method="POST" action="/settings/security/disable" class="security-form"
          onsubmit="return confirm('Turn off two-step verification? Your password alone will be enough to sign in.')">
        @csrf
        <div class="form-group">
            <label for="off_password">Your password</label>
            <input type="password" id="off_password" name="password" class="form-input"
                   autocomplete="current-password" required>
        </div>
        <div class="form-group">
            <label for="off_code">A code from your app</label>
            <input type="text" id="off_code" name="code" class="form-input code-input"
                   autocomplete="one-time-code" inputmode="numeric" maxlength="20" required>
        </div>
        <button type="submit" class="btn btn-danger">Turn it off</button>
    </form>

    @elseif($secret !== null)
    <p class="form-hint">
        Add this to your authenticator app, then enter the code it shows to finish.
    </p>

    <div class="security-key">
        <a class="btn btn-primary" href="{{ $uri }}">Open in your authenticator</a>
        <div class="security-key-manual">
            <span class="form-hint">or type this in by hand:</span>
            <code>{{ $readableSecret }}</code>
        </div>
    </div>

    <form method="POST" action="/settings/security/confirm" class="security-form">
        @csrf
        <div class="form-group">
            <label for="code">The six-digit code</label>
            <input type="text" id="code" name="code" class="form-input code-input"
                   inputmode="numeric" maxlength="6" placeholder="000000" required autofocus>
            <div class="form-hint">
                Nothing changes about signing in until this is confirmed, so a mistake
                here cannot lock you out.
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Finish setting it up</button>
    </form>

    @else
    <p class="form-hint">
        A code from an app on your phone, as well as your password. It means a
        password that leaks somewhere else is not enough on its own.
    </p>

    <form method="POST" action="/settings/security/begin">
        @csrf
        <button type="submit" class="btn btn-primary" @if(!$available)disabled @endif>Set it up</button>
    </form>
    @endif
</div>

{#
    Anything else that decides how somebody gets into their account belongs on
    this screen rather than a page of its own. Passkeys are the first, and the
    reason this hook exists.
#}
@hook('member.security.after')
@endsection
