Login and Register forms use Bulma.css

This commit is contained in:
Bubka 2020-01-06 11:00:17 +01:00
parent 7611f9b61c
commit 1a87feaa28
2 changed files with 58 additions and 84 deletions

View File

@ -1,41 +1,30 @@
<template> <template>
<div class="container"> <div class="section">
<div class="row justify-content-center"> <div class="columns is-mobile is-centered">
<div class="col-md-8"> <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div class="card card-default"> <h1 class="title">Login</h1>
<div class="card-header">Login</div>
<div class="card-body">
<form method="POST" action="/login"> <form method="POST" action="/login">
<div class="form-group row"> <div class="field">
<label for="email" class="col-sm-4 col-form-label text-md-right">E-Mail Address</label> <label class="label">Email</label>
<div class="control">
<div class="col-md-6"> <input id="email" type="email" class="input" v-model="email" required autofocus />
<input id="email" type="email" class="form-control" v-model="email" required autofocus>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row"> <label class="label">Password</label>
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label> <div class="control">
<input id="password" type="password" class="input" v-model="password" required />
<div class="col-md-6">
<input id="password" type="password" class="form-control" v-model="password" required>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row mb-0"> <div class="control">
<div class="col-md-8 offset-md-4"> <button type="submit" class="button is-link" @click="handleSubmit">Sign in</button>
<button type="submit" class="btn btn-primary" @click="handleSubmit">
Login
</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -71,7 +60,7 @@
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
if (localStorage.getItem('jwt')) { if (localStorage.getItem('jwt')) {
return next('home'); return next('accounts');
} }
next(); next();

View File

@ -1,57 +1,42 @@
<template> <template>
<div class="container"> <div class="section">
<div class="row justify-content-center"> <div class="columns is-mobile is-centered">
<div class="col-md-8"> <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
<div class="card card-default"> <h1 class="title">Register</h1>
<div class="card-header">Register</div>
<div class="card-body">
<form method="POST" action="/register"> <form method="POST" action="/register">
<div class="form-group row"> <div class="field">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label> <label class="label">Name</label>
<div class="control">
<div class="col-md-6"> <input id="name" type="email" class="input" v-model="name" required autofocus />
<input id="name" type="text" class="form-control" v-model="name" required autofocus>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row"> <label class="label">Email</label>
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label> <div class="control">
<input id="email" type="email" class="input" v-model="email" required />
<div class="col-md-6">
<input id="email" type="email" class="form-control" v-model="email" required>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row"> <label class="label">Password</label>
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label> <div class="control">
<input id="password" type="password" class="input" v-model="password" required />
<div class="col-md-6">
<input id="password" type="password" class="form-control" v-model="password" required>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row"> <label class="label">Confirm Password</label>
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label> <div class="control">
<input id="password-confirm" type="password" class="input" v-model="password_confirmation" required />
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" v-model="password_confirmation" required>
</div> </div>
</div> </div>
<div class="field">
<div class="form-group row mb-0"> <div class="control">
<div class="col-md-6 offset-md-4"> <button type="submit" class="button is-link" @click="handleSubmit">Register</button>
<button type="submit" class="btn btn-primary" @click="handleSubmit">
Register
</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
@ -97,7 +82,7 @@
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
if (localStorage.getItem('jwt')) { if (localStorage.getItem('jwt')) {
return next('home'); return next('accounts');
} }
next(); next();