<script setup>
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
import {onMounted, ref} from 'vue'
import { toast } from 'vue3-toastify'
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";


const props = defineProps({
    navbar: Object,
    tenant: String,
    user: Object,
    currentPath: String,
    errors: Object,
})


onMounted(() => {
    if (undefined !== props.errors && undefined !== props.errors.username) {
        toast.error(props.errors.username[0])
    }
})

const username = ref('')
const password = ref('')

const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

function resetPassword() {
    window.location.href = '/reset-password';
}
</script>

<template>
    <AppLayout title='Anmelden' :user="props.user" :navbar="props.navbar" :tenant="props.tenant" :currentPath="props.currentPath">
        <form method="POST" action="/login">
            <input type="hidden" name="_token" :value="csrfToken" />
            <shadowed-box class="login-box">
                <table class="login-table">
                    <tr>
                        <th>Anmeldename</th>
                        <td>
                            <input type="text" name="username" id="username" />
                        </td>
                    </tr>

                    <tr>
                        <th>Passwort</th>
                        <td><input type="password" name="password" id="password" /></td>
                    </tr>

                    <tr>
                        <td colspan="2" class="login-buttons">
                            <input type="submit" value="Anmelden" />
                            <input type="button" @click="resetPassword" value="Passwort vergessen" />
                        </td>
                    </tr>
                </table>
            </shadowed-box>
        </form>
    </AppLayout>
</template>

<style>
.login-table th {
    width: 100px;
}

.login-box {
    width: 50%;
    margin: 150px auto;
    padding: 20px;
}

.login-buttons input {
    margin-top: 20px;
    margin-right: 10px;
}

/* Tablet */
@media (max-width: 1023px) {
    .login-box {
        width: 70% !important;
        margin: 80px auto !important;
    }
}

/* Smartphone */
@media (max-width: 639px) {
    .login-box {
        width: 95% !important;
        margin: 30px auto !important;
        padding: 15px !important;
    }

    .login-table,
    .login-table tbody,
    .login-table tr,
    .login-table th,
    .login-table td {
        display: block;
        width: 100%;
    }

    .login-table th {
        padding-bottom: 4px;
        text-align: left;
    }

    .login-table th::after {
        content: none;
    }

    .login-buttons input {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
    }
}
</style>
