sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add custom flash library that works as expected

This commit is contained in:
Dane Everitt 2018-05-26 14:50:38 -07:00
parent bab20812a0
commit 0a706d1b45
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
13 changed files with 233 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -38,7 +38,6 @@
"vue-template-compiler": "^2.5.16",
"vueify-insert-css": "^1.0.0",
"vuex": "^3.0.1",
"vuex-flash": "^1.0.0",
"vuex-i18n": "^1.10.5",
"webpack": "^4.4.1",
"webpack-stream": "^4.0.3",

6
resources/assets/scripts/app.js
View File

@ -1,19 +1,19 @@
import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import VuexFlash from 'vuex-flash';
import { createFlashStore } from 'vuex-flash';
import VueRouter from 'vue-router';
// Helpers
import { Ziggy } from './helpers/ziggy';
import Locales from './../../../resources/lang/locales';
import { flash } from './mixins/flash';
// Base Vuejs Templates
import Login from './components/auth/Login';
import ResetPassword from './components/auth/ResetPassword';
// Used for the route() helper.
window.events = new Vue;
window.Ziggy = Ziggy;
Vue.use(Vuex);
@ -23,10 +23,10 @@ const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
Vue.config.productionTip = false;
Vue.mixin({ methods: { route } });
Vue.mixin(flash);
Vue.use(VueRouter);
Vue.use(vuexI18n.plugin, store);
Vue.use(VuexFlash, { mixin: true, template: require('./components/errors/Flash.template') });
Vue.i18n.add('en', Locales.en);
Vue.i18n.set('en');

92
resources/assets/scripts/components/Flash.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div v-if="notifications.length > 0">
<transition-group tag="div" class="mb-2" name="fade">
<div :class="item.class" class="lg:inline-flex mb-2" role="alert" :key="index" v-for="(item, index) in notifications">
<span class="title" v-html="item.title" v-if="item.title.length > 0"></span>
<span class="message" v-html="item.message"></span>
</div>
</transition-group>
</div>
</template>
<script>
export default {
name: 'flash',
props: {
timeout: {
type: Number,
default: 0,
},
types: {
type: Object,
default: function () {
return {
base: 'alert',
success: 'alert success',
info: 'alert info',
warning: 'alert warning',
error: 'alert error',
}
}
}
},
data: function () {
return {
notifications: [],
};
},
/**
* Listen for flash events.
*/
created: function () {
const self = this;
window.events.$on('flash', function (data) {
self.flash(data.message, data.title, data.severity);
});
window.events.$on('clear-flashes', function () {
self.clear();
});
},
methods: {
/**
* Flash a message to the screen when a flash event is emitted over
* the global event stream.
*
* @param {string} message
* @param {string} title
* @param {string} severity
*/
flash: function (message, title, severity) {
this.notifications.push({
message, severity, title, class: this.types[severity] || this.types.base,
});
if (this.timeout > 0) {
setTimeout(this.hide, this.timeout);
}
},
/**
* Clear all of the flash messages from the screen.
*/
clear: function () {
this.notifications = [];
window.events.$emit('flashes-cleared');
},
/**
* Hide a notification after a given amount of time.
*
* @param {int} item
*/
hide: function (item = this.notifications[0]) {
let key = this.notifications.indexOf(item);
this.notifications.splice(key, 1);
},
}
};
</script>

14
resources/assets/scripts/components/auth/ForgotPassword.vue
View File

@ -1,12 +1,5 @@
<template>
<div>
<div class="pb-4" v-for="error in errors">
<div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
role="alert">
<span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
<span class="mr-2 text-left flex-auto">{{ error }}</span>
</div>
</div>
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
v-on:submit.prevent="submitForm"
>
@ -70,13 +63,14 @@
this.$data.showSpinner = true;
this.$data.errors = [];
this.clearFlashes();
window.axios.post(this.route('auth.forgot-password'), {
email: this.$props.email,
})
.then(function (response) {
self.$data.submitDisabled = false;
self.$data.showSpinner = false;
self.flash({message: response.data.status, variant: 'success'});
self.success(response.data.status);
self.$router.push({name: 'login'});
})
.catch(function (err) {
@ -87,7 +81,9 @@
const response = err.response;
if (response.data && _.isObject(response.data.errors)) {
self.$data.errors.push(response.data.errors[0].detail);
response.data.errors.forEach(function (error) {
self.error(error.detail);
});
}
});
}

5
resources/assets/scripts/components/auth/Login.vue
View File

