Merge pull request #60 from OpenShock/develop

Fix branding

.github/workflows/ci-develop.yml

@@ -14,7 +14,7 @@ name: ci-develop
 env:
   BRANCH: develop
   REGISTRY: ghcr.io
-  ARTIFACT_NAME: shocklink-webui.zip
+  ARTIFACT_NAME: openshock-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
   TARGET_ENV: container
   NODE_ENV: development

.github/workflows/ci-master.yml

@@ -14,7 +14,7 @@ name: ci-master
 env:
   BRANCH: master
   REGISTRY: ghcr.io
-  ARTIFACT_NAME: shocklink-webui.zip
+  ARTIFACT_NAME: openshock-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
   TARGET_ENV: container
   NODE_ENV: production

.github/workflows/ci-tag.yml

@@ -9,7 +9,7 @@ name: ci-tag
 # TARGET_ENV is used by Webpack to determine the build target.
 env:
   REGISTRY: ghcr.io
-  ARTIFACT_NAME: shocklink-webui.zip
+  ARTIFACT_NAME: openshock-webui.zip
   IMAGE_NAME: ${{ github.repository_owner }}/webui
   TARGET_ENV: container
   NODE_ENV: production

Dockerfile

@@ -1,8 +1,10 @@
 FROM nginx:1-alpine
 
-ENV SHOCKLINK_API_URL=https://api.shocklink.net
-ENV SHOCKLINK_WEBUI_URL=https://shocklink.net/#/
-ENV SHOCKLINK_SHARE_URL=https://shockl.ink/
+# Default values.
+ENV OPENSHOCK_NAME=LocalShock
+ENV OPENSHOCK_URL=http://webui.localhost:5002
+ENV OPENSHOCK_API_URL=http://api.localhost:5001
+ENV OPENSHOCK_SHARE_URL=
 
 # Copy release artifacts (static JS and CSS bundles)
 COPY dist /usr/share/nginx/html

README.md

@@ -1,6 +1,6 @@
-# ShockLink WebUI
+# OpenShock WebUI
 
