hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Add Centered component

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-13 19:46:54 +02:00
parent 1310649e29
commit 3e27d4fa86
3 changed files with 118 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/Centered.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="row d-flex justify-content-center">
<div class="mt-3 col-md-6">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "Centered"
}
</script>

67
web/src/components/SigninForm.vue
View File

@ -1,50 +1,51 @@
<template> <template>
<div class="row d-flex justify-content-center"> <Centered>
<div class="mt-3 col-md-6"> <b-card header="Sign in">
<b-card header="Sign in"> <b-form @submit.prevent="signin">
<b-form @submit.prevent="signin">
<b-form-group id="username-group" label="Username:" label-for="username"> <b-form-group id="username-group" label="Username:" label-for="username">
<b-form-input <b-form-input
id="username" id="username"
v-model="form.username" v-model="form.username"
required required
placeholder="Enter a username" placeholder="Enter a username"
></b-form-input> ></b-form-input>
</b-form-group> </b-form-group>
<b-form-group id="password-group" label="Password:" label-for="password"> <b-form-group id="password-group" label="Password:" label-for="password">
<b-form-input <b-form-input
id="password" id="password"
v-model="form.password" v-model="form.password"
required required
placeholder="Enter a password" placeholder="Enter a password"
type="password" type="password"
></b-form-input> ></b-form-input>
</b-form-group> </b-form-group>
<b-button type="submit" variant="primary">Submit</b-button> <b-button type="submit" variant="primary">Submit</b-button>
</b-form> </b-form>
<b-alert :show="invalid" variant="danger" dismissible class="mt-3"> <b-alert :show="invalid" variant="danger" dismissible class="mt-3">
Invalid credential Invalid credential
</b-alert> </b-alert>
<b-alert :show="error" variant="danger" dismissible class="mt-3"> <b-alert :show="error" variant="danger" dismissible class="mt-3">
An error occurred while signin in An error occurred while signin in
</b-alert> </b-alert>
</b-card> </b-card>
</div> </Centered>
</div>
</template> </template>
<script> <script>
import Api from '@/api' import Api from '@/api'
import {mapMutations} from "vuex"; import {mapMutations} from "vuex";
import Centered from '@/components/Centered'
export default { export default {
name: "SignupForm", name: "SignupForm",
components: {
Centered
},
data() { data() {
return { return {
form: { form: {

142
web/src/components/SignupForm.vue
View File

@ -1,87 +1,87 @@
<template> <template>
<div> <Centered>
<div class="row d-flex justify-content-center"> <b-card header="Create an account">
<div class="mt-3 col-md-6"> <b-form @submit.prevent="handleSubmit">
<b-card header="Create an account"> <b-form-group
<b-form @submit.prevent="handleSubmit"> id="email-group"
<b-form-group label="Email address:"
id="email-group" label-for="email"
label="Email address:" description="We'll never share your email with anyone else."
label-for="email" >
description="We'll never share your email with anyone else." <b-form-input
> id="email"
<b-form-input v-model="form.email"
id="email" type="email"
v-model="form.email" required
type="email" placeholder="Enter email"
required ></b-form-input>
placeholder="Enter email" </b-form-group>
></b-form-input>
</b-form-group>
<b-form-group id="username-group" label="Username:" label-for="username"> <b-form-group id="username-group" label="Username:" label-for="username">
<b-form-input <b-form-input
id="username" id="username"
v-model="form.username" v-model="form.username"
required required
placeholder="Enter a username" placeholder="Enter a username"
:state="validUsername" :state="validUsername"
></b-form-input> ></b-form-input>
<b-form-invalid-feedback :state="validUsername"> <b-form-invalid-feedback :state="validUsername">
Your username must be at least 5 characters long. Your username must be at least 5 characters long.
</b-form-invalid-feedback> </b-form-invalid-feedback>
</b-form-group> </b-form-group>
<b-form-group id="password-group" label="Password:" label-for="password"> <b-form-group id="password-group" label="Password:" label-for="password">
<b-form-input <b-form-input
id="password" id="password"
v-model="form.password" v-model="form.password"
required required
placeholder="Enter a password" placeholder="Enter a password"
:state="validPassword" :state="validPassword"
type="password" type="password"
></b-form-input> ></b-form-input>
<b-form-invalid-feedback :state="validPassword"> <b-form-invalid-feedback :state="validPassword">
Your password must be at least 6 characters long. Your password must be at least 6 characters long.
</b-form-invalid-feedback> </b-form-invalid-feedback>
</b-form-group> </b-form-group>
<b-form-group id="password-confirm-group" label="Confirm password:" <b-form-group id="password-confirm-group" label="Confirm password:"
label-for="password-confirm"> label-for="password-confirm">
<b-form-input <b-form-input
id="password-confirm" id="password-confirm"
v-model="form.passwordConfirm" v-model="form.passwordConfirm"
required required
placeholder="Confirm your password" placeholder="Confirm your password"
:state="passwordEquals" :state="passwordEquals"
type="password" type="password"
></b-form-input> ></b-form-input>
<b-form-invalid-feedback :state="passwordEquals"> <b-form-invalid-feedback :state="passwordEquals">
Both passwords must be equals. Both passwords must be equals.
</b-form-invalid-feedback> </b-form-invalid-feedback>
</b-form-group> </b-form-group>
<b-button type="submit" variant="primary">Submit</b-button> <b-button type="submit" variant="primary">Submit</b-button>
</b-form> </b-form>
<b-alert :show="exists" variant="danger" dismissible class="mt-3"> <b-alert :show="exists" variant="danger" dismissible class="mt-3">
A user with that username or email already exists A user with that username or email already exists
</b-alert> </b-alert>
<b-alert :show="error" variant="danger" dismissible class="mt-3"> <b-alert :show="error" variant="danger" dismissible class="mt-3">
An error occurred while attempting to create your account An error occurred while attempting to create your account
</b-alert> </b-alert>
</b-card>
</b-card> </Centered>
</div>
</div>
</div>
</template> </template>
<script> <script>
import Api from '@/api' import Api from '@/api'
import Centered from '@/components/Centered'
export default { export default {
name: "SignupForm", name: "SignupForm",
components: {
Centered
},
data() { data() {
return { return {
form: { form: {