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

Replace custom notifications with vue-notification package

Browse Source
This commit is contained in:
Bubka 2020-09-25 23:36:11 +02:00
parent eafff6c17e
commit 06c8dd0a10
15 changed files with 59 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -9315,6 +9315,11 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-notification": {
"version": "1.3.20",
"resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
"integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ=="
},
"vue-pull-refresh": {
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/vue-pull-refresh/-/vue-pull-refresh-0.2.7.tgz",

1
package.json
View File

@ -33,6 +33,7 @@
"vue": "^2.6.12",
"vue-axios": "^2.1.5",
"vue-i18n": "^8.21.1",
"vue-notification": "^1.3.20",
"vue-pull-refresh": "^0.2.7",
"vue-qrcode-reader": "^2.3.13",
"vue-router": "^3.4.3",

19
resources/js/app.js vendored
View File

@ -1,14 +1,17 @@
import Vue from 'vue'
import router from './routes'
import api from './api'
import i18n from './langs/i18n'
import FontAwesome from './packages/fontawesome'
import Clipboard from './packages/clipboard'
import QrcodeReader from './packages/qrcodeReader'
import App from './components/App'
import Vue from 'vue'
import router from './routes'
import api from './api'
import i18n from './langs/i18n'
import FontAwesome from './packages/fontawesome'
import Clipboard from './packages/clipboard'
import QrcodeReader from './packages/qrcodeReader'
import Notifications from 'vue-notification'
import App from './components/App'
import './components'
Vue.use(Notifications)
const app = new Vue({
el: '#app',
data: {

1
resources/js/components/App.vue
View File

@ -3,6 +3,7 @@
<div v-if="$root.appSettings.isDemoApp" class="demo has-background-warning has-text-centered is-size-7-mobile">
{{ $t('commons.demo_do_not_post_sensitive_data') }}
</div>
<notifications width="100%" position="top" :duration="4000" :speed="0" :max="1" classes="notification" />
<main class="main-section">
<router-view></router-view>
</main>

25
resources/js/components/FormWrapper.vue
View File

@ -3,10 +3,6 @@
<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" v-if="title"></h1>
<slot />
<p v-if="showTag">
<notification :message="fail" type="is-danger" :isFixed="hasFixedNotification" v-if="fail" />
<notification :message="success" type="is-success" :isFixed="hasFixedNotification" v-if="success" />
</p>
</div>
</div>
</template>
@ -21,32 +17,11 @@
}
},
computed: {
showTag: function() {
return (this.fail || this.success) ? true : false
}
},
props: {
title: {
type: String,
default: ''
},
fail: {
type: String,
default: ''
},
success: {
type: String,
default: ''
},
hasFixedNotification: {
type: Boolean,
default: false
},
}
}
</script>

4
resources/js/components/Modal.vue
View File

@ -24,9 +24,11 @@
<script>
export default {
name: 'Modal',
props: {
value: Boolean,
},
computed: {
isActive: {
get () {
@ -37,10 +39,12 @@ export default {
}
}
},
methods: {
closeModal: function(event) {
if (event) {
this.isActive = false
this.$notify({ clean: true })
this.$parent.$emit('modalClose')
}
}

50
resources/js/components/Notification.vue
View File

@ -1,50 +0,0 @@
<template>
<div class="notification" :class="[type, isFixed ? 'is-fixed' : '']" v-if="show">
<button class="delete" v-if="isDeletable" @click="close"></button>
{{ message }}
</div>
</template>
<script>
export default {
name: 'Notification',
data() {
return {
show: true
}
},
props: {
type: {
type: String,
default: 'is-primary'
},
message: {
type: String,
default: '',
},
isDeletable: {
type: Boolean,
default: true,
},
isFixed: {
type: Boolean,
default: false
}
},
methods: {
close (event) {
if (event) {
this.show = false
}
}
}
}
</script>

18
resources/js/components/QuickUploader.vue
View File

@ -31,9 +31,6 @@
<div class="column is-full quick-uploader-footer">
<router-link :to="{ name: 'create' }" class="is-link">{{ $t('twofaccounts.use_full_form') }}</router-link>
</div>
<div v-if="showError" class="column is-full quick-uploader-footer">
<notification :message="errorText" :isDeletable="false" type="is-danger" />
</div>
</div>
</div>
<!-- camera stream fullscreen scanner -->
@ -77,17 +74,6 @@
}
},
computed: {
debugMode: function() {
return process.env.NODE_ENV
},
showError: function() {
return this.debugMode == 'development' && this.errorName == 'NotAllowedError'
},
},
props: {
showTrailer: {
type: Boolean,
@ -180,6 +166,10 @@
this.$parent.$emit('cannotStream')
console.log('fail to stream : ' + this.errorText)
if (this.errorName === 'NotAllowedError') {
this.$notify({ type: 'is-danger', text: this.errorText })
}
}
if( !this.errorName && !this.showStream ) {

2
resources/js/components/index.js vendored
View File

@ -6,7 +6,6 @@ import FormField from './FormField'
import FormSelect from './FormSelect'
import FormSwitch from './FormSwitch'
import FormButtons from './FormButtons'
import Notification from './Notification'
import VueFooter from './Footer'
// Components that are registered globaly.
@ -18,7 +17,6 @@ import VueFooter from './Footer'
FormSelect,
FormSwitch,
FormButtons,
Notification,
VueFooter,
].forEach(Component => {
Vue.component(Component.name, Component)

2
resources/js/routes.js vendored
View File

@ -10,7 +10,7 @@ import Login from './views/auth/Login'
import Register from './views/auth/Register'
import PasswordRequest from './views/auth/password/Request'
import PasswordReset from './views/auth/password/Reset'
import Settings from './views/settings/Index'
import Settings from './views/settings/Index'
import Errors from './views/Error'
const router = new Router({

11
resources/js/views/settings/Account.vue
View File

@ -1,5 +1,5 @@
<template>
<form-wrapper :fail="fail" :success="success">
<form-wrapper>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="name" :label="$t('auth.forms.name')" autofocus />
<form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
@ -16,8 +16,6 @@
export default {
data(){
return {
success: '',
fail: '',
form: new Form({
name : '',
email : '',
@ -36,18 +34,15 @@
handleSubmit(e) {
e.preventDefault()
this.fail = ''
this.success = ''
this.form.patch('/api/settings/account', {returnError: true})
.then(response => {
this.success = response.data.message
this.$notify({ type: 'is-success', text: response.data.message })
})
.catch(error => {
if( error.response.status === 400 ) {
this.fail = error.response.data.message
this.$notify({ type: 'is-danger', text: error.response.data.message })
}
else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } });

11
resources/js/views/settings/Index.vue
View File

@ -17,7 +17,9 @@
<vue-footer :showButtons="true">
<!-- Cancel button -->
<p class="control">
<router-link :to="{ name: 'accounts' }" class="button is-dark is-rounded">{{ $t('commons.close') }}</router-link>
<a class="button is-dark is-rounded" @click.stop="exitSettings">
{{ $t('commons.close') }}
</a>
</p>
</vue-footer>
</div>
@ -64,6 +66,13 @@
this.activeTab = selectedTab.name
}
});
},
exitSettings: function(event) {
if (event) {
this.$notify({ clean: true })
this.$router.push({ name: 'accounts' })
}
}
}
};

13
resources/js/views/settings/Options.vue
View File

@ -1,5 +1,5 @@
<template>
<form-wrapper :fail="fail" :success="success" :hasFixedNotification="true">
<form-wrapper>
<div class="tags has-addons">
<span class="tag is-dark">2FAuth</span>
<span class="tag is-info">v{{ $root.appVersion }}</span>
@ -21,8 +21,8 @@
export default {
data(){
return {
success: '',
fail: '',
// success: '',
// fail: '',
form: new Form({
lang: this.$root.$i18n.locale,
showTokenAsDot: this.$root.appSettings.showTokenAsDot,
@ -45,13 +45,10 @@
handleSubmit(e) {
e.preventDefault()
this.fail = ''
this.success = ''
this.form.post('/api/settings/options', {returnError: true})
.then(response => {
this.success = response.data.message
this.$notify({ type: 'is-success', text: response.data.message })
if(response.data.settings.lang !== this.$root.$i18n.locale) {
this.$router.go()
@ -62,7 +59,7 @@
})
.catch(error => {
this.fail = error.response.data.message
this.$notify({ type: 'is-danger', text: error.response.data.message })
});
}
},

13
resources/js/views/settings/Password.vue
View File

@ -1,5 +1,5 @@
<template>
<form-wrapper :fail="fail" :success="success">
<form-wrapper>
<form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
<form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
<form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_new_password')" />
@ -16,8 +16,6 @@
export default {
data(){
return {
success: '',
fail: '',
form: new Form({
currentPassword : '',
password : '',
@ -30,19 +28,18 @@
handleSubmit(e) {
e.preventDefault()
this.fail = ''
this.success = ''
this.form.patch('/api/settings/password', {returnError: true})
.then(response => {
this.success = response.data.message
this.$notify({ type: 'is-success', text: response.data.message })
})
.catch(error => {
if( error.response.status === 400 ) {
this.fail = error.response.data.message
this.$notify({ type: 'is-danger', text: error.response.data.message })
}
else if( error.response.status !== 422 ) {
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
});

15
resources/sass/app.scss vendored
View File

@ -314,13 +314,16 @@ footer .field.is-grouped {
justify-content: center;
}
.notification.is-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
.notification {
border-radius: 0;
padding: 0.5rem 2.5rem 0.5rem 1.5rem;
padding: 0.75rem 1.5rem;
}
.notification .notification-title {
// Style for title line
}
.notification .notification-content {
text-align: center;
}