ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add button with loading spinner component

This commit is contained in:
Ramon Wenger 2020-08-04 11:31:32 +02:00
parent 6360f1950a
commit bb50fc75a0
6 changed files with 76 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/package-lock.json generated
View File

@ -11673,7 +11673,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -11716,7 +11717,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
@ -11727,7 +11729,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -11844,7 +11847,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -11856,6 +11860,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -11878,12 +11883,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -11902,6 +11909,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -11982,7 +11990,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -11994,6 +12003,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -12079,7 +12089,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -12115,6 +12126,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -12134,6 +12146,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -12177,12 +12190,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },

5
client/src/components/LoadingButton.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<button class="loading-button button button--primary button--big"> <button
:disabled="loading"
class="loading-button button button--primary button--big">
<template v-if="!loading">{{ label }}</template> <template v-if="!loading">{{ label }}</template>
<loading-icon <loading-icon
class="loading-button__icon" class="loading-button__icon"
@ -41,6 +43,7 @@
height: 14px; height: 14px;
margin: 0 auto; margin: 0 auto;
@include spin; @include spin;
fill: $color-brand;
} }
} }
</style> </style>

10
client/src/pages/hello.vue
View File

@ -32,14 +32,12 @@
>{{ errors.first('email') }}</small> >{{ errors.first('email') }}</small>
</div> </div>
<div class="actions"> <div class="actions">
<button
class="button button--primary button--big actions__submit"
data-cy="hello-button">Los geht's
</button>
<loading-button <loading-button
:loading="loading" :loading="loading"
label="Los geht's"/> label="Los geht's"
{{ loading }} class="actions__submit"
data-cy="hello-button"
/>
</div> </div>
</form> </form>
</div> </div>

20
client/src/pages/license-activation.vue
View File

