hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Fix form width

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-13 19:37:02 +02:00
parent 8cd12c3b0e
commit 1310649e29
2 changed files with 100 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,41 @@
<template>
<div>
<b-card class="mt-3" header="Sign in">
<b-form @submit.prevent="signin">
<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">
<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>
</b-card>
</div>
</template>

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

@ -1,74 +1,79 @@
<template>
<div>
<b-card class="mt-3" 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>
<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>
<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-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>
</b-card>
</div>
</div>
</div>
</template>