Update Screenshots and README

Dockerfile

@@ -33,15 +33,15 @@ COPY --chown=app:app --from=builder ${WORKDIR} .
 # General variables
 ENV TZ="UTC"
 ENV COLOR="blue-grey"
-ENV HS_SERVER="http://localhost/"
+ENV HS_SERVER=http://localhost/
 ENV KEY=""
 ENV SCRIPT_NAME=/
-ENV DOMAIN_NAME=https://localhost
+ENV DOMAIN_NAME=http://localhost
 ENV AUTH_TYPE=""
 
 # BasicAuth variables
-ENV BASIC_AUTH_USER="user"
-ENV BASIC_AUTH_PASS="pass"
+ENV BASIC_AUTH_USER=""
+ENV BASIC_AUTH_PASS=""
 
 # Flask OIDC Variables
 ENV OIDC_AUTH_URL=https://localhost

README.md

@@ -18,20 +18,34 @@ Allows you to do the following:
     * PreAuth key associated with the machine
     * Enable / disable routes and exit nodes
     * Add and delete machine tags
-7.  Basic authentication (See Docker Compose changes below)
+7.  Basic and OIDC Authentication
+    * OIDC Authentication tested with Authelia
+8.  Change your color theme! See MaterializeCSS Documentation for Colors for examples.
 
 ---
 
 # Installation:
 ## Docker Compose changes:
-1.  Change the following variables in docker-compose.yml:
-    1.  TZ - Change to your timezone.  Example: Asia/Tokyo
-    2.  HS_SERVER - Change to your headscale's URL
-    3.  BASE_PATH - This will be the path your server is served on.  Because the Windows Tailscale GUI expects <HS_SERVER/admin>, I usually put this as "/admin"
-    4.  KEY - Your encryption key to store your headscale API key on disk.  Generate a new one with "openssl rand -base64 32".  Do not forget the quotations around the key when entering.
-    5.  AUTH_TYPE - Set to either "Basic" or "OIDC" for password authentication
-    6.  AUTH_USER - Username for Basic auth   Can be removed if AUTH_TYPE is not "Basic"
-    7.  AUTH_PASS - Password for Basic auth.  Can be removed if AUTH_TYPE is not "Basic"
+1.  Change the following variables in ![docker-compose.yml](docker-compose.yml) (default values are shown):
+```
+- TZ=Asia/Tokyo                          # Change to your current timezone
+# Use just the base color, ie "red" and not "red darken-3"
+- COLOR=red                              # See MaterializeCSS Docs ![here](https://materializecss.com/color.html) for more colors.
+- HS_SERVER=http://localhost      # Reachable endpoint for your Headscale server
+- DOMAIN_NAME=http://localhost    # The base domain name for this container.
+- SCRIPT_NAME=/                   # This is your applications base path (wsgi requires the name "SCRIPT_NAME")
+- KEY=""                          # Generate with "openssl rand -base64 32" - used to encrypt your key on disk.
+- AUTH_TYPE=oidc                  # AUTH_TYPE is either Basic or OIDC.  Empty for no authentication
+
+# ENV for Basic Auth (Used only if AUTH_TYPE is "Basic").  Can be omitted if you aren't using Basic Auth
+- BASIC_AUTH_USER=SomeUser        # Used for basic auth
+- BASIC_AUTH_PASS=SomeSecretPass  # Used for basic auth
+
+# ENV for OIDC (Used only if AUTH_TYPE is "OIDC").  Can be omitted if you aren't using OIDC
+- OIDC_AUTH_URL=https://auth.$DOMAIN/.well-known/openid-configuration # URL for your OIDC issuer's well-known endpoint
+- OIDC_CLIENT_ID=Headscale-WebUI    # Your OIDC Issuer's Client ID for Headscale-WebUI
+- OIDC_CLIENT_SECRET=secret  # Your OIDC Issuer's Secret Key for Headscale-WebUI
+```
 2. You will also need to change the volumes:
     1.  /data - Where your encryption key will reside.  Can be anywhere writable by UID 1000
     2.  /etc/headscale/ - This is your Headscale configuration file.