-This is the ShockLink Web UI. It is a single-page application that communicates with the [ShockLink API](https://github.com/Shock-Link/API). It is written using JavaScript and SCSS using the Vue 3 framework.
+This is the OpenShock Web UI. It is a single-page application that communicates with the [OpenShock API](https://github.com/OpenShock/API). It is written using JavaScript and SCSS using the Vue 3 framework.
 
 ## Contents
 
@@ -16,29 +16,31 @@ This is the ShockLink Web UI. It is a single-page application that communicates
 
 # Configuring
 
-The [webui](https://github.com/Shock-Link/WebUI/pkgs/container/webui) container supports configuration via environment variables.
+The [webui](https://github.com/OpenShock/WebUI/pkgs/container/webui) container supports configuration via environment variables.
 
 |Variable|Default|Description|
 |-|-|-|
-|`SHOCKLINK_API_URL`|`https://api.shocklink.net/`| URL of the API. |
-|`SHOCKLINK_WEBUI_URL`|`https://shocklink.net/#/`| URL of the ShockLink WebUI. |
-|`SHOCKLINK_SHARE_URL`|`https://shockl.ink/s/`| URL to prefix share links with. When visited, should redirect to `${SHOCKLINK_WEBUI_URL}/public/proxy/shares/links/{ID}`. |
+|`OPENSHOCK_NAME`|`LocalShock`| Name of the OpenShock instance. |
+|`OPENSHOCK_URL`|`http://webui:80`| URL of the OpenShock WebUI. (NO trailing slash!) |
+|`OPENSHOCK_SHARE_URL`|`https://webui:80/s`| URL to prefix share links with. (NO trailing slash!) When visited, should redirect to `${OPENSHOCK_WEBUI_URL}/public/proxy/shares/links/{ID}`. |
+|`OPENSHOCK_API_URL`|`http://api:80/`| URL of the API. (NO trailing slash!) |
 
 # Deployment
 
-This documentation describes how to self-host the WebUI container. This might not be of interest to you if you are content using [ShockLink.net](https://shocklink.net).
+This documentation describes how to self-host the WebUI container. This might not be of interest to you if you are content using a public OpenShock instance such as [ShockLink.net](https://shocklink.net).
 
 ## Using Docker
-Assuming you are running on `localhost`, with [the API](https://github.com/Shock-Link/API) running on port `5001`:
+Assuming you are running on `localhost`, with [the API](https://github.com/OpenShock/API) running on port `5001`:
 
 ```bash
 $ docker run \
     -p 5002:80/tcp \
-    -e SHOCKLINK_API_URL=http://localhost:5001/ \
-    -e SHOCKLINK_WEBUI_URL=http://localhost:5002/#/ \
-    -e SHOCKLINK_SHARE_URL=http://localhost:5002/#/public/proxy/shares/links/ \
-    --name shocklink-webui \
-    ghcr.io/shocklink/webui:latest
+    -e OPENSHOCK_NAME=LocalShock \
+    -e OPENSHOCK_URL=http://localhost:5002 \
+    -e OPENSHOCK_API_URL=http://localhost:5001 \
+    -e OPENSHOCK_SHARE_URL=http://localhost:5002/#/public/proxy/shares/links/ \
+    --name openshock-webui \
+    ghcr.io/openshock/webui:latest
 ```
 
 ## Using `docker-compose`

docker-compose.yml

@@ -14,12 +14,13 @@ services:
   redis:
     image: redis/redis-stack-server:latest
     volumes:
-      - /opt/docker/shocklink/redis/redis-stack.conf:/redis-stack.conf
+      - /opt/docker/openshock/redis/redis-stack.conf:/redis-stack.conf
 
   # The API.
-  # Check https://github.com/Shock-Link/API for the latest configuration settings.
+  # Check https://github.com/OpenShock/API for the latest configuration settings.
   api:
-    image: ghcr.io/shock-link/api:latest
+    image: ghcr.io/openshock/api:latest
+    container_name: api
     depends_on:
       - db
       - redis
@@ -32,12 +33,16 @@ services:
 
   # The Web UI (this repository).
   webui:
-    image: ghcr.io/redmushie/webui:master
+    # Make sure to fresh build if you make changes:
+    #     docker-compose up --build
+    build: .
+    container_name: webui
     depends_on:
       - api
     ports:
       - "5002:80/tcp"
     environment:
-      - SHOCKLINK_API_URL=http://local:5001/
-      - SHOCKLINK_WEBUI_URL=http://local:5002/#/
-      - SHOCKLINK_SHARE_URL=http://local:5002/#/public/proxy/shares/links/
+      - OPENSHOCK_NAME=LocalShock
+      - OPENSHOCK_URL=http://webui.localhost:5002
+      - OPENSHOCK_API_URL=http://api.localhost:5001
+      - OPENSHOCK_SHARE_URL=http://webui.localhost:5002/#/public/proxy/shares/links/

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "shocklink_web_ui",
+  "name": "openshock_web_ui",
   "version": "1.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "build": "webpack",
+    "build-ci": "webpack --mode production --env TARGET_ENV=container",
     "local": "webpack-dev-server --mode development --env TARGET_ENV=local --https",
     "dev": "webpack-dev-server --mode development --env TARGET_ENV=development --https"
   },

public/index.container.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>OPENSHOCK_NAME</title>
+
+	<meta property="og:title" content="OPENSHOCK_NAME" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="OPENSHOCK_URL" />
+	<meta property="og:image" content="OPENSHOCK_URL/static/images/shocklink-logo-only.png" />
+	<meta property="og:description" content="OPENSHOCK_NAME is a platform to control shockers (shock collars) for humans over the internet. Free and open source!" />
+</head>
+
+<body data-color-scheme="dark">
+	<div id="app"></div>
+	<!-- built files will be auto injected -->
+</body>
+<footer id="footerApp"></footer>
+</html>

public/index.html → public/index.shocklink.html

@@ -10,7 +10,7 @@
 	<meta property="og:type" content="website" />
 	<meta property="og:url" content="https://shocklink.net" />
 	<meta property="og:image" content="https://shocklink.net/static/images/shocklink-logo-only.png" />
-	<meta property="og:description" content="ShockLink.net is a platform to control shockers (shock collars) for humans over the internet. Free and open source!" />
+	<meta property="og:description" content="OpenShock is a platform to control shockers (shock collars) for humans over the internet. Free and open source!" />
 </head>
 
 <body data-color-scheme="dark">

src/Footer.vue

@@ -1,8 +1,8 @@
 <template>
-  <p class="version">ShockLink UI 1.4.0
-    <a target="_blank" :href="'https://github.com/Shock-Link/WebUI/commit/' + commitHash">{{ commitHash }}</a> | API <span
+  <p class="version">OpenShock UI 1.4.0
+    <a target="_blank" :href="'https://github.com/OpenShock/WebUI/commit/' + commitHash">{{ commitHash }}</a> | API <span
       v-html="apiVersion"></span> <a target="_blank"
-      :href="'https://github.com/Shock-Link/API/commit/' + apiCommitHash">{{ apiCommitHash }}</a> | <span>{{ targetEnv }}</span>
+      :href="'https://github.com/OpenShock/API/commit/' + apiCommitHash">{{ apiCommitHash }}</a> | <span>{{ targetEnv }}</span>
   </p>
   <p class="cred"><a href="https://github.com/OpenShock">Made by OpenShock Team</a></p>
   <p class="status" :style="'color: #' + connectionColor + ';'" v-html="$store.state.userHubState"></p>

src/globals/config/config.container.js

@@ -1,7 +1,8 @@
 const config = {
-	apiUrl: "SHOCKLINK_API_URL",
-	webUiUrl: "SHOCKLINK_WEBUI_URL",
-	shortUrl: "SHOCKLINK_SHARE_URL"
+	name: "OPENSHOCK_NAME",
+	webUiUrl: "OPENSHOCK_URL/#/", // WebUI URL is formatted like "OPENSHOCK_URL/#/"
+	apiUrl: "OPENSHOCK_API_URL/",
+	shortUrl: "OPENSHOCK_SHARE_URL" // No trailing slash since this can be _anything_.
 }
 
 global.config = config;

src/globals/config/config.development.js

@@ -1,6 +1,7 @@
 const config = {
-	apiUrl: "https://dev-api.shocklink.net/",
+	name: "ShockLink Dev",
 	webUiUrl: "https://dev.shocklink.net/#/",
+	apiUrl: "https://dev-api.shocklink.net/",
 	shortUrl: "https://shockl.ink/",
 }
 

src/globals/config/config.local.js

@@ -1,6 +1,7 @@
 const config = {
-	apiUrl: "https://localhost/",
+	name: "LocalShock",
 	webUiUrl: "https://localhost:8080/#/",
+	apiUrl: "https://localhost/",
 	shortUrl: "https://shockl.ink/"
 }
 

src/globals/config/config.production.js

@@ -1,6 +1,7 @@
 const config = {
-	apiUrl: "https://api.shocklink.net/",
+	name: "ShockLink",
 	webUiUrl: "https://shocklink.net/#/",
+	apiUrl: "https://api.shocklink.net/",
 	shortUrl: "https://shockl.ink/"
 }
 

src/views/Login/Login.vue

@@ -38,7 +38,7 @@
     </div>
     <div v-else>
       <loading-view :loading="!requestDone" :error="!successful"
-                    :successText="'<p><b>Successfully logged in!</b></p><p>Redirecting to <br><b><u>ShockLink Dashboard</u></b></p>'"
+                    :successText="'<p><b>Successfully logged in!</b></p><p>Redirecting to <br><b><u>Dashboard</u></b></p>'"
                     :errorText="errorMessage"/>
       <div class="sep-or">
         <a class="txt2" @click="resetAll">Go Back</a>

src/views/public/Home.vue

@@ -2,7 +2,7 @@
     <b-container>
         <b-row>
             <b-col align-self="center">
-                <h1>ShockLink Landing Page</h1>
+                <h1>OPENSHOCK_NAME Landing Page</h1>
             </b-col>
         </b-row>
         <b-row>

src/views/public/nav/PublicNavRoot.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="navbar first-level">
-    <a class="navbar-logo"><img src="@/assets/images/Logo.svg" alt="ShockLink Logo"/></a>
+    <a class="navbar-logo"><img src="@/assets/images/Logo.svg" alt="OpenShock Logo"/></a>
     <theme-toggle/>
     <button class="navbar-toggler" @click="mobileShow = !mobileShow" type="button"
             aria-controls="navbarSupportedContent" aria-expanded="false"
@@ -14,8 +14,8 @@
           <div class="right"/>
         </div>
         <item v-for="(item, index) in allElements" :item="item" :index="index" :key="index"/>
-        <item-link-external link="https://docs.shocklink.net"><i class="fa-solid fa-book-open-reader"></i>Wiki</item-link-external>
-        <item-link-external link="https://github.com/Shock-Link"><i class="fa-brands fa-github"></i>GitHub</item-link-external>
+        <item-link-external link="https://docs.openshock.net"><i class="fa-solid fa-book-open-reader"></i>Wiki</item-link-external>
+        <item-link-external link="https://github.com/OpenShock"><i class="fa-brands fa-github"></i>GitHub</item-link-external>
         <item-link v-if="loggedIn" link="/dashboard"><i class="fa-solid fa-right-to-bracket"></i>Dashboard</item-link>
         <item-link v-else link="/account/login"><i class="fa-solid fa-right-to-bracket"></i>Login</item-link>
       </ul>

src/views/public/proxy/ShareLinksProxy.vue

@@ -12,7 +12,7 @@
                 </b-form-group>
                 <div v-else>
                     <b-row style="margin-bottom: 10px;">
-                        <b-button variant="outline-light" @click="login">Login with ShockLink Account</b-button>
+                        <b-button variant="outline-light" @click="login">Login with OPENSHOCK_NAME Account</b-button>
                     </b-row>
                     <b-row>
                         <b-button variant="outline-light" @click="guest">Enter as Guest</b-button>

startup.sh

@@ -2,7 +2,7 @@
 
 # Variables for startup script
 SERVE_PATH=/usr/share/nginx/html
-NAME=ShockLink
+NAME=OpenShock
 
 require() {
     if [ -z "$1" ]; then
@@ -23,12 +23,14 @@ inject() {
 
     echo "[$NAME] Injecting variable: $1 = $2"
     find $SERVE_PATH -name "*.js" -exec sed -i "s|$1|$2|g" {} +
+    find $SERVE_PATH -name "*.html" -exec sed -i "s|$1|$2|g" {} +
 }
 
 # Inject our variables.
-inject SHOCKLINK_API_URL $SHOCKLINK_API_URL
-inject SHOCKLINK_WEBUI_URL $SHOCKLINK_WEBUI_URL
-inject SHOCKLINK_SHARE_URL $SHOCKLINK_SHARE_URL
+inject OPENSHOCK_NAME $OPENSHOCK_NAME
+inject OPENSHOCK_URL $OPENSHOCK_URL
+inject OPENSHOCK_API_URL $OPENSHOCK_API_URL
+inject OPENSHOCK_SHARE_URL $OPENSHOCK_SHARE_URL
 
 # Start nginx as normal.
 # If something breaks, see: https://github.com/nginxinc/docker-nginx/blob/master/mainline/debian/Dockerfile

webpack.config.js

@@ -79,7 +79,7 @@ module.exports = (env) => {
 				chunkFilename: "[name].[contenthash:8].css",
 			}),
 			new HtmlWebpackPlugin({
-				template: path.resolve(__dirname, "public", "index.html"),
+				template: path.resolve(__dirname, "public", `index.${targetEnv === 'container' ? 'container' : 'shocklink'}.html`),
 				favicon: "./public/favicon.ico",
 				inject: true
 			}),