remove jquery dependency

Corporate Identity, Slack OAuth, etc.

.gitea/workflows/build-push-image.yml

@@ -0,0 +1,53 @@
+name: release-tag
+
+on:
+  push
+
+jobs:
+  release-image:
+    runs-on: ubuntu-latest
+    container:
+      image: catthehacker/ubuntu:act-latest
+    env:
+      DOCKER_ORG: matthias
+      DOCKER_LATEST: latest
+      RUNNER_TOOL_CACHE: /toolcache
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker BuildX
+        uses: docker/setup-buildx-action@v2
+        with: # replace it with your local IP
+          config-inline: |
+            [registry."git.matsewe.de"] 
+              http = true
+              insecure = true            
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          registry: git.matsewe.de # replace it with your local IP
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          
+      - name: Get Meta
+        id: meta
+        run: |
+          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
+          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                
+
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: |
+            linux/amd64                 
+          push: true
+          tags: | # replace it with your local IP and tags
+            git.matsewe.de/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
+            git.matsewe.de/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ env.DOCKER_LATEST }}

.gitignore

@@ -1,3 +1,5 @@
 __pycache__
 .venv
 .vscode
+.env
+data

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.11
+
+WORKDIR /code
+
+COPY ./requirements.txt /tmp/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /tmp/requirements.txt
+
+COPY ./app /code/app
+COPY ./static /code/static
+COPY ./templates /code/templates
+
+RUN echo "first_run" > "/tmp/first_run"
+
+CMD ["fastapi", "run", "app/main.py", "--proxy-headers", "--port", "80"]

Dockerfile-dev

@@ -0,0 +1,11 @@
+FROM python:3.11
+
+WORKDIR /code
+
+COPY ./requirements.txt /tmp/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /tmp/requirements.txt
+
+RUN echo "first_run" > "/tmp/first_run"
+
+CMD ["fastapi", "run", "app/main.py", "--proxy-headers", "--port", "80", "--reload"]

app/main.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI, Request, Depends, Cookie, Security
+from fastapi import FastAPI, Request, Depends, Security
 from app.routers import admin, songs, session
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import HTMLResponse
@@ -6,26 +6,24 @@ from fastapi.templating import Jinja2Templates
 from app.database import engine, Base, get_db, SessionLocal
 from app.crud import get_songs_and_vote_for_session, get_setting
 from sqlalchemy.orm import Session
-from typing import Annotated
 from app.schemas import Song
-import json
 import os
 import asyncio
-from jose import JWTError, jwt
 from app.security import get_current_user
 
 from starlette.middleware import Middleware
 
-from starlette_context import context, plugins
+from starlette_context import plugins
 from starlette_context.middleware import RawContextMiddleware
 
-if os.path.isfile("first_run") and (os.environ.get("RELOAD_ON_FIRST_RUN").lower() == "true"):
+Base.metadata.create_all(engine)
+
+if os.path.isfile("/tmp/first_run") and (os.environ.get("RELOAD_ON_FIRST_RUN", "").lower() == "true"):
     print("First run ... load data")
     with SessionLocal() as db:
         asyncio.run(admin.create_upload_file(include_non_singable=True, db=db))
-    os.remove("first_run")
+    os.remove("/tmp/first_run")
 
