~doyle/jogre.git

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login | Jogre</title>

    <style>
        * {
            box-sizing: border-box;
        }

        code {
            font-family: monospace;
            background: #ecebec;
            border: 1px solid #d1d1d2;
            color: #d81f58;
            padding: .1rem;
            border-radius: .3rem;
        }

        body {
            margin: 0;
            line-height: 1.5rem;
            min-height: 100vh;
            min-width: 100vw;
            display: flex;
            background: #f1f5f9;
            color: #334155;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
        }

        .container {
            max-width: 35rem;
        }

        main, section {
            background: #fff;
            padding: 2rem;
            width: 100%;
            border-radius: 2rem;
        }

        section.error {
            background: #ef4444;
            color: white;
            padding: 1.2rem;
            margin-bottom: 1rem;
            width: 100%;
        }

        label, input, button {
            display: block;
            width: 100%;
        }

        label {
            margin-top: .5rem;
            font-size: .85rem;
        }

        input {
            margin-top: .25rem;
            background: #fff;
            border: 1px solid #cbd5e1;
            font-size: .875rem;
            line-height: 1.25rem;
        }

        input:focus {
            border-color: #0EA5E9;
            outline: 2px solid #0000;
            outline-offset: 2px;
            box-shadow: #0EA5E9 0 0 0 1px;
        }

        input, button {
            padding: .5rem .75rem;
            border-radius: .375rem;
        }

        button {
            margin-top: 1rem;
            background: #0EA5E9;
            color: #fff;
            font-weight: 600;
            border: 0;
            padding: 10px 20px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0369A1;
        }
    </style>
</head>

<body>
    <div class="container">
        {% if let Some(reason) = reason %}
            <section class="error">
                {% match reason %}
                    {% when UnauthenticatedState::InvalidUserPass %}
                        Invalid username or password
                    {% when UnauthenticatedState::MissingUserPass %}
                        You must enter a username and password
                    {% when UnauthenticatedState::InvalidCsrfToken %}
                        Invalid CSRF token
                {% endmatch %}
            </section>
        {% endif %}

        <main>
            <div>
                <strong>
                    Please login to confirm you would like to allow
                    <code>{{ solicitation.pre_grant().client_id }}</code>
                    access
                    {% if solicitation.pre_grant().scope.iter().next().is_some() %}
                        to <code>{{ solicitation.pre_grant().scope }}</code>
                    {% endif %}
                    via <code>{{ solicitation.pre_grant().redirect_uri }}</code>.
                </strong>
            </div>

            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token.form_value() }}" />

                <label for="username">Username</label>
                <input type="text" name="username" id="username" />

                <label for="password">Password</label>
                <input type="password" name="password" id="password" />

                <button type="submit">Login</button>
            </form>
        </main>
    </div>
</body>
</html>