Commit 9cb3be1d authored by Peter Langenkamp's avatar Peter Langenkamp

add credential types page

parent ac2f4b05
<template>
<div>
<b-form @submit.prevent="defineCredentialType">
<b-form-group
label="Organization ID"
description="The organization for which you want to define the credential type."
>
<b-form-select
v-model="organizationId"
required
:options="organizationChoices"
:disabled="!organizationsLoaded"
></b-form-select>
</b-form-group>
<b-form-group
label="Credential Type"
description="The organization specific credential type."
>
<b-form-input v-model="credentialType" required></b-form-input>
<b-alert show variant="primary" v-if="credentialTypeExists"
>A credential type with this name already exists</b-alert
>
</b-form-group>
<!-- TODO: add 'already exists' verification -->
<b-form-group
label="Jolocom Credential"
description="The Jolocom type to associate with the new credential type."
>
<b-form-select
v-model="jolocomCredentialTypeId"
required
:options="jolocomTypeChoices"
:disabled="!jolocomTypesLoaded"
></b-form-select>
</b-form-group>
<div v-if="jolocomType" class="text-muted">
<h6>Context</h6>
<p v-text="jolocomType.context"></p>
<h6>Claim interface</h6>
<p v-text="jolocomType.claimInterface"></p>
</div>
<b-form-group
label="Irma Credential"
description="The Irma type to associate with the new credential type."
>
<b-form-input v-model="irmaType"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
<b-card class="mt-3" header="Definition Response">
<pre class="definition-output">{{ definitionResponse }}</pre>
<p v-if="definitionResponse" class="m-0"></p>
</b-card>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "DefineCredentialTypeForm",
data() {
return {
organizationId: 1,
credentialType: "",
irmaType: "irma-demo.MijnOverheid.fullName",
jolocomCredentialTypeId: "",
definitionResponse: null,
organizationsLoaded: false,
organizations: [],
jolocomTypesLoaded: false,
jolocomTypes: [],
credentialTypeExists: null,
};
},
computed: {
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})` };
});
},
jolocomTypeChoices() {
if (!this.jolocomTypesLoaded) {
return [{ value: null, text: "Loading Jolocom types..." }];
}
return this.jolocomTypes.map((jt) => {
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;
}
return this.jolocomTypes.find(
(jt) => jt.id === this.jolocomCredentialTypeId
);
},
},
watch: {
credentialType(value) {
this.credentialType = value;
this.checkTypeExists(value);
},
},
async created() {
try {
const result = await axios.get("/api/organizations");
console.log(result);
this.organizations = result.data;
this.organizationsLoaded = true;
} catch (e) {
console.error(e);
}
try {
const result = await axios.get("/api/connectors/jolocom");
console.log(result);
this.jolocomTypes = result.data;
this.jolocomTypesLoaded = true;
} catch (e) {
console.error(e);
}
},
methods: {
checkTypeExists(value) {
if (
this.organization &&
this.organization.credentialTypes.find((ct) => ct.type === value)
) {
console.log("This credential type already exists");
this.credentialTypeExists = true;
} else {
this.credentialTypeExists = false;
}
},
async defineCredentialType() {
this.definitionResponse = "";
try {
const data = {
organizationId: this.organizationId,
type: this.credentialType,
jolocomCredentialTypeId: this.jolocomCredentialTypeId,
};
// TODO: Similar for jolocomCredentialTypeId when it becomes optional
if (this.irmaType) {
data.irmaType = this.irmaType;
}
const result = await axios.post("/api/types", data);
console.log(result.data);
this.definitionResponse = result.data;
} catch (e) {
console.error(e);
}
},
},
};
</script>
<style scoped>
.definition-output {
white-space: pre-wrap;
}
</style>
......@@ -15,7 +15,7 @@
<b-card class="mt-3" header="Registration Response">
<pre class="registration-output">{{ registrationResponse }}</pre>
<p v-if="token" class="m-0"></p>
<p v-if="toregistrationResponseken" class="m-0"></p>
</b-card>
</div>
</template>
......
......@@ -5,6 +5,7 @@ import Home from "../views/Home.vue";
import Utils from "../views/Utils.vue";
import CreateToken from "../views/utils/CreateToken.vue";
import RegisterOrganization from "../views/utils/RegisterOrganization.vue";
import DefineCredentialType from "../views/utils/DefineCredentialType.vue";
import CreateIssueRequest from "../views/CreateIssueRequest.vue";
import CreateVerifyRequest from "../views/CreateVerifyRequest.vue";
......@@ -33,10 +34,15 @@ const routes = [
component: CreateToken,
},
{
path: "/utils/register-organization",
path: "/utils/organizations",
name: "RegisterOrganization",
component: RegisterOrganization,
},
{
path: "/utils/credential-types",
name: "DefineCredentialType",
component: DefineCredentialType,
},
],
},
{
......
......@@ -9,7 +9,9 @@
<b-nav-item :to="{ name: 'RegisterOrganization' }"
>Organizations</b-nav-item
>
<b-nav-item href="#" disabled>Credential types</b-nav-item>
<b-nav-item :to="{ name: 'DefineCredentialType' }"
>Credential types</b-nav-item
>
<b-nav-item href="#" disabled>Jolocom types</b-nav-item>
</b-navbar-nav>
</b-navbar>
......
<template>
<div>
<h1>Define Credential Type</h1>
<define-credential-type-form></define-credential-type-form>
</div>
</template>
<script>
import DefineCredentialTypeForm from "../../components/utils/DefineCredentialTypeForm.vue";
export default {
name: "DefineCredentialType",
components: {
DefineCredentialTypeForm,
},
};
</script>
......@@ -2,13 +2,6 @@
<div>
<h1>Register Organization</h1>
<register-organization-form></register-organization-form>
<!-- <create-token-form></create-token-form>
<hr />
<h1>Debug token</h1>
<create-request-form></create-request-form>
<hr />-->
</div>
</template>
......
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