Add tailwindcss styling

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --mode=production",
+    "build": "NODE_ENV=production webpack --mode=production",
     "watch": "webpack --mode=development --watch",
     "lint": "eslint --ext .js,.vue web/src --fix"
   },
@@ -17,6 +17,7 @@
   "license": "ISC",
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.11",
+    "autoprefixer": "^10.2.5",
     "css-loader": "^5.2.0",
     "eslint": "^7.23.0",
     "eslint-config-standard": "^16.0.2",
@@ -25,7 +26,11 @@
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.8.0",
     "html-webpack-plugin": "^5.3.1",
+    "postcss": "^8.2.10",
+    "postcss-loader": "^5.2.0",
+    "purgecss-webpack-plugin": "^4.0.3",
     "style-loader": "^2.0.0",
+    "tailwindcss": "^2.1.1",
     "vue-loader": "^16.2.0",
     "vue-style-loader": "^4.1.3",
     "webpack": "^5.31.0",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'media', // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

web/src/App.vue

@@ -1,11 +1,29 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/login">Login</router-link> |
+  <div class="App min-w-screen min-h-screen flex flex-col bg-gray-100 font-sans">
+    <nrad-header></nrad-header>
+
+    <div class="content-wrapper pt-8 flex-1 bg-grey-lighter">
+      <div class="content py-4 container max-w-6xl mx-auto bg-white m-4 p-6 rounded-md shadow-md">
+        <router-view/>
+      </div>
+    </div>
+
+    <nrad-footer></nrad-footer>
   </div>
-  <router-view />
 </template>
 
 <script>
 
-</script>
+import Header from "./layout/Header.vue"
+import Footer from "./layout/Footer.vue"
+
+export default {
+  components: {
+    "nrad-header": Header,
+    "nrad-footer": Footer
+  }
+}
+</script>
+
+<style>
+</style>

web/src/Landing.vue

@@ -1,3 +1,14 @@
 <template>
-  <h1>Welcome!</h1>
+  <div class="">
+    <h1 class="text-3xl">Welcome!</h1>
+    <p class="mt-4 leading-normal">
+    Welcome to the Nuts Registry Administration Demo.
+    </p>
+    <p class="my-1 leading-normal">
+      This app lets you test how to administer your customers into the Nuts Distributed Registry.
+    </p>
+    <p class="my-1 leading-normal">
+      You have to login first to administer your customers.
+    </p>
+  </div>
 </template>

web/src/Login.vue

@@ -1,20 +1,42 @@
 <template>
-  <form ref="form" :model="form" label-width="120px">
-    <input placeholder="Username" />
-    <input placeholder="Password" />
-    <button>Cancel</button>
+  <form class="my-4 flex justify-center">
+    <div class="space-y-4">
+
+      <div>
+        <label for="username_input" class="block text-sm font-medium text-gray-700">Username</label>
+        <input id="username_input"
+               v-model="username"
+               type="text"
+               placeholder="Username"
+               class="flex-1 py-2 px-4 block border border-gray-300 rounded-md"
+        />
+      </div>
+
+      <div>
+        <label for="password_input" class="block text-sm font-medium text-gray-700">Password</label>
+        <input
+            id="password_input"
+            v-model="password"
+            type="password"
+            placeholder="Password"
+            class="flex-1 py-2 px-4 block border border-gray-300 rounded-md"
+        />
+      </div>
+      <button
+          @click="onSubmit"
+          class="w-full btn-submit"
+      >Login
+      </button>
+    </div>
   </form>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      form: {
-        username: '',
-        password: ''
-
-      }
+      username: '[email protected]',
+      password: ''
     }
   },
   methods: {

web/src/admin/AdminApp.vue

@@ -0,0 +1,10 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default { }
+</script>
+
+<style>
+</style>

web/src/admin/Customers.vue

@@ -1,9 +1,26 @@
 <template>
-  <h1>customer</h1>
+  <h1 class="py-4 font-medium text-xl">Customers</h1>
+  <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-gray-50">
+      <tr>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">DID</th>
+      </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+      <tr v-for="customer in customers">
+        <td><div class="m-4">
+          {{ customer.name }}
+        </div></td>
+        <td>{{ customer.did }}</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script>
-import { onMounted, reactive } from "vue";
 
 export default {
   data() {
@@ -20,7 +37,7 @@ export default {
         },
         // fetch the data when the view is created and the data is
         // already being observed
-        { immediate: true }
+        {immediate: true}
     )
   },
   methods: {

web/src/index.html

@@ -6,7 +6,6 @@
 </head>
 <body>
 <div id="app">
-  <router-view></router-view>
 </div>
 </body>
 </html>

web/src/index.js

@@ -1,23 +1,24 @@
 import { createApp, h } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
-// import App from './admin/App.vue'
-// import Customers from './admin/Customers.vue'
-import Login from './Login.vue'
+import './style.css'
 import App from './App.vue'
+import AdminApp from './admin/AdminApp.vue'
 import Landing from './Landing.vue'
+import Login from './Login.vue'
+import Customers from './admin/Customers.vue'
 
 const routes = [
   { path: '/', component: Landing },
   { path: '/login', component: Login },
-//   { path: '/admin',
-//     component: App,
-//     children: [
-//       {
-//         path: 'customers',
-//         component: Customers
-//       }
-//     ]
-//   }
+  { path: '/admin',
+    component: AdminApp,
+    children: [
+      {
+        path: '',
+        component: Customers
+      }
+    ]
+  }
 ]
 
 const router = createRouter({

web/src/layout/Footer.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="footer-wrapper border-t border-grey-light bg-grey-lighter mt-auto p">
+    <div class="footer  py-4 container mx-auto max-w-6xl text-grey font-light text-sm tracking-wide flex justify-between">
+      <span>
+        2021(C) Nuts Foundation.
+      </span>
+      <a href="https://nuts.nl" class="no-underline text-grey hover:text-grey-dark">About</a>
+    </div>
+  </div>
+</template>

web/src/layout/Header.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="header-wrapper p-4 bg-white border-b border-gray-light">
+    <div class="header container flex items centered">
+      <div class="menu ml-auto font-light space-x-3">
+        <router-link to="/" class="no-underline hover:text-grey-dark text-grey">Home</router-link>
+        <router-link to="/login" class="no-underline hover:text-grey-dark text-grey">Login</router-link>
+      </div>
+    </div>
+  </div>
+</template>

web/src/style.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.btn-submit {
+    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
+}

webpack.config.js

@@ -1,22 +1,25 @@
 const path = require('path');
+const glob = require('glob')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require("webpack");
-const { VueLoaderPlugin } = require('vue-loader')
-
+const {VueLoaderPlugin} = require('vue-loader')
+const PurgeCSSPlugin = require('purgecss-webpack-plugin')
 
 module.exports = {
-  // mode: "development",
-  // mode: "production",
   plugins: [
     new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
       title: "Nuts Demo registry admin",
       template: "./web/src/index.html"
     }),
     new webpack.DefinePlugin({
-      __VUE_OPTIONS_API__: false,
+      __VUE_OPTIONS_API__: true,
       __VUE_PROD_DEVTOOLS__: false,
-    })
+    }),
+    // Purging unused CSS styles from tailwind
+    new PurgeCSSPlugin({
+      paths: glob.sync('./web/src/**/*', {nodir: true}),
+    }),
   ],
   devtool: 'inline-source-map',
   entry: {
@@ -49,7 +52,8 @@ module.exports = {
         use: [
           'vue-style-loader',
           'style-loader',
-          'css-loader'
+          'css-loader',
+          'postcss-loader'
         ]
       }
     ]