add-frames (#1)

Adds a iframe view for apps in the dashboard. Makes it usable for our setup.

Co-authored-by: Philipp Rothmann <philipprothmann@posteo.de>
Co-authored-by: viehlieb <pf@pragma-shift.net>
Reviewed-on: #1

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.dockerignore
+Dockerfile
+node_modules
+build
+README.md

.env.example

@@ -1,2 +0,0 @@
-REACT_APP_API_URL=http://stackspin_proxy:8081/api/v1
-REACT_APP_HYDRA_PUBLIC_URL=https://sso.init.stackspin.net

.envrc

@@ -0,0 +1 @@
+export NODE_OPTIONS=--openssl-legacy-provider

.gitignore

@@ -14,6 +14,7 @@
 # misc
 .DS_Store
 .env
+.envrc
 .env.local
 .env.development.local
 .env.test.local

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:14-alpine AS BUILDER
+
+WORKDIR /app
+COPY package.json yarn.lock /app/
+RUN yarn install
+COPY . /app
+RUN yarn build
+
+FROM nginx:latest
+COPY deployment/nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app/build  /usr/share/nginx/html

Makefile

@@ -0,0 +1,19 @@
+build:
+	$(MAKE) -C backend build
+	docker push yksflip/dashboard-backend:latest
+	docker build -t dashboard .
+	docker tag dashboard yksflip/dashboard:latest
+	docker push yksflip/dashboard:latest
+
+rm:
+	docker stack rm ${STACK_NAME}
+
+deploy: rm
+	DOMAIN=${DOMAIN} docker stack deploy --resolve-image always --compose-file compose.yml ${STACK_NAME}
+
+update:
+	docker pull yksflip/dashboard:latest
+	docker service update dashboard_app --image yksflip/dashboard:latest --force
+
+exec:
+	docker exec -it $$(docker ps --format "{{ .Names }}" | grep dashboard) bash

backend/.env.sample

@@ -0,0 +1,9 @@
+HYDRA_CLIENT_ID=
+HYDRA_CLIENT_SECRET=
+HYDRA_AUTHORIZATION_BASE_URL="https://sso.example.org/application/o/authorize/"
+HYDRA_PUBLIC_URL="https://sso.example.org/application/o/"
+TOKEN_URL="https://sso.example.org/application/o/token/"
+REDIRECT_URL="https://example.org/login-callback"
+SECRET_KEY=
+LOAD_INCLUSTER_CONFIG=false
+DATABASE_URL=sqlite:///database.db

backend/.gitignore

@@ -8,3 +8,4 @@ __pycache__
 .envrc
 .direnv
 run_app.local.sh
+*.db

backend/Dockerfile

@@ -15,11 +15,11 @@ ADD requirements.txt .
 # pip install the local requirements.txt
 RUN pip install -r requirements.txt
 
-# now copy all the files in this directory to /code
+# now copy all the files in this directory to /app
 ADD . .
 
 # Listen to port 80 at runtime
 EXPOSE 5000
 
 # Define our command to be run when launching the container
-CMD ["gunicorn", "app:app", "-b", "0.0.0.0:5000", "--workers", "4", "--reload", "--capture-output", "--enable-stdio-inheritance", "--log-level", "DEBUG"]
+ENTRYPOINT [ "/app/entrypoint.sh" ]

backend/Makefile

@@ -0,0 +1,14 @@
+build:
+	docker build -t dashboard-backend .
+	docker tag dashboard-backend yksflip/dashboard-backend:latest
+
+clean:
+	rm database.db
+	flask db upgrade
+
+demo:
+	flask cli app create nextcloud Dateiablage "https://cloud.dev.local-it.cloud"
+	flask cli app create vikunja Projekte "https://vikunja.dev.local-it.cloud"
+
+run:
+	flask run

backend/areas/apps/models_lit.py

@@ -0,0 +1,32 @@
+"""Everything to do with Apps"""
+
+from database import db
+from .models import App
+
+class LITApp(App):
+    """
+    """
+
+    def get_url(self):
+        return self.url
+
+    def to_dict(self):
+        """
+        represent this object as a dict, compatible for JSON output
+        """
+        return {"id": self.id,
+                "name": self.name,
+                "slug": self.slug,
+                "external": self.external,
+                "status": self.get_status(),
+                "url": self.get_url()}
+
+
+
+    def get_status(self):
+        """Returns an AppStatus object that describes the current cluster state"""
+        return {
+            "installed": "",
+            "ready": "",
+            "message": "",
+        }

backend/areas/auth/__init__.py

@@ -1 +1 @@
-from .auth import *
+from .lit_auth import *

backend/areas/auth/auth.py

@@ -30,38 +30,39 @@ def hydra_callback():
     token = HydraOauth.get_token(state, code)
     user_info = HydraOauth.get_user_info()
     # Match Kratos identity with Hydra
-    identities = KratosApi.get("/identities")
-    identity = None
-    for i in identities.json():
-        if i["traits"]["email"] == user_info["email"]:
-            identity = i
+    # identities = KratosApi.get("/identities")
+    # identity = None
+    # for i in identities.json():
+    #     if i["traits"]["email"] == user_info["email"]:
+    #         identity = i
 
     access_token = create_access_token(
-        identity=token, expires_delta=timedelta(days=365), additional_claims={"user_id": identity["id"]}
+        identity=token, expires_delta=timedelta(days=365),
+        #additional_claims={"user_id": identity["id"]}
     )
 
-    apps = App.query.all()
-    app_roles = []
-    for app in apps:
-        tmp_app_role = AppRole.query.filter_by(
-            user_id=identity["id"], app_id=app.id
-        ).first()
-        app_roles.append(
-            {
-                "name": app.slug,
-                "role_id": tmp_app_role.role_id if tmp_app_role else None,
-            }
-        )
+    # apps = App.query.all()
+    # app_roles = []
+    # for app in apps:
+    #     tmp_app_role = AppRole.query.filter_by(
+    #         user_id=identity["id"], app_id=app.id
+    #     ).first()
+    #     app_roles.append(
+    #         {
+    #             "name": app.slug,
+    #             "role_id": tmp_app_role.role_id if tmp_app_role else None,
+    #         }
+    #     )
 
     return jsonify(
         {
             "accessToken": access_token,
             "userInfo": {
-                "id": identity["id"],
+                "id": user_info["email"],
                 "email": user_info["email"],
                 "name": user_info["name"],
                 "preferredUsername": user_info["preferred_username"],
-                "app_roles": app_roles,
+                # "app_roles": app_roles,
             },
         }
     )

backend/areas/auth/lit_auth.py

@@ -0,0 +1,63 @@
+from multiprocessing import current_process
+from flask import jsonify, request
+from flask_jwt_extended import create_access_token
+from flask_cors import cross_origin
+from datetime import timedelta
+
+from areas import api_v1
+from areas.apps import App, AppRole
+from config import *
+from helpers import HydraOauth, BadRequest
+
+
+@api_v1.route("/login", methods=["POST"])
+@cross_origin()
+def login():
+    authorization_url = HydraOauth.authorize()
+    return jsonify({"authorizationUrl": authorization_url})
+
+
+@api_v1.route("/hydra/callback")
+@cross_origin()
+def hydra_callback():
+    state = request.args.get("state")
+    code = request.args.get("code")
+    if state == None:
+        raise BadRequest("Missing state query param")
+
+    if code == None:
+        raise BadRequest("Missing code query param")
+
+    token = HydraOauth.get_token(state, code)
+    user_info = HydraOauth.get_user_info()
+
+    access_token = create_access_token(
+        identity=token, expires_delta=timedelta(days=365),
+        #additional_claims={"user_id": identity["id"]}
+    )
+
+    # apps = App.query.all()
+    # app_roles = []
+    # for app in apps:
+    #     tmp_app_role = AppRole.query.filter_by(
+    #         user_id=identity["id"], app_id=app.id
+    #     ).first()
+    #     app_roles.append(
+    #         {
+    #             "name": app.slug,
+    #             "role_id": tmp_app_role.role_id if tmp_app_role else None,
+    #         }
+    #     )
+
+    return jsonify(
+        {
+            "accessToken": access_token,
+            "userInfo": {
+                "id": user_info["email"],
+                "email": user_info["email"],
+                "name": user_info["name"],
+                "preferredUsername": user_info["preferred_username"],
+                # "app_roles": app_roles,
+            },
+        }
+    )

backend/config.py

@@ -1,10 +1,19 @@
 import os
 
-SECRET_KEY = os.environ.get("SECRET_KEY")
+def env_file(key: str):
+    file_env = os.environ.get(f"{key}_FILE")
+    if file_env and os.path.exists(file_env):
+        return open(file_env).read().rstrip('\n')
+    return os.environ.get(key)
+
+SECRET_KEY = env_file("SECRET_KEY")
+
 HYDRA_CLIENT_ID = os.environ.get("HYDRA_CLIENT_ID")
-HYDRA_CLIENT_SECRET = os.environ.get("HYDRA_CLIENT_SECRET")
+HYDRA_CLIENT_SECRET = env_file("HYDRA_CLIENT_SECRET")
+
 HYDRA_AUTHORIZATION_BASE_URL = os.environ.get("HYDRA_AUTHORIZATION_BASE_URL")
 TOKEN_URL = os.environ.get("TOKEN_URL")
+REDIRECT_URL = os.environ.get("REDIRECT_URL")
 
 LOGIN_PANEL_URL = os.environ.get("LOGIN_PANEL_URL")
 

backend/entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+set -eu
+env
+flask db upgrade
+gunicorn app:app -b 0.0.0.0:5000 --workers "$(nproc)" --reload --capture-output --enable-stdio-inheritance --log-level DEBUG

backend/helpers/hydra_oauth.py

@@ -9,7 +9,7 @@ class HydraOauth:
     @staticmethod
     def authorize():
         try:
-            hydra = OAuth2Session(HYDRA_CLIENT_ID)
+            hydra = OAuth2Session(HYDRA_CLIENT_ID, redirect_uri=REDIRECT_URL)
             authorization_url, state = hydra.authorization_url(
                 HYDRA_AUTHORIZATION_BASE_URL
             )

backend/helpers/kubernetes.py

@@ -20,11 +20,11 @@ from config import LOAD_INCLUSTER_CONFIG
 #
 # By default this loads whatever we define in the `KUBECONFIG` env variable,
 # otherwise loads the config from default locations, similar to what kubectl
-# does.
-if LOAD_INCLUSTER_CONFIG:
-    config.load_incluster_config()
-else:
-    config.load_kube_config()
+# # does.
+# if LOAD_INCLUSTER_CONFIG:
+#     config.load_incluster_config()
+# else:
+#     config.load_kube_config()
 
 def create_variables_secret(app_slug, variables_filepath):
     """Checks if a variables secret for app_name already exists, generates it if necessary.

backend/migrations/versions/27761560bbcb_.py

@@ -1,46 +0,0 @@
-"""empty message
-
-Revision ID: 27761560bbcb
-Revises: 
-Create Date: 2021-12-21 06:07:14.857940
-
-"""
-import sqlalchemy as sa
-from alembic import op
-
-# revision identifiers, used by Alembic.
-revision = "27761560bbcb"
-down_revision = None
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.create_table(
-        "app",
-        sa.Column("id", sa.Integer(), nullable=False),
-        sa.Column("name", sa.String(length=64), nullable=True),
-        sa.Column("slug", sa.String(length=64), nullable=True),
-        sa.PrimaryKeyConstraint("id"),
-        sa.UniqueConstraint("slug"),
-    )
-    op.create_table(
-        "app_role",
-        sa.Column("user_id", sa.String(length=64), nullable=False),
-        sa.Column("app_id", sa.Integer(), nullable=False),
-        sa.Column("role", sa.String(length=64), nullable=True),
-        sa.ForeignKeyConstraint(
-            ["app_id"],
-            ["app.id"],
-        ),
-        sa.PrimaryKeyConstraint("user_id", "app_id"),
-    )
-    # ### end Alembic commands ###
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.drop_table("app_role")
-    op.drop_table("app")
-    # ### end Alembic commands ###

backend/migrations/versions/3fa0c38ea1ac_add_velero_as_app.py

@@ -1,25 +0,0 @@
-"""add-velero-as-app
-
-Revision ID: 3fa0c38ea1ac
-Revises: e08df0bef76f
-Create Date: 2022-10-13 09:40:44.290319
-
-"""
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision = '3fa0c38ea1ac'
-down_revision = 'e08df0bef76f'
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # Add monitoring app
-    op.execute(f'INSERT IGNORE INTO app (`name`, `slug`) VALUES ("Velero","velero")')
-
-
-def downgrade():
-    pass

backend/migrations/versions/5f462d2d9d25_convert_role_column_to_table.py

@@ -1,48 +0,0 @@
-"""convert role column to table
-
-Revision ID: 5f462d2d9d25
-Revises: 27761560bbcb
-Create Date: 2022-04-13 15:00:27.182898
-
-"""
-from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects import mysql
-
-# revision identifiers, used by Alembic.
-revision = "5f462d2d9d25"
-down_revision = "27761560bbcb"
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    role_table = op.create_table(
-        "role",
-        sa.Column("id", sa.Integer(), nullable=False),
-        sa.Column("name", sa.String(length=64), nullable=True),
-        sa.PrimaryKeyConstraint("id"),
-    )
-    op.add_column("app_role", sa.Column("role_id", sa.Integer(), nullable=True))
-    op.create_foreign_key(None, "app_role", "role", ["role_id"], ["id"])
-    # ### end Alembic commands ###
-
-    # Insert default role "admin" as ID 1
-    op.execute(sa.insert(role_table).values(id=1,name="admin"))
-    # Set role_id 1 to all current "admin" users
-    op.execute("UPDATE app_role SET role_id = 1 WHERE role = 'admin'")
-
-    # Drop old column
-    op.drop_column("app_role", "role")
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.add_column(
-        "app_role", sa.Column("role", mysql.VARCHAR(length=64), nullable=True)
-    )
-    op.drop_constraint(None, "app_role", type_="foreignkey")
-    op.drop_column("app_role", "role_id")
-    op.drop_table("role")
-    # ### end Alembic commands ###

backend/migrations/versions/b514cca2d47b_add_user_role.py

@@ -1,76 +0,0 @@
-"""update apps and add 'user' and 'no access' role
-
-Revision ID: b514cca2d47b
-Revises: 5f462d2d9d25
-Create Date: 2022-06-08 17:24:51.305129
-
-"""
-from alembic import op
-import sqlalchemy as sa
-
-# revision identifiers, used by Alembic.
-revision = 'b514cca2d47b'
-down_revision = '5f462d2d9d25'
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### end Alembic commands ###
-
-    # Check and update app table in DB
-    apps = {
-        "dashboard": "Dashboard",
-        "wekan": "Wekan",
-        "wordpress": "WordPress",
-        "nextcloud": "Nextcloud",
-        "zulip": "Zulip"
-    }
-    # app table
-    app_table = sa.table('app', sa.column('id', sa.Integer), sa.column(
-        'name', sa.String), sa.column('slug', sa.String))
-
-    existing_apps = op.get_bind().execute(app_table.select()).fetchall()
-    existing_app_slugs = [app['slug'] for app in existing_apps]
-    for app_slug in apps.keys():
-        if app_slug in existing_app_slugs:
-            op.execute(f'UPDATE app SET `name` = "{apps.get(app_slug)}" WHERE slug = "{app_slug}"')
-        else:
-            op.execute(f'INSERT INTO app (`name`, slug) VALUES ("{apps.get(app_slug)}","{app_slug}")')
-
-    # Fetch all apps including newly created
-    existing_apps = op.get_bind().execute(app_table.select()).fetchall()
-    # Insert role "user" as ID 2
-    op.execute("INSERT INTO `role` (id, `name`) VALUES (2, 'user')")
-    # Insert role "no access" as ID 3
-    op.execute("INSERT INTO `role` (id, `name`) VALUES (3, 'no access')")
-    # Set role_id 2 to all current "user" users which by have NULL role ID
-    op.execute("UPDATE app_role SET role_id = 2 WHERE role_id IS NULL")
-
-    # Add 'no access' role for all users that don't have any roles for specific apps
-    app_roles_table = sa.table('app_role', sa.column('user_id', sa.String), sa.column(
-        'app_id', sa.Integer), sa.column('role_id', sa.Integer))
-    
-    app_ids = [app['id'] for app in existing_apps]
-    app_roles = op.get_bind().execute(app_roles_table.select()).fetchall()
-    user_ids = set([app_role['user_id'] for app_role in app_roles])
-
-    for user_id in user_ids:
-        existing_user_app_ids = [x['app_id'] for x in list(filter(lambda role: role['user_id'] == user_id, app_roles))]
-        missing_user_app_ids = [x for x in app_ids if x not in existing_user_app_ids]
-
-        if len(missing_user_app_ids) > 0:
-            values = [{'user_id': user_id, 'app_id': app_id, 'role_id': 3} for app_id in missing_user_app_ids]
-            op.bulk_insert(app_roles_table, values)
-
-
-def downgrade():
-    # Revert all users role_id to NULL where role is 'user'
-    op.execute("UPDATE app_role SET role_id = NULL WHERE role_id = 2")
-    # Delete role 'user' from roles
-    op.execute("DELETE FROM `role` WHERE id = 2")
-
-    # Delete all user app roles where role is 'no access' with role_id 3
-    op.execute("DELETE FROM app_role WHERE role_id = 3")
-    # Delete role 'no access' from roles
-    op.execute("DELETE FROM `role` WHERE id = 3")

backend/migrations/versions/d70b750a1297_.py

@@ -0,0 +1,51 @@
+"""empty message
+
+Revision ID: d70b750a1297
+Revises: 
+Create Date: 2022-10-25 11:32:27.303354
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'd70b750a1297'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('app',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('name', sa.String(length=64), nullable=True),
+    sa.Column('slug', sa.String(length=64), nullable=True),
+    sa.Column('external', sa.Boolean(), server_default='0', nullable=False),
+    sa.Column('url', sa.String(length=128), nullable=True),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('slug')
+    )
+    op.create_table('role',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('name', sa.String(length=64), nullable=True),
+    sa.PrimaryKeyConstraint('id')
+    )
+    op.create_table('app_role',
+    sa.Column('user_id', sa.String(length=64), nullable=False),
+    sa.Column('app_id', sa.Integer(), nullable=False),
+    sa.Column('role_id', sa.Integer(), nullable=True),
+    sa.ForeignKeyConstraint(['app_id'], ['app.id'], ),
+    sa.ForeignKeyConstraint(['role_id'], ['role.id'], ),
+    sa.PrimaryKeyConstraint('user_id', 'app_id')
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('app_role')
+    op.drop_table('role')
+    op.drop_table('app')
+    # ### end Alembic commands ###

backend/migrations/versions/e08df0bef76f_.py

@@ -1,33 +0,0 @@
-"""Add fields for external apps
-
-Revision ID: e08df0bef76f
-Revises: b514cca2d47b
-Create Date: 2022-09-23 16:38:06.557307
-
-"""
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision = 'e08df0bef76f'
-down_revision = 'b514cca2d47b'
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.add_column('app', sa.Column('external', sa.Boolean(), server_default='0', nullable=False))
-    op.add_column('app', sa.Column('url', sa.String(length=128), nullable=True))
-    # ### end Alembic commands ###
-
-    # Add monitoring app
-    op.execute(f'INSERT IGNORE INTO app (`name`, `slug`) VALUES ("Monitoring","monitoring")')
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.drop_column('app', 'url')
-    op.drop_column('app', 'external')
-    # ### end Alembic commands ###

deployment/Dockerfile

@@ -1,3 +0,0 @@
-FROM nginx:latest
-COPY ./nginx.conf /etc/nginx/nginx.conf
-COPY . /usr/share/nginx/html

package.json

@@ -27,6 +27,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.22.0",
     "react-hot-toast": "^2.0.0",
+    "react-iframe": "^1.8.0",
     "react-markdown": "^7.0.1",
     "react-redux": "^7.2.4",
     "react-router": "6.2.1",

public/assets/logo-small.svg

@@ -1,7 +0,0 @@
-<svg width="25" height="44" viewBox="0 0 25 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 35.1171C0 39.0948 4.18188 41.6853 7.74332 39.9138L22.8687 32.39C24.0424 31.8062 24.7844 30.6083 24.7844 29.2975V20.9534L1.64288 32.4649C0.636359 32.9656 0 33.9929 0 35.1171Z" fill="#2D535A"/>
-<path d="M0 22.8091C0 27.6308 5.06914 30.7709 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L0 22.8091Z" fill="#54C6CC"/>
-<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L2.2161 21.7068Z" fill="#2D535A"/>
-<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L22.5683 22.0664C23.926 21.3911 24.888 19.9545 24.3261 18.546C22.9848 15.1836 18.9385 13.3884 15.398 15.1496L2.2161 21.7068Z" fill="#1E8290"/>
-<path d="M0 22.8121L23.3077 11.2182C24.2124 10.7682 24.7844 9.8448 24.7844 8.83432C24.7844 4.77111 20.5126 2.12495 16.8747 3.93462L2.25625 11.2064C0.873945 11.894 0 13.3048 0 14.8487V22.8121Z" fill="#54C6CC"/>
-</svg>

public/assets/logo.svg

@@ -1,9 +0,0 @@
-<svg width="151" height="44" viewBox="0 0 151 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="151" height="44" fill="transparent"/>
-<path d="M40.8246 11.7373C37.2206 11.7373 34.89 13.5633 34.89 16.6388C34.89 19.7142 36.8842 20.8915 40.4162 21.6604L40.9688 21.7805C43.1312 22.2611 44.2604 22.7416 44.2604 24.1351C44.2604 25.4806 43.1792 26.4417 41.0168 26.4417C38.8544 26.4417 37.5329 25.4326 37.5329 23.4143V23.1741H34.4094V23.4143C34.4094 27.0664 37.1245 29.2288 41.0168 29.2288C44.9092 29.2288 47.3839 27.1145 47.3839 24.039C47.3839 20.9636 45.1014 19.7142 41.5214 18.9454L40.9688 18.8252C38.9025 18.3687 38.0135 17.7921 38.0135 16.5427C38.0135 15.2933 38.9025 14.5244 40.8246 14.5244C42.7468 14.5244 43.9241 15.2933 43.9241 17.2154V17.5998H47.0476V17.2154C47.0476 13.5633 44.4286 11.7373 40.8246 11.7373ZM47.5746 19.4259H50.554V26.2015C50.554 27.8353 51.6112 28.8925 53.1969 28.8925H56.5607V26.4417H54.2541C53.8216 26.4417 53.5814 26.2015 53.5814 25.7209V19.4259H56.849V16.9752H53.5814V13.275H50.554V16.9752H47.5746V19.4259ZM69.9725 28.8925V16.9752H66.9932V18.5849H66.7529C66.0321 17.5518 64.8788 16.6388 62.8125 16.6388C59.9774 16.6388 57.4305 19.0415 57.4305 22.9338C57.4305 26.8261 59.9774 29.2288 62.8125 29.2288C64.8788 29.2288 66.0321 28.3158 66.7529 27.2827H66.9932V28.8925H69.9725ZM63.7256 26.6339C61.8515 26.6339 60.4579 25.2884 60.4579 22.9338C60.4579 20.5792 61.8515 19.2337 63.7256 19.2337C65.5996 19.2337 66.9932 20.5792 66.9932 22.9338C66.9932 25.2884 65.5996 26.6339 63.7256 26.6339ZM71.4505 22.9338C71.4505 26.6339 74.1896 29.2288 77.6495 29.2288C80.9892 29.2288 82.9354 27.2827 83.6081 24.6637L80.6768 23.967C80.4126 25.5047 79.5236 26.5859 77.6975 26.5859C75.8715 26.5859 74.4779 25.2404 74.4779 22.9338C74.4779 20.6272 75.8715 19.2817 77.6975 19.2817C79.5236 19.2817 80.4126 20.435 80.5807 21.8766L83.512 21.2519C82.9834 18.5849 80.9652 16.6388 77.6495 16.6388C74.1896 16.6388 71.4505 19.2337 71.4505 22.9338ZM97.4406 16.9752H92.9716L88.0221 21.348V12.0737H84.9947V28.8925H88.0221V25.0241L89.68 23.6066L93.6204 28.8925H97.3445L91.8424 21.7565L97.4406 16.9752ZM98.2594 20.3149C98.2594 22.6695 100.23 23.5345 102.728 24.015L103.353 24.1351C104.843 24.4235 105.516 24.7839 105.516 25.5527C105.516 26.3216 104.843 26.9223 103.449 26.9223C102.056 26.9223 100.926 26.3456 100.614 24.6157L97.8269 25.3365C98.2354 27.8353 100.326 29.2288 103.449 29.2288C106.477 29.2288 108.447 27.8112 108.447 25.3125C108.447 22.8137 106.429 22.1409 103.738 21.6123L103.113 21.4922C101.863 21.2519 101.191 20.9156 101.191 20.1227C101.191 19.4019 101.815 18.9454 102.969 18.9454C104.122 18.9454 104.939 19.4259 105.227 20.7233L107.966 19.8824C107.39 17.9603 105.636 16.6388 102.969 16.6388C100.134 16.6388 98.2594 17.9603 98.2594 20.3149ZM109.985 33.6978H113.012V27.3547H113.252C113.925 28.3158 115.078 29.2288 117.145 29.2288C119.98 29.2288 122.527 26.8261 122.527 22.9338C122.527 19.0415 119.98 16.6388 117.145 16.6388C115.078 16.6388 113.925 17.5518 113.204 18.5849H112.964V16.9752H109.985V33.6978ZM116.231 26.6339C114.357 26.6339 112.964 25.2884 112.964 22.9338C112.964 20.5792 114.357 19.2337 116.231 19.2337C118.106 19.2337 119.499 20.5792 119.499 22.9338C119.499 25.2884 118.106 26.6339 116.231 26.6339ZM123.38 13.5153C123.38 14.7407 124.317 15.5816 125.518 15.5816C126.72 15.5816 127.657 14.7407 127.657 13.5153C127.657 12.2899 126.72 11.449 125.518 11.449C124.317 11.449 123.38 12.2899 123.38 13.5153ZM127.032 16.9752H124.005V28.8925H127.032V16.9752ZM129.249 16.9752V28.8925H132.277V22.7416C132.277 20.5311 133.358 19.2337 135.208 19.2337C136.842 19.2337 137.755 20.1227 137.755 21.9247V28.8925H140.782V21.7805C140.782 18.8252 138.932 16.7829 136.145 16.7829C133.958 16.7829 132.949 17.744 132.469 18.7531H132.228V16.9752H129.249Z" fill="#2D535A"/>
-<path d="M0 35.1171C0 39.0948 4.18188 41.6853 7.74332 39.9138L22.8687 32.39C24.0424 31.8062 24.7844 30.6083 24.7844 29.2975V20.9534L1.64288 32.4649C0.636359 32.9656 0 33.9929 0 35.1171Z" fill="#2D535A"/>
-<path d="M0 22.8091C0 27.6308 5.06914 30.7709 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L0 22.8091Z" fill="#54C6CC"/>
-<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L24.7844 20.9641C24.7844 16.1423 19.7151 13.0021 15.398 15.1496L2.2161 21.7068Z" fill="#2D535A"/>
-<path d="M2.2161 21.7068C0.858395 22.3821 -0.103566 23.8187 0.458285 25.2271C1.79955 28.5895 5.84578 30.3846 9.38621 28.6235L22.5683 22.0664C23.926 21.3911 24.888 19.9545 24.3261 18.546C22.9848 15.1836 18.9385 13.3884 15.398 15.1496L2.2161 21.7068Z" fill="#1E8290"/>
-<path d="M0 22.8121L23.3077 11.2182C24.2124 10.7682 24.7844 9.8448 24.7844 8.83432C24.7844 4.77111 20.5126 2.12495 16.8747 3.93462L2.25625 11.2064C0.873945 11.894 0 13.3048 0 14.8487V22.8121Z" fill="#54C6CC"/>
-</svg>

public/assets/user.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M500,10C227,10,10,227,10,500s217,490,490,490s490-217,490-490S773,10,500,10z M500,206c77,0,140,63,140,140c0,77-63,140-140,140c-77,0-140-63-140-140C360,269,423,206,500,206z M801,773c-77,77-182,133-301,133s-224-49-301-133c-21-21-21-56,0-77c77-84,182-140,301-140s224,56,301,140C822,717,822,752,801,773z"/></g>
+</svg>

public/assets/vikunja.svg

@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="67.732002mm"
+   height="68.024376mm"
+   viewBox="0 0 67.732002 68.024376"
+   version="1.1"
+   id="svg567"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   sodipodi:docname="vikunja.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview569"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.77058782"
+     inkscape:cx="365.95439"
+     inkscape:cy="86.946611"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs564" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-8.3663759,-43.92885)">
+    <g
+       transform="matrix(0.0352769,0,0,-0.0352769,-11.620669,144.93494)"
+       id="g144">
+      <path
+         d="m 2268.2,2512.3 c -15.884,19.573 -32.512,38.571 -49.949,56.876 -180.6,189.62 -426.24,294.06 -691.67,294.06 -256.43,0 -497.51,-99.862 -678.83,-281.18 -22.365,-22.368 -43.484,-45.656 -63.335,-69.76 -141.09,-171.28 -217.84,-384.27 -217.84,-609.07 0,-256.42 99.861,-497.5 281.18,-678.82 181.32,-181.32 422.39,-281.17 678.83,-281.17 256.43,0 497.5,99.858 678.83,281.17 181.32,181.33 281.17,422.4 281.17,678.82 0,219.21 -78.86,437.22 -218.37,609.07"
+         fill="#196aff"
+         id="path96"
+         sodipodi:nodetypes="ccsccscscsc" />
+      <path
+         d="m 1823.7,1647.4 c 35.688,104.68 94.631,136.72 101.96,298.25 2.5753,56.765 -14.661,237.07 -14.661,237.07 0,0 28.013,72.294 -25.823,152.83 -83.476,124.87 -255.4,133.36 -345.69,133.36 -90.29,0 -260.21,-8.4898 -343.68,-133.36 -53.84,-80.533 -25.826,-152.83 -25.826,-152.83 0,0 -9.5356,-92.732 -16.752,-174.52 -1.6998,-19.193 0.1575,-95.115 2.4544,-113.46 4.1285,-32.869 14.481,-65.163 25.808,-96.599 14.342,-39.804 36.82,-80.194 53.983,-121.03 51.799,-123.29 8.4513,-276 11.1,-408.96 2.2383,-94.374 -20.013,-190.11 -28.731,-282.4 98.129,-33.396 202.09,-50.813 308.72,-50.813 119.83,0 236.31,21.937 344.9,63.9 -20.394,115.55 -44.092,225.15 -47.748,266.96 -10.646,126.41 -41.304,260.49 -0.01,381.6"
+         fill="#ffffff"
+         id="path98" />
+      <path
+         d="m 1162.9,2383.9 c 1.1503,-18.73 2.9966,-37.93 8.2718,-56.159 1.6558,-5.6818 4.1029,-19.683 11.415,-21.764 9.0923,-2.59 25.911,8.2571 32.288,12.957 12.356,9.096 23.925,18.459 36.285,27.651 7.8835,5.8613 16.492,10.47 24.211,16.496 8.4,6.5463 14.719,14.474 21.709,22.178 8.4843,9.3597 14.847,19.049 21.372,29.497 5.103,8.1545 37.069,13.463 42.187,21.031 5.5866,8.2755 0.9158,18.511 0.9158,28.698 0,74.164 4.4546,147.57 6.1874,220.29 1.7877,49.887 21.379,109.13 -53.44,85.744 -160.31,-49.887 -158.53,-271.26 -151.4,-386.62"
+         fill="#ffffff"
+         id="path100" />
+      <path
+         d="m 1869.1,2279.7 c -1.6118,1.7511 -4.1945,3.2384 -6.2606,4.7696 -8.9788,6.649 -17.445,13.606 -25.156,21.482 -9.411,9.6125 -19.192,18.958 -28.164,28.929 -7.8908,8.7626 -17.313,16.602 -25.006,25.574 -5.1286,5.9602 -10.081,12.305 -14.609,18.562 -2.3115,3.1761 -3.5204,6.9969 -5.3374,10.396 -2.7072,5.0114 -39.882,10.118 -36.19,15.005 6.3009,8.3304 20.328,15.397 23.702,24.94 17.243,48.667 24.771,244.53 26.852,294.51 5.3521,127.83 117.57,-6.2386 137.17,-57.682 57.008,-149.66 23.145,-258.78 -46.315,-386.62"
+         fill="#ffffff"
+         id="path102" />
+      <path
+         d="m 1716.5,1787.9 c -0.081,73.805 -9.2535,103.66 -50.407,139.75 -25.742,22.566 -55.836,31.175 -103.74,29.992 -47.902,1.1833 -82.424,-13.378 -107.32,-39.223 -37.549,-38.992 -47.436,-62.053 -47.542,-135.86 -0.059,-39.893 42.956,-128.16 55.756,-148.54 21.244,-35.93 60.562,-48.85 99.104,-46.154 38.545,-2.6962 77.867,10.224 99.096,46.154 12.811,20.372 55.107,106.95 55.052,153.87"
+         fill="#f1e6d3"
+         id="path104" />
+      <path
+         d="m 1226.6,2316.1 c -9.6162,86.088 -38.582,239.98 61.489,331.24 11.038,10.074 14.001,-24.2 15.848,-38.066 2.5386,-19.038 -0.051,-73.416 0.337,-92.583 0.7143,-36.087 8.2754,-54.964 4.7513,-71.46 -9.6272,-45.092 -17.353,-42.183 -26.559,-69.603 -18.258,-54.378 -53.235,-83.066 -55.866,-59.529"
+         fill="#f1d7d4"
+         id="path106" />
+      <path
+         d="m 1851.7,2333.1 c 10.243,-18.331 36.996,80.256 45.381,123.07 7.8945,40.307 17.925,93.869 4.059,133.91 -7.4365,21.482 -53.078,84.568 -58.463,62.892 -2.0991,-8.4183 -3.1834,-71.098 -8.345,-101.09 -6.3889,-37.109 -17.91,-73.805 -17.98,-111.54 -0.1502,-84.568 25.336,-88.055 35.347,-107.24"
+         fill="#f1d7d4"
+         id="path108" />
+      <path
+         d="m 1522,1319.7 c -2.1687,-6.583 -18.595,-11.404 -24.764,-13.393 -14.91,-4.8172 -28.145,6.9383 -36.476,16.844 -11.583,13.73 -11.276,35.629 -16.126,51.642 -2.9343,9.6822 -19.533,10.997 -24.518,2.0405 -16.628,-29.9 -81.161,26.365 -66.163,45.095 9.8872,12.353 -13.781,23.262 -23.54,11.078 -28.948,-36.16 48.92,-103.5 93.579,-85.245 1.9892,-9.0338 4.0736,-18.056 7.9091,-26.636 7.5245,-16.851 23.98,-27.739 41.011,-36.89 23.196,-12.437 68.258,9.4074 75.142,30.255 4.7916,14.503 -21.28,19.635 -26.054,5.2093"
+         fill="#faeee0"
+         id="path110" />
+      <path
+         d="m 1727.6,1538.2 c 2.3958,-10.045 2.7731,-44.073 -15.935,-25.456 -7.5904,7.5537 -22.665,3.0954 -23.28,-7.008 -1.4471,-23.387 -24.9,-23.903 -45.136,-16.833 -16.056,5.6012 -24.533,-16.588 -8.6051,-22.145 29.713,-10.367 61.961,-4.6231 74.776,17.837 10.081,-4.744 21.485,-6.0372 30.629,2.5679 15.968,15.042 18.375,36.226 13.73,55.708 -3.5278,14.763 -29.698,10.096 -26.178,-4.6707"
+         fill="#faeee0"
+         id="path112" />
+      <path
+         d="m 1775,1049.2 c -7.0043,-14.316 -19.855,-13.422 -33.637,-7.4109 -10.107,4.3996 -22.606,-2.8757 -19.558,-13.107 6.1361,-20.522 -19.786,-26.515 -37.314,-19.196 -15.426,6.4438 -28.834,-13.796 -13.243,-20.313 31.582,-13.181 71.728,-1.6485 77.552,26.134 20.313,-3.22 39.71,2.4837 49.396,22.31 6.7038,13.682 -16.404,25.471 -23.196,11.583"
+         fill="#faeee0"
+         id="path114" />
+      <path
+         d="m 1569.8,2153.3 c -3.253,-20.181 -41.095,3.3189 -50.492,9.6894 -8.2717,5.5976 -18.972,2.198 -19.983,-7.2387 -1.3518,-12.715 -18.481,-9.0227 -26.31,-7.4255 -14.807,3.0112 -27.365,12.239 -27.717,26.105 -0.3443,13.474 8.2059,27.621 12.664,40.271 2.8537,8.0776 -8.7223,16.965 -17.185,11.561 -15.239,-9.7298 -88.714,-18.481 -59.452,13.547 9.3231,10.202 -7.1325,24.797 -16.554,14.481 -13.518,-14.8 -22.661,-48.7 6.583,-55.876 15.437,-3.7842 37.776,-3.5937 56.814,0.7473 -7.9494,-25.478 -9.6162,-48.799 23.156,-65.17 22.145,-11.067 52.558,-10.99 65.445,6.1067 27.116,-14.584 69.709,-28.731 75.6,7.7626 2.088,12.906 -20.463,18.478 -22.57,5.44"
+         fill="#faeee0"
+         id="path116" />
+      <path
+         d="m 1443,1685.6 c 39.366,-3.3299 78.746,-12.272 118.48,-10.836 25.398,0.9232 51.693,4.4803 76.75,8.1949 18.203,2.6962 40.52,5.8796 52.697,19.375 1.143,-45.018 -92.513,-59.108 -128.84,-60.023 -42.143,-1.066 -89.509,17.221 -119.09,43.289"
+         fill="#494949"
+         id="path118" />
+      <path
+         d="m 1549.4,1779.5 c -4.5023,-28.896 -5.4327,-58.199 -2.7219,-87.267 0.718,-7.5977 -1.3078,-25.709 8.7956,-29.523 8.1912,-3.0955 18.317,2.7219 19.654,10.111 2.2603,12.455 -3.0405,28.164 -3.4911,40.919 -0.5312,14.939 0,29.9 1.5789,44.769 0.9451,8.814 5.8906,20.705 -4.1982,26.914 -7.4036,4.5535 -18.258,2.872 -19.617,-5.9236"
+         fill="#494949"
+         id="path120" />
+      <path
+         d="m 1626,1849.7 c -23.661,-1.0221 -45.63,-14.261 -63.397,-27.024 -16.082,10.675 -40.432,20.485 -60.694,14.774 -12.078,-3.3922 -1.11,-7.0959 3.927,-10.316 9.3085,-6.191 16.895,-14.148 23.742,-22.368 10.389,-12.598 19.624,-25.826 30.71,-37.978 7.6747,5.5243 15.001,11.104 21.672,17.558 3.0955,2.9929 28.435,36.926 32.325,42.667 2.4838,3.656 4.9895,7.4329 7.8359,10.873 2.8903,3.4802 11.07,9.0154 3.8794,11.814"
+         fill="#494949"
+         id="path122" />
+      <path
+         d="m 1326.5,2010 c 11.682,30.303 24.24,68.387 56.265,62.328 24.244,-5.1946 56.697,-86.117 35.926,-78.124 -11.254,4.3264 -20.207,41.106 -41.333,45.876 -13.422,3.0332 -32.032,-43.502 -49.993,-48.26 -8.7077,-2.3006 -4.3264,10.389 -0.8646,18.181"
+         fill="#2c3844"
+         id="path124" />
+      <path
+         d="m 1670.6,2010 c 11.686,30.303 24.244,68.387 56.268,62.328 24.24,-5.1946 56.693,-86.117 35.922,-78.124 -11.254,4.3264 -20.203,41.106 -41.333,45.876 -13.422,3.0332 -32.032,-43.502 -49.99,-48.26 -8.7077,-2.3006 -4.33,10.389 -0.8682,18.181"
+         fill="#2c3844"
+         id="path126" />
+      <g
+         transform="scale(1,-1)"
+         fill="#252626"
+         stroke-width="29.085"
+         aria-label="Vikunja"
+         id="g142" />
+    </g>
+  </g>
+</svg>

public/env.js

@@ -0,0 +1,3 @@
+window.env = {
+  REACT_APP_API_URL: 'http://localhost:5000/api/v1',
+};

public/index.html

@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/assets/lit_logos/favicon_lit_transp.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/lit_logos/lit_transp_192x192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <script src='%PUBLIC_URL%/env.js'></script>
+  <title>Dashboard</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>

public/manifest.json

@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "assets/lit_logos/favicon_lit_transp.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "assets/lit_logos/lit_transp_192x192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "assets/lit_logos/lit_transp_512x512.png",
       "type": "image/png",
       "sizes": "512x512"
     }

src/App.tsx

@@ -1,31 +1,43 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
-import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
 
 import { useAuth } from 'src/services/auth';
-import { Dashboard, Users, Login, Apps, AppSingle } from './modules';
+import { Dashboard } from './modules';
 import { Layout } from './components';
+import { AppIframe } from './modules/dashboard/AppIframe';
 import { LoginCallback } from './modules/login/LoginCallback';
+import { useApps } from './services/apps';
+import { Login } from './modules/login';
+import { Users } from './modules/users/Users';
+import { AppSingle } from './modules/apps/AppSingle';
+import { Apps } from './modules/apps/Apps';
+import { DashboardLIT } from './modules/dashboard/DashboardLIT';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function App() {
   const { authToken, currentUser, isAdmin } = useAuth();
-
   const redirectToLogin = !authToken || !currentUser?.app_roles;
 
   const ProtectedRoute = () => {
     return isAdmin ? <Outlet /> : <Navigate to="/dashboard" />;
   };
 
+  const { apps, loadApps } = useApps();
+
+  useEffect(() => {
+    loadApps();
+  }, []);
+
   return (
     <>
       <Helmet>
-        <title>Stackspin</title>
+        <title>Dashboard</title>
         <meta name="description" content="Stackspin" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon_lit_transp.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/lit_logos/lit_transp_32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/lit_logos/lit_transp_16x16" />
         <link rel="manifest" href="/site.webmanifest" />
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#ffffff" />
@@ -41,7 +53,10 @@ function App() {
         ) : (
           <Layout>
             <Routes>
-              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/dashboard" element={<DashboardLIT />} />
+              {apps.map((app) => (
+                <Route key={app.name} path={app.slug} element={<AppIframe app={app} />} />
+              ))}
               <Route path="/users" element={<ProtectedRoute />}>
                 <Route index element={<Users />} />
               </Route>

src/components/Header/HeaderLIT.tsx

@@ -0,0 +1,178 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import { Disclosure, Menu, Transition } from '@headlessui/react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import { useAuth } from 'src/services/auth';
+import Gravatar from 'react-gravatar';
+import { Link, useLocation } from 'react-router-dom';
+import clsx from 'clsx';
+import { useApps } from 'src/services/apps';
+import _ from 'lodash';
+
+import { UserModal } from '../UserModal';
+
+const HYDRA_LOGOUT_URL = `${process.env.REACT_APP_HYDRA_PUBLIC_URL}/oauth2/sessions/logout`;
+
+const navigation = [
+  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
+  { name: 'Users', to: '/users', requiresAdmin: true },
+  { name: 'Apps', to: '/apps', requiresAdmin: true },
+];
+
+function classNames(...classes: any[]) {
+  return classes.filter(Boolean).join(' ');
+}
+
+function filterNavigationByDashboardRole(isAdmin: boolean) {
+  if (isAdmin) {
+    return navigation;
+  }
+
+  return navigation.filter((item) => !item.requiresAdmin);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface HeaderProps {}
+
+const HeaderLIT: React.FC<HeaderProps> = () => {
+  const [currentUserModal, setCurrentUserModal] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState(null);
+  const { logOut, currentUser, isAdmin } = useAuth();
+
+  const { pathname } = useLocation();
+  const { apps, loadApps, appTableLoading } = useApps();
+
+  const currentUserModalOpen = (id: any) => {
+    setCurrentUserId(id);
+    setCurrentUserModal(true);
+  };
+
+  const currentUserModalClose = () => {
+    setCurrentUserModal(false);
+    setCurrentUserId(null);
+  };
+
+  const navigationItems = filterNavigationByDashboardRole(isAdmin);
+
+  const signOutUrl = useMemo(() => {
+    const { hostname } = window.location;
+    // If we are developing locally, we need to use the init cluster's public URL
+    if (hostname === 'localhost') {
+      return HYDRA_LOGOUT_URL;
+    }
+    return `https://${hostname.replace(/^dashboard/, 'sso')}/oauth2/sessions/logout`;
+  }, []);
+
+  return (
+    <>
+      <Disclosure as="nav" className="bg-white shadow relative z-10">
+        {({ open }) => (
+          <div className="relative">
+            <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+              <div className="relative flex justify-between h-10">
+                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                  {/* Mobile menu button */}
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
+                    <span className="sr-only">Open main menu</span>
+                    {open ? (
+                      <XIcon className="block h-6 w-6" aria-hidden="true" />
+                    ) : (
+                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                    )}
+                  </Disclosure.Button>
+                </div>
+                <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+                  <Link to="/" className="flex-shrink-0 flex items-center">
+                    <img className="block lg:hidden" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
+                    <img className="hidden lg:block" src="/assets/lit_logos/lit_transp_title_52.png" alt="Local-IT" />
+                  </Link>
+                  <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                    {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
+                    {apps.map((app) => (
+                      <Link
+                        key={app.name}
+                        to={app.slug}
+                        className={clsx(
+                          'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
+                          {
+                            'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                              pathname.includes(app.slug),
+                          },
+                        )}
+                      >
+                        {app.name}
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+                <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+                  {/* Profile dropdown */}
+                  <Menu as="div" className="ml-3 relative">
+                    <div>
+                      <Menu.Button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
+                        <span className="sr-only">Open user menu</span>
+                        <span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500 overflow-hidden">
+                          <Gravatar email={currentUser?.email || undefined} size={32} rating="pg" protocol="https://" />
+                        </span>
+                      </Menu.Button>
+                    </div>
+                    <Transition
+                      as={Fragment}
+                      enter="transition ease-out duration-200"
+                      enterFrom="transform opacity-0 scale-95"
+                      enterTo="transform opacity-100 scale-100"
+                      leave="transition ease-in duration-75"
+                      leaveFrom="transform opacity-100 scale-100"
+                      leaveTo="transform opacity-0 scale-95"
+                    >
+                      <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <Menu.Item>
+                          {({ active }) => (
+                            <a
+                              onClick={() => logOut()}
+                              href={signOutUrl}
+                              className={classNames(
+                                active ? 'bg-gray-100 cursor-pointer' : '',
+                                'block px-4 py-2 text-sm text-gray-700 cursor-pointer',
+                              )}
+                            >
+                              Logout
+                            </a>
+                          )}
+                        </Menu.Item>
+                      </Menu.Items>
+                    </Transition>
+                  </Menu>
+                </div>
+              </div>
+            </div>
+
+            <Disclosure.Panel className="sm:hidden">
+              <div className="pt-2 pb-4 space-y-1">
+                {apps.map((app) => (
+                  <Link
+                    key={app.name}
+                    to={app.slug}
+                    className={clsx(
+                      'border-transparent litbutton block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
+                      {
+                        'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.slug),
+                      },
+                    )}
+                  >
+                    {app.name}
+                  </Link>
+                ))}
+              </div>
+            </Disclosure.Panel>
+          </div>
+        )}
+      </Disclosure>
+
+      {currentUserModal && (
+        <UserModal open={currentUserModal} onClose={currentUserModalClose} userId={currentUserId} setUserId={_.noop} />
+      )}
+    </>
+  );
+};
+
+export default HeaderLIT;

src/components/Header/index.ts

@@ -1 +1,2 @@
 export { default as Header } from './Header';
+export { default as HeaderLIT } from './HeaderLIT';

src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Header } from '../Header';
+import { HeaderLIT } from '../Header';
 
 const Layout: React.FC = ({ children }) => {
   return (
     <>
-      <Header />
+      <HeaderLIT />
 
       {children}
     </>

src/components/index.ts

@@ -1,8 +1,7 @@
 export { Layout } from './Layout';
-export { Header } from './Header';
+export { Header, HeaderLIT } from './Header';
 export { Table } from './Table';
 export { Banner } from './Banner';
 export { Tabs } from './Tabs';
 export { Modal, ConfirmationModal, StepsModal } from './Modal';
-export { UserModal } from './UserModal';
 export { ProgressSteps } from './ProgressSteps';

src/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "./lit_navigation_style.css";
 
 div[tabindex] {
   flex: 1;

src/lit_navigation_style.css

@@ -0,0 +1,57 @@
+.litbutton{
+  color: #755d86;
+  text-transform: uppercase;
+}
+.litbutton-card{
+  color: #000000;
+}
+
+.litbutton-card:before,
+.litbutton:before {
+  content: "[";
+  display: inline-block;
+  opacity: 0;
+  -webkit-transform: translateX(20px);
+  -moz-transform: translateX(20px);
+  transform: translateX(20px);
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+  transition: transform 0.3s, opacity 0.2s;
+}
+.litbutton:before{
+  margin-right: 10px;
+}
+.litbutton-card:after,
+.litbutton:after {
+  content: "]";
+  display: inline-block;
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
+  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
+  transition: transform 0.3s, opacity 0.2s;
+  -webkit-transform: translateX(-20px);
+  -moz-transform: translateX(-20px);
+  transform: translateX(-20px);
+}
+.litbutton:after{
+  margin-left: 10px;
+
+}
+.litbutton-card:hover,
+.litbutton:hover{
+  color: #3a97a3;
+}
+.litbutton-card:active,
+.litbutton-active{
+  color: #3a97a3;
+}
+.litbutton-card:hover:before,
+.litbutton-card:hover:after,
+.litbutton:hover:before,
+.litbutton:hover:after {
+  color: #3a97a3;
+  opacity: 1;
+  -webkit-transform: translateX(0px);
+  -moz-transform: translateX(0px);
+  transform: translateX(0px);
+}

src/modules/dashboard/AppIframe.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Iframe from 'react-iframe';
+
+export const AppIframe: React.FC<any> = ({ app }: { app: any }) => {
+  return (
+    <div className="relative">
+      <div style={{ minHeight: '95vh' }}>
+        <Iframe
+          height="100%"
+          width="100%"
+          position="absolute"
+          frameBorder={0}
+          overflow="hidden"
+          scrolling="no"
+          title={app.name}
+          url={app.url}
+        />
+      </div>
+    </div>
+  );
+};

src/modules/dashboard/DashboardLIT.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+import { useApps } from 'src/services/apps';
+import { DashboardCardLIT } from './components/DashboardCard/DashboardCardLIT';
+
+export const DashboardLIT: React.FC = () => {
+  const { apps, loadApps, appTableLoading } = useApps();
+
+  // Tell React to load the apps
+  useEffect(() => {
+    loadApps();
+
+    return () => {};
+  }, []);
+
+  return (
+    <div className="relative">
+      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8">
+        <div className="mt-6 pb-5 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
+          <h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
+        </div>
+      </div>
+      <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
+        <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
+          {!appTableLoading && apps.map((app) => <DashboardCardLIT app={app} key={app.name} />)}
+        </div>
+      </div>
+    </div>
+  );
+};

src/modules/dashboard/components/DashboardCard/DashboardCardLIT.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const DashboardCardLIT: React.FC<any> = ({ app }: { app: any }) => {
+  return (
+    <>
+      <Link
+        to={`/${app.slug}`}
+        // className="mx-1 inline-flex items-center px-2.5 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+      >
+        <div
+          className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0"
+          key={app.name}
+        >
+          <div className="px-4 py-5 sm:p-6">
+            <div className="mr-4 flex items-center">
+              <img
+                className="h-16 w-16 rounded-md overflow-hidden mr-4 flex-shrink-0"
+                src={app.assetSrc}
+                alt={app.name}
+              />
+
+              <div>
+                <h2 className="text-xl litbutton-card leading-8 font-bold">{app.name}</h2>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+};

src/modules/login/Login.tsx

@@ -29,8 +29,8 @@ export function Login() {
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div className="flex justify-center">
-          <img className="lg:block" src="assets/logo.svg" alt="Stackspin" />
-          <h2 className="mt-6 text-center text-xl font-bold text-gray-900 sr-only">Sign in</h2>
+          <img className="lg:block" src="assets/lit_logos/lit_transp_title_96.png" alt="Local-IT" />
+          <h2 className="mt-6 text-center text-xl font-bold text-gray-900 sr-only">Einloggen</h2>
         </div>
         <button
           onClick={handleSubmit}
@@ -42,7 +42,7 @@ export function Login() {
           <span className="absolute left-0 inset-y-0 flex items-center pl-3">
             <LockClosedIcon className="h-5 w-5 text-white group-hover:text-primary-light" aria-hidden="true" />
           </span>
-          Sign in
+          Login
         </button>
       </div>
     </div>

src/modules/login/LoginCallback.tsx

@@ -50,7 +50,7 @@ export function LoginCallback() {
               />
             </svg>
           </div>
-          <p className="text-lg text-primary-600 mt-2">Logging You in, just a moment.</p>
+          <p className="text-lg text-primary-600 mt-2">Du wirst jetzt eingeloggt.</p>
         </div>
       </div>
     </div>

src/services/api/config.ts

@@ -1,3 +1,4 @@
 export const api = {
-  hostname: process.env.REACT_APP_API_URL,
+  // @ts-ignore
+  hostname: window.env.REACT_APP_API_URL,
 };

src/services/apps/api.ts

@@ -0,0 +1,11 @@
+import { performApiCall } from '../api';
+import { transformApp } from './transformations';
+import { App } from './types';
+
+export const fetchApps = async (): Promise<App> => {
+  // @ts-ignore
+  const apiUrl = window.env.REACT_APP_API_URL;
+
+  const res = await performApiCall({ hostname: apiUrl, path: '/apps', method: 'GET' });
+  return transformApp(res);
+};

tailwind.config.js

@@ -19,6 +19,14 @@ module.exports = {
           DEFAULT: '#54C6CC',
           dark: '#1E8290',
         },
+        logo: {
+          bluegray: '#3f607d',
+          yellow: '#f5bd1c',
+          lightviolet: '#a587bf',
+          darkviolet: '#755d86',
+          azure: '#3a97a3',
+          lightazure: ' #b4e0e4',
+        },
       },
     },
   },