✨ 🔧 Update npm + login page
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
#app{
|
||||
min-height: 100vh;
|
||||
}
|
||||
6
resources/css/bootstrap.css
vendored
Normal file
6
resources/css/bootstrap.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3
resources/js/Pages/Auth/login.css
Normal file
3
resources/js/Pages/Auth/login.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.container-sm{
|
||||
max-width: 25%;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user