120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<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>
|