@ -1,5 +1,6 @@
<template>
<div>
<flash/>
<login-form
v-if="this.$route.name === 'login'"
v-bind:user="user"
@ -15,8 +16,9 @@
</template>
<script>
import LoginForm from "./LoginForm";
import Flash from '../Flash';
import ForgotPassword from "./ForgotPassword";
import LoginForm from "./LoginForm";
import TwoFactorForm from "./TwoFactorForm";
export default {
@ -34,6 +36,7 @@
},
},
components: {
Flash,
TwoFactorForm,
ForgotPassword,
LoginForm,

14
resources/assets/scripts/components/auth/LoginForm.vue
View File

@ -1,14 +1,5 @@
<template>
<div>
<flash-message variant="danger" />
<flash-message variant="success" />
<div class="pb-4" v-for="error in errors">
<div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
role="alert">
<span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
<span class="mr-2 text-left flex-auto">{{ error }}</span>
</div>
</div>
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
v-on:submit.prevent="submitForm"
>
@ -84,6 +75,7 @@
const self = this;
this.$data.showSpinner = true;
this.clearFlashes();
axios.post(this.route('auth.login'), {
user: this.$props.user.email,
password: this.$props.user.password,
@ -106,7 +98,9 @@
const response = err.response;
if (response.data && _.isObject(response.data.errors)) {
self.$data.errors = [response.data.errors[0].detail];
response.data.errors.forEach(function (error) {
self.error(error.detail);
});
self.$refs.password.focus();
}
});

12
resources/assets/scripts/components/auth/ResetPassword.vue
View File

@ -1,12 +1,5 @@
<template>
<div>
<div class="pb-4" v-for="error in errors">
<div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm"
role="alert">
<span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
<span class="mr-2 text-left flex-auto">{{ error }}</span>
</div>
</div>
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
v-on:submit.prevent="submitForm"
>
@ -90,6 +83,7 @@
const self = this;
this.$data.showSpinner = true;
this.clearFlashes();
window.axios.post(this.route('auth.reset-password'), {
email: this.$props.email,
password: this.$data.password,
@ -107,7 +101,9 @@
const response = err.response;
if (response.data && _.isObject(response.data.errors)) {
self.$data.errors = [response.data.errors[0].detail];
response.data.errors.forEach(function (error) {
self.error(error.detail);
});
self.$refs.password.focus();
}
});

5
resources/assets/scripts/components/auth/TwoFactorForm.vue
View File

@ -43,6 +43,7 @@
submitToken: function () {
const self = this;
self.clearFlashes();
axios.post(this.route('auth.login-checkpoint'), {
confirmation_token: this.$route.query.token,
authentication_code: this.$data.code,
@ -57,7 +58,9 @@
const response = err.response;
if (response.data && _.isObject(response.data.errors)) {
self.flash({message: response.data.errors[0].detail, variant: 'danger'});
response.data.errors.forEach(function (error) {
self.error(error.detail);
});
self.$router.push({ name: 'login' });
}
});

62
resources/assets/scripts/mixins/flash.js Normal file
View File

@ -0,0 +1,62 @@
export const flash = {
methods: {
/**
* Flash a message to the event stream in the browser.
*
* @param {string} message
* @param {string} title
* @param {string} severity
*/
flash: function (message, title, severity = 'info') {
severity = severity || 'info';
if (['danger', 'fatal', 'error'].includes(severity)) {
severity = 'error';
}
window.events.$emit('flash', { message, title, severity });
},
/**
* Clear all of the flash messages from the screen.
*/
clearFlashes: function () {
window.events.$emit('clear-flashes');
},
/**
* Helper function to flash a normal success message to the user.
*
* @param {string} message
*/
success: function (message) {
this.flash(message, 'Success', 'success');
},
/**
* Helper function to flash a normal info message to the user.
*
* @param {string} message
*/
info: function (message) {
this.flash(message, 'Info', 'info');
},
/**
* Helper function to flash a normal warning message to the user.
*
* @param {string} message
*/
warning: function (message) {
this.flash(message, 'Warning', 'warning');
},
/**
* Helper function to flash a normal error message to the user.
*
* @param {string} message
*/
error: function (message) {
this.flash(message, 'Error', 'danger');
},
}
};

8
resources/assets/styles/components/animations.css
View File

@ -4,6 +4,14 @@
}
}
.fade-enter-active {
animation: fadein 500ms;
}
.fade-leave-active {
animation: fadein 500ms reverse;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }

46
resources/assets/styles/components/notifications.css Normal file
View File

@ -0,0 +1,46 @@
/**
* Styling to control alert boxes.
*/
.alert {
@apply .p-2 .border .items-center .leading-normal .rounded .flex .w-full .text-sm;
& > .title {
@apply .flex .rounded-full .uppercase .px-2 .py-1 .text-xs .font-bold .mr-3 .leading-none;
}
& > .message {
@apply .mr-2 .text-left .flex-auto;
}
&.error {
@apply .bg-red-dark .border-red-darker .text-red-lightest;
& > .title {
@apply .bg-red;
}
}
&.info {
@apply .bg-blue-dark .border-blue-darker .text-blue-lightest;
& > .title {
@apply .bg-blue;
}
}
&.success {
@apply .bg-green-dark .border-green-darker .text-green-lightest;
& > .title {
@apply .bg-green;
}
}
&.warning {
@apply .bg-yellow-dark .border-yellow-darker .text-yellow-lightest;
& > .title {
@apply .bg-yellow;
}
}
}

1
resources/assets/styles/main.css
View File

@ -10,6 +10,7 @@
@import "components/animations.css";
@import "components/authentication.css";
@import "components/buttons.css";
@import "components/notifications.css";
@import "components/spinners.css";
/**

4
yarn.lock
View File

@ -6004,10 +6004,6 @@ vueify-insert-css@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/vueify-insert-css/-/vueify-insert-css-1.0.0.tgz#57e5d791907e8c9d87ae6de099a2174bd0a7f990"
vuex-flash@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/vuex-flash/-/vuex-flash-1.0.0.tgz#4bbeb2093d4857ddef45a6c50f10243539acee6e"
vuex-i18n@^1.10.5:
version "1.10.5"
resolved "https://registry.yarnpkg.com/vuex-i18n/-/vuex-i18n-1.10.5.tgz#635ea2204e0aa3f8fd512f0fab7f6b994d3f666c"