Commit 3c2be141 authored by Hidde-Jan Jongsma's avatar Hidde-Jan Jongsma

Improve Util token creation form

parent 6695392b
......@@ -3,23 +3,51 @@
<b-form @submit.prevent="createToken">
<h1>Create request token</h1>
<b-form-group label="Credential type">
<b-form-input v-model="credentialType" required></b-form-input>
</b-form-group>
<b-form-group label="Callback URL">
<b-form-input v-model="callbackUrl" required></b-form-input>
</b-form-group>
<b-form-group label="Organization ID">
<b-form-group
label="Organization ID"
description="The organization for which you want to create a credential request."
>
<b-form-select
v-model="organizationId"
required
:options="organizations"
:options="organizationChoices"
:disabled="!organizationsLoaded"
></b-form-select>
</b-form-group>
<b-form-group
label="Credential Type"
description="The organization specific credential type you want to perform"
>
<b-form-select
v-model="credentialType"
required
:options="typeChoices"
:disabled="!organization"
@input="setDataFromType"
></b-form-select>
</b-form-group>
<div v-if="type" class="text-muted">
<h5>Jolocom credential</h5>
<h6>Context</h6>
<p v-text="type.jolocomType.context"></p>
<h6>Claim interface</h6>
<p v-text="type.jolocomType.claimInterface"></p>
<h5>IRMA credential</h5>
<p v-text="type.irmaType"></p>
</div>
<b-form-group
label="Callback URL"
description="Url to redirect the user to with the response. The response
JWT is appended directly to the URL"
>
<b-form-input v-model="callbackUrl" required></b-form-input>
</b-form-group>
<b-form-radio-group label="Request type">
<b-form-radio v-model="requestType" value="credential-verify-request">
CredentialVerifyRequest
......@@ -29,12 +57,18 @@
</b-form-radio>
</b-form-radio-group>
<b-form-group label="Request data">
<b-form-group
label="Request data"
description="Credential data used for issue requests"
invalid-feedback="Please enter valid JSON"
:state="dataState"
>
<b-form-textarea
class="data-input"
:value="JSON.stringify(data, null, 2)"
required
rows="6"
:state="dataState"
@input="updateData"
></b-form-textarea>
</b-form-group>
......@@ -64,12 +98,13 @@ export default {
return {
credentialType: "NameCredential",
organizationId: 1,
callbackUrl: "http://httpbin.org/get",
callbackUrl: "http://httpbin.org/get?response=",
requestType: "",
data: {},
token: "",
organizationsLoaded: false,
organizations: [{ value: null, text: "Loading organizations..." }],
organizations: [],
dataState: null,
};
},
computed: {
......@@ -96,14 +131,43 @@ export default {
isIssueRequest() {
return this.requestType === "credential-issue-request";
},
organization() {
if (!this.organizationId || !this.organizationsLoaded) {
return null;
}
return this.organizations.find((o) => o.id === this.organizationId);
},
organizationChoices() {
if (!this.organizationsLoaded) {
return [{ value: null, text: "Loading organizations..." }];
}
return this.organizations.map((o) => {
return { value: o.id, text: `${o.name} (${o.id})` };
});
},
typeChoices() {
if (!this.organization) {
return [{ value: null, text: "Loading types..." }];
}
return this.organization.credentialTypes.map((ct) => ct.type);
},
type() {
if (!this.organization || !this.credentialType) {
return null;
}
return this.organization.credentialTypes.find(
(ct) => ct.type === this.credentialType
);
},
},
async created() {
try {
const result = await axios.get("/api/organizations");
console.log(result);
this.organizations = result.data.map((o) => {
return { value: o.id, text: `${o.name} (${o.id})` };
});
this.organizations = result.data;
this.organizationsLoaded = true;
} catch (e) {
console.error(e);
......@@ -133,15 +197,28 @@ export default {
}
},
updateData(newData) {
console.log("Got data", newData);
try {
const data = JSON.parse(newData);
console.log(this.data, data);
if (data) {
this.dataState = null;
this.data = data;
}
} catch {
} catch (e) {
this.dataState = false;
return;
}
},
setDataFromType(val) {
const type = this.organization.credentialTypes.find(
(ct) => ct.type === val
);
if (type && type.jolocomType.claimInterface) {
this.data = type.jolocomType.claimInterface;
}
},
},
};
</script>
......
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