extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-22 16:23:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Wrap forms in a vue component

Browse Source
This commit is contained in:
Bubka 2020-01-28 15:33:33 +01:00
parent d662a15f85
commit bbc51e4758
11 changed files with 407 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
resources/js/components/FormWrapper.vue Normal file
View 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
View File

@ -1,11 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import Button from './Button' import Button from './Button'
import FieldError from './FieldError' import FieldError from './FieldError'
import FormWrapper from './FormWrapper'
// Components that are registered globaly. // Components that are registered globaly.
[ [
Button, Button,
FieldError, FieldError,
FormWrapper,
].forEach(Component => { ].forEach(Component => {
Vue.component(Component.name, Component) Vue.component(Component.name, Component)
}) })

71
resources/js/views/auth/Login.vue
View File

@ -1,51 +1,29 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('auth.forms.login')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('auth.forms.login') }}</h1> <label class="label">{{ $t('auth.forms.email') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="email" type="email" class="input" v-model="form.email" autofocus />
<label class="label">{{ $t('auth.forms.email') }}</label> </div>
<div class="control"> <field-error :form="form" field="email" />
<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>
</div> </div>
</div> <div class="field">
<div class="columns is-mobile is-centered"> <label class="label">{{ $t('auth.forms.password') }}</label>
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="control">
{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link"> <input id="password" type="password" class="input" v-model="form.password" />
{{ $t('auth.register') }} </div>
</router-link> <field-error :form="form" field="password" />
</div> </div>
</div> <div class="field is-grouped">
<div class="columns is-mobile is-centered"> <div class="control">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link"> </div>
{{ $t('auth.forms.request_password_reset') }}
</router-link>
</div> </div>
</div> </form>
</div> <p>{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p>
<p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>
</form-wrapper>
</template> </template>
<script> <script>
@ -55,7 +33,8 @@
export default { export default {
data(){ data(){
return { return {
errorMessage: '', success: '',
fail: '',
form: new Form({ form: new Form({
email: '', email: '',
password: '' password: ''
@ -78,7 +57,7 @@
}) })
.catch(error => { .catch(error => {
if( error.response.status === 401 ) { 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 ) { else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } }); this.$router.push({ name: 'genericError', params: { err: error.response } });

92
resources/js/views/auth/Register.vue
View File

@ -1,57 +1,42 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('auth.register')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('auth.register') }}</h1> <label class="label">{{ $t('auth.forms.name') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="name" type="text" class="input" v-model="form.name" autofocus />
<label class="label">{{ $t('auth.forms.name') }}</label> </div>
<div class="control"> <field-error :form="form" field="name" />
<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>
</div> </div>
</div> <div class="field">
<div class="columns is-mobile is-centered"> <label class="label">{{ $t('auth.forms.email') }}</label>
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="control">
{{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link"> <input id="email" type="email" class="input" v-model="form.email" />
{{ $t('auth.sign_in') }} </div>
</router-link> <field-error :form="form" field="email" />
</div> </div>
</div> <div class="field">
</div> <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') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p>
</form-wrapper>
</template> </template>
<script> <script>
@ -61,7 +46,8 @@
export default { export default {
data(){ data(){
return { return {
errorMessage: '', success: '',
fail: '',
form: new Form({ form: new Form({
name : '', name : '',
email : '', email : '',
@ -76,7 +62,7 @@
const { data } = await this.axios.post('api/checkuser') const { data } = await this.axios.post('api/checkuser')
if( data.userCount > 0 ) { 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' }); this.$router.push({ name: 'flooded' });
} }

57
resources/js/views/auth/password/Request.vue
View File

@ -1,38 +1,23 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('auth.forms.reset_password')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('auth.forms.reset_password') }}</h1> <label class="label">{{ $t('auth.forms.email') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="email" type="email" class="input" v-model="form.email" autofocus />
<label class="label">{{ $t('auth.forms.email') }}</label> </div>
<div class="control"> <field-error :form="form" field="email" />
<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>
</div> </div>
</div> <div class="field is-grouped">
<div class="columns is-mobile is-centered" v-if="response"> <div class="control">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.send_password_reset_link') }}</v-button>
{{ response }} </div>
<div class="control">
<router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
</div>
</div> </div>
</div> </form>
</div> </form-wrapper>
</template> </template>
<script> <script>
@ -42,8 +27,8 @@
export default { export default {
data(){ data(){
return { return {
response: '', success: '',
errorMessage: '', fail: '',
form: new Form({ form: new Form({
email: '', email: '',
}) })
@ -56,11 +41,11 @@
this.form.post('/api/password/email', {returnError: true}) this.form.post('/api/password/email', {returnError: true})
.then(response => { .then(response => {
this.response = response.data.status this.success = response.data.status
}) })
.catch(error => { .catch(error => {
if( error.response.data.requestFailed ) { if( error.response.data.requestFailed ) {
this.errorMessage = error.response.data.requestFailed this.fail = error.response.data.requestFailed
} }
else if( error.response.status !== 422 ) { else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } }); this.$router.push({ name: 'genericError', params: { err: error.response } });

79
resources/js/views/auth/password/Reset.vue
View File

@ -1,47 +1,37 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('auth.forms.new_password')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('auth.forms.new_password') }}</h1> <label class="label">{{ $t('auth.forms.email') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="email" type="email" class="input" v-model="form.email" disabled readonly />
<label class="label">{{ $t('auth.forms.email') }}</label> </div>
<div class="control"> <field-error :form="form" field="email" />
<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>
</div> </div>
</div> <div class="field">
</div> <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> </template>
<script> <script>
@ -51,7 +41,8 @@
export default { export default {
data(){ data(){
return { return {
errorMessage: '', success: '',
fail: '',
form: new Form({ form: new Form({
email : '', email : '',
password : '', password : '',
@ -77,7 +68,7 @@
}) })
.catch(error => { .catch(error => {
if( error.response.data.resetFailed ) { if( error.response.data.resetFailed ) {
this.errorMessage = error.response.data.resetFailed this.fail = error.response.data.resetFailed
} }
else if( error.response.status !== 422 ) { else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } }); this.$router.push({ name: 'genericError', params: { err: error.response } });

91
resources/js/views/auth/password/Update.vue
View File

@ -1,54 +1,37 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('auth.forms.change_password') }}</h1> <label class="label">{{ $t('auth.forms.current_password') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="currentPassword" type="password" class="input" v-model="form.currentPassword" />
<label class="label">{{ $t('auth.forms.current_password') }}</label> </div>
<div class="control"> <field-error :form="form" field="currentPassword" />
<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>
</div> </div>
</div> <div class="field">
<div class="columns is-mobile is-centered" v-if="response"> <label class="label">{{ $t('auth.forms.new_password') }}</label>
<div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="control">
<span class="tag is-success"> <input id="password" type="password" class="input" v-model="form.password" />
{{ response }} </div>
</span> <field-error :form="form" field="password" />
</div> </div>
</div> <div class="field">
</div> <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> </template>
<script> <script>
@ -58,8 +41,8 @@
export default { export default {
data(){ data(){
return { return {
response: '', success: '',
errorMessage: '', fail: '',
form: new Form({ form: new Form({
currentPassword : '', currentPassword : '',
password : '', password : '',
@ -72,17 +55,17 @@
handleSubmit(e) { handleSubmit(e) {
e.preventDefault() e.preventDefault()
this.errorMessage = '' this.fail = ''
this.response = '' this.success = ''
this.form.patch('/api/password', {returnError: true}) this.form.patch('/api/password', {returnError: true})
.then(response => { .then(response => {
this.response = response.data.message this.success = response.data.message
}) })
.catch(error => { .catch(error => {
if( error.response.status === 400 ) { if( error.response.status === 400 ) {
this.errorMessage = error.response.data.message this.fail = error.response.data.message
} }
else if( error.response.status !== 422 ) { else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } }); this.$router.push({ name: 'genericError', params: { err: error.response } });

99
resources/js/views/profile/Edit.vue
View File

@ -1,61 +1,39 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('commons.profile')" :fail="fail" :success="success">
<div class="columns is-mobile is-centered"> <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('commons.profile') }}</h1> <label class="label">{{ $t('auth.forms.name') }}</label>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input id="name" type="text" class="input" v-model="form.name" autofocus />
<label class="label">{{ $t('auth.forms.name') }}</label> </div>
<div class="control"> <field-error :form="form" field="name" />
<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>
</div> </div>
</div> <div class="field">
<div class="columns is-mobile is-centered"> <label class="label">{{ $t('auth.forms.email') }}</label>
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="control">
<router-link :to="{ name: 'password.update' }" class="is-link"> <input id="email" type="email" class="input" v-model="form.email" />
{{ $t('auth.forms.change_your_password') }} </div>
</router-link> <field-error :form="form" field="email" />
</div> </div>
</div> <div class="field">
<div class="columns is-mobile is-centered" v-if="response"> <label class="label">{{ $t('auth.forms.password') }}</label>
<div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="control">
<span class="tag is-success"> <input id="password" type="password" class="input" v-model="form.password" />
{{ response }} </div>
</span> <field-error :form="form" field="password" />
</div> </div>
</div> <div class="field is-grouped">
</div> <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> </template>
<script> <script>
@ -65,8 +43,8 @@
export default { export default {
data(){ data(){
return { return {
response: '', success: '',
errorMessage: '', fail: '',
form: new Form({ form: new Form({
name : '', name : '',
email : '', email : '',
@ -85,19 +63,20 @@
handleSubmit(e) { handleSubmit(e) {
e.preventDefault() e.preventDefault()
this.errorMessage = '' this.fail = ''
this.response = '' this.success = ''
this.form.patch('/api/user', {returnError: true}) this.form.patch('/api/user', {returnError: true})
.then(response => { .then(response => {
this.response = response.data.message this.success = response.data.message
localStorage.setItem('user',response.data.username) localStorage.setItem('user',response.data.username)
}) })
.catch(error => { .catch(error => {
if( error.response.status === 400 ) { if( error.response.status === 400 ) {
this.errorMessage = error.response.data.message
this.fail = error.response.data.message
} }
else if( error.response.status !== 422 ) { else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } }); this.$router.push({ name: 'genericError', params: { err: error.response } });

165
resources/js/views/twofaccounts/Create.vue
View File

@ -1,91 +1,86 @@
<template> <template>
<div class="section"> <form-wrapper :title="$t('twofaccounts.forms.new_account')">
<div class="columns is-mobile is-centered"> <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('twofaccounts.forms.new_account') }}</h1> <div class="file is-dark is-boxed">
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)"> <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')">
<div class="field"> <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
<div class="file is-dark is-boxed"> <span class="file-cta">
<label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')"> <span class="file-icon">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput"> <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
<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>
</span> </span>
</div> <span class="file-label">{{ $t('twofaccounts.forms.use_qrcode.val') }}</span>
</div> </span>
<field-error :form="form" field="icon" class="help-for-file" /> </label>
<div class="field is-grouped"> </div>
<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>
</div> </div>
</div> <field-error :form="form" field="qrcode" class="help-for-file" />
</div> <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> </template>
<script> <script>

143
resources/js/views/twofaccounts/Edit.vue
View File

@ -1,79 +1,74 @@
<template> <template>
<div class="section" v-if="twofaccountExists"> <form-wrapper :title="$t('twofaccounts.forms.edit_account')">
<div class="columns is-mobile is-centered"> <form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
<div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"> <div class="field">
<h1 class="title">{{ $t('twofaccounts.forms.edit_account') }}</h1> <label class="label">{{ $t('twofaccounts.service') }}</label>
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)"> <div class="control">
<div class="field"> <input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
<label class="label">{{ $t('twofaccounts.service') }}</label> </div>
<div class="control"> <field-error :form="form" field="service" />
<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>
</div> </div>
</div> <div class="field">
</div> <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> </template>
<script> <script>

13
resources/sass/app.scss vendored
View File

@ -12,6 +12,19 @@
padding: 1.5rem 1.5rem 8rem 1.5rem; 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 { nav.level {
padding: 0 20px; padding: 0 20px;
/*postion: fixed;*/ /*postion: fixed;*/