-# Base.metadata.create_all(engine)
 
 middleware = [
     Middleware(

app/security.py

@@ -1,8 +1,6 @@
-from typing import Annotated
-
-from fastapi import  HTTPException, Cookie, status
+from fastapi import  HTTPException, status, Request
 from fastapi.security import SecurityScopes
-from jose import JWTError, jwt
+from jose import JWTError
 from pydantic import ValidationError
 import os
 
@@ -10,11 +8,8 @@ import os
 # to get a string like this run:
 # openssl rand -hex 32
 
-ALGORITHM = "HS512"
-SECRET_KEY = os.environ['SECRET_KEY']
-
 scopes_db = {
-    os.environ['ADMIN_EMAIL'] : ["admin"]
+    os.environ.get('ADMIN_EMAIL', "") : ["admin"]
 }
 
 credentials_exception = HTTPException(
@@ -23,18 +18,21 @@ credentials_exception = HTTPException(
             )
 
 async def get_current_user(
-    security_scopes: SecurityScopes, access_token: Annotated[str, Cookie()] = ""
-):
+    security_scopes: SecurityScopes, request: Request
+    ):
+
+    if os.environ.get("NO_LOGIN", "").lower() == "true":
+        return {"sub": "test"}
+    
     try:
-        payload = jwt.decode(access_token, SECRET_KEY, algorithms=[ALGORITHM])
-        username: str = payload.get("sub")  # type: ignore
+        username: str = request.headers.get("x-auth-request-user")  # type: ignore
         if username is None:
             raise credentials_exception
-        email: str = payload.get("email")  # type: ignore
+        email: str = request.headers.get("x-auth-request-email")  # type: ignore
     except (JWTError, ValidationError):
         raise credentials_exception
-    scopes = scopes_db.get(email)
+    scopes = scopes_db.get(email, [])
     for scope in security_scopes.scopes:
         if scope not in scopes:
             raise credentials_exception
-    return payload | {"internal_scopes" : scopes}
+    return {"sub" : username, "email" : email, "internal_scopes" : scopes}

docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.7"
+
+services:
+  liederwahl-dev:
+    build: 
+      context: .
+      dockerfile: Dockerfile-dev
+    container_name: liederwahl-dev
+    restart: unless-stopped
+    volumes:
+      - .:/code
+      - liederwahl-dev:/data
+    ports: 
+      - 80:80
+    environment:
+      - LIST_URL=${LIST_URL}
+      - NO_LOGIN=true
+      - RELOAD_ON_FIRST_RUN=true
+
+volumes:
+  liederwahl-dev:

static/site.css

@@ -1,8 +1,55 @@
+:root {
+    --color-white-100: white;
+    --color-white-90: #e6e6e6;
+    --color-white-80: #cccccc;
+    --color-white-70: #b3b3b3;
+    --color-white-10: #191919;
+    --color-choriosity-red: #be0519;
+    --color-choriosity-red--medium: #990514;
+    --color-choriosity-red--darker: #66030d;
+    --color-choriosity-red--rgba: 190, 5, 25;
+    --color-choriosity-red--light: #faeaea;
+    --color-background: #fffffa;
+    --color-tap: var(--color-choriosity-red--darker);
+    --color-callout-bg: var(--color-background);
+  }
+
+
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Regular.woff2) format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Italic.woff2) format("woff2");
+    font-weight: 400;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-Medium.woff2) format("woff2");
+    font-weight: 500;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Fira Sans';
+    src: url(FiraSans-SemiBold.woff2) format("woff2");
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  
+
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: sans-serif;
+    font-family: Fira Sans, Helvetica, Arial, sans-serif;
 }
 
 .vote-buttons,
@@ -31,6 +78,7 @@
     padding: 0.3em;
     margin-bottom: 0.7em;
     display: inline-block;
+    font-size: 1.25rem;
 }
 
 .clear {
@@ -38,13 +86,13 @@
 }
 
 .song {
-    background-color: #f0f0f0;
+    background-color: var(--color-choriosity-red--light);
     padding: 0.4em;
     border-radius: 0.5em;
     width: 30em;
-    font-family: sans-serif;
     margin-bottom: 1rem;
     margin-left: 0.5em;
+    float: left;
 }
 
 
@@ -225,21 +273,28 @@
 }
 
 h1 {
-    font-family: sans-serif;
     padding: 0.1em;
     padding-left: 0.2em;
     margin-bottom: 1rem;
-    font-size: 1.5em;
+    font-size: 1.25rem;
+    background-color: var(--color-choriosity-red);
+    color: white;
+    /*border-bottom: 0.3rem solid var(--color-choriosity-red--light);*/
+    clear: both;
+}
+
+#songs h1 .color {
+    border: 0.2rem solid color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, white);
+    background-color: hsl(calc(var(--hue) * 360), 100%, 40%);
+    border-radius: 0.5em;
+    margin-right: 1em;
 }
 
 #songs h1 {
