mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-22 16:23:18 +01:00
Wrap forms in a vue component
This commit is contained in:
Bubka
parent
d662a15f85
commit
bbc51e4758
47
resources/js/components/FormWrapper.vue
Normal file
47
resources/js/components/FormWrapper.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="columns is-centered">
|
||||
<div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title" v-html="title"></h1>
|
||||
<slot />
|
||||
<p v-if="showTag">
|
||||
<span class="tag is-danger" v-if="fail" v-html="fail" />
|
||||
<span class="tag is-success" v-if="success" v-html="success" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormWrapper',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
showTag: function() {
|
||||
return (this.fail || this.success) ? true : false
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
fail: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
success: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
2
resources/js/components/index.js
vendored
2
resources/js/components/index.js
vendored
@ -1,11 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import Button from './Button'
|
||||
import FieldError from './FieldError'
|
||||
import FormWrapper from './FormWrapper'
|
||||
|
||||
// Components that are registered globaly.
|
||||
[
|
||||
Button,
|
||||
FieldError,
|
||||
FormWrapper,
|
||||
].forEach(Component => {
|
||||
Vue.component(Component.name, Component)
|
||||
})
|
||||
|
||||
@ -1,51 +1,29 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('auth.forms.login') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="errorMessage">
|
||||
<span class="tag is-danger">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('auth.forms.login')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
{{ $t('auth.forms.dont_have_account_yet') }} <router-link :to="{ name: 'register' }" class="is-link">
|
||||
{{ $t('auth.register') }}
|
||||
</router-link>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
{{ $t('auth.forms.forgot_your_password') }} <router-link :to="{ name: 'password.request' }" class="is-link">
|
||||
{{ $t('auth.forms.request_password_reset') }}
|
||||
</router-link>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p>{{ $t('auth.forms.dont_have_account_yet') }} <router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p>
|
||||
<p>{{ $t('auth.forms.forgot_your_password') }} <router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -55,7 +33,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
email: '',
|
||||
password: ''
|
||||
@ -78,7 +57,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 401 ) {
|
||||
this.errorMessage = this.$t('auth.forms.password_do_not_match')
|
||||
this.fail = this.$t('auth.forms.password_do_not_match')
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
||||
|
||||
@ -1,57 +1,42 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('auth.register') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.name') }}</label>
|
||||
<div class="control">
|
||||
<input id="name" type="text" class="input" v-model="form.name" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="name" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.register') }}</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<br />
|
||||
<span class="tag is-danger" v-if="errorMessage">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
<form-wrapper :title="$t('auth.register')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.name') }}</label>
|
||||
<div class="control">
|
||||
<input id="name" type="text" class="input" v-model="form.name" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
{{ $t('auth.forms.already_register') }} <router-link :to="{ name: 'login' }" class="is-link">
|
||||
{{ $t('auth.sign_in') }}
|
||||
</router-link>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.register') }}</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p>{{ $t('auth.forms.already_register') }} <router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -61,7 +46,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
name : '',
|
||||
email : '',
|
||||
@ -76,7 +62,7 @@
|
||||
const { data } = await this.axios.post('api/checkuser')
|
||||
|
||||
if( data.userCount > 0 ) {
|
||||
this.errorMessage = this.$t('errors.already_one_user_registered') + ' ' + this.$t('errors.cannot_register_more_user')
|
||||
this.fail = this.$t('errors.already_one_user_registered') + ' ' + this.$t('errors.cannot_register_more_user')
|
||||
this.$router.push({ name: 'flooded' });
|
||||
}
|
||||
|
||||
|
||||
@ -1,38 +1,23 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('auth.forms.reset_password') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.send_password_reset_link') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="errorMessage">
|
||||
<span class="tag is-danger">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('auth.forms.reset_password')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered" v-if="response">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
{{ response }}
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.send_password_reset_link') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -42,8 +27,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
response: '',
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
email: '',
|
||||
})
|
||||
@ -56,11 +41,11 @@
|
||||
this.form.post('/api/password/email', {returnError: true})
|
||||
.then(response => {
|
||||
|
||||
this.response = response.data.status
|
||||
this.success = response.data.status
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.data.requestFailed ) {
|
||||
this.errorMessage = error.response.data.requestFailed
|
||||
this.fail = error.response.data.requestFailed
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
||||
|
||||
@ -1,47 +1,37 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('auth.forms.new_password') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" disabled readonly />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.new_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="errorMessage">
|
||||
<span class="tag is-danger">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('auth.forms.new_password')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" disabled readonly />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.new_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -51,7 +41,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
email : '',
|
||||
password : '',
|
||||
@ -77,7 +68,7 @@
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.data.resetFailed ) {
|
||||
this.errorMessage = error.response.data.resetFailed
|
||||
this.fail = error.response.data.resetFailed
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
||||
|
||||
@ -1,54 +1,37 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('auth.forms.change_password') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.current_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="currentPassword" type="password" class="input" v-model="form.currentPassword" />
|
||||
</div>
|
||||
<field-error :form="form" field="currentPassword" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.new_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="errorMessage">
|
||||
<span class="tag is-danger">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.current_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="currentPassword" type="password" class="input" v-model="form.currentPassword" />
|
||||
</div>
|
||||
<field-error :form="form" field="currentPassword" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered" v-if="response">
|
||||
<div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<span class="tag is-success">
|
||||
{{ response }}
|
||||
</span>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.new_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.confirm_password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
|
||||
</div>
|
||||
<field-error :form="form" field="password_confirmation" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -58,8 +41,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
response: '',
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
currentPassword : '',
|
||||
password : '',
|
||||
@ -72,17 +55,17 @@
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.errorMessage = ''
|
||||
this.response = ''
|
||||
this.fail = ''
|
||||
this.success = ''
|
||||
|
||||
this.form.patch('/api/password', {returnError: true})
|
||||
.then(response => {
|
||||
|
||||
this.response = response.data.message
|
||||
this.success = response.data.message
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 400 ) {
|
||||
this.errorMessage = error.response.data.message
|
||||
this.fail = error.response.data.message
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
||||
|
||||
@ -1,61 +1,39 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('commons.profile') }}</h1>
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.name') }}</label>
|
||||
<div class="control">
|
||||
<input id="name" type="text" class="input" v-model="form.name" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="name" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field" v-if="errorMessage">
|
||||
<span class="tag is-danger">
|
||||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('commons.profile')" :fail="fail" :success="success">
|
||||
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.name') }}</label>
|
||||
<div class="control">
|
||||
<input id="name" type="text" class="input" v-model="form.name" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<router-link :to="{ name: 'password.update' }" class="is-link">
|
||||
{{ $t('auth.forms.change_your_password') }}
|
||||
</router-link>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.email') }}</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" class="input" v-model="form.email" />
|
||||
</div>
|
||||
<field-error :form="form" field="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-mobile is-centered" v-if="response">
|
||||
<div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<span class="tag is-success">
|
||||
{{ response }}
|
||||
</span>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('auth.forms.password') }}</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" class="input" v-model="form.password" />
|
||||
</div>
|
||||
<field-error :form="form" field="password" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p><router-link :to="{ name: 'password.update' }" class="is-link">{{ $t('auth.forms.change_your_password') }}</router-link></p>
|
||||
</form-wrapper>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -65,8 +43,8 @@
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
response: '',
|
||||
errorMessage: '',
|
||||
success: '',
|
||||
fail: '',
|
||||
form: new Form({
|
||||
name : '',
|
||||
email : '',
|
||||
@ -85,19 +63,20 @@
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.errorMessage = ''
|
||||
this.response = ''
|
||||
this.fail = ''
|
||||
this.success = ''
|
||||
|
||||
this.form.patch('/api/user', {returnError: true})
|
||||
.then(response => {
|
||||
|
||||
this.response = response.data.message
|
||||
this.success = response.data.message
|
||||
|
||||
localStorage.setItem('user',response.data.username)
|
||||
})
|
||||
.catch(error => {
|
||||
if( error.response.status === 400 ) {
|
||||
this.errorMessage = error.response.data.message
|
||||
|
||||
this.fail = error.response.data.message
|
||||
}
|
||||
else if( error.response.status !== 422 ) {
|
||||
this.$router.push({ name: 'genericError', params: { err: error.response } });
|
||||
|
||||
@ -1,91 +1,86 @@
|
||||
<template>
|
||||
<div class="section">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('twofaccounts.forms.new_account') }}</h1>
|
||||
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<div class="file is-dark is-boxed">
|
||||
<label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
|
||||
</span>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.use_qrcode.val') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="qrcode" class="help-for-file" />
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.service') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="service" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.account') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
|
||||
</div>
|
||||
<field-error :form="form" field="account" />
|
||||
</div>
|
||||
<div class="field" style="margin-bottom: 0.5rem;">
|
||||
<label class="label">{{ $t('twofaccounts.forms.totp_uri') }}</label>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="otpauth://totp/..." v-model="form.uri" :disabled="uriIsLocked" />
|
||||
</div>
|
||||
<div class="control" v-if="uriIsLocked">
|
||||
<a class="button is-dark field-lock" @click="uriIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control" v-else>
|
||||
<a class="button is-dark field-unlock" @click="uriIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
||||
<span class="icon has-text-danger">
|
||||
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="uri" class="help-for-file" />
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.icon') }}</label>
|
||||
<div class="file is-dark">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'image']" />
|
||||
</span>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
<form-wrapper :title="$t('twofaccounts.forms.new_account')">
|
||||
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<div class="file is-dark is-boxed">
|
||||
<label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="icon" class="help-for-file" />
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.use_qrcode.val') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="qrcode" class="help-for-file" />
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.service') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="service" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.account') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
|
||||
</div>
|
||||
<field-error :form="form" field="account" />
|
||||
</div>
|
||||
<div class="field" style="margin-bottom: 0.5rem;">
|
||||
<label class="label">{{ $t('twofaccounts.forms.totp_uri') }}</label>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="otpauth://totp/..." v-model="form.uri" :disabled="uriIsLocked" />
|
||||
</div>
|
||||
<div class="control" v-if="uriIsLocked">
|
||||
<a class="button is-dark field-lock" @click="uriIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control" v-else>
|
||||
<a class="button is-dark field-unlock" @click="uriIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
||||
<span class="icon has-text-danger">
|
||||
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="uri" class="help-for-file" />
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.icon') }}</label>
|
||||
<div class="file is-dark">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'image']" />
|
||||
</span>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="icon" class="help-for-file" />
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,79 +1,74 @@
|
||||
<template>
|
||||
<div class="section" v-if="twofaccountExists">
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<h1 class="title">{{ $t('twofaccounts.forms.edit_account') }}</h1>
|
||||
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.service') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="service" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.account') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
|
||||
</div>
|
||||
<field-error :form="form" field="account" />
|
||||
</div>
|
||||
<div v-if="form.type === 'hotp'">
|
||||
<div class="field" style="margin-bottom: 0.5rem;">
|
||||
<label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</label>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="form.counter" :disabled="counterIsLocked" />
|
||||
</div>
|
||||
<div class="control" v-if="counterIsLocked">
|
||||
<a class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control" v-else>
|
||||
<a class="button is-dark field-unlock" @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
||||
<span class="icon has-text-danger">
|
||||
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="uri" class="help-for-file" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.icon') }}</label>
|
||||
<div class="file is-dark">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'image']" />
|
||||
</span>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'../storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="icon" class="help-for-file" />
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-text" @click.prevent="cancelCreation">{{ $t('commons.cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form-wrapper :title="$t('twofaccounts.forms.edit_account')">
|
||||
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.service') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
|
||||
</div>
|
||||
<field-error :form="form" field="service" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.account') }}</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
|
||||
</div>
|
||||
<field-error :form="form" field="account" />
|
||||
</div>
|
||||
<div v-if="form.type === 'hotp'">
|
||||
<div class="field" style="margin-bottom: 0.5rem;">
|
||||
<label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</label>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="" v-model="form.counter" :disabled="counterIsLocked" />
|
||||
</div>
|
||||
<div class="control" v-if="counterIsLocked">
|
||||
<a class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="control" v-else>
|
||||
<a class="button is-dark field-unlock" @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
||||
<span class="icon has-text-danger">
|
||||
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="uri" class="help-for-file" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ $t('twofaccounts.icon') }}</label>
|
||||
<div class="file is-dark">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<font-awesome-icon :icon="['fas', 'image']" />
|
||||
</span>
|
||||
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
|
||||
</span>
|
||||
</label>
|
||||
<span class="tag is-black is-large" v-if="tempIcon">
|
||||
<img class="icon-preview" :src="'../storage/icons/' + tempIcon" >
|
||||
<button class="delete is-small" @click.prevent="deleteIcon"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<field-error :form="form" field="icon" class="help-for-file" />
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-text" @click.prevent="cancelCreation">{{ $t('commons.cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
13
resources/sass/app.scss
vendored
13
resources/sass/app.scss
vendored
@ -12,6 +12,19 @@
|
||||
padding: 1.5rem 1.5rem 8rem 1.5rem;
|
||||
}
|
||||
|
||||
.form-column {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.form-column > p {
|
||||
margin-bottom: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.form-column > p:first-of-type {
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
nav.level {
|
||||
padding: 0 20px;
|
||||
/*postion: fixed;*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user