+
+
+
+
+
+
+
diff --git a/web/src/Login.vue b/web/src/Login.vue
new file mode 100644
index 0000000..78c6e7a
--- /dev/null
+++ b/web/src/Login.vue
@@ -0,0 +1,90 @@
+
+ Welcome!
++ Welcome to the Nuts Admin. +
++ This app lets you administer identities (e.g. organizations) on Nuts services. +
++ You have to login first. +
+
+
+
+
+
+
diff --git a/web/src/Logout.vue b/web/src/Logout.vue
new file mode 100644
index 0000000..df2396b
--- /dev/null
+++ b/web/src/Logout.vue
@@ -0,0 +1,13 @@
+
+
+
+ Nuts Admin
+ + +You are being logged out...
+ + diff --git a/web/src/NotFound.vue b/web/src/NotFound.vue new file mode 100644 index 0000000..07368cf --- /dev/null +++ b/web/src/NotFound.vue @@ -0,0 +1,3 @@ + +Not found!
+ diff --git a/web/src/admin/AdminApp.vue b/web/src/admin/AdminApp.vue new file mode 100644 index 0000000..7a7f6c9 --- /dev/null +++ b/web/src/admin/AdminApp.vue @@ -0,0 +1,115 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/admin/Identities.vue b/web/src/admin/Identities.vue
new file mode 100644
index 0000000..cd2c171
--- /dev/null
+++ b/web/src/admin/Identities.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
diff --git a/web/src/admin/IdentityForm.vue b/web/src/admin/IdentityForm.vue
new file mode 100644
index 0000000..6c4e17b
--- /dev/null
+++ b/web/src/admin/IdentityForm.vue
@@ -0,0 +1,32 @@
+
+
+
+
diff --git a/web/src/admin/NewIdentity.vue b/web/src/admin/NewIdentity.vue
new file mode 100644
index 0000000..920d044
--- /dev/null
+++ b/web/src/admin/NewIdentity.vue
@@ -0,0 +1,61 @@
+
+
+
+
+ Identities
+ + +
+
+
+
+
+ Could not fetch identities: {{ fetchError }}
+Loading...
+ No identities yet, add one!
+ | Name | +DID | +
|---|---|
| {{ name }} | +{{ did }} | +
Here you can create new identities (DIDs) on the Nuts Node.
+ +Could not create identity: {{ apiError }}
+ +
+ Please correct the following error(s):
+
+
+ -
+
- * {{ error }} +
+
+
+
+
+
+
diff --git a/web/src/components/StatusBar.vue b/web/src/components/StatusBar.vue
new file mode 100644
index 0000000..1aa3302
--- /dev/null
+++ b/web/src/components/StatusBar.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ title }} +
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/index.html b/web/src/index.html
new file mode 100644
index 0000000..e2435c8
--- /dev/null
+++ b/web/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ {{ statusMessage }}
+
+
+
+
+
+
+
+
diff --git a/web/src/index.js b/web/src/index.js
new file mode 100644
index 0000000..085fc64
--- /dev/null
+++ b/web/src/index.js
@@ -0,0 +1,70 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import './style.css'
+import App from './App.vue'
+import AdminApp from './admin/AdminApp.vue'
+import Login from './Login.vue'
+import Logout from './Logout.vue'
+import NotFound from './NotFound.vue'
+import Identities from './admin/Identities.vue'
+import NewIdentity from './admin/NewIdentity.vue'
+import Api from './plugins/api'
+
+const routes = [
+ { path: '/', component: Login },
+ {
+ name: 'login',
+ path: '/login',
+ component: Login
+ },
+ {
+ name: 'logout',
+ path: '/logout',
+ component: Logout
+ },
+ {
+ path: '/admin',
+ components: {
+ default: AdminApp
+ },
+ children: [
+ {
+ path: 'identities',
+ name: 'admin.identities',
+ component: Identities,
+ children: [
+ {
+ path: 'new',
+ name: 'admin.newIdentity',
+ components: {
+ modal: NewIdentity
+ }
+ }
+ ]
+ }
+ ],
+ meta: { requiresAuth: true }
+ },
+ { path: '/:pathMatch*', name: 'NotFound', component: NotFound }
+]
+
+const router = createRouter({
+ // We are using the hash history for simplicity here.
+ history: createWebHashHistory(),
+ routes // short for `routes: routes`
+})
+
+router.beforeEach((to, from) => {
+ if (to.meta.requiresAuth) {
+ if (localStorage.getItem('session')) {
+ return true
+ }
+ return '/login'
+ }
+})
+
+const app = createApp(App)
+
+app.use(router)
+app.use(Api, { forbiddenRoute: { name: 'logout' } })
+app.mount('#app')
diff --git a/web/src/plugins/api.js b/web/src/plugins/api.js
new file mode 100644
index 0000000..83e61c8
--- /dev/null
+++ b/web/src/plugins/api.js
@@ -0,0 +1,64 @@
+export default {
+ install: (app, apiOptions = {}) => {
+ const { defaultOptions } = apiOptions
+
+ const authHeader = () => {
+ const sessionToken = localStorage.getItem('session')
+ if (sessionToken) {
+ return { Authorization: `Bearer ${sessionToken}` }
+ }
+ return {}
+ }
+ const api = {}
+
+ const httpMethods = ['get', 'post', 'put', 'delete']
+ httpMethods.forEach((method) => {
+ api[method] = (url, data = null, requestOptions = {}) => {
+ const options = {
+ ...defaultOptions,
+ method: method.toUpperCase(),
+ headers: {
+ 'Content-Type': 'application/json',
+ ...authHeader()
+ },
+ ...requestOptions
+ }
+ if (data) {
+ options.body = JSON.stringify(data)
+ }
+
+ return fetch(url, options)
+ .then((response) => {
+ return response.json()
+ .then((json) => {
+ if (response.ok) {
+ return Promise.resolve(json)
+ } else {
+ if (apiOptions.forbiddenRoute && response.status === 401) {
+ return app.config.globalProperties.$router.push(apiOptions.forbiddenRoute)
+ } else {
+ return Promise.reject(json.error)
+ }
+ }
+ }).catch(reason => {
+ // Handle 404 since it does not have content and the response.json() will fail.
+ if (response.status === 404) {
+ return Promise.reject(response.statusText)
+ }
+ // Handle 204 since it does not have content and the response.json() will fail.
+ if (response.status === 204) {
+ return Promise.resolve(response)
+ }
+ // Handle 201 since it might not have content and the response.json() will fail.
+ if (response.status === 201) {
+ return Promise.resolve(response)
+ }
+ return Promise.reject(reason)
+ })
+ })
+ }
+ })
+
+ app.config.globalProperties.$api = api
+ }
+}
diff --git a/web/src/style.css b/web/src/style.css
new file mode 100644
index 0000000..1c0865f
--- /dev/null
+++ b/web/src/style.css
@@ -0,0 +1,142 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+ @apply text-gray-600 bg-gray-200;
+ font-family: 'Poppins', sans-serif;
+}
+
+.main-nav {
+ clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
+}
+
+h1 {
+ @apply text-gray-700 font-bold text-2xl;
+}
+
+h2 {
+ @apply text-gray-900 font-semibold text-lg;
+}
+
+th {
+ text-align: left;
+ @apply text-gray-600 py-2 text-sm font-semibold;
+}
+
+td {
+ @apply py-2 text-sm;
+}
+
+.vertical-form {
+ @apply my-4 flex;
+}
+
+label {
+ @apply text-gray-600 text-sm font-semibold block mb-1;
+}
+
+select {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+}
+
+.custom-select {
+ position: relative;
+}
+
+.custom-select svg {
+ top: 3px;
+ right: 8px;
+ color: #444;
+ content: '';
+ display: block;
+ position: absolute;
+ font-family: initial;
+ width: 35px;
+}
+
+textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], select {
+ @apply w-full bg-white border rounded-lg px-4 py-2 shadow-sm;
+}
+
+textarea {
+ @apply text-sm;
+}
+
+input.alt, select.alt, textarea.alt {
+ @apply bg-gray-300;
+}
+
+input[type=text]:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=number]:disabled {
+ @apply bg-gray-200;
+}
+
+input:focus {
+ outline: none;
+ @apply ring-2;
+}
+
+.page-title {
+ @apply text-3xl mb-6
+}
+
+.page-subtitle {
+ @apply text-2xl mb-6
+}
+
+.bg-nuts {
+ background-color: #1EAAE7;
+}
+
+.btn {
+ @apply inline-flex items-center rounded-lg font-normal text-sm py-3 px-8 shadow-lg transition-all text-center justify-center;
+}
+
+.btn-sm {
+ @apply rounded-lg text-sm py-2 px-6 shadow-md;
+}
+
+.btn-link {
+ @apply bg-transparent shadow-none p-0 hover:text-black;
+}
+
+.btn-primary {
+ @apply text-white;
+ background-color: #1EAAE7;
+}
+
+.btn-primary:not(.btn-loading):hover {
+ background-color: #1683af;
+}
+
+.btn-secondary {
+ @apply text-black bg-white hover:bg-gray-100;
+}
+
+.btn-loading {
+ @apply opacity-70 relative overflow-hidden;
+}
+
+.btn-loading:after {
+ content: '';
+ @apply absolute top-0 left-0 h-2 w-full opacity-0;
+ animation: progress-bar 4s ease-in-out;
+}
+
+.btn-primary.btn-loading:after {
+ background-color: #11678a;
+}
+
+@keyframes progress-bar {
+ 0% {
+ width: 20%;
+ opacity: 100;
+ }
+
+ 100% {
+ width: 100%;
+ opacity: 100;
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..04e2e8b
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,73 @@
+const path = require('path');
+const glob = require('glob')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack");
+const {VueLoaderPlugin} = require('vue-loader')
+
+module.exports = {
+ plugins: [
+ new VueLoaderPlugin(),
+ new HtmlWebpackPlugin({
+ title: "Nuts Demo registry admin",
+ template: "./web/src/index.html"
+ }),
+ new webpack.DefinePlugin({
+ __VUE_OPTIONS_API__: true,
+ __VUE_PROD_DEVTOOLS__: false,
+ })
+ ],
+ optimization: {
+ splitChunks: {
+ cacheGroups: {
+ styles: {
+ name: 'styles',
+ test: /\.css$/,
+ chunks: 'all',
+ enforce: true
+ }
+ }
+ }
+ },
+ // devtool: 'inline-source-map',
+ entry: {
+ index: './web/src/index.js',
+ },
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'web/dist'),
+ clean: true,
+ },
+ resolve: {
+ alias: {
+ // Use the runtime here since it is smaller and we use precompiled .vue components
+ 'vue': 'vue/dist/vue.runtime.esm-bundler.js'
+ // 'vue': 'vue/dist/vue.esm-bundler.js'
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/i,
+ type: 'asset/resource'
+ },
+ {
+ test: /\.css$/,
+ use: [
+ 'vue-style-loader',
+ {
+ loader: "style-loader",
+ options: {
+ esModule: false
+ }
+ },
+ 'css-loader',
+ 'postcss-loader'
+ ]
+ }
+ ]
+ }
+};
\ No newline at end of file