-    background-color: color-mix(in srgb, hsl(calc(var(--hue) * 360), 100%, 40%) 50%, transparent);
-    border-bottom: 0.3rem solid hsl(calc(var(--hue) * 360), 100%, 40%);
-}
-
-body>h1 {
-    background-color: color-mix(in srgb, hsl(0, 0%, 40%) 50%, transparent);
-    border-bottom: 0.3rem solid hsl(0, 0%, 40%);
+    border-left: 0.3em solid white;
+    box-shadow: -1em 0px 0px 0px hsl(calc(var(--hue) * 360), 100%, 40%);
+    margin-left: 1em;
+    padding-left: 0.3em;
 }
 
 #yt-player,
@@ -279,3 +334,18 @@ body>h1 {
     transform: translate(-50%, -50%);
     width: 1.5em;
 }
+
+#title {
+    margin-top: 1em;
+    font-size: 2rem;
+    /*line-height: 2rem;*/
+}
+
+#title-logo {
+    margin-top: -0.7em;
+    margin-bottom: -0.8em;
+    vertical-align: middle;
+    height: 3em;
+    filter: drop-shadow(0 0 1px var(--color-choriosity-red--medium));
+    margin-right: 1em;
+}

templates/voting.html

@@ -19,6 +19,7 @@
             border-radius: 0.2em;
             padding: 0.1em;
         }