@@ -69,16 +83,28 @@ proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
     auth_basic_user_file /etc/nginx/htpasswd;
 }
 ```
+* Remove auth_basic if you are using the built-in OIDC or BasicAuth
 
 ---
 # Screenshots:
 Overview Page:
-![Overview](screenshots/overview.png)
+![Overview](screenshots/oidc_overview.png)
 Users Page:
 ![Users](screenshots/users.png)
-New Machine Modal:
-![Add a new machine](screenshots/add-machine.png)
+Machine Information:
+![Add a new machine](screenshots/machines_expanded.png)
 Machines Page:
 ![Machine Details](screenshots/machines.png)
 Settings Page showing an API Key Test:
 ![API Key Test](screenshots/settings.png)
+
+---
+# Tech used:
+* Python - ![Link](https://www.python.org/)
+* Poetry - ![Link](https://python-poetry.org/)
+* MaterializeCSS - ![Link](https://github.com/Dogfalo/materialize)
+* jQuery - ![Link](https://jquery.com/)
+
+For Python libraries, see ![pyproject.toml](pyproject.toml)
+
+If you use this project, please reach out!  It keeps me motivated!  Thank you!

docker-compose.yml

@@ -4,14 +4,20 @@ services:
     image: ghcr.io/ifargle/headscale-webui:latest
     container_name: headscale-webui
     environment:
-      - TZ=UTC                                 # Timezone
-      - HS_SERVER=localhost                    # Set this to your Headscale server's URL.  It will need to access /api/ on Headscale.
+      - TZ=Asia/Tokyo
+      - COLOR=red                              # Use the base colors (ie, no darken-3, etc) - 
+      - HS_SERVER=https://headscale.$DOMAIN    # Reachable endpoint for your Headscale server
+      - DOMAIN_NAME=https://headscale.$DOMAIN  # The base domain name for this container.
       - SCRIPT_NAME=/admin                     # This is your applications base path (wsgi requires the name "SCRIPT_NAME")
-      - KEY="YourKeyBetweenQuotes"             # Generate with "openssl rand -base64 32"
-      - AUTH_TYPE=Basic                        # AUTH_TYPE is either "Basic" or "OIDC" - Removing this will disable authentication
-      - BASIC_AUTH_USER=user                   # Used for basic auth - Can be omitted if not using Basic Auth  
-      - BASIC_AUTH_PASS=pass                   # Used for basic auth - Can be omitted if not using Basic Auth
-      # ENV for OIDC (Used only if AUTH_TYPE is "OIDC")
+      - KEY="YourKeyBetweenQuotes"             # Generate with "openssl rand -base64 32" - used to encrypt your key on disk.
+      - AUTH_TYPE=oidc                         # AUTH_TYPE is either Basic or OIDC.  Empty for no authentication
+      # ENV for Basic Auth (Used only if AUTH_TYPE is "Basic").  Can be omitted if you aren't using Basic Auth
+      - BASIC_AUTH_USER=user                 # Used for basic auth
+      - BASIC_AUTH_PASS=pass                 # Used for basic auth
+      # ENV for OIDC (Used only if AUTH_TYPE is "OIDC").  Can be omitted if you aren't using OIDC
+      - OIDC_AUTH_URL=https://auth.$DOMAIN/.well-known/openid-configuration # URL for your OIDC issuer's well-known endpoint
+      - OIDC_CLIENT_ID=headscale-webui     # Your OIDC Issuer's Client ID for Headscale-WebUI
+      - OIDC_CLIENT_SECRET=YourSecretHere  # Your OIDC Issuer's Secret Key for Headscale-WebUI
     volumes:
       - ./volume:/data                         # Headscale-WebUI's storage.  Make sure ./volume is readable by UID 1000 (chown 1000:1000 ./volume)
       - ./headscale/config/:/etc/headscale/:ro # Headscale's config storage location.  Used to read your Headscale config.