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,38 +1,27 @@
<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> <form method="POST" action="/login">
<div class="field">
<div class="card-body"> <label class="label">Email</label>
<form method="POST" action="/login"> <div class="control">
<div class="form-group row"> <input id="email" type="email" class="input" v-model="email" required autofocus />
<label for="email" class="col-sm-4 col-form-label text-md-right">E-Mail Address</label> </div>
<div class="col-md-6">
<input id="email" type="email" class="form-control" v-model="email" required autofocus>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" v-model="password" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary" @click="handleSubmit">
Login
</button>
</div>
</div>
</form>
</div> </div>
</div> <div class="field">
<label class="label">Password</label>
<div class="control">
<input id="password" type="password" class="input" v-model="password" required />
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-link" @click="handleSubmit">Sign in</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -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,54 +1,39 @@
<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> <form method="POST" action="/register">
<div class="field">
<div class="card-body"> <label class="label">Name</label>
<form method="POST" action="/register"> <div class="control">
<div class="form-group row"> <input id="name" type="email" class="input" v-model="name" required autofocus />
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label> </div>
<div class="col-md-6">
<input id="name" type="text" class="form-control" v-model="name" required autofocus>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" v-model="email" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" v-model="password" required>
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" v-model="password_confirmation" required>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary" @click="handleSubmit">
Register
</button>
</div>
</div>
</form>
</div> </div>
</div> <div class="field">
<label class="label">Email</label>
<div class="control">
<input id="email" type="email" class="input" v-model="email" required />
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input id="password" type="password" class="input" v-model="password" required />
</div>
</div>
<div class="field">
<label class="label">Confirm Password</label>
<div class="control">
<input id="password-confirm" type="password" class="input" v-model="password_confirmation" required />
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-link" @click="handleSubmit">Register</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
@ -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();