Commit 33910277 authored by Peter Langenkamp's avatar Peter Langenkamp

add waiting spinner to buttons

parent 996980d8
......@@ -18,7 +18,15 @@
></b-form-textarea>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="submit" variant="primary" :disabled="busy">
<div v-if="busy">
<b-spinner small></b-spinner>
Processing...
</div>
<div v-else>
Submit
</div>
</b-button>
</b-form>
<b-card class="mt-3" header="Request" :border-variant="borderVariant">
......@@ -38,6 +46,7 @@ export default {
token: "",
result: null,
error: null,
busy: false,
};
},
computed: {
......@@ -53,6 +62,7 @@ export default {
},
methods: {
async createRequest() {
this.busy = true;
try {
const path =
this.requestType === "credential-issue-request" ? "issue" : "verify";
......@@ -69,6 +79,9 @@ export default {
this.error = true;
this.result = e.response?.data;
}
setTimeout(() => {
this.busy = false;
}, 300);
},
},
};
......
......@@ -71,7 +71,15 @@
></b-form-textarea>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="submit" variant="primary" :disabled="busy">
<div v-if="busy">
<b-spinner small></b-spinner>
Processing...
</div>
<div v-else>
Submit
</div>
</b-button>
</b-form>
<b-card class="mt-3" header="Created Token">
......@@ -103,6 +111,7 @@ export default {
organizationsLoaded: false,
organizations: [],
dataState: null,
busy: false,
};
},
computed: {
......@@ -173,6 +182,7 @@ export default {
},
methods: {
async createToken() {
this.busy = true;
this.token = "";
try {
const data = {
......@@ -194,6 +204,9 @@ export default {
} catch (e) {
console.error(e);
}
setTimeout(() => {
this.busy = false;
}, 300);
},
updateData(newData) {
console.log("Got data", newData);
......
......@@ -22,7 +22,6 @@
A credential type with this name already exists
</b-alert>
</b-form-group>
<!-- TODO: add 'already exists' verification -->
<b-form-group
label="Jolocom Credential"
......@@ -50,7 +49,15 @@
<b-form-input v-model="irmaType"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="submit" variant="primary" :disabled="busy">
<div v-if="busy">
<b-spinner small></b-spinner>
Processing...
</div>
<div v-else>
Submit
</div>
</b-button>
</b-form>
<b-card class="mt-3" header="Definition Response">
......@@ -77,6 +84,7 @@ export default {
jolocomTypesLoaded: false,
jolocomTypes: [],
credentialTypeExists: null,
busy: false,
};
},
computed: {
......@@ -103,15 +111,6 @@ export default {
return { value: jt.id, text: `${jt.name} (${jt.id})` };
});
},
// TODO: Run a check, to verify that the new credential type has not been defined before
// change typeChoices into a verification function
// typeChoices() {
// if (!this.organization) {
// return [{ value: null, text: "Loading types..." }];
// }
// return this.organization.credentialTypes.map((ct) => ct.type);
// },
jolocomType() {
if (!this.jolocomCredentialTypeId) {
return null;
......@@ -160,6 +159,7 @@ export default {
}
},
async defineCredentialType() {
this.busy = true;
this.definitionResponse = "";
try {
const data = {
......@@ -179,6 +179,9 @@ export default {
} catch (e) {
console.error(e);
}
setTimeout(() => {
this.busy = false;
}, 300);
},
},
};
......
......@@ -53,7 +53,15 @@
></b-form-textarea>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="submit" variant="primary" :disabled="busy">
<div v-if="busy">
<b-spinner small></b-spinner>
Processing...
</div>
<div v-else>
Submit
</div>
</b-button>
</b-form>
<b-card class="mt-3" header="Definition Response">
......@@ -81,6 +89,7 @@ export default {
jolocomTypes: [],
jolocomTypeNameExists: null,
jolocomTypeExists: null,
busy: false,
};
},
watch: {
......@@ -150,6 +159,7 @@ export default {
}
},
async defineJolocomType() {
this.busy = true;
this.definitionResponse = "";
try {
const data = {
......@@ -165,6 +175,9 @@ export default {
} catch (e) {
console.error(e);
}
setTimeout(() => {
this.busy = false;
}, 300);
},
},
};
......
......@@ -10,7 +10,18 @@
></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="submit" variant="primary" :disabled="busy">
<div v-if="busy">
<b-spinner small></b-spinner>
Registering...
</div>
<div v-else>
Submit
</div>
</b-button>
<small v-if="busy" class="form-text text-muted"
>Registration may take up to a minute.</small
>
</b-form>
<b-card class="mt-3" header="Registration Response">
......@@ -30,10 +41,12 @@ export default {
name: "",
},
registrationResponse: null,
busy: false,
};
},
methods: {
async registerOrganization() {
this.busy = true;
this.registrationResponse = null;
try {
const data = this.organization;
......@@ -45,6 +58,9 @@ export default {
} catch (e) {
console.error(e);
}
setTimeout(() => {
this.busy = false;
}, 300);
},
},
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment