🔧 Update npm + login page

This commit is contained in:
TiclemFR
2024-01-25 14:00:48 +01:00
parent 468c2cd0e6
commit 336f2bae93
128 changed files with 3078 additions and 2368 deletions

View File

@@ -0,0 +1,3 @@
#app{
min-height: 100vh;
}

6
resources/css/bootstrap.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,3 @@
.container-sm{
max-width: 25%;
}

View File

@@ -1,17 +1,62 @@
<script setup>
import { Head } from "@inertiajs/vue3";
import { reactive } from "vue";
import { router } from "@inertiajs/vue3";
const form = reactive({
email: null,
password: null,
});
function submit() {
router.post("/login", form);
}
</script>
<style>
@import "login.css";
</style>
<template>
<Head>
<title>Login</title>
</Head>
<div class="container">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Welcome to {{ $page.props.appName }}</h2>
<h3 class="font-semibold text-xl text-gray-800 leading-tight">Please, login in to begin</h3>
<div
class="container-sm text-center position-absolute translate-middle top-50 start-50"
>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Welcome to {{ $page.props.appName }}
</h2>
<h3 class="font-semibold text-xl text-gray-800 leading-tight">
Please, login in to begin
</h3>
<form @submit.prevent="submit">
<p
v-if="$page.props.errors.message"
class="error alert alert-danger"
>
{{ $page.props.errors.message }}
</p>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="email"
v-model="form.email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="password"
v-model="form.password"
/>
</div>
<button id="submit" type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</template>

View File

@@ -1,5 +1,6 @@
import "./bootstrap";
import "../css/app.css";
import "../css/bootstrap.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
@@ -19,4 +20,17 @@ createInertiaApp({
.use(plugin)
.mount(el);
},
progress: {
// The delay after which the progress bar will appear, in milliseconds...
delay: 250,
// The color of the progress bar...
color: '#29d',
// Whether to include the default NProgress styles...
includeCSS: true,
// Whether the NProgress spinner will be shown...
showSpinner: false,
},
});