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> <template>
<div> <div class="row d-flex justify-content-center">
<b-card class="mt-3" header="Sign in"> <div class="mt-3 col-md-6">
<b-form @submit.prevent="signin"> <b-card header="Sign in">
<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>
</div>
</b-card>
</div> </div>
</template> </template>

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

@ -1,74 +1,79 @@
<template> <template>
<div> <div>
<b-card class="mt-3" header="Create an account"> <div class="row d-flex justify-content-center">
<b-form @submit.prevent="handleSubmit"> <div class="mt-3 col-md-6">
<b-form-group <b-card header="Create an account">
id="email-group" <b-form @submit.prevent="handleSubmit">
label="Email address:" <b-form-group
label-for="email" id="email-group"
description="We'll never share your email with anyone else." label="Email address:"
> label-for="email"
<b-form-input description="We'll never share your email with anyone else."
id="email" >
v-model="form.email" <b-form-input
type="email" id="email"
required v-model="form.email"
placeholder="Enter email" type="email"
></b-form-input> required
</b-form-group> placeholder="Enter email"
></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:" label-for="password-confirm"> <b-form-group id="password-confirm-group" label="Confirm password:"
<b-form-input label-for="password-confirm">
id="password-confirm" <b-form-input
v-model="form.passwordConfirm" id="password-confirm"
required v-model="form.passwordConfirm"
placeholder="Confirm your password" required
:state="passwordEquals" placeholder="Confirm your password"
type="password" :state="passwordEquals"
></b-form-input> type="password"
<b-form-invalid-feedback :state="passwordEquals"> ></b-form-input>
Both passwords must be equals. <b-form-invalid-feedback :state="passwordEquals">
</b-form-invalid-feedback> Both passwords must be equals.
</b-form-group> </b-form-invalid-feedback>
</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>
</div>
</div>
</div> </div>
</template> </template>