Commit ba5c206b authored by Hidde-Jan Jongsma's avatar Hidde-Jan Jongsma

Add utils component

parent 5134bb27
module.exports = {
trailingComma: "es5",
arrowParens: "always",
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body class="bg-light">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
......
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
<b-container tag="main">
<router-view />
</b-container>
<the-footer />
</div>
</template>
<script>
import TheFooter from "./components/TheFooter.vue";
export default {
name: "App",
components: {
TheFooter,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
html {
position: relative;
min-height: 100%;
}
#nav {
padding: 30px;
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
#nav a {
font-weight: bold;
color: #2c3e50;
.navbar-custom {
background-color: #649dc9;
}
#nav a.router-link-exact-active {
color: #42b983;
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: white;
}
</style>
<template>
<div class="create-token-form">
<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-select
v-model="organizationId"
required
:options="organizations"
></b-form-select>
</b-form-group>
<b-form-radio-group label="Request type">
<b-form-radio v-model="requestType" value="credential-verify-request">
CredentialVerifyRequest
</b-form-radio>
<b-form-radio v-model="requestType" value="credential-issue-request">
CredentialIssueRequest
</b-form-radio>
</b-form-radio-group>
<b-form-group label="Request data">
<b-form-textarea
:value="JSON.stringify(data, null, 2)"
:options="[1]"
required
@input="(val) => (this.data = JSON.parse(val))"
></b-form-textarea>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
<b-card class="mt-3" header="Created Token">
<pre class="m-0">{{ token }}</pre>
</b-card>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "CreateTokenForm",
data() {
return {
credentialType: "NameCredential",
organizationId: 1,
callbackUrl: "http://httpbin.org/get",
requestType: "",
data: {},
token: "",
organizations: [],
};
},
sockets: {
connect() {
console.log("Connected in Home");
this.$socket.client.emit("message", "New message", (response) => {
console.log("Got response in connect", response, this);
this.message = response;
});
},
},
methods: {
async createToken() {
try {
const data = {
type: this.credentialType,
callbackUrl: this.callbackUrl,
aud: this.requestType,
};
if (this.requestType === "credential-issue-request") {
data.data = this.data;
}
const result = await axios.post(
`/api/utils/jwt/${this.organizationId}`,
data
);
console.log(result.data);
this.token = result.data;
} catch (e) {
console.error(e);
}
},
updateData(newData) {
try {
const data = JSON.parse(newData);
if (data) {
this.data = data;
}
} catch {
console.log("Could not decode", newData);
}
},
},
async mounted() {
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})` };
});
} catch (e) {
console.error(e);
}
},
};
</script>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<footer class="footer">
<b-container class="text-center">
<span class="text-muted">SSI Service Provider &ndash; TNO</span>
</b-container>
</footer>
</template>
<script>
export default {
name: "TheFooter",
props: {
myProp: String,
},
};
</script>
<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
</style>
import "@babel/polyfill";
import "mutationobserver-shim";
import Vue from "vue";
import "./plugins/bootstrap-vue";
import "./plugins/sockets";
import App from "./App.vue";
import router from "./router";
......@@ -6,5 +10,5 @@ Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
render: (h) => h(App),
}).$mount("#app");
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
import Vue from "vue";
import VueSocketIOExt from "vue-socket.io-extended";
import io from "socket.io-client";
const socket = io("http://localhost:3000");
Vue.use(VueSocketIOExt, socket);
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Utils from "../views/Utils.vue";
Vue.use(VueRouter);
......@@ -8,7 +9,12 @@ const routes = [
{
path: "/",
name: "Home",
component: Home
component: Home,
},
{
path: "/utils",
name: "Utils",
component: Utils,
},
{
path: "/about",
......@@ -17,14 +23,14 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
mode: "history",
mode: "hash",
base: process.env.BASE_URL,
routes
routes,
});
export default router;
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<ul>
<li>
<router-link to="/utils">A link</router-link>
</li>
</ul>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld
}
};
</script>
<template>
<div class="utils">
<create-token-form></create-token-form>
</div>
</template>
<script>
import CreateTokenForm from "../components/CreateTokenForm.vue";
export default {
name: "Utils",
components: {
CreateTokenForm,
},
};
</script>
module.exports = {
devServer: {
proxy: {
"^": {
target: "http://localhost:3000",
ws: true,
changeOrigin: true,
},
},
},
};
This diff is collapsed.
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