@ -39,9 +39,12 @@
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="actions"> <div class="actions">
<button <loading-button
class="button button--primary button--big actions__submit" :loading="loading"
data-cy="coupon-button">Coupon abschicken</button> class="actions__submit"
data-cy="coupon-button"
label="Coupon abschicken"
/>
</div> </div>
</form> </form>
</section> </section>
@ -64,9 +67,11 @@
import me from '@/mixins/me'; import me from '@/mixins/me';
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql'; import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/meQuery.gql'; import ME_QUERY from '@/graphql/gql/meQuery.gql';
import LoadingButton from '@/components/LoadingButton';
export default { export default {
mixins: [me], mixins: [me],
components: {LoadingButton},
data() { data() {
return { return {
@ -78,7 +83,8 @@ export default {
email: '' email: ''
}, },
teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`, teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende` studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
loading: false
}; };
}, },
methods: { methods: {
@ -87,6 +93,7 @@ export default {
this.submitted = true; this.submitted = true;
let that = this; let that = this;
if (result) { if (result) {
this.loading = true;
this.$apollo.mutate({ this.$apollo.mutate({
mutation: REDEEM_COUPON, mutation: REDEEM_COUPON,
variables: { variables: {
@ -101,6 +108,7 @@ export default {
} }
) { ) {
if (coupon.success) { if (coupon.success) {
that.loading = false;
that.couponErrors = []; that.couponErrors = [];
that.$apollo.query({ that.$apollo.query({
query: ME_QUERY, query: ME_QUERY,
@ -109,11 +117,15 @@ export default {
} }
} }
}).catch(({message}) => { }).catch(({message}) => {
this.loading = false;
if (message.indexOf('invalid_coupon') > -1) { if (message.indexOf('invalid_coupon') > -1) {
that.couponErrors = ['Der angegebene Coupon-Code ist ungültig.']; that.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
} else { } else {
that.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.']; that.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
} }
})
.finally(() => {
this.loading = false;
}); });
} }
}); });

22
client/src/pages/login.vue
View File

@ -36,11 +36,15 @@
>{{ error }}</small> >{{ error }}</small>
</div> </div>
<div class="actions"> <div class="actions">
<button <loading-button
class="button button--primary button--big actions__submit" :loading="loading"
data-cy="login-button">Anmelden</button> class="actions__submit"
data-cy="login-button"
label="Anmelden"
/>
<router-link <router-link
:to="{name: 'hello'}" :to="{name: 'hello'}"
tag="button"
class="button button--big actions__submit back-button">Abbrechen class="button button--big actions__submit back-button">Abbrechen
</router-link> </router-link>
<router-link <router-link
@ -56,15 +60,17 @@
import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql'; import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
import LOGIN_MUTATION from '@/graphql/gql/mutations/login.gql'; import LOGIN_MUTATION from '@/graphql/gql/mutations/login.gql';
import {login} from '@/hep-client/index'; import {login} from '@/hep-client/index';
import LoadingButton from '@/components/LoadingButton';
export default { export default {
components: {}, components: {LoadingButton},
data() { data() {
return { return {
password: '', password: '',
passwordErrors: [], passwordErrors: [],
submitted: false submitted: false,
loading: false
}; };
}, },
@ -73,8 +79,10 @@
this.$validator.validate().then(result => { this.$validator.validate().then(result => {
this.submitted = true; this.submitted = true;
if (result) { if (result) {
this.loading = true;
login(this.helloEmail.email, this.password) login(this.helloEmail.email, this.password)
.then((response) => { .then((response) => {
this.loading = false;
if (response.status === 200) { if (response.status === 200) {
this.mySkillboxLogin(response.data); this.mySkillboxLogin(response.data);
} else { } else {
@ -82,6 +90,7 @@
} }
}) })
.catch((error) => { .catch((error) => {
this.loading = false;
if (error.response.data.message && error.response.data.message === 'Sie haben sich nicht korrekt eingeloggt oder Ihr Konto ist vor\u00fcbergehend deaktiviert.') { if (error.response.data.message && error.response.data.message === 'Sie haben sich nicht korrekt eingeloggt oder Ihr Konto ist vor\u00fcbergehend deaktiviert.') {
this.passwordErrors = ['Die von Ihnen eingegebene E-Mail-Adresse und das Passwort passen nicht zusammen.']; this.passwordErrors = ['Die von Ihnen eingegebene E-Mail-Adresse und das Passwort passen nicht zusammen.'];
} else { } else {
@ -175,13 +184,12 @@
display: inline-block; display: inline-block;
margin-left: auto; margin-left: auto;
line-height: 19px;; line-height: 19px;;
display: inline-block;
padding: $small-spacing; padding: $small-spacing;
} }
} }
.back-button { .back-button {
font-size: 1rem; //font-size: 1rem;
line-height: normal; line-height: normal;
margin-left: $medium-spacing; margin-left: $medium-spacing;
} }

17
client/src/pages/registration.vue
View File

@ -249,9 +249,12 @@
v-if="registrationError">{{ registrationError }}</small> v-if="registrationError">{{ registrationError }}</small>
</div> </div>
<div class="actions"> <div class="actions">
<button <loading-button
class="button button--primary button--big actions__submit" :loading="loading"
data-cy="register-button">Konto erstellen</button> class="actions__submit"
label="Konto erstellen"
data-cy="register-button"
/>
</div> </div>
</form> </form>
</div> </div>
@ -262,6 +265,7 @@
import {register} from '../hep-client/index'; import {register} from '../hep-client/index';
import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql'; import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
import Checkbox from '@/components/Checkbox'; import Checkbox from '@/components/Checkbox';
import LoadingButton from '@/components/LoadingButton';
function initialData() { function initialData() {
return { return {
@ -290,13 +294,15 @@ function initialData() {
export default { export default {
components: { components: {
LoadingButton,
Checkbox Checkbox
}, },
data() { data() {
return Object.assign( return Object.assign(
{ {
helloEmail: '' helloEmail: '',
loading: false,
}, },
initialData() initialData()
); );
@ -307,6 +313,7 @@ export default {
this.$validator.validate().then(result => { this.$validator.validate().then(result => {
this.submitted = true; this.submitted = true;
if (result) { if (result) {
this.loading = true;
const registrationData = { const registrationData = {
customer: { customer: {
prefix: this.prefix, prefix: this.prefix,
@ -331,11 +338,13 @@ export default {
}; };
register(registrationData).then((response) => { register(registrationData).then((response) => {
this.loading = false;
if (response.data.id && response.data.id > 0) { if (response.data.id && response.data.id > 0) {
this.$router.push({name: 'checkEmail'}); this.$router.push({name: 'checkEmail'});
} }
}) })
.catch((error) => { .catch((error) => {
this.loading = false;
console.warn(error); console.warn(error);
if (error.response.data.message) { if (error.response.data.message) {
switch (error.response.data.message) { switch (error.response.data.message) {