Tenant UI - Simple Form (#200)

* git ignore

Signed-off-by: Jamie Popkin <[email protected]>

* Readme

Signed-off-by: Jamie Popkin <[email protected]>

* Here is Vite

Signed-off-by: Jamie Popkin <[email protected]>

* Development documentation

Signed-off-by: Jamie Popkin <[email protected]>

* Using the vite plugin loader

Signed-off-by: Jamie Popkin <[email protected]>

* Here is Vite

Signed-off-by: Jamie Popkin <[email protected]>

* login component

Signed-off-by: Jamie Popkin <[email protected]>

* Removing sample code

Signed-off-by: Jamie Popkin <[email protected]>

* Testing Vite imports

Signed-off-by: Jamie Popkin <[email protected]>

* Playing with Vue3

Signed-off-by: Jamie Popkin <[email protected]>

* Figured out the whole new 'setup' vue3 thing

Signed-off-by: Jamie Popkin <[email protected]>

* const

Signed-off-by: Jamie Popkin <[email protected]>

* State is working. And Primevue... sorta

Signed-off-by: Jamie Popkin <[email protected]>

* OK... Now primevue is working

Signed-off-by: Jamie Popkin <[email protected]>

* Ready to call the API

Signed-off-by: Jamie Popkin <[email protected]>

* Could not get the primevue toast app to work.

Appears to be a known bug with the vue3 composition api

Signed-off-by: Jamie Popkin <[email protected]>

* toast is now gone

Signed-off-by: Jamie Popkin <[email protected]>

* Pivot to third party toast module... works

Signed-off-by: Jamie Popkin <[email protected]>

* Disabling button

Signed-off-by: Jamie Popkin <[email protected]>

* Cors working. Grabbing token

Signed-off-by: Jamie Popkin <[email protected]>

* State for async request

Signed-off-by: Jamie Popkin <[email protected]>

* Doc

Signed-off-by: Jamie Popkin <[email protected]>

* Bare bones Dockerfile

Signed-off-by: Jamie Popkin <[email protected]>

* Trying to get node installed

Signed-off-by: Jamie Popkin <[email protected]>

* Build is running in docker

Signed-off-by: Jamie Popkin <[email protected]>

* Docker build is complete

Signed-off-by: Jamie Popkin <[email protected]>

* Tenant UI now part of main dev env (Docker Compose)

Signed-off-by: Jamie Popkin <[email protected]>

* Here is the vue3 composition API

Signed-off-by: Jamie Popkin <[email protected]>

* Token now in composition api

Signed-off-by: Jamie Popkin <[email protected]>

* Doc

Signed-off-by: Jamie Popkin <[email protected]>

* Documenting rebase workflow

Signed-off-by: Jamie Popkin <[email protected]>

* Necessary attribution to allow password managers to work

Signed-off-by: Jamie Popkin <[email protected]>

* Silly update to trigger pipeline build

Signed-off-by: Jamie Popkin <[email protected]>

* Fixing linting errors

Signed-off-by: Jamie Popkin <[email protected]>

* Pulling the CORS urls from an Env Var ✓

Signed-off-by: Jamie Popkin <[email protected]>

* Adding CORs URLs to the example docker config

Signed-off-by: Jamie Popkin <[email protected]>

README.md

@@ -67,3 +67,15 @@ Source code for the traction showcase demo:
 Source code for Endorser controller application.
 
 [Endorser](./services/endorser/README.md)
+
+## Repository workflow
+Currently authorized users can create a branch and run a pull request to merge in changes. Unauthorized can always create a fork.
+
+### Rebasing of a branch
+```bash
+git fetch --all
+git pull
+
+git rebase origin/develop
+git push --force
+```

scripts/.env-example

@@ -191,3 +191,15 @@ SHOWCASE_PSQL_ADMIN=showcaseadminuser
 SHOWCASE_PSQL_ADMIN_PWD=showcaseadminPass
 SHOWCASE_PSQL_USER=showcaseuser
 SHOWCASE_PSQL_USER_PWD=showcasePass
+
+
+
+# ------------------------------------------------------------
+# ------------------------------------------------------------
+# Tenant UI Configuration
+# ------------------------------------------------------------
+# ------------------------------------------------------------
+
+## For the tenant UI to connect to traction
+# Can be a string separated by commas.
+TRACTION_CORS_URLS=http://localhost:3000

scripts/docker-compose.yml

@@ -194,6 +194,13 @@ services:
       timeout: 5s
       retries: 5
 
+  tenant-ui:
+    build:
+      context: ../services/grip
+      dockerfile: Dockerfile
+    ports:
+      - 3001:80
+
 volumes:
   traction-wallet:
   endorser-wallet:

services/grip/.dockerignore

@@ -0,0 +1,2 @@
+frontend/node_modules
+frontend/dist

services/grip/.gitignore

@@ -0,0 +1,15 @@
+# Credentials
+.env
+
+# Configurations
+.vscode
+
+# Temporary files
+*.log
+*.swp
+*.zip
+*.tgz
+
+# Temporary Code
+node_modules
+dist

services/grip/Dockerfile

@@ -0,0 +1,43 @@
+# Ubuntu Long Term Release
+FROM ubuntu:22.04
+
+# Use bash instead of sh
+RUN rm /bin/sh && ln -s /bin/bash /bin/sh
+
+# Update the package manager database
+RUN apt-get update -y
+
+# Need curl to install Node
+RUN apt-get install -y curl
+
+# Copy over code. Make sure to exclude
+# unwanted things in .dockerignore
+COPY frontend frontend
+
+# Move into project directory 
+WORKDIR frontend
+
+# Install the Node version manager and Node.
+# The default Node for this version of Ubuntu is incompatible
+# with the Vite build system.
+# Also run the node install and vite build.
+RUN mkdir /usr/local/nvm
+ENV NVM_DIR /usr/local/nvm
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
+    && . $NVM_DIR/nvm.sh \
+    && nvm install v16.13.0 \
+    && npm ci \
+    && npm run build
+
+# Install Nginx
+RUN apt-get install nginx -y
+
+# Link nginx to the project directory
+RUN rm -rf /var/www/html
+RUN ln -s /frontend/dist /var/www/html
+
+# Expose the http port
+EXPOSE 80:80
+
+# Run the web server
+CMD ["/usr/sbin/nginx", "-g", "daemon off;"]

services/grip/README.md

@@ -0,0 +1,26 @@
+# GRIP - Temporary Name Until Something Better Comes Along
+
+## Minimal Viable Product
+
+- Accept a key and secret and store them in the browser.
+- Use the key and secret to authenticate with the server.
+- Make a request to the server.
+
+## Running the Development Environment
+
+Node version `>=12.2.0`.
+
+```bash
+cd frontend
+npm ci
+npm run dev
+```
+
+## Running Docker
+
+```bash
+docker build -t grip .
+docker run -d --name grip -p 3000:80 grip
+```
+
+The web page will now be hosted [here](localhost:3000).

services/grip/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

services/grip/frontend/README.md

@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

services/grip/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>