wip

.github/workflows/deploy-docker-to-ont.yml

@@ -0,0 +1,135 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches:
+      - feature/**
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Code ophalen
+      - uses: actions/checkout@v4
+
+      # Stap 2: Versienummer ophalen uit package.json en opslaan als artifact
+      - name: Extract Angular version
+        run: |
+          echo "$(cat package.json | jq -r '.version')" > version.txt
+      - name: Save version as artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: version
+          path: version.txt
+      - name: Notify Mattermost via Bot
+        env:
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "wgcfotx7x3bipcwchzn45tuxxr",
+                "message": "🚀 *Build gestart!* Een nieuwe build is begonnen voor de repository *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+
+      # Stap 3: Inloggen bij Docker Hub
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Stap 4: Docker-image bouwen en taggen met Angular-versie
+      - name: Build the Docker image
+        run: |
+          VERSION=$(cat version.txt)
+          docker buildx build . --file Dockerfile-tst --tag veenm/paypoint:$VERSION-SNAPSHOT --platform linux/amd64
+
+      # Stap 5: Docker-image pushen naar Docker Hub (huidige versie tag)
+      - name: Push the Docker image (version-snapshot)
+        run: |
+          VERSION=$(cat version.txt)
+          docker push veenm/paypoint:$VERSION-SNAPSHOT
+
+  deploy:
+    needs: build-and-push
+    runs-on: ubuntu-latest
+
+    steps:
+      # Stap 1: Artifact ophalen
+      - name: Download version artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: version
+
+      # Stap 2: Lees versie uit het artifact
+      - name: Read version
+        id: read_version
+        run: echo "VERSION=$(cat version.txt)" >> $GITHUB_ENV
+
+      # Stap 3: Maak verbinding via SSH naar de Alpine server en update de container
+      - name: SSH into Alpine and update Docker container
+        uses: appleboy/ssh-action@v0.1.10
+        with:
+          host: ${{ secrets.ALPINE_HOST_ONT }}
+          username: root
+          key: ${{ secrets.ALPINE_SSH_KEY }}
+          script: |
+            VERSION=${{ env.VERSION }}
+            echo "Gekozen versie: $VERSION-SNAPSHOT"
+
+            # Stop en verwijder de huidige container
+            docker stop paypoint-frontend || true
+            docker rm paypoint-frontend || true
+
+            # Haal de nieuwste image binnen
+            docker pull veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Start een nieuwe container
+            docker run -d --name paypoint-frontend --restart unless-stopped -p 15000:80 veenm/paypoint:$VERSION-SNAPSHOT
+
+            # Opruimen oude images
+            docker image prune -f
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Notify Mattermost via Bot
+        env:
+          VERSION: ${{ env.VERSION }}
+        run: |
+          COMMITS=$(git log $(git describe --tags --abbrev=0)..HEAD --pretty=format:"- %s")
+          curl --fail -X POST -H "Authorization: Bearer tspcwdn5rbdk8kkmnex6h1nfha" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "wgcfotx7x3bipcwchzn45tuxxr",
+                "message": "✅ *Build is geslaagd!* Versie '"$VERSION"'-SNAPSHOT staat klaar op ontwikkel."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts
+
+  notify-failure:
+    needs: [ build-and-push, deploy ]
+    runs-on: ubuntu-latest
+    if: failure()
+
+    steps:
+      - name: Notify Mattermost via Bot on failure
+        env:
+          MATTERMOST_BOT_TOKEN: ${{ secrets.MATTERMOST_BOT_TOKEN }}
+          REPO: ${{ gitea.repository }}
+          BRANCH: ${{ gitea.ref }}
+        run: |
+          curl --fail -X POST -H "Authorization: Bearer $MATTERMOST_BOT_TOKEN" \
+          -H 'Content-Type: application/json' \
+          -d '{
+                "channel_id": "9a8obynkd7rctk6qf8rfe6oppy",
+                "message": "@all ❌ *Build gefaald!* De pipeline is stukgelopen voor *'"$REPO"'* op branch *'"$BRANCH"'*."
+              }' \
+          https://mattermost.melvanveen.nl/api/v4/posts

.github/workflows/deploy-docker.yml

@@ -4,8 +4,6 @@ on:
   push:
     branches:
       - main
-    tags:
-      - "docker-build-*"
 
 jobs:
   build-and-push:

src/app/pages/login/login.component.scss

@@ -1,53 +1,109 @@
+/* Algemene layout */
+.container {
+  max-width: 100%;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: repeating-conic-gradient(
+      from 30deg,
+      #0000 0 120deg,
+      #3c3c3c 0 180deg
+  ) calc(0.5 * 200px) calc(0.5 * 200px * 0.577),
+  repeating-conic-gradient(
+      from 30deg,
+      #1d1d1d 0 60deg,
+      #4e4f51 0 120deg,
+      #3c3c3c 0 180deg
+  );
+  background-size: 200px calc(200px * 0.577);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+/* Centraal form container */
 .center-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  /* Adjust as needed */
-}
-
-tui-error {
-  text-align: center;
-}
-
-p{
-  text-align: center;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 28px;
-  max-width: 300px;
-  max-height: 300px;
-}
-
-::ng-deep button.custom-button {
-  background-color: #222222 !important;
-  /* Pas kleur aan */
-  color: white !important;
-  /* Tekstkleur aanpassen */
-  width: 300px;
-}
-
-.container {
-  max-width: 100%;
   width: 100%;
-  height: 100%;
+  max-width: 100%;
-  --s: 200px; /* control the size */
+}
-  --c1: #1d1d1d;
+
-  --c2: #4e4f51;
+/* Het formulier zelf */
-  --c3: #3c3c3c;
+form[tuiForm] {
-
+  background: white;
-  background: repeating-conic-gradient(
+  border-radius: 24px;
-      from 30deg,
+  padding: 2rem;
-      #0000 0 120deg,
+  max-width: 32rem; /* 512px */
-      var(--c3) 0 180deg
+  width: 100%;
-  ) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
+  box-sizing: border-box;
-  repeating-conic-gradient(
+  text-align: center;
-      from 30deg,
+  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-      var(--c1) 0 60deg,
+}
-      var(--c2) 0 120deg,
+
-      var(--c3) 0 180deg
+/* Logo */
-  );
+.header {
-  background-size: var(--s) calc(var(--s) * 0.577);
+  display: block;
+  margin: 0 auto 1.75rem auto;
+  max-width: 100%;
+  width: 200px;
+  height: auto;
+}
+
+/* Invoervelden */
+tui-textfield {
+  display: block;
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+/* Foutmelding */
+tui-error {
+  display: block;
+  margin-top: 0.5rem;
+  color: #ff3b30;
+  font-size: 0.9rem;
+}
+
+/* Inlogknop */
+button.custom-button {
+  background-color: #222222 !important;
+  color: white !important;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border-radius: 12px;
+  margin-top: 1rem;
+}
+
+/* Versie info */
+p {
+  text-align: center;
+  font-size: 0.9rem;
+  color: #333;
+  margin-top: 1.25rem;
+}
+
+/* Responsiveness */
+@media (max-width: 600px) {
+  form[tuiForm] {
+    padding: 1.5rem 1rem;
+    max-width: 100%;
+  }
+
+  .header {
+    width: 150px;
+    margin-bottom: 1.25rem;
+  }
+
+  button.custom-button {
+    font-size: 0.95rem;
+  }
+
+  .container {
+    background-size: 150px calc(150px * 0.577);
+    opacity: 0.9; /* minder druk op mobiel */
+  }
 }

src/styles.scss

@@ -1,8 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
 .container {
   max-width: 70vw;
-  margin: 0 auto;
+  //margin: 0 auto;
-  padding: 20px;
 }
 
 .heading {
@@ -16,3 +15,6 @@
   overflow-y: scroll;
   max-height: 70vh;
 }
+
+html, body{
+}