{% extends "base.html" %}

{% block title %}OurTieba{% endblock %}
{% block head %}
    {{ super() }}
    <link href="{{ url_for('static', filename='css/signin.css') }}" rel="stylesheet">
{% endblock %}

{% block page_content %}
    <form class="form-signin" action="{{ url_for('api.login_auth') }}" method="post" target="dummy">
        <img class="mb-4" src="{{ url_for("static", filename='ico/favicon.ico') }}" alt="" width="72" height="72">
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
        <iframe name="dummy" id="dummy" style="display: none;"></iframe>
        <div class="form-floating">
            <input type="text" class="form-control" id="uname" placeholder="username" required>
            <label for="uname">Username</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="password" placeholder="Password" required>
            <label for="password">Password</label>
        </div>

        <button class="w-100 btn btn-lg btn-primary" type="submit" id="btn_submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; OurTieba</p>
    </form>


    <div id="username-err" class="alert alert-warning" style="display: none">
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        // parse url to find "redirect" param (this is needed because login requests may come from iframes)
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var r_link;
        vars.forEach((e) => {
            if (e.startsWith("redirect=")) {
                r_link = e.substring(9);
            }
        })

        $(document).ready(function () {
            $("#btn_submit").click(function () {
                let uname = $("#uname").val().trim();
                let password = $("#password").val().trim();

                if (uname !== "" && password !== "") {
                    $.ajax({
                        url: '/api/auth/login',
                        type: 'post',
                        dataType: 'json',
                        data: {uname: uname, password: password},
                        success: function (response) {
                            let msg = "";
                            if (response.status !== 0) {
                                if (!r_link) {
                                    let ref = document.referrer;
                                    r_link = (ref.indexOf(location.protocol+"//"+location.host) === 0) ?
                                        ref : "/redirect?link="+ref;
                                }
                                location.href = r_link;
                            } else {
                                msg = response.error['msg'];
                                $("#username-err").html(msg).show();

                            }

                        }
                    });
                }
            });
        });
    </script>
{% endblock %}