+
         .not_singable {
             background-color: color-mix(in srgb, #e1412f 30%, #f0f0f0);
         }
@@ -26,37 +27,9 @@
     {% endif %}
 
     <script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript">
         const session_id = "{{ session_id }}";
 
-        function activate_session() {
-            $.ajax({
-                url: "/session/" + session_id,
-                method: "PUT"
-            })
-        }
-
-        function deactivate_session() {
-            $.ajax({
-                url: "/session/" + session_id,
-                method: "DELETE"
-            })
-        }
-
-        $(window).on("load", activate_session);
-
-        $(window).on("beforeunload", deactivate_session);
-        $(window).on("unload", deactivate_session);
-        $(window).on("pagehide", deactivate_session);
-        $(document).on('visibilitychange', function () {
-            if (document.visibilityState == 'hidden') {
-                deactivate_session();
-            } else {
-                activate_session()
-            }
-        });
-
         var spotify_embed_controller;
 
         window.onSpotifyIframeApiReady = (IFrameAPI) => {
@@ -74,12 +47,15 @@
         var is_playing = -1;
 
         function stop() {
-            $("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
+            if (is_playing !== -1) {
+                document.querySelector("#song-" + is_playing + " .cover-container .overlay img").setAttribute("src", "/static/play.svg");
+            }
+
+            document.querySelector("#yt-player").style.display = "none";
+            document.querySelector("#spotify-player").style.display = "none";
+            document.querySelector("#close-player").style.display = "none";
+            document.querySelector("#yt-player").innerHTML = "";
 
-            $("#yt-player").css("display", "none");
-            $("#spotify-player").css("display", "none");
-            $("#close-player").css("display", "none");
-            $("#yt-player").html("");
             spotify_embed_controller.pause();
             is_playing = -1;
         }
@@ -92,12 +68,13 @@
 
                 is_playing = song_id;
 
-                $("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
+                document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
+
+                document.querySelector("#yt-player").style.display = "flex";
+                document.querySelector("#close-player").style.display = "block";
 
-                $("#yt-player").css("display", "flex");
-                $("#close-player").css("display", "block");
                 iframe_code = '<iframe src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" title="" width="640" height="360" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  allowFullScreen></iframe>';
-                $("#yt-player").html(iframe_code);
+                document.querySelector("#yt-player").innerHTML = iframe_code;
             }
         }
 
@@ -109,10 +86,10 @@
 
                 is_playing = song_id;
 
-                $("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
+                document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
 
-                $("#spotify-player").css("display", "flex");
-                $("#close-player").css("display", "block");
+                document.querySelector("#spotify-player").style.display = "flex";
+                document.querySelector("#close-player").style.display = "block";
                 spotify_embed_controller.loadUri("spotify:track:" + spfy_id);
                 spotify_embed_controller.play();
             }
@@ -123,51 +100,62 @@
             window.open(url, '_blank').focus();
         }
 
-        function vote(song_id, vote) {
-            no_button = $("#song-" + song_id).find(".button-no")
-            yes_button = $("#song-" + song_id).find(".button-yes")
-            neutral_button = $("#song-" + song_id).find(".button-neutral")
+        async function vote(song_id, vote) {
 
-            no_button.removeClass("selected")
-            yes_button.removeClass("selected")
-            neutral_button.removeClass("selected")
+            response = await fetch(
+                "/songs/" + song_id + "/vote?session_id=" + encodeURIComponent(session_id) + "&vote=" + vote, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (response.ok) {
+                no_button = document.querySelector("#song-" + song_id + " .button-no");
+                yes_button = document.querySelector("#song-" + song_id + " .button-yes");
+                neutral_button = document.querySelector("#song-" + song_id + " .button-neutral");
+
+                no_button.classList.remove("selected")
+                yes_button.classList.remove("selected")
+                neutral_button.classList.remove("selected")
 
                 switch (vote) {
                     case 0:
-                    neutral_button.addClass("selected")
+                        neutral_button.classList.add("selected")
                         {% if veto_mode %}
-                    $("#song-" + song_id).removeClass("not_singable")
+                        document.querySelector("#song-" + song_id).classList.remove("not_singable")
                         {% endif %}
                         break;
                     case 1:
-                    yes_button.addClass("selected")
+                        yes_button.classList.add("selected")
                         {% if veto_mode %}
-                    $("#song-" + song_id).removeClass("not_singable")
+                        document.querySelector("#song-" + song_id).classList.remove("not_singable")
                         {% endif %}
                         break;
                     case -1:
-                    no_button.addClass("selected")
+                        no_button.classList.add("selected")
                         {% if veto_mode %}
-                    $("#song-" + song_id).addClass("not_singable")
+                        document.querySelector("#song-" + song_id).classList.add("not_singable")
                         {% endif %}
                         break;
                     default:
                         break;
                 }
 
-            $.ajax({
-                url: "/songs/" + song_id + "/vote?" + $.param({ session_id: session_id, vote: vote }),
-                method: "POST"
-            })
+            }
         }
 
         {% if veto_mode %}
-        function updateComment(song_id, el) {
+        async function updateComment(song_id, el) {
             comment = el.value
-            $.ajax({
-                url: "/songs/" + song_id + "/comment?" + $.param({ session_id: session_id, comment: comment }),
-                method: "POST"
-            })
+
+            response = await fetch(
+                "/songs/" + song_id + "/comment?session_id=" + encodeURIComponent(session_id) + "&comment=" + encodeURIComponent(comment), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
         }
         {% endif %}
     </script>
@@ -176,11 +164,14 @@
 <body>
     {% if veto_mode %}
     <h1>Vorschau Modus</h1>
-    <div class="text">Du kannst ungeeignete Vorschläge durch eine Nein-Stimme markieren und Kommentare zu allen Liedern abgeben.
+    <div class="text">Du kannst ungeeignete Vorschläge durch eine Nein-Stimme markieren und Kommentare zu allen Liedern
+        abgeben.
     </div>
     {% else %}
-    <h1>Hallo :)</h1>
-    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.
+    <h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl
+    </h1>
+    <div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen. Mit
+        einem Klick auf das Thumbnail kannst du das Lied abspielen.
     </div>
     {% endif %}
     <div id="songs">
@@ -222,7 +213,8 @@
             {% if veto_mode %}
             <input type="text" class="comment"
                 value="{% if song.vote_comment %}{{ song.vote_comment }}{% else %}{% endif %}"
-                placeholder="{% if song.comment %}{{ song.comment }}{% else %}Kommentar{% endif %}" onchange="updateComment({{ song.id }}, this);">
+                placeholder="{% if song.comment %}{{ song.comment }}{% else %}Kommentar{% endif %}"
+                onchange="updateComment({{ song.id }}, this);">
             {% endif %}
         </div>
         {% endfor %}