diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c6c3a5d..d930db3 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -17,10 +17,6 @@ jobs: needs: build - strategy: - matrix: - node-version: [12.x] - steps: - uses: actions/checkout@v4 @@ -38,7 +34,7 @@ jobs: uses: softprops/action-gh-release@v1 if: startsWith(github.ref, 'refs/tags/v') with: - files: ./artifacts/codam-web-greeter.zip + files: ./artifacts/*.zip tag_name: ${{ github.ref }} name: codam-web-greeter ${{ github.ref_name }} generate_release_notes: true diff --git a/.github/workflows/webpack.yml b/.github/workflows/webpack.yml index ee03fcd..806c0c0 100644 --- a/.github/workflows/webpack.yml +++ b/.github/workflows/webpack.yml @@ -18,6 +18,8 @@ jobs: strategy: matrix: node-version: [12.x] + theme: [dark, light] + boxed: [default, boxed] steps: - uses: actions/checkout@v4 @@ -37,7 +39,7 @@ jobs: - name: Build codam-web-greeter run: | - make build + make build CLIENT_THEME=${{ matrix.theme }} CLIENT_THEME_BOXED=${{ matrix.boxed }} - name: Add dist folder to artifact working-directory: dist @@ -51,6 +53,6 @@ jobs: - name: Upload Artifact uses: actions/upload-artifact@v3 with: - name: codam-web-greeter + name: codam-web-greeter-${{ matrix.theme }}-${{ matrix.boxed }} path: codam-web-greeter.zip retention-days: 1 diff --git a/.gitignore b/.gitignore index 2210d24..9e234d2 100644 --- a/.gitignore +++ b/.gitignore @@ -140,3 +140,4 @@ server/messages.json server/configs/certs/* server/build/* static/data.json +static/greeter.css diff --git a/Makefile b/Makefile index d8a781d..83b76bb 100644 --- a/Makefile +++ b/Makefile @@ -6,46 +6,90 @@ THEME_DIR := /usr/share/web-greeter/themes # - credit: https://stackoverflow.com/a/23324703/2726733 ROOT_DIR := $(shell dirname $(realpath $(firstword $(MAKEFILE_LIST)))) +# Theme of the codam-web-greeter client +# can either be 'light' or 'dark', default is 'dark' +CLIENT_THEME := dark +# Add a background color to the form of the login/unlock screen (for better readability if your wallpaper requires this) +# if set to 'boxed' the form will have a background color +CLIENT_THEME_BOXED := + +# Detect MacOS +ifeq ($(shell uname),Darwin) + SED := sed -i '' +else + SED := sed -i +endif + +# CLIENT all: build npm-install: npm install -build: npm-install copy-files +build: static/greeter.css npm-install copy-files npm run build npm run bundle copy-files: - mkdir -p $(ROOT_DIR)/dist - cp README.md LICENSE $(ROOT_DIR)/dist - cp -r $(ROOT_DIR)/static/* $(ROOT_DIR)/dist +ifeq ($(CLIENT_THEME), light) + $(MAKE) use-light-theme +else # fallback to dark theme + $(MAKE) use-dark-theme +endif +ifeq ($(CLIENT_THEME_BOXED), boxed) + $(MAKE) use-boxed-theme +else # fallback to no boxed theme + $(MAKE) no-boxed-theme +endif + mkdir -p "$(ROOT_DIR)/dist" + cp README.md LICENSE "$(ROOT_DIR)/dist" + cp -r "$(ROOT_DIR)/static/"* "$(ROOT_DIR)/dist" install: build install -dm755 $(THEME_DIR)/$(THEME_NAME) - cp -r $(ROOT_DIR)/dist/* $(THEME_DIR)/$(THEME_NAME) - bash $(ROOT_DIR)/systemd/install.sh + cp -r "$(ROOT_DIR)/dist"/* "$(THEME_DIR)/$(THEME_NAME)" + bash "$(ROOT_DIR)/systemd/install.sh" @echo "Update your /etc/lightdm/web-greeter.yml config file manually to enable the Codam theme" uninstall: - rm -r $(THEME_DIR)/$(THEME_NAME) + rm -r "$(THEME_DIR)/$(THEME_NAME)" [ -f /usr/share/codam/uninstall-codam-web-greeter-service.sh ] && bash /usr/share/codam/uninstall-codam-web-greeter-service.sh @echo "Update your /etc/lightdm/web-greeter.yml config file manually to disable the Codam theme if needed" +re: + rm -f "$(ROOT_DIR)/static/greeter.css" + rm -rf "$(ROOT_DIR)/build" + rm -rf "$(ROOT_DIR)/dist" + make build + +# CLIENT THEMING +static/greeter.css: + echo "@import 'css/styles.css';" > "$(ROOT_DIR)/static/greeter.css" + echo "@import 'css/dark.css';" >> "$(ROOT_DIR)/static/greeter.css" + +use-light-theme: + $(SED) 's/dark.css/light.css/' "$(ROOT_DIR)/static/greeter.css" + +use-dark-theme: + $(SED) 's/light.css/dark.css/' "$(ROOT_DIR)/static/greeter.css" + +use-boxed-theme: + echo "@import 'css/boxed.css';" >> "$(ROOT_DIR)/static/greeter.css" + +no-boxed-theme: + $(SED) '/boxed.css/d' "$(ROOT_DIR)/static/greeter.css" + +# SERVER update_server_version: - bash $(ROOT_DIR)/server/match_versions.sh + bash "$(ROOT_DIR)/server/match_versions.sh" server: update_server_version - [ -f $(ROOT_DIR)/server/messages.json ] || echo "{}" > $(ROOT_DIR)/server/messages.json + [ -f $(ROOT_DIR)/server/messages.json ] || echo '{}' > "$(ROOT_DIR)/server/messages.json" cd $(ROOT_DIR)/server - docker compose -f $(ROOT_DIR)/server/docker-compose.yaml up -d + docker compose -f "$(ROOT_DIR)/server/docker-compose.yaml" up -d server-stop: cd $(ROOT_DIR)/server - docker compose -f $(ROOT_DIR)/server/docker-compose.yaml down - -re: - rm -rf $(ROOT_DIR)/build - rm -rf $(ROOT_DIR)/dist - make build + docker compose -f "$(ROOT_DIR)/server/docker-compose.yaml" down -.PHONY: all npm-install build copy-files install uninstall server update_server_version re +.PHONY: all npm-install build copy-files install uninstall re use-light-theme use-boxed-theme server update_server_version server-stop diff --git a/README.md b/README.md index ac38710..810e810 100644 --- a/README.md +++ b/README.md @@ -66,9 +66,28 @@ sudo systemctl restart lightdm ``` -## Troubleshooting +## Development + +### Client +Use the provided Makefile to build the theme: +```bash +make +``` + +You can optionally build the theme in light mode: +```bash +make CLIENT_THEME=light +``` + +Or in light mode with a boxed form to make the login/unlock form more readable: +```bash +make CLIENT_THEME=light CLIENT_THEME_BOXED=boxed +``` + + +#### Debugging the client +You can then open the *static/index.html* file in your browser to do some basic editing, but for most things you'll want to install the greeter on your system and run it in debug mode. -### How to debug Add the following line to `/usr/share/xsessions/ubuntu.desktop`: ```conf X-LightDM-Allow-Greeter=true @@ -83,6 +102,21 @@ You can then open the Developer Tools sidebar from the greeter's menu and view t Do not forget to remove the line from `/usr/share/xsessions/ubuntu.desktop` after you're done debugging - it's a security risk to allow the greeter to be run by regular users. + +### Server +Use the provided Makefile to build the server or use the docker-compose file in the *server/* directory directly: +```bash +# Makefile method +make server + +# Docker-compose method +cd server +docker compose up +``` + + +## Troubleshooting + ### Locking the screen doesn't work at all Make sure the LightDM config allows user-switching. Add the following line to */etc/lightdm/lightdm.conf*: ```conf diff --git a/static/css/boxed.css b/static/css/boxed.css new file mode 100644 index 0000000..606036a --- /dev/null +++ b/static/css/boxed.css @@ -0,0 +1,4 @@ +form { + background-color: var(--bg-color-darken-strong) !important; + border-radius: var(--border-radius) !important; +} diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..271e2a5 --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,38 @@ +:root { + /* Codam colors (do not change) */ + --color-yellow: #F2911A; + --color-orange: #EA5C28; + --color-red: #E52A2D; + --color-purple: #B73188; + --color-blue: #3AA2DB; + --color-black: #000000; + --color-white: #FFFFFF; + + /* Theme colors */ + --color-primary: var(--color-blue); + + /* Text colors */ + --color-text-primary: #EDEDED; + --color-text-secondary: #A6A6A6; + --color-text-tertiary: #6E6E6E; + --color-text-error: var(--color-red); + --color-text-success: var(--color-blue); + --color-text-warning: var(--color-yellow); + + /* Backgrounds */ + --color-bg: var(--color-black); + --bg-color-darken: rgba(0, 0, 0, 0.2); + --bg-color-darken-strong: rgba(0, 0, 0, 0.65); + --bg-color-lighten: rgba(255, 255, 255, 0.2); + --bg-color-disabled-button: rgba(16, 16, 16, 0.3); + --text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + + /* Events */ + --event-color-default: #00BABC; + --event-color-exam: #ED8179; + --event-color-association: #7E93D4; + --event-color-standup: #8E9C9C; /* Bocal Stand-up */ + --event-color-workshop: #39D88F; + --event-color-rush: #F2911A; + --event-color: var(--event-color-default); /* fallback */ +} diff --git a/static/css/light.css b/static/css/light.css new file mode 100644 index 0000000..9cec99d --- /dev/null +++ b/static/css/light.css @@ -0,0 +1,38 @@ +:root { + /* Codam colors (do not change) */ + --color-yellow: #F2911A; + --color-orange: #EA5C28; + --color-red: #E52A2D; + --color-purple: #B73188; + --color-blue: #3AA2DB; + --color-black: #000000; + --color-white: #FFFFFF; + + /* Theme colors */ + --color-primary: var(--color-blue); + + /* Text colors */ + --color-text-primary: #121212; + --color-text-secondary: #595959; + --color-text-tertiary: #919191; + --color-text-error: var(--color-red); + --color-text-success: var(--color-blue); + --color-text-warning: var(--color-yellow); + + /* Backgrounds */ + --color-bg: var(--color-white); + --bg-color-darken: rgba(255, 255, 255, 0.2); + --bg-color-darken-strong: rgba(255, 255, 255, 0.65); + --bg-color-lighten: rgba(0, 0, 0, 0.2); + --bg-color-disabled-button: rgba(16, 16, 16, 0.2); + --text-shadow: 0 0 5px rgba(255, 255, 255, 0.33); + + /* Events */ + --event-color-default: #00BABC; + --event-color-exam: #ED8179; + --event-color-association: #7E93D4; + --event-color-standup: #8E9C9C; /* Bocal Stand-up */ + --event-color-workshop: #39D88F; + --event-color-rush: #F2911A; + --event-color: var(--event-color-default); /* fallback */ +} diff --git a/static/styles.css b/static/css/styles.css similarity index 91% rename from static/styles.css rename to static/css/styles.css index 32205af..8264688 100644 --- a/static/styles.css +++ b/static/css/styles.css @@ -1,43 +1,10 @@ :root { - /* Codam colors (do not change) */ - --color-yellow: #F2911A; - --color-orange: #EA5C28; - --color-red: #E52A2D; - --color-purple: #B73188; - --color-blue: #3AA2DB; - --color-black: #000000; - - /* Theme colors */ - --color-primary: var(--color-blue); - - /* Text colors */ - --color-text-primary: #EDEDED; - --color-text-secondary: #A6A6A6; - --color-text-tertiary: #6E6E6E; - --color-text-error: var(--color-red); - --color-text-success: var(--color-blue); - --color-text-warning: var(--color-yellow); - - /* Backgrounds */ - --color-bg: var(--color-black); - --default-bg-img: url('assets/default-wallpaper.png'); - --bg-color-darken: rgba(0, 0, 0, 0.2); - --bg-color-darken-strong: rgba(0, 0, 0, 0.65); + /* Colors can be found in css/dark.css and css/light.css */ + + /* Generic settings */ + --default-bg-img: url('../assets/default-wallpaper.png'); --blur-bg-filter: blur(5px); --blur-bg-filter-lock-screen: blur(25px); - --bg-color-lighten: rgba(255, 255, 255, 0.2); - --text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); - - /* Events */ - --event-color-default: #00BABC; - --event-color-exam: #ED8179; - --event-color-association: #7E93D4; - --event-color-standup: #8E9C9C; /* Bocal Stand-up */ - --event-color-workshop: #39D88F; - --event-color-rush: #F2911A; - --event-color: var(--event-color-default); /* fallback */ - - /* Others */ --border-radius: 4px; --padding: 8px; --header-footer-height: 31px; @@ -306,7 +273,7 @@ form button:not(:disabled):focus { form button:disabled { cursor: default; - color: rgba(16, 16, 16, 0.3); + color: var(--bg-color-disabled-button); text-shadow: none; } @@ -314,9 +281,13 @@ form button:not(:disabled):active { transform: scale(0.95); } +form#lock-form { + margin-top: -50%; +} + #active-user-session-avatar { display: block; - margin: -50% auto calc(var(--padding) * 6) auto; + margin: 0 auto calc(var(--padding) * 6) auto; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; diff --git a/static/index.html b/static/index.html index 335b2d8..9c2e74c 100644 --- a/static/index.html +++ b/static/index.html @@ -2,7 +2,11 @@ - + + + + + Codam Theme for nody-greeter