Change react template, format code and added some comments

.gitignore

@@ -1,3 +1,63 @@
+### Default ignore for this project ###
 config.yaml
 data/
 ./wg-access-server
+
+### Code ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+### Go ###
+# Binaries for programs and plugins
+*.exe
+*.exe~
+*.dll
+*.so
+*.dylib
+
+# Test binary, built with `go test -c`
+*.test
+
+# Output of the go coverage tool, specifically when used with LiteIDE
+*.out
+
+### Go Patch ###
+/vendor/
+/Godeps/
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+### website react app ###
+
+# dependencies
+website/node_modules
+website/.pnp
+website/.pnp.js
+
+# testing
+website/coverage
+
+# production
+website/build
+
+# misc
+website/.DS_Store
+website/.env.local
+website/.env.development.local
+website/.env.test.local
+website/.env.production.local
+
+website/npm-debug.log*
+website/yarn-debug.log*
+website/yarn-error.log*
+website/yarn.lock
+
+

Dockerfile

@@ -1,30 +1,51 @@
+### Build stage for the website frontend 
 FROM node:10 as website
+
 WORKDIR /code
+
 COPY ./website/package.json ./
 COPY ./website/package-lock.json ./
+
+# install dependency
 RUN npm install
+
 COPY ./website/ ./
+
 RUN npm run build
 
+### Build stage for the website backend server
 FROM golang:1.13.8 as server
+
 WORKDIR /code
+
+# environment variable
 ENV GOOS=linux
 ENV GARCH=amd64
 ENV CGO_ENABLED=0
 ENV GO111MODULE=on
+
 COPY ./go.mod ./
 COPY ./go.sum ./
+
 RUN go mod download
+
 COPY ./proto/ ./proto/
 COPY ./main.go ./main.go
 COPY ./internal/ ./internal
+
 RUN go build -o server
 
+### Server 
 FROM alpine:3.10
-RUN apk add iptables
-RUN apk add wireguard-tools
+
+# environment variable
 ENV CONFIG="/config.yaml"
 ENV STORAGE_DIRECTORY="/data"
+
+RUN apk add iptables
+RUN apk add wireguard-tools
+
+# Copy the final build for the frontend and backend
 COPY --from=server /code/server /server
 COPY --from=website /code/build /website/build
 CMD /server

README.md

@@ -32,6 +32,8 @@ network as well.
 
 Here's a quick command to run the server to try it out.
 
+You can connect to the web server with http://localhost:8000
+
 If you open your browser using your LAN ip address you can even connect your
 phone to try it out: for example, i'll open my browser at http://192.168.0.15:8000
 using my laptop's LAN IP address.
@@ -205,8 +207,8 @@ The software is made up a Golang Server and React App.
 
 Here's how I develop locally:
 
-2. run `cd website && npm install && npm start` to get the frontend running on `:3000`
-3. run `sudo go run ./main.go` to get the server running on `:8000`
+1. run `cd website && npm install && npm start` to get the frontend running on `:3000`
+2. run `sudo go run ./main.go` to get the server running on `:8000`
 
 Here are some notes about the development configuration:
 

docs/index.yaml

@@ -1,13 +1,13 @@
 apiVersion: v1
 entries:
   wg-access-server:
-  - apiVersion: v2
-    appVersion: 0.0.9
-    created: "2020-03-08T15:27:38.5587792+11:00"
-    description: A Wireguard VPN Access Server
-    digest: e8d795290f577d5d5678619dac42e1a667407aa7128a682da30f26db9f383a1c
-    name: wg-access-server
-    urls:
-    - https://place1.github.io/wg-access-server/charts/wg-access-server-0.0.9.tgz
-    version: 0.0.9
+    - apiVersion: v2
+      appVersion: 0.0.9
+      created: "2020-03-08T15:27:38.5587792+11:00"
+      description: A Wireguard VPN Access Server
+      digest: e8d795290f577d5d5678619dac42e1a667407aa7128a682da30f26db9f383a1c
+      name: wg-access-server
+      urls:
+        - https://place1.github.io/wg-access-server/charts/wg-access-server-0.0.9.tgz
+      version: 0.0.9
 generated: "2020-03-08T15:27:38.5581672+11:00"

publish.py

@@ -10,11 +10,12 @@
     .read() \
     .decode('utf-8')
 tags = json.loads(r).get('results', [])
-print('current docker tags:', sorted([t.get('name') for t in tags], reverse=True))
+print('current docker tags:', sorted(
+    [t.get('name') for t in tags], reverse=True))
 
 # tag the new image
 version = input('Version: ')
-docker_tag=f"place1/wg-access-server:{version}"
+docker_tag = f"place1/wg-access-server:{version}"
 # subprocess.run(['docker', 'build', '-t', docker_tag, '.'])
 
 # update the helm chart and quickstart manifest
@@ -26,9 +27,12 @@
     yaml.dump(chart, f, default_flow_style=False)
     f.truncate()
 with open('deploy/k8s/quickstart.yaml', 'w') as f:
-    subprocess.run(['helm', 'template', '--name-template', 'quickstart', 'deploy/helm/wg-access-server/'], stdout=f)
-subprocess.run(['helm', 'package', 'deploy/helm/wg-access-server/', '--destination', 'docs/charts/'])
-subprocess.run(['helm', 'repo', 'index', 'docs/', '--url', 'https://place1.github.io/wg-access-server'])
+    subprocess.run(['helm', 'template', '--name-template',
+                    'quickstart', 'deploy/helm/wg-access-server/'], stdout=f)
+subprocess.run(['helm', 'package', 'deploy/helm/wg-access-server/',
+                '--destination', 'docs/charts/'])
+subprocess.run(['helm', 'repo', 'index', 'docs/', '--url',
+                'https://place1.github.io/wg-access-server'])
 
 # commit changes
 subprocess.run(['git', 'add', 'deploy'])

website/.gitignore

@@ -1,24 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-yarn.lock

website/README.md

@@ -1,33 +1,37 @@
+# React App
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
 
-In the project directory, you can run:
+### `yarn start` or `npm run start`
 
-### `yarn start`
+Runs the app in the development mode.
 
-Runs the app in the development mode.<br />
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
+The page will reload if you make edits.
+
 You will also see any lint errors in the console.
 
-### `yarn test`
+### `yarn test` or `npm run test`
+
+Launches the test runner in the interactive watch mode.
 
-Launches the test runner in the interactive watch mode.<br />
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `yarn build`
+### `yarn build` or `npm run build`
+
+Builds the app for production to the `build` folder.
 
-Builds the app for production to the `build` folder.<br />
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+The build is minified and the filenames include the hashes.
+
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### `yarn eject` or `npm run eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 

website/public/index.html

@@ -5,11 +5,8 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <meta name="description" content="Website for the wg-access-server"/>
+    <link rel="apple-touch-icon" href="logo-192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Wireguard Access Portal</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

website/public/manifest.json

@@ -8,14 +8,14 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo-310.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "301x310"
     }
   ],
   "start_url": ".",

website/src/Cookies.ts

@@ -5,15 +5,15 @@ export function getCookie(name: string): string | undefined {
   const prefix = name + '=';
   let begin = dc.indexOf('; ' + prefix);
   let end = undefined;
-  if (begin == -1) {
+  if (begin === -1) {
     begin = dc.indexOf(prefix);
-    if (begin != 0) {
+    if (begin !== 0) {
       return undefined;
     }
   } else {
     begin += 2;
     end = document.cookie.indexOf(';', begin);
-    if (end == -1) {
+    if (end === -1) {
       end = dc.length;
     }
   }