Add Centered component
This commit is contained in:
parent
1310649e29
commit
3e27d4fa86
13
web/src/components/Centered.vue
Normal file
13
web/src/components/Centered.vue
Normal 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>
|
||||
@ -1,50 +1,51 @@
|
||||
<template>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="mt-3 col-md-6">
|
||||
<b-card header="Sign in">
|
||||
<b-form @submit.prevent="signin">
|
||||
<Centered>
|
||||
<b-card header="Sign in">
|
||||
<b-form @submit.prevent="signin">
|
||||
|
||||
<b-form-group id="username-group" label="Username:" label-for="username">
|
||||
<b-form-input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
required
|
||||
placeholder="Enter a username"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<b-form-group id="username-group" label="Username:" label-for="username">
|
||||
<b-form-input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
required
|
||||
placeholder="Enter a username"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group id="password-group" label="Password:" label-for="password">
|
||||
<b-form-input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
required
|
||||
placeholder="Enter a password"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<b-form-group id="password-group" label="Password:" label-for="password">
|
||||
<b-form-input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
required
|
||||
placeholder="Enter a password"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-button type="submit" variant="primary">Submit</b-button>
|
||||
</b-form>
|
||||
<b-button type="submit" variant="primary">Submit</b-button>
|
||||
</b-form>
|
||||
|
||||
<b-alert :show="invalid" variant="danger" dismissible class="mt-3">
|
||||
Invalid credential
|
||||
</b-alert>
|
||||
<b-alert :show="error" variant="danger" dismissible class="mt-3">
|
||||
An error occurred while signin in
|
||||
</b-alert>
|
||||
<b-alert :show="invalid" variant="danger" dismissible class="mt-3">
|
||||
Invalid credential
|
||||
</b-alert>
|
||||
<b-alert :show="error" variant="danger" dismissible class="mt-3">
|
||||
An error occurred while signin in
|
||||
</b-alert>
|
||||
|
||||
</b-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</b-card>
|
||||
</Centered>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from '@/api'
|
||||
import {mapMutations} from "vuex";
|
||||
import Centered from '@/components/Centered'
|
||||
|
||||
export default {
|
||||
name: "SignupForm",
|
||||
components: {
|
||||
Centered
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
||||
@ -1,87 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
<div class="mt-3 col-md-6">
|
||||
<b-card header="Create an account">
|
||||
<b-form @submit.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
id="email-group"
|
||||
label="Email address:"
|
||||
label-for="email"
|
||||
description="We'll never share your email with anyone else."
|
||||
>
|
||||
<b-form-input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="Enter email"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<Centered>
|
||||
<b-card header="Create an account">
|
||||
<b-form @submit.prevent="handleSubmit">
|
||||
<b-form-group
|
||||
id="email-group"
|
||||
label="Email address:"
|
||||
label-for="email"
|
||||
description="We'll never share your email with anyone else."
|
||||
>
|
||||
<b-form-input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
required
|
||||
placeholder="Enter email"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group id="username-group" label="Username:" label-for="username">
|
||||
<b-form-input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
required
|
||||
placeholder="Enter a username"
|
||||
:state="validUsername"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="validUsername">
|
||||
Your username must be at least 5 characters long.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
<b-form-group id="username-group" label="Username:" label-for="username">
|
||||
<b-form-input
|
||||
id="username"
|
||||
v-model="form.username"
|
||||
required
|
||||
placeholder="Enter a username"
|
||||
:state="validUsername"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="validUsername">
|
||||
Your username must be at least 5 characters long.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group id="password-group" label="Password:" label-for="password">
|
||||
<b-form-input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
required
|
||||
placeholder="Enter a password"
|
||||
:state="validPassword"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="validPassword">
|
||||
Your password must be at least 6 characters long.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
<b-form-group id="password-group" label="Password:" label-for="password">
|
||||
<b-form-input
|
||||
id="password"
|
||||
v-model="form.password"
|
||||
required
|
||||
placeholder="Enter a password"
|
||||
:state="validPassword"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="validPassword">
|
||||
Your password must be at least 6 characters long.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group id="password-confirm-group" label="Confirm password:"
|
||||
label-for="password-confirm">
|
||||
<b-form-input
|
||||
id="password-confirm"
|
||||
v-model="form.passwordConfirm"
|
||||
required
|
||||
placeholder="Confirm your password"
|
||||
:state="passwordEquals"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="passwordEquals">
|
||||
Both passwords must be equals.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
<b-form-group id="password-confirm-group" label="Confirm password:"
|
||||
label-for="password-confirm">
|
||||
<b-form-input
|
||||
id="password-confirm"
|
||||
v-model="form.passwordConfirm"
|
||||
required
|
||||
placeholder="Confirm your password"
|
||||
:state="passwordEquals"
|
||||
type="password"
|
||||
></b-form-input>
|
||||
<b-form-invalid-feedback :state="passwordEquals">
|
||||
Both passwords must be equals.
|
||||
</b-form-invalid-feedback>
|
||||
</b-form-group>
|
||||
|
||||
<b-button type="submit" variant="primary">Submit</b-button>
|
||||
</b-form>
|
||||
<b-button type="submit" variant="primary">Submit</b-button>
|
||||
</b-form>
|
||||
|
||||
<b-alert :show="exists" variant="danger" dismissible class="mt-3">
|
||||
A user with that username or email already exists
|
||||
</b-alert>
|
||||
<b-alert :show="error" variant="danger" dismissible class="mt-3">
|
||||
An error occurred while attempting to create your account
|
||||
</b-alert>
|
||||
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-alert :show="exists" variant="danger" dismissible class="mt-3">
|
||||
A user with that username or email already exists
|
||||
</b-alert>
|
||||
<b-alert :show="error" variant="danger" dismissible class="mt-3">
|
||||
An error occurred while attempting to create your account
|
||||
</b-alert>
|
||||
</b-card>
|
||||
</Centered>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from '@/api'
|
||||
import Centered from '@/components/Centered'
|
||||
|
||||
|
||||
export default {
|
||||
name: "SignupForm",
|
||||
components: {
|
||||
Centered
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user