mirror of
https://github.com/dat515-2025/Group-8.git
synced 2026-03-22 06:57:47 +01:00
Compare commits
20 Commits
1f5d6f127f
...
merge/depl
| Author | SHA1 | Date | |
|---|---|---|---|
| 8929920072 | |||
| cdb6cf5e20 | |||
| 5190e9c48e | |||
| 815bf7f065 | |||
| 85a390565a | |||
| 20d26b7edc | |||
| 579dda50b9 | |||
| 4f7d30daf6 | |||
| 49c96187c9 | |||
| d1feafd4ef | |||
| efb454ba99 | |||
| 810f1ccb32 | |||
| c4afdf5ad2 | |||
| c290a109b6 | |||
| 7c161f6f37 | |||
| c4991ea3c4 | |||
| 3b6b64d472 | |||
|
9bc543a5fa | ||
|
|
14516a808b | ||
|
|
922ebf46ae |
43
.github/workflows/deploy-pr.yaml
vendored
43
.github/workflows/deploy-pr.yaml
vendored
@@ -20,13 +20,26 @@ jobs:
|
||||
pr_number: ${{ github.event.pull_request.number }}
|
||||
secrets: inherit
|
||||
|
||||
get_urls:
|
||||
if: github.event.action != 'closed'
|
||||
name: Generate Preview URLs
|
||||
uses: ./.github/workflows/url_generator.yml
|
||||
with:
|
||||
runner: vhs
|
||||
mode: pr
|
||||
pr_number: ${{ github.event.pull_request.number }}
|
||||
base_domain: ${{ vars.DEV_BASE_DOMAIN }}
|
||||
secrets: inherit
|
||||
|
||||
frontend:
|
||||
if: github.event.action != 'closed'
|
||||
name: Frontend - Build and Deploy to Cloudflare Pages (PR)
|
||||
needs: [get_urls]
|
||||
uses: ./.github/workflows/frontend-pages.yml
|
||||
with:
|
||||
mode: pr
|
||||
pr_number: ${{ github.event.pull_request.number }}
|
||||
backend_url_scheme: ${{ needs.get_urls.outputs.backend_url_scheme }}
|
||||
secrets: inherit
|
||||
|
||||
deploy:
|
||||
@@ -36,7 +49,7 @@ jobs:
|
||||
concurrency:
|
||||
group: pr-${{ github.event.pull_request.number }}
|
||||
cancel-in-progress: false
|
||||
needs: [build, frontend]
|
||||
needs: [build, frontend, get_urls]
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
@@ -62,25 +75,24 @@ jobs:
|
||||
DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
|
||||
RABBITMQ_PASSWORD: ${{ secrets.PROD_RABBITMQ_PASSWORD }}
|
||||
DB_PASSWORD: ${{ secrets.PROD_DB_PASSWORD }}
|
||||
IMAGE_REPO: ${{ needs.build.outputs.image_repo }}
|
||||
DIGEST: ${{ needs.build.outputs.digest }}
|
||||
DOMAIN: "${{ needs.get_urls.outputs.backend_url }}"
|
||||
DOMAIN_SCHEME: "${{ needs.get_urls.outputs.backend_url_scheme }}"
|
||||
FRONTEND_DOMAIN: "${{ needs.get_urls.outputs.frontend_url }}"
|
||||
FRONTEND_DOMAIN_SCHEME: "${{ needs.get_urls.outputs.frontend_url_scheme }}"
|
||||
run: |
|
||||
PR=${{ github.event.pull_request.number }}
|
||||
if [ -z "$PR" ]; then echo "PR number missing"; exit 1; fi
|
||||
if [ -z "$DEV_BASE_DOMAIN" ]; then echo "Secret DEV_BASE_DOMAIN is required (e.g., dev.example.com)"; exit 1; fi
|
||||
if [ -z "$RABBITMQ_PASSWORD" ]; then echo "Secret DEV_RABBITMQ_PASSWORD is required"; exit 1; fi
|
||||
if [ -z "$DB_PASSWORD" ]; then echo "Secret DEV_DB_PASSWORD is required"; exit 1; fi
|
||||
RELEASE=myapp-pr-$PR
|
||||
NAMESPACE=pr-$PR
|
||||
DOMAIN=pr-$PR.$DEV_BASE_DOMAIN
|
||||
if [ -z "$IMAGE_REPO" ]; then IMAGE_REPO="lukastrkan/cc-app-demo"; fi
|
||||
helm upgrade --install "$RELEASE" ./7project/charts/myapp-chart \
|
||||
-n "$NAMESPACE" --create-namespace \
|
||||
-f 7project/charts/myapp-chart/values-dev.yaml \
|
||||
--set prNumber="$PR" \
|
||||
--set deployment="pr-$PR" \
|
||||
--set domain="$DOMAIN" \
|
||||
--set image.repository="$IMAGE_REPO" \
|
||||
--set domain_scheme="$DOMAIN_SCHEME" \
|
||||
--set frontend_domain="$FRONTEND_DOMAIN" \
|
||||
--set frontend_domain_scheme="$FRONTEND_DOMAIN_SCHEME" \
|
||||
--set image.digest="$DIGEST" \
|
||||
--set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
|
||||
--set-string database.password="$DB_PASSWORD"
|
||||
@@ -88,19 +100,16 @@ jobs:
|
||||
- name: Post preview URLs as PR comment
|
||||
uses: actions/github-script@v7
|
||||
env:
|
||||
DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
|
||||
FRONTEND_URL: ${{ needs.frontend.outputs.deployed_url }}
|
||||
BACKEND_URL: ${{ needs.get_urls.outputs.backend_url_scheme }}
|
||||
FRONTEND_URL: ${{ needs.get_urls.outputs.frontend_url_scheme }}
|
||||
with:
|
||||
script: |
|
||||
const pr = context.payload.pull_request;
|
||||
if (!pr) { core.setFailed('No pull_request context'); return; }
|
||||
const prNumber = pr.number;
|
||||
const domainBase = process.env.DEV_BASE_DOMAIN;
|
||||
if (!domainBase) { core.setFailed('DEV_BASE_DOMAIN is required'); return; }
|
||||
const backendDomain = `pr-${prNumber}.${domainBase}`;
|
||||
const backendUrl = `https://${backendDomain}`;
|
||||
const backendUrl = process.env.BACKEND_URL || '(not available)';
|
||||
const frontendUrl = process.env.FRONTEND_URL || '(not available)';
|
||||
const marker = '<!-- preview-link -->';
|
||||
const marker = '<!-- preview-comment-marker -->';
|
||||
const body = `${marker}\nPreview environment is running\n- Frontend: ${frontendUrl}\n- Backend: ${backendUrl}\n`;
|
||||
const { owner, repo } = context.repo;
|
||||
const { data: comments } = await github.rest.issues.listComments({ owner, repo, issue_number: prNumber, per_page: 100 });
|
||||
@@ -139,4 +148,4 @@ jobs:
|
||||
NAMESPACE=pr-$PR
|
||||
helm uninstall "$RELEASE" -n "$NAMESPACE" || true
|
||||
# Optionally delete the namespace if empty
|
||||
kubectl delete namespace "$NAMESPACE" --ignore-not-found=true || true
|
||||
kubectl delete namespace "$NAMESPACE" --ignore-not-found=true || true
|
||||
41
.github/workflows/deploy-prod.yaml
vendored
41
.github/workflows/deploy-prod.yaml
vendored
@@ -30,17 +30,28 @@ jobs:
|
||||
context: 7project/backend
|
||||
secrets: inherit
|
||||
|
||||
get_urls:
|
||||
name: Generate Production URLs
|
||||
uses: ./.github/workflows/url_generator.yml
|
||||
with:
|
||||
mode: prod
|
||||
runner: vhs
|
||||
base_domain: ${{ vars.PROD_DOMAIN }}
|
||||
secrets: inherit
|
||||
|
||||
frontend:
|
||||
name: Frontend - Build and Deploy to Cloudflare Pages (prod)
|
||||
needs: [get_urls]
|
||||
uses: ./.github/workflows/frontend-pages.yml
|
||||
with:
|
||||
mode: prod
|
||||
backend_url_scheme: ${{ needs.get_urls.outputs.backend_url_scheme }}
|
||||
secrets: inherit
|
||||
|
||||
deploy:
|
||||
name: Helm upgrade/install (prod)
|
||||
runs-on: vhs
|
||||
needs: [build, frontend]
|
||||
needs: [build, frontend, get_urls]
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
@@ -63,25 +74,31 @@ jobs:
|
||||
|
||||
- name: Helm upgrade/install prod
|
||||
env:
|
||||
DOMAIN: ${{ secrets.PROD_DOMAIN }}
|
||||
DOMAIN: ${{ needs.get_urls.outputs.backend_url }}
|
||||
DOMAIN_SCHEME: ${{ needs.get_urls.outputs.backend_url_scheme }}
|
||||
FRONTEND_DOMAIN: ${{ needs.get_urls.outputs.frontend_url }}
|
||||
FRONTEND_DOMAIN_SCHEME: ${{ needs.get_urls.outputs.frontend_url_scheme }}
|
||||
RABBITMQ_PASSWORD: ${{ secrets.PROD_RABBITMQ_PASSWORD }}
|
||||
DB_PASSWORD: ${{ secrets.PROD_DB_PASSWORD }}
|
||||
IMAGE_REPO: ${{ needs.build.outputs.image_repo }}
|
||||
DIGEST: ${{ needs.build.outputs.digest }}
|
||||
BANKID_CLIENT_ID: ${{ secrets.BANKID_CLIENT_ID }}
|
||||
BANKID_CLIENT_SECRET: ${{ secrets.BANKID_CLIENT_SECRET }}
|
||||
MOJEID_CLIENT_ID: ${{ secrets.MOJEID_CLIENT_ID }}
|
||||
MOJEID_CLIENT_SECRET: ${{ secrets.MOJEID_CLIENT_SECRET }}
|
||||
|
||||
run: |
|
||||
if [ -z "$DOMAIN" ]; then
|
||||
echo "Secret PROD_DOMAIN is required (e.g., app.example.com)"; exit 1; fi
|
||||
if [ -z "$RABBITMQ_PASSWORD" ]; then
|
||||
echo "Secret PROD_RABBITMQ_PASSWORD is required"; exit 1; fi
|
||||
if [ -z "$DB_PASSWORD" ]; then
|
||||
echo "Secret PROD_DB_PASSWORD is required"; exit 1; fi
|
||||
if [ -z "$IMAGE_REPO" ]; then IMAGE_REPO="lukastrkan/cc-app-demo"; fi
|
||||
helm upgrade --install myapp ./7project/charts/myapp-chart \
|
||||
-n prod --create-namespace \
|
||||
-f 7project/charts/myapp-chart/values-prod.yaml \
|
||||
--set deployment="prod" \
|
||||
--set domain="$DOMAIN" \
|
||||
--set image.repository="$IMAGE_REPO" \
|
||||
--set domain_scheme="$DOMAIN_SCHEME" \
|
||||
--set frontend_domain="$FRONTEND_DOMAIN" \
|
||||
--set frontend_domain_scheme="$FRONTEND_DOMAIN_SCHEME" \
|
||||
--set image.digest="$DIGEST" \
|
||||
--set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
|
||||
--set-string database.password="$DB_PASSWORD"
|
||||
--set-string database.password="$DB_PASSWORD"
|
||||
--set-string oauth.bankid.clientId="$BANKID_CLIENT_ID" \
|
||||
--set-string oauth.bankid.clientSecret="$BANKID_CLIENT_SECRET" \
|
||||
--set-string oauth.mojeid.clientId="$MOJEID_CLIENT_ID" \
|
||||
--set-string oauth.mojeid.clientSecret="$MOJEID_CLIENT_SECRET"
|
||||
59
.github/workflows/frontend-pages.yml
vendored
59
.github/workflows/frontend-pages.yml
vendored
@@ -15,6 +15,10 @@ on:
|
||||
description: 'Cloudflare Pages project name (overrides default)'
|
||||
required: false
|
||||
type: string
|
||||
backend_url_scheme:
|
||||
description: 'The full scheme URL for the backend (e.g., https://api.example.com)'
|
||||
required: true
|
||||
type: string
|
||||
secrets:
|
||||
CLOUDFLARE_API_TOKEN:
|
||||
required: true
|
||||
@@ -25,14 +29,6 @@ on:
|
||||
description: 'URL of deployed frontend'
|
||||
value: ${{ jobs.deploy.outputs.deployed_url }}
|
||||
|
||||
# Required repository secrets:
|
||||
# CLOUDFLARE_API_TOKEN - API token with Pages:Edit (or Account:Workers Scripts:Edit) permissions
|
||||
# CLOUDFLARE_ACCOUNT_ID - Your Cloudflare account ID
|
||||
# Optional repository variables:
|
||||
# CF_PAGES_PROJECT_NAME - Default Cloudflare Pages project name
|
||||
# PROD_DOMAIN - App domain for prod releases (e.g., api.example.com or https://api.example.com)
|
||||
# BACKEND_URL_PR_TEMPLATE - Template for PR backend URL. Use {PR} placeholder for PR number (e.g., https://api-pr-{PR}.example.com)
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build frontend
|
||||
@@ -54,50 +50,9 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Compute backend URL for Vite
|
||||
id: be
|
||||
env:
|
||||
EVENT_NAME: ${{ github.event_name }}
|
||||
PR_NUMBER: ${{ github.event.pull_request.number || inputs.pr_number }}
|
||||
PR_TEMPLATE: ${{ vars.BACKEND_URL_PR_TEMPLATE }}
|
||||
DEV_BASE_DOMAIN: ${{ secrets.BASE_DOMAIN }}
|
||||
PROD_DOMAIN_VAR: ${{ vars.PROD_DOMAIN }}
|
||||
PROD_DOMAIN_SECRET: ${{ secrets.PROD_DOMAIN }}
|
||||
BACKEND_URL_OVERRIDE: ${{ vars.BACKEND_URL || secrets.BACKEND_URL }}
|
||||
MODE: ${{ inputs.mode }}
|
||||
- name: Set backend URL from workflow input
|
||||
run: |
|
||||
set -euo pipefail
|
||||
URL=""
|
||||
# 1) Explicit override wins (from repo var or secret)
|
||||
if [ -n "${BACKEND_URL_OVERRIDE:-}" ]; then
|
||||
if echo "$BACKEND_URL_OVERRIDE" | grep -Eiq '^https?://'; then
|
||||
URL="$BACKEND_URL_OVERRIDE"
|
||||
else
|
||||
URL="https://${BACKEND_URL_OVERRIDE}"
|
||||
fi
|
||||
else
|
||||
# 2) PR-specific URL when building for PR
|
||||
if [ "${MODE:-}" = "pr" ] || [ "${EVENT_NAME}" = "pull_request" ]; then
|
||||
if [ -n "${PR_TEMPLATE:-}" ] && [ -n "${PR_NUMBER:-}" ] ; then
|
||||
URL="${PR_TEMPLATE//\{PR\}/${PR_NUMBER}}"
|
||||
elif [ -n "${DEV_BASE_DOMAIN:-}" ] && [ -n "${PR_NUMBER:-}" ]; then
|
||||
URL="https://pr-${PR_NUMBER}.${DEV_BASE_DOMAIN}"
|
||||
fi
|
||||
fi
|
||||
# 3) Fallback to PROD_DOMAIN (prefer repo var, then secret)
|
||||
if [ -z "$URL" ]; then
|
||||
PROD_DOMAIN="${PROD_DOMAIN_VAR:-${PROD_DOMAIN_SECRET:-}}"
|
||||
if [ -n "$PROD_DOMAIN" ]; then
|
||||
if echo "$PROD_DOMAIN" | grep -Eiq '^https?://'; then
|
||||
URL="$PROD_DOMAIN"
|
||||
else
|
||||
URL="https://${PROD_DOMAIN}"
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
echo "Using backend URL: ${URL:-<empty>}"
|
||||
echo "VITE_BACKEND_URL=${URL}" >> $GITHUB_ENV
|
||||
echo "VITE_BACKEND_URL=${{ inputs.backend_url_scheme }}" >> $GITHUB_ENV
|
||||
|
||||
- name: Build
|
||||
run: npm run build
|
||||
@@ -177,4 +132,4 @@ jobs:
|
||||
else
|
||||
URL="https://${PBRANCH}.${PNAME}.pages.dev"
|
||||
fi
|
||||
echo "deployed_url=$URL" >> $GITHUB_OUTPUT
|
||||
echo "deployed_url=$URL" >> $GITHUB_OUTPUT
|
||||
74
.github/workflows/url_generator.yml
vendored
Normal file
74
.github/workflows/url_generator.yml
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
name: Generate Preview or Production URLs
|
||||
|
||||
on:
|
||||
workflow_call:
|
||||
inputs:
|
||||
mode:
|
||||
description: "Build mode: 'prod' or 'pr'"
|
||||
required: true
|
||||
type: string
|
||||
pr_number:
|
||||
description: 'PR number (required when mode=pr)'
|
||||
required: false
|
||||
type: string
|
||||
runner:
|
||||
description: 'The runner to use for this job'
|
||||
required: false
|
||||
type: string
|
||||
default: 'ubuntu-latest'
|
||||
base_domain:
|
||||
description: 'The base domain for production URLs (e.g., example.com)'
|
||||
required: true
|
||||
type: string
|
||||
|
||||
outputs:
|
||||
backend_url:
|
||||
description: "The backend URL without scheme (e.g., api.example.com)"
|
||||
value: ${{ jobs.generate-urls.outputs.backend_url }}
|
||||
frontend_url:
|
||||
description: "The frontend URL without scheme (e.g., app.example.com)"
|
||||
value: ${{ jobs.generate-urls.outputs.frontend_url }}
|
||||
backend_url_scheme:
|
||||
description: "The backend URL with scheme (e.g., https://api.example.com)"
|
||||
value: ${{ jobs.generate-urls.outputs.backend_url_scheme }}
|
||||
frontend_url_scheme:
|
||||
description: "The frontend URL with scheme (e.g., https://app.example.com)"
|
||||
value: ${{ jobs.generate-urls.outputs.frontend_url_scheme }}
|
||||
|
||||
jobs:
|
||||
generate-urls:
|
||||
permissions:
|
||||
contents: none
|
||||
runs-on: ${{ inputs.runner }}
|
||||
|
||||
outputs:
|
||||
backend_url: ${{ steps.set_urls.outputs.backend_url }}
|
||||
frontend_url: ${{ steps.set_urls.outputs.frontend_url }}
|
||||
backend_url_scheme: ${{ steps.set_urls.outputs.backend_url_scheme }}
|
||||
frontend_url_scheme: ${{ steps.set_urls.outputs.frontend_url_scheme }}
|
||||
|
||||
steps:
|
||||
- name: Generate URLs
|
||||
id: set_urls
|
||||
env:
|
||||
BASE_DOMAIN: ${{ inputs.base_domain }}
|
||||
run: |
|
||||
set -euo pipefail
|
||||
|
||||
if [ "${{ inputs.mode }}" = "prod" ]; then
|
||||
BACKEND_URL="api.${BASE_DOMAIN}"
|
||||
FRONTEND_URL="finance.${BASE_DOMAIN}"
|
||||
else
|
||||
# This is your current logic
|
||||
FRONTEND_URL="pr-${{ inputs.pr_number }}.group-8-frontend.pages.dev"
|
||||
BACKEND_URL="api-pr-${{ inputs.pr_number }}.${BASE_DOMAIN}"
|
||||
fi
|
||||
|
||||
FRONTEND_URL_SCHEME="https://$FRONTEND_URL"
|
||||
BACKEND_URL_SCHEME="https://$BACKEND_URL"
|
||||
|
||||
# This part correctly writes to GITHUB_OUTPUT for the step
|
||||
echo "backend_url_scheme=$BACKEND_URL_SCHEME" >> $GITHUB_OUTPUT
|
||||
echo "frontend_url_scheme=$FRONTEND_URL_SCHEME" >> $GITHUB_OUTPUT
|
||||
echo "backend_url=$BACKEND_URL" >> $GITHUB_OUTPUT
|
||||
echo "frontend_url=$FRONTEND_URL" >> $GITHUB_OUTPUT
|
||||
@@ -1,28 +1,10 @@
|
||||
from fastapi import APIRouter, Depends, status
|
||||
from fastapi_users import models
|
||||
from fastapi_users.manager import BaseUserManager
|
||||
from fastapi import APIRouter
|
||||
|
||||
from app.schemas.user import UserCreate, UserRead, UserUpdate
|
||||
from app.services.user_service import auth_backend, fastapi_users
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
@router.delete(
|
||||
"/users/me",
|
||||
status_code=status.HTTP_204_NO_CONTENT,
|
||||
tags=["users"],
|
||||
summary="Delete current user",
|
||||
response_description="The user has been successfully deleted.",
|
||||
)
|
||||
async def delete_me(
|
||||
user: models.UserProtocol = Depends(fastapi_users.current_user(active=True)),
|
||||
user_manager: BaseUserManager = Depends(fastapi_users.get_user_manager),
|
||||
):
|
||||
"""
|
||||
Delete the currently authenticated user.
|
||||
"""
|
||||
await user_manager.delete(user)
|
||||
|
||||
# Keep existing paths as-is under /auth/* and /users/*
|
||||
router.include_router(
|
||||
fastapi_users.get_auth_router(auth_backend), prefix="/auth/jwt", tags=["auth"]
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
Thank you for installing myapp-chart.
|
||||
|
||||
This chart packages all Kubernetes manifests from the original deployment directory and parameterizes environment, database name (with optional PR suffix), image, and domain for external access.
|
||||
|
||||
Namespaces per developer (important):
|
||||
- Install each developer's environment into their own namespace using Helm's -n/--namespace flag.
|
||||
- No hardcoded namespace is used in templates; resources are created in .Release.Namespace.
|
||||
- Example namespaces: dev-alice, dev-bob, pr-123, etc.
|
||||
|
||||
Key values:
|
||||
- deployment -> used as Database CR name and DB username (MARIADB_DB and MARIADB_USER)
|
||||
- image.repository/tag or image.digest -> container image
|
||||
- domain -> public FQDN used by TunnelBinding (required to expose app)
|
||||
- app/worker names, replicas, ports
|
||||
|
||||
Examples:
|
||||
- Dev install (Alice):
|
||||
helm upgrade --install myapp ./7project/charts/myapp-chart \
|
||||
-n dev-alice --create-namespace \
|
||||
-f values-dev.yaml \
|
||||
--set domain=alice.demo.example.com \
|
||||
--set-string rabbitmq.password="$RABBITMQ_PASSWORD" \
|
||||
--set-string database.password="$DB_PASSWORD"
|
||||
|
||||
- Dev install (Bob):
|
||||
helm upgrade --install myapp ./7project/charts/myapp-chart \
|
||||
-n dev-bob --create-namespace \
|
||||
-f values-dev.yaml \
|
||||
--set domain=bob.demo.example.com
|
||||
|
||||
- Prod install (different cleanupPolicy):
|
||||
helm upgrade --install myapp ./7project/charts/myapp-chart \
|
||||
-n prod --create-namespace \
|
||||
-f values-prod.yaml \
|
||||
--set domain=app.example.com
|
||||
|
||||
- PR (preview) install with DB name containing PR number (also its own namespace):
|
||||
PR=123
|
||||
helm upgrade --install myapp-pr-$PR ./7project/charts/myapp-chart \
|
||||
-n pr-$PR --create-namespace \
|
||||
-f values-dev.yaml \
|
||||
--set prNumber=$PR \
|
||||
--set deployment=preview-$PR \
|
||||
--set domain=pr-$PR.example.com
|
||||
|
||||
- Use a custom deployment identifier to suffix DB name, DB username and Secret name:
|
||||
helm upgrade --install myapp ./7project/charts/myapp-chart \
|
||||
-n dev-alice --create-namespace \
|
||||
-f values-dev.yaml \
|
||||
--set deployment=alice \
|
||||
--set domain=alice.demo.example.com
|
||||
|
||||
Render locally (dry run):
|
||||
helm template ./7project/charts/myapp-chart -f values-dev.yaml --set prNumber=456 --set deployment=test --set domain=demo.example.com --namespace dev-test | sed -n '/kind: Database/,$p' | head -n 30
|
||||
@@ -52,6 +52,22 @@ spec:
|
||||
value: {{ .Values.rabbitmq.vhost | default "/" | quote }}
|
||||
- name: MAIL_QUEUE
|
||||
value: {{ .Values.worker.mailQueueName | default "mail_queue" | quote }}
|
||||
- name: MOJEID_CLIENT_ID
|
||||
value: {{ .Values.oauth.mojeid.clientId | quote }}
|
||||
- name: MOJEID_CLIENT_SECRET
|
||||
value: {{ .Values.oauth.mojeid.clientSecret | quote }}
|
||||
- name: BANKID_CLIENT_ID
|
||||
value: {{ .Values.oauth.bankid.clientId | quote }}
|
||||
- name: BANKID_CLIENT_SECRET
|
||||
value: {{ .Values.oauth.bankid.clientSecret | quote }}
|
||||
- name: DOMAIN
|
||||
value: {{ required "Set .Values.domain" .Values.domain | quote }}
|
||||
- name: DOMAIN_SCHEME
|
||||
value: {{ required "Set .Values.domain_scheme" .Values.domain_scheme | quote }}
|
||||
- name: FRONTEND_DOMAIN
|
||||
value: {{ required "Set .Values.frontend_domain" .Values.frontend_domain | quote }}
|
||||
- name: FRONTEND_DOMAIN_SCHEME
|
||||
value: {{ required "Set .Values.frontend_domain_scheme" .Values.frontend_domain_scheme | quote }}
|
||||
livenessProbe:
|
||||
httpGet:
|
||||
path: /
|
||||
|
||||
@@ -11,6 +11,10 @@ deployment: ""
|
||||
# Public domain to expose the app under (used by TunnelBinding fqdn)
|
||||
# Set at install time: --set domain=example.com
|
||||
domain: ""
|
||||
domain_scheme: ""
|
||||
|
||||
frontend_domain: ""
|
||||
frontend_domain_scheme: ""
|
||||
|
||||
image:
|
||||
repository: lukastrkan/cc-app-demo
|
||||
@@ -33,6 +37,14 @@ worker:
|
||||
service:
|
||||
port: 80
|
||||
|
||||
oauth:
|
||||
bankid:
|
||||
clientId: ""
|
||||
clientSecret: ""
|
||||
mojeid:
|
||||
clientId: ""
|
||||
clientSecret: ""
|
||||
|
||||
rabbitmq:
|
||||
create: true
|
||||
replicas: 1
|
||||
|
||||
@@ -1 +1,42 @@
|
||||
/* App-level styles moved to ui.css for a cleaner layout. */
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import './App.css';
|
||||
import LoginRegisterPage from './pages/LoginRegisterPage';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import { logout } from './api';
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import './App.css'
|
||||
import { BACKEND_URL } from './config'
|
||||
|
||||
function App() {
|
||||
const [hasToken, setHasToken] = useState<boolean>(!!localStorage.getItem('token'));
|
||||
|
||||
useEffect(() => {
|
||||
// Handle OAuth callback: /oauth-callback?access_token=...&token_type=...
|
||||
if (window.location.pathname === '/oauth-callback') {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const token = params.get('access_token');
|
||||
if (token) {
|
||||
localStorage.setItem('token', token);
|
||||
setHasToken(true);
|
||||
}
|
||||
// Clean URL and redirect to home
|
||||
window.history.replaceState({}, '', '/');
|
||||
}
|
||||
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === 'token') setHasToken(!!e.newValue);
|
||||
};
|
||||
window.addEventListener('storage', onStorage);
|
||||
return () => window.removeEventListener('storage', onStorage);
|
||||
}, []);
|
||||
|
||||
if (!hasToken) {
|
||||
return <LoginRegisterPage onLoggedIn={() => setHasToken(true)} />;
|
||||
}
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<Dashboard onLogout={() => { logout(); setHasToken(false); }} />
|
||||
);
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + React</h1>
|
||||
<div className="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test HMR
|
||||
</p>
|
||||
<p style={{ fontSize: 12, color: '#888' }}>
|
||||
Backend URL: <code>{BACKEND_URL || '(not configured)'}</code>
|
||||
</p>
|
||||
</div>
|
||||
<p className="read-the-docs">
|
||||
Click on the Vite and React logos to learn more
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
import { BACKEND_URL } from './config';
|
||||
|
||||
export type LoginResponse = {
|
||||
access_token: string;
|
||||
token_type: string;
|
||||
};
|
||||
|
||||
export type Category = {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
};
|
||||
|
||||
export type Transaction = {
|
||||
id: number;
|
||||
amount: number;
|
||||
description?: string | null;
|
||||
category_ids: number[];
|
||||
};
|
||||
|
||||
function getBaseUrl() {
|
||||
const base = BACKEND_URL?.replace(/\/$/, '') || '';
|
||||
return base || '';
|
||||
}
|
||||
|
||||
function getHeaders(contentType: 'json' | 'form' | 'none' = 'json'): Record<string, string> {
|
||||
const token = localStorage.getItem('token');
|
||||
const headers: Record<string, string> = {};
|
||||
|
||||
if (contentType === 'json') {
|
||||
headers['Content-Type'] = 'application/json';
|
||||
} else if (contentType === 'form') {
|
||||
headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
}
|
||||
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
export async function login(email: string, password: string): Promise<void> {
|
||||
const body = new URLSearchParams();
|
||||
body.set('username', email);
|
||||
body.set('password', password);
|
||||
|
||||
const res = await fetch(`${getBaseUrl()}/auth/jwt/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: body.toString(),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Login failed');
|
||||
}
|
||||
const data: LoginResponse = await res.json();
|
||||
localStorage.setItem('token', data.access_token);
|
||||
}
|
||||
|
||||
export async function register(email: string, password: string, first_name?: string, last_name?: string): Promise<void> {
|
||||
const res = await fetch(`${getBaseUrl()}/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password, first_name, last_name }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Registration failed');
|
||||
}
|
||||
}
|
||||
|
||||
export async function getCategories(): Promise<Category[]> {
|
||||
const res = await fetch(`${getBaseUrl()}/categories/`, {
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to load categories');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export type CreateTransactionInput = {
|
||||
amount: number;
|
||||
description?: string;
|
||||
category_ids?: number[];
|
||||
};
|
||||
|
||||
export async function createTransaction(input: CreateTransactionInput): Promise<Transaction> {
|
||||
const res = await fetch(`${getBaseUrl()}/transactions/create`, {
|
||||
method: 'POST',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Failed to create transaction');
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function getTransactions(): Promise<Transaction[]> {
|
||||
const res = await fetch(`${getBaseUrl()}/transactions/`, {
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to load transactions');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export type User = {
|
||||
id: string;
|
||||
email: string;
|
||||
first_name?: string | null;
|
||||
last_name?: string | null;
|
||||
is_active: boolean;
|
||||
is_superuser: boolean;
|
||||
is_verified: boolean;
|
||||
};
|
||||
|
||||
export async function getMe(): Promise<User> {
|
||||
const res = await fetch(`${getBaseUrl()}/users/me`, {
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to load user');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export type UpdateMeInput = Partial<Pick<User, 'first_name' | 'last_name'>> & { password?: string };
|
||||
export async function updateMe(input: UpdateMeInput): Promise<User> {
|
||||
const res = await fetch(`${getBaseUrl()}/users/me`, {
|
||||
method: 'PATCH',
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Failed to update user');
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function deleteMe(): Promise<void> {
|
||||
const res = await fetch(`${getBaseUrl()}/users/me`, {
|
||||
method: 'DELETE',
|
||||
headers: getHeaders(),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Failed to delete account');
|
||||
}
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
export type Theme = 'system' | 'light' | 'dark';
|
||||
export type FontSize = 'small' | 'medium' | 'large';
|
||||
|
||||
const THEME_KEY = 'app_theme';
|
||||
const FONT_KEY = 'app_font_size';
|
||||
|
||||
export function applyTheme(theme: Theme) {
|
||||
const body = document.body;
|
||||
const effective = theme === 'system' ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
|
||||
body.setAttribute('data-theme', effective);
|
||||
}
|
||||
|
||||
export function applyFontSize(size: FontSize) {
|
||||
const root = document.documentElement;
|
||||
const map: Record<FontSize, string> = {
|
||||
small: '14px',
|
||||
medium: '16px',
|
||||
large: '18px',
|
||||
};
|
||||
root.style.fontSize = map[size];
|
||||
}
|
||||
|
||||
export function saveAppearance(theme: Theme, size: FontSize) {
|
||||
localStorage.setItem(THEME_KEY, theme);
|
||||
localStorage.setItem(FONT_KEY, size);
|
||||
}
|
||||
|
||||
export function loadAppearance(): { theme: Theme; size: FontSize } {
|
||||
const theme = (localStorage.getItem(THEME_KEY) as Theme) || 'light';
|
||||
const size = (localStorage.getItem(FONT_KEY) as FontSize) || 'medium';
|
||||
return { theme, size };
|
||||
}
|
||||
|
||||
export function applyAppearanceFromStorage() {
|
||||
const { theme, size } = loadAppearance();
|
||||
applyTheme(theme);
|
||||
applyFontSize(size);
|
||||
}
|
||||
@@ -1,11 +1,7 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import './ui.css'
|
||||
import App from './App.tsx'
|
||||
import { applyAppearanceFromStorage } from './appearance'
|
||||
|
||||
applyAppearanceFromStorage()
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { deleteMe, getMe, type UpdateMeInput, type User, updateMe } from '../api';
|
||||
|
||||
export default function AccountPage({ onDeleted }: { onDeleted: () => void }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const u = await getMe();
|
||||
setUser(u);
|
||||
setFirstName(u.first_name || '');
|
||||
setLastName(u.last_name || '');
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Failed to load account');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSave(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const payload: UpdateMeInput = { first_name: firstName || null as any, last_name: lastName || null as any };
|
||||
const updated = await updateMe(payload);
|
||||
setUser(updated);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || 'Failed to update');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!confirm('Are you sure you want to delete your account? This cannot be undone.')) return;
|
||||
try {
|
||||
await deleteMe();
|
||||
onDeleted();
|
||||
} catch (e: any) {
|
||||
alert(e?.message || 'Failed to delete account');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="card">
|
||||
<h3>Account</h3>
|
||||
{loading ? (
|
||||
<div>Loading…</div>
|
||||
) : error ? (
|
||||
<div style={{ color: 'crimson' }}>{error}</div>
|
||||
) : !user ? (
|
||||
<div>Not signed in</div>
|
||||
) : (
|
||||
<div className="space-y">
|
||||
<div className="muted">Email: <strong>{user.email}</strong></div>
|
||||
<form onSubmit={handleSave} className="space-y">
|
||||
<div className="form-row">
|
||||
<div>
|
||||
<label className="muted">First name</label>
|
||||
<input className="input" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="muted">Last name</label>
|
||||
<input className="input" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions" style={{ justifyContent: 'flex-end' }}>
|
||||
<button className="btn primary" type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save changes'}</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="actions" style={{ justifyContent: 'space-between' }}>
|
||||
<div className="muted"></div>
|
||||
<button className="btn" style={{ borderColor: 'crimson', color: 'crimson' }} onClick={handleDelete}>Delete account</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { applyFontSize, applyTheme, loadAppearance, saveAppearance, type FontSize, type Theme } from '../appearance';
|
||||
|
||||
export default function AppearancePage() {
|
||||
const [theme, setTheme] = useState<Theme>('light');
|
||||
const [size, setSize] = useState<FontSize>('medium');
|
||||
|
||||
useEffect(() => {
|
||||
const { theme, size } = loadAppearance();
|
||||
setTheme(theme);
|
||||
setSize(size);
|
||||
}, []);
|
||||
|
||||
function onThemeChange(next: Theme) {
|
||||
setTheme(next);
|
||||
applyTheme(next);
|
||||
saveAppearance(next, size);
|
||||
}
|
||||
|
||||
function onSizeChange(next: FontSize) {
|
||||
setSize(next);
|
||||
applyFontSize(next);
|
||||
saveAppearance(theme, next);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="card">
|
||||
<h3>Appearance</h3>
|
||||
<div className="space-y">
|
||||
<div>
|
||||
<div className="muted" style={{ marginBottom: 6 }}>Theme</div>
|
||||
<div className="segmented">
|
||||
<button className={theme === 'light' ? 'active' : ''} onClick={() => onThemeChange('light')}>Light</button>
|
||||
<button className={theme === 'dark' ? 'active' : ''} onClick={() => onThemeChange('dark')}>Dark</button>
|
||||
<button className={theme === 'system' ? 'active' : ''} onClick={() => onThemeChange('system')}>System</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="muted" style={{ marginBottom: 6 }}>Font size</div>
|
||||
<div className="segmented">
|
||||
<button className={size === 'small' ? 'active' : ''} onClick={() => onSizeChange('small')}>Small</button>
|
||||
<button className={size === 'medium' ? 'active' : ''} onClick={() => onSizeChange('medium')}>Medium</button>
|
||||
<button className={size === 'large' ? 'active' : ''} onClick={() => onSizeChange('large')}>Large</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { type Category, type Transaction, createTransaction, getCategories, getTransactions } from '../api';
|
||||
import AccountPage from './AccountPage';
|
||||
import AppearancePage from './AppearancePage';
|
||||
|
||||
function formatAmount(n: number) {
|
||||
return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);
|
||||
}
|
||||
|
||||
export default function Dashboard({ onLogout }: { onLogout: () => void }) {
|
||||
const [current, setCurrent] = useState<'home' | 'account' | 'appearance'>('home');
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// New transaction form state
|
||||
const [amount, setAmount] = useState<string>('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<number | ''>('');
|
||||
|
||||
// Filters
|
||||
const [minAmount, setMinAmount] = useState<string>('');
|
||||
const [maxAmount, setMaxAmount] = useState<string>('');
|
||||
const [filterCategoryId, setFilterCategoryId] = useState<number | ''>('');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
async function loadAll() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [txs, cats] = await Promise.all([getTransactions(), getCategories()]);
|
||||
setTransactions(txs);
|
||||
setCategories(cats);
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Failed to load data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { loadAll(); }, []);
|
||||
|
||||
const last10 = useMemo(() => {
|
||||
const sorted = [...transactions].sort((a, b) => b.id - a.id);
|
||||
return sorted.slice(0, 10);
|
||||
}, [transactions]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let arr = last10;
|
||||
const min = minAmount !== '' ? Number(minAmount) : undefined;
|
||||
const max = maxAmount !== '' ? Number(maxAmount) : undefined;
|
||||
if (min !== undefined) arr = arr.filter(t => t.amount >= min);
|
||||
if (max !== undefined) arr = arr.filter(t => t.amount <= max);
|
||||
if (filterCategoryId !== '') arr = arr.filter(t => t.category_ids.includes(filterCategoryId as number));
|
||||
if (searchText.trim()) arr = arr.filter(t => (t.description || '').toLowerCase().includes(searchText.toLowerCase()));
|
||||
return arr;
|
||||
}, [last10, minAmount, maxAmount, filterCategoryId, searchText]);
|
||||
|
||||
function categoryNameById(id: number) { return categories.find(c => c.id === id)?.name || `#${id}`; }
|
||||
|
||||
async function handleCreate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!amount) return;
|
||||
const payload = {
|
||||
amount: Number(amount),
|
||||
description: description || undefined,
|
||||
category_ids: selectedCategoryId !== '' ? [Number(selectedCategoryId)] : undefined,
|
||||
};
|
||||
try {
|
||||
const created = await createTransaction(payload);
|
||||
setTransactions(prev => [created, ...prev]);
|
||||
setAmount(''); setDescription(''); setSelectedCategoryId('');
|
||||
} catch (err: any) {
|
||||
alert(err?.message || 'Failed to create transaction');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-layout">
|
||||
<aside className="sidebar">
|
||||
<div className="logo">7Project</div>
|
||||
<nav className="nav">
|
||||
<button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button>
|
||||
<button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
|
||||
<button className={current === 'appearance' ? 'active' : ''} onClick={() => setCurrent('appearance')}>Appearance</button>
|
||||
</nav>
|
||||
</aside>
|
||||
<div className="content">
|
||||
<div className="topbar">
|
||||
<h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'account' ? 'Account' : 'Appearance'}</h2>
|
||||
<div className="actions">
|
||||
<span className="user muted">Signed in</span>
|
||||
<button className="btn" onClick={onLogout}>Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
<main className="page space-y">
|
||||
{current === 'home' && (
|
||||
<>
|
||||
<section className="card">
|
||||
<h3>Add Transaction</h3>
|
||||
<form onSubmit={handleCreate} className="form-row">
|
||||
<input className="input" type="number" step="0.01" placeholder="Amount" value={amount} onChange={(e) => setAmount(e.target.value)} required />
|
||||
<input className="input" type="text" placeholder="Description (optional)" value={description} onChange={(e) => setDescription(e.target.value)} />
|
||||
<select className="input" value={selectedCategoryId} onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : '')}>
|
||||
<option value="">No category</option>
|
||||
{categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
|
||||
</select>
|
||||
<button className="btn primary" type="submit">Add</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h3>Filters</h3>
|
||||
<div className="form-row">
|
||||
<input className="input" type="number" step="0.01" placeholder="Min amount" value={minAmount} onChange={(e) => setMinAmount(e.target.value)} />
|
||||
<input className="input" type="number" step="0.01" placeholder="Max amount" value={maxAmount} onChange={(e) => setMaxAmount(e.target.value)} />
|
||||
<select className="input" value={filterCategoryId} onChange={(e) => setFilterCategoryId(e.target.value ? Number(e.target.value) : '')}>
|
||||
<option value="">All categories</option>
|
||||
{categories.map(c => (<option key={c.id} value={c.id}>{c.name}</option>))}
|
||||
</select>
|
||||
<input className="input" type="text" placeholder="Search in description" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<h3>Latest Transactions (last 10)</h3>
|
||||
{loading ? (
|
||||
<div>Loading…</div>
|
||||
) : error ? (
|
||||
<div style={{ color: 'crimson' }}>{error}</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div>No transactions</div>
|
||||
) : (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th style={{ textAlign: 'right' }}>Amount</th>
|
||||
<th>Description</th>
|
||||
<th>Categories</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map(t => (
|
||||
<tr key={t.id}>
|
||||
<td>{t.id}</td>
|
||||
<td className="amount">{formatAmount(t.amount)}</td>
|
||||
<td>{t.description || ''}</td>
|
||||
<td>{t.category_ids.map(id => categoryNameById(id)).join(', ')}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
|
||||
{current === 'account' && (
|
||||
// lazy import avoided for simplicity
|
||||
<AccountPage onDeleted={onLogout} />
|
||||
)}
|
||||
|
||||
{current === 'appearance' && (
|
||||
<AppearancePage />
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { login, register } from '../api';
|
||||
import { BACKEND_URL } from '../config';
|
||||
|
||||
function oauthUrl(provider: 'mojeid' | 'bankid') {
|
||||
const base = BACKEND_URL.replace(/\/$/, '');
|
||||
const redirect = encodeURIComponent(window.location.origin + '/oauth-callback');
|
||||
return `${base}/auth/${provider}/authorize?redirect_url=${redirect}`;
|
||||
}
|
||||
|
||||
export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => void }) {
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (mode === 'login') {
|
||||
await login(email, password);
|
||||
onLoggedIn();
|
||||
} else {
|
||||
await register(email, password, firstName || undefined, lastName || undefined);
|
||||
// After register, prompt login automatically
|
||||
await login(email, password);
|
||||
onLoggedIn();
|
||||
}
|
||||
} catch (err: any) {
|
||||
setError(err?.message || 'Operation failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Add this useEffect hook
|
||||
useEffect(() => {
|
||||
// When the component mounts, add a class to the body
|
||||
document.body.classList.add('auth-page');
|
||||
|
||||
// When the component unmounts, remove the class
|
||||
return () => {
|
||||
document.body.classList.remove('auth-page');
|
||||
};
|
||||
}, []); // The empty array ensures this runs only once
|
||||
|
||||
// The JSX no longer needs the wrapper div
|
||||
return (
|
||||
<div className="card" style={{ width: 420 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<h2 style={{ margin: 0 }}>{mode === 'login' ? 'Welcome back' : 'Create your account'}</h2>
|
||||
<div className="segmented">
|
||||
<button className={mode === 'login' ? 'active' : ''} type="button" onClick={() => setMode('login')}>Login</button>
|
||||
<button className={mode === 'register' ? 'active' : ''} type="button" onClick={() => setMode('register')}>Register</button>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y">
|
||||
<div>
|
||||
<label className="muted">Email</label>
|
||||
<input className="input" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="muted">Password</label>
|
||||
<input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
{mode === 'register' && (
|
||||
<div className="form-row">
|
||||
<div>
|
||||
<label className="muted">First name (optional)</label>
|
||||
<input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="muted">Last name (optional)</label>
|
||||
<input className="input" type="text" value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{error && <div style={{ color: 'crimson' }}>{error}</div>}
|
||||
<div className="actions" style={{ justifyContent: 'space-between' }}>
|
||||
<div className="muted">Or continue with</div>
|
||||
<div className="actions">
|
||||
<a className="btn" href={oauthUrl('mojeid')}>MojeID</a>
|
||||
<a className="btn" href={oauthUrl('bankid')}>BankID</a>
|
||||
<button className="btn primary" type="submit" disabled={loading}>{loading ? 'Please wait…' : (mode === 'login' ? 'Login' : 'Register')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
:root {
|
||||
--bg: #f7f7fb;
|
||||
--panel: #ffffff;
|
||||
--text: #9aa3b2;
|
||||
--muted: #6b7280;
|
||||
--primary: #6f49fe;
|
||||
--primary-600: #5a37fb;
|
||||
--border: #e5e7eb;
|
||||
--radius: 12px;
|
||||
--shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
|
||||
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body, #root { height: 100%; }
|
||||
|
||||
body { background: var(--bg); margin: 0; display: block; }
|
||||
|
||||
/* Dark theme variables */
|
||||
body[data-theme="dark"] {
|
||||
--bg: #161a2b;
|
||||
--panel: #283046;
|
||||
--text: #283046;
|
||||
--muted: #cbd5e1;
|
||||
--primary: #8b7bff;
|
||||
--primary-600: #7b69ff;
|
||||
--border: #283046;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100%; }
|
||||
.sidebar { background: #15172a; color: #e5e7eb; display: flex; flex-direction: column; padding: 20px 12px; }
|
||||
.sidebar .logo { color: #fff; font-weight: 700; font-size: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
|
||||
.nav { margin-top: 12px; display: grid; gap: 4px; }
|
||||
.nav a, .nav button { color: #cbd5e1; text-align: left; background: transparent; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
|
||||
.nav a.active, .nav a:hover, .nav button:hover { background: rgba(255,255,255,0.08); color: #fff; }
|
||||
|
||||
.content { display: flex; flex-direction: column; height: 100%; }
|
||||
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
|
||||
.topbar .user { color: var(--muted); }
|
||||
.page { padding: 24px; max-width: 1100px; margin: auto; }
|
||||
|
||||
/* Cards */
|
||||
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
|
||||
.card h3 { margin: 0 0 12px; }
|
||||
|
||||
/* Forms */
|
||||
.input, select, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); }
|
||||
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
|
||||
.form-row { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0,1fr)); }
|
||||
.form-row > * { min-width: 140px; }
|
||||
.actions { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
/* Buttons */
|
||||
.btn { border: 1px solid var(--border); background: #fff; color: var(--text); padding: 10px 14px; border-radius: 10px; cursor: pointer; }
|
||||
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
.btn.primary:hover { background: var(--primary-600); }
|
||||
.btn.ghost { background: transparent; color: var(--muted); }
|
||||
|
||||
/* Tables */
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); }
|
||||
.table th { text-align: left; color: var(--muted); font-weight: 600; }
|
||||
.table td.amount { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Segmented control */
|
||||
.segmented { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 4px; border: 1px solid var(--border); }
|
||||
.segmented button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; }
|
||||
.segmented button.active { background: #fff; color: var(--text); box-shadow: var(--shadow); }
|
||||
|
||||
/* Auth layout */
|
||||
body.auth-page #root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
.muted { color: var(--muted); }
|
||||
.space-y > * + * { margin-top: 12px; }
|
||||
53
7project/meetings/2025-10-16-meeting.md
Normal file
53
7project/meetings/2025-10-16-meeting.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# Weekly Meeting Notes
|
||||
|
||||
- Group 8 - Personal finance tracker
|
||||
- Mentor: Jaychander
|
||||
|
||||
Keep all meeting notes in the `meetings.md` file in your project folder.
|
||||
Just copy the template below for each weekly meeting and fill in the details.
|
||||
|
||||
## Administrative Info
|
||||
|
||||
- Date: 2025-10-08
|
||||
- Attendees: Dejan Ribarovski, Lukas Trkan
|
||||
- Notetaker: Dejan Ribarovski
|
||||
|
||||
## Progress Update (Before Meeting)
|
||||
|
||||
Summary of what has been accomplished since the last meeting in the following categories.
|
||||
|
||||
## Action Items from Last Week (During Meeting)
|
||||
|
||||
- [x] start coding the app logic
|
||||
- [x] start writing the report so it matches the actual progress
|
||||
- [x] redo the system diagram so it includes a response flow
|
||||
|
||||
### Coding
|
||||
Implemented initial functioning version of the app, added OAuth with BankId and MojeID,
|
||||
added database snapshots.
|
||||
|
||||
### Documentation
|
||||
report.md is up to date
|
||||
|
||||
## Questions and Topics for Discussion (Before Meeting)
|
||||
|
||||
Prepare 3-5 questions and topics you want to discuss with your mentor.
|
||||
|
||||
1. What other functionality should be added to the app
|
||||
2. Priority for the next week (Testing maybe?)
|
||||
3. Question 3
|
||||
|
||||
## Discussion Notes (During Meeting)
|
||||
|
||||
## Action Items for Next Week (During Meeting)
|
||||
|
||||
Last 3 minutes of the meeting, summarize action items.
|
||||
|
||||
- [ ] OAuth
|
||||
- [ ] CI/CD fix
|
||||
- [ ] Database local (multiple bank accounts)
|
||||
- [ ] Add tests and set up github pipeline
|
||||
- [ ] Frontend imporvment - user experience
|
||||
- [ ] make the report more clear
|
||||
|
||||
---
|
||||
@@ -1,4 +1,4 @@
|
||||
# Project Report
|
||||
# Personal finance tracker
|
||||
|
||||
> **Instructions**:
|
||||
> This template provides the structure for your project report.
|
||||
@@ -7,126 +7,211 @@
|
||||
|
||||
## Project Overview
|
||||
|
||||
**Project Name**: [Your project name]
|
||||
**Project Name**: Personal Finance Tracker
|
||||
|
||||
**Group Members**:
|
||||
|
||||
- Student number, Name, GitHub username
|
||||
- Student number, Name, GitHub username
|
||||
- Student number, Name, GitHub username
|
||||
- 289229, Lukáš Trkan, lukastrkan
|
||||
- 289258, Dejan Ribarovski, derib2613, ribardej
|
||||
|
||||
**Brief Description**:
|
||||
[2-3 sentences describing what your application does and its main purpose]
|
||||
Our application is a finance tracker, so a person can easily track his cash flow
|
||||
through multiple bank accounts. Person can label transactions with custom categories
|
||||
and later filter by them.
|
||||
|
||||
## Architecture Overview
|
||||
Our system is a full‑stack web application composed of a React frontend, a FastAPI backend, a PostgreSQL database, and asynchronous background workers powered by Celery with RabbitMQ. Redis is available for caching/kv and may be used by Celery as a result backend. The backend exposes REST endpoints for authentication (email/password and OAuth), users, categories, and transactions. A thin controller layer (FastAPI routers) lives under app/api. Infrastructure for Kubernetes is provided via OpenTofu (Terraform‑compatible) modules and the application is packaged via a Helm chart.
|
||||
|
||||
### High-Level Architecture
|
||||
|
||||
[Describe the overall system architecture. Consider including a diagram using mermaid or linking to an image]
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Component A] --> B[Component B]
|
||||
B --> C[Component C]
|
||||
flowchart LR
|
||||
proc_queue[Message Queue] --> proc_queue_worker[Worker Service]
|
||||
proc_queue_worker --> ext_mail[(Email Service)]
|
||||
proc_cron[Task planner] --> proc_queue
|
||||
proc_queue_worker --> ext_bank[(Bank API)]
|
||||
proc_queue_worker --> db
|
||||
client[Client/Frontend] <--> svc[Backend API]
|
||||
svc --> proc_queue
|
||||
svc <--> db[(Database)]
|
||||
svc <--> cache[(Cache)]
|
||||
```
|
||||
|
||||
### Components
|
||||
|
||||
- **Component 1**: [Description of what this component does]
|
||||
- **Component 2**: [Description of what this component does]
|
||||
- **Component 3**: [Description of what this component does]
|
||||
- Frontend (frontend/): React + TypeScript app built with Vite. Talks to the backend via REST, handles login/registration, shows latest transactions, filtering, and allows adding transactions.
|
||||
- Backend API (backend/app): FastAPI app with routers under app/api for auth, categories, and transactions. Uses FastAPI Users for auth (JWT + OAuth), SQLAlchemy ORM, and Pydantic v2 schemas.
|
||||
- Worker service (backend/app/workers): Celery worker handling asynchronous tasks (e.g., sending verification emails, future background processing).
|
||||
- Database (PostgreSQL): Persists users, categories, transactions; schema managed by Alembic migrations.
|
||||
- Message Queue (RabbitMQ): Transports background jobs from the API to the worker.
|
||||
- Cache/Result Store (Redis): Available for caching or Celery result backend.
|
||||
- Infrastructure as Code (tofu/): OpenTofu modules provisioning cluster services (RabbitMQ, Redis, Argo CD, cert-manager, Cloudflare tunnel, etc.).
|
||||
- Deployment Chart (charts/myapp-chart/): Helm chart to deploy the application to Kubernetes.
|
||||
|
||||
### Technologies Used
|
||||
|
||||
- **Backend**: [e.g., Go, Node.js, Python]
|
||||
- **Database**: [e.g., PostgreSQL, MongoDB, Redis]
|
||||
- **Cloud Services**: [e.g., AWS EC2, Google Cloud Run, Azure Functions]
|
||||
- **Container Orchestration**: [e.g., Docker, Kubernetes]
|
||||
- **Other**: [List other significant technologies]
|
||||
- Backend: Python, FastAPI, FastAPI Users, SQLAlchemy, Pydantic, Alembic, Celery
|
||||
- Frontend: React, TypeScript, Vite
|
||||
- Database: PostgreSQL
|
||||
- Messaging: RabbitMQ
|
||||
- Cache: Redis
|
||||
- Containerization/Orchestration: Docker, Docker Compose (dev), Kubernetes, Helm
|
||||
- IaC/Platform: OpenTofu (Terraform), Argo CD, cert-manager, MetalLB, Cloudflare Tunnel, Prometheus
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### System Requirements
|
||||
|
||||
- Operating System: [e.g., Linux, macOS, Windows]
|
||||
- Minimum RAM: [e.g., 8GB]
|
||||
- Storage: [e.g., 10GB free space]
|
||||
- Operating System: Linux, macOS, or Windows
|
||||
- Minimum RAM: 4 GB (8 GB recommended for running backend, frontend, and database together)
|
||||
- Storage: 2 GB free (Docker images may require additional space)
|
||||
|
||||
### Required Software
|
||||
|
||||
- [Software 1] (version X.X or higher)
|
||||
- [Software 2] (version X.X or higher)
|
||||
- [etc.]
|
||||
- Docker Desktop or Docker Engine 24+
|
||||
- Docker Compose v2+
|
||||
- Node.js 20+ and npm 10+ (for local frontend dev/build)
|
||||
- Python 3.12+ (for local backend dev outside Docker)
|
||||
- PostgreSQL 15+ (optional if running DB outside Docker)
|
||||
- Helm 3.12+ and kubectl 1.29+ (for Kubernetes deployment)
|
||||
- OpenTofu 1.7+ (for infrastructure provisioning)
|
||||
|
||||
### Dependencies
|
||||
### Environment Variables (common)
|
||||
|
||||
```bash
|
||||
# List key dependencies that need to be installed
|
||||
# For example:
|
||||
# Docker Engine 20.10+
|
||||
# Node.js 18+
|
||||
# Go 1.25+
|
||||
```
|
||||
- Backend: SECRET, FRONTEND_URL, BACKEND_URL, DATABASE_URL, RABBITMQ_URL, REDIS_URL
|
||||
- OAuth vars (Backend): MOJEID_CLIENT_ID/SECRET, BANKID_CLIENT_ID/SECRET (optional)
|
||||
- Frontend: VITE_BACKEND_URL
|
||||
|
||||
### Dependencies (key libraries)
|
||||
I am not sure what is meant by "key libraries"
|
||||
|
||||
Backend: FastAPI, fastapi-users, SQLAlchemy, pydantic v2, Alembic, Celery
|
||||
Frontend: React, TypeScript, Vite
|
||||
Services: PostgreSQL, RabbitMQ, Redis
|
||||
|
||||
## Build Instructions
|
||||
|
||||
### 1. Clone the Repository
|
||||
You can run the project with Docker Compose (recommended for local development) or run services manually.
|
||||
|
||||
### 1) Clone the Repository
|
||||
|
||||
```bash
|
||||
git clone [your-repository-url]
|
||||
cd [repository-name]
|
||||
git clone https://github.com/dat515-2025/Group-8.git
|
||||
cd 7project
|
||||
```
|
||||
|
||||
### 2. Install Dependencies
|
||||
|
||||
### 2) Install dependencies
|
||||
Backend
|
||||
```bash
|
||||
# Provide step-by-step commands
|
||||
# For example:
|
||||
# npm install
|
||||
# go mod download
|
||||
# In 7project/backend
|
||||
python3.12 -m venv .venv
|
||||
source .venv/bin/activate # Windows: .venv\Scripts\activate
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### 3. Build the Application
|
||||
|
||||
Frontend
|
||||
```bash
|
||||
# Provide exact build commands
|
||||
# For example:
|
||||
# make build
|
||||
# docker build -t myapp .
|
||||
# In 7project/frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
### 4. Configuration
|
||||
### 3) Manual Local Run
|
||||
|
||||
Backend
|
||||
```bash
|
||||
# Any configuration steps needed
|
||||
# Environment variables to set
|
||||
# Configuration files to create
|
||||
# From the 7project/ directory
|
||||
docker compose up --build
|
||||
# This starts: PostgreSQL, RabbitMQ/Redis (if defined)
|
||||
|
||||
# Set environment variables (or create .env file)
|
||||
export SECRET=CHANGE_ME_SECRET
|
||||
export BACKEND_URL=http://127.0.0.1:8000
|
||||
export FRONTEND_URL=http://localhost:5173
|
||||
export DATABASE_URL=postgresql+asyncpg://user:password@127.0.0.1:5432/app
|
||||
export RABBITMQ_URL=amqp://guest:guest@127.0.0.1:5672/
|
||||
export REDIS_URL=redis://127.0.0.1:6379/0
|
||||
|
||||
# Apply DB migrations (Alembic)
|
||||
# From 7project/backend
|
||||
alembic upgrade head
|
||||
|
||||
# Run API
|
||||
uvicorn app.app:fastApi --reload --host 0.0.0.0 --port 8000
|
||||
|
||||
# Run Celery worker (optional, for emails/background tasks)
|
||||
celery -A app.celery_app.celery_app worker -l info
|
||||
```
|
||||
|
||||
Frontend
|
||||
```bash
|
||||
# Configure backend URL for dev
|
||||
echo 'VITE_BACKEND_URL=http://127.0.0.1:8000' > .env
|
||||
npm run dev
|
||||
# Open http://localhost:5173
|
||||
```
|
||||
|
||||
- Backend default: http://127.0.0.1:8000 (OpenAPI at /docs)
|
||||
- Frontend default: http://localhost:5173
|
||||
|
||||
If needed, adjust compose services/ports in compose.yml.
|
||||
|
||||
|
||||
## Deployment Instructions
|
||||
|
||||
### Local Deployment
|
||||
### Local (Docker Compose)
|
||||
|
||||
Described in the previous section (Manual Local Run)
|
||||
|
||||
### Kubernetes (via OpenTofu + Helm)
|
||||
|
||||
1) Provision platform services (RabbitMQ/Redis/ingress/tunnel/etc.) with OpenTofu
|
||||
```bash
|
||||
# Step-by-step commands for local deployment
|
||||
# For example:
|
||||
# docker-compose up -d
|
||||
# kubectl apply -f manifests/
|
||||
cd tofu
|
||||
# copy and edit variables
|
||||
cp terraform.tfvars.example terraform.tfvars
|
||||
# authenticate to your cluster/cloud as needed, then:
|
||||
tofu init
|
||||
tofu plan
|
||||
tofu apply
|
||||
```
|
||||
|
||||
### Cloud Deployment
|
||||
|
||||
2) Deploy the app using Helm
|
||||
```bash
|
||||
# Commands for cloud deployment
|
||||
# Include any cloud-specific setup
|
||||
# Set the namespace
|
||||
kubectl create namespace myapp || true
|
||||
|
||||
# Install/upgrade the chart with required values
|
||||
helm upgrade --install myapp charts/myapp-chart \
|
||||
-n myapp \
|
||||
-f charts/myapp-chart/values.yaml \
|
||||
--set image.backend.repository=myorg/myapp-backend \
|
||||
--set image.backend.tag=latest \
|
||||
--set env.BACKEND_URL="https://myapp.example.com" \
|
||||
--set env.FRONTEND_URL="https://myapp.example.com" \
|
||||
--set env.SECRET="CHANGE_ME_SECRET"
|
||||
```
|
||||
Adjust values to your registry and domain. The chart’s NOTES.txt includes additional examples.
|
||||
|
||||
3) Expose and access
|
||||
- If using Cloudflare Tunnel or an ingress, configure DNS accordingly (see tofu/modules/cloudflare and deployment/tunnel.yaml).
|
||||
- For quick testing without ingress:
|
||||
```bash
|
||||
kubectl -n myapp port-forward deploy/myapp-backend 8000:8000
|
||||
kubectl -n myapp port-forward deploy/myapp-frontend 5173:80
|
||||
```
|
||||
|
||||
### Verification
|
||||
|
||||
```bash
|
||||
# Commands to verify deployment worked
|
||||
# How to check if services are running
|
||||
# Example health check endpoints
|
||||
# Check pods
|
||||
kubectl -n myapp get pods
|
||||
|
||||
# Backend health
|
||||
curl -i http://127.0.0.1:8000/
|
||||
# OpenAPI
|
||||
open http://127.0.0.1:8000/docs
|
||||
|
||||
# Frontend (if port-forwarded)
|
||||
open http://localhost:5173
|
||||
```
|
||||
|
||||
## Testing Instructions
|
||||
@@ -156,19 +241,38 @@ cd [repository-name]
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
All endpoints are documented at OpenAPI: http://127.0.0.1:8000/docs
|
||||
|
||||
### Auth: Register and Login (JWT)
|
||||
|
||||
```bash
|
||||
# Examples of how to use the application
|
||||
# Common commands or API calls
|
||||
# Sample data or test scenarios
|
||||
# Register
|
||||
curl -X POST http://127.0.0.1:8000/auth/register \
|
||||
-H 'Content-Type: application/json' \
|
||||
-d '{
|
||||
"email": "user@example.com",
|
||||
"password": "StrongPassw0rd",
|
||||
"first_name": "Jane",
|
||||
"last_name": "Doe"
|
||||
}'
|
||||
|
||||
# Login (JWT)
|
||||
TOKEN=$(curl -s -X POST http://127.0.0.1:8000/auth/jwt/login \
|
||||
-H 'Content-Type: application/x-www-form-urlencoded' \
|
||||
-d 'username=user@example.com&password=StrongPassw0rd' | jq -r .access_token)
|
||||
|
||||
echo $TOKEN
|
||||
|
||||
# Call a protected route
|
||||
curl -H "Authorization: Bearer $TOKEN" http://127.0.0.1:8000/authenticated-route
|
||||
```
|
||||
|
||||
### Advanced Features
|
||||
### Frontend
|
||||
|
||||
```bash
|
||||
# Examples showcasing advanced functionality
|
||||
```
|
||||
- Start with: npm run dev in 7project/frontend
|
||||
- Ensure VITE_BACKEND_URL is set to the backend URL (e.g., http://127.0.0.1:8000)
|
||||
- Open http://localhost:5173
|
||||
- Login, view latest transactions, filter, and add new transactions from the UI.
|
||||
|
||||
---
|
||||
|
||||
@@ -215,18 +319,18 @@ cd [repository-name]
|
||||
> This information is used for individual grading.
|
||||
> Link to the specific commit on GitHub for each contribution.
|
||||
|
||||
| Task/Component | Assigned To | Status | Time Spent | Difficulty | Notes |
|
||||
| ------------------------------------------------------------------- | ----------- | ------------- | ---------- | ---------- | ----------- |
|
||||
| Project Setup & Repository | [Name] | ✅ Complete | [X hours] | Medium | [Any notes] |
|
||||
| [Design Document](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Easy | [Any notes] |
|
||||
| [Backend API Development](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Hard | [Any notes] |
|
||||
| [Database Setup & Models](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Medium | [Any notes] |
|
||||
| [Frontend Development](https://github.com/dat515-2025/group-name) | [Name] | 🔄 In Progress | [X hours] | Medium | [Any notes] |
|
||||
| [Docker Configuration](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Easy | [Any notes] |
|
||||
| [Cloud Deployment](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Hard | [Any notes] |
|
||||
| [Testing Implementation](https://github.com/dat515-2025/group-name) | [Name] | ⏳ Pending | [X hours] | Medium | [Any notes] |
|
||||
| [Documentation](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Easy | [Any notes] |
|
||||
| [Presentation Video](https://github.com/dat515-2025/group-name) | [Name] | ✅ Complete | [X hours] | Medium | [Any notes] |
|
||||
| Task/Component | Assigned To | Status | Time Spent | Difficulty | Notes |
|
||||
|-----------------------------------------------------------------------|-------------| ------------- |----------------|------------| ----------- |
|
||||
| [Project Setup & Repository](https://github.com/dat515-2025/Group-8#) | Lukas | ✅ Complete | [X hours] | Medium | [Any notes] |
|
||||
| [Design Document](https://github.com/dat515-2025/Group-8/blob/main/6design/design.md) | Both | ✅ Complete | 2 Hours | Easy | [Any notes] |
|
||||
| [Backend API Development](https://github.com/dat515-2025/Group-8/tree/main/7project/backend/app/api) | Dejan | ✅ Complete | 10 hours | Medium | [Any notes] |
|
||||
| [Database Setup & Models](https://github.com/dat515-2025/Group-8/tree/main/7project/backend/app/models) | Lukas | ✅ Complete | [X hours] | Medium | [Any notes] |
|
||||
| [Frontend Development](https://github.com/dat515-2025/Group-8/tree/main/7project/frontend) | Dejan | 🔄 In Progress | 7 hours so far | Medium | [Any notes] |
|
||||
| [Docker Configuration](https://github.com/dat515-2025/Group-8/blob/main/7project/compose.yml) | Lukas | ✅ Complete | [X hours] | Easy | [Any notes] |
|
||||
| [Cloud Deployment](https://github.com/dat515-2025/Group-8/blob/main/7project/deployment/app-demo-deployment.yaml) | Lukas | ✅ Complete | [X hours] | Hard | [Any notes] |
|
||||
| [Testing Implementation](https://github.com/dat515-2025/group-name) | Dejan | ❌ Not Started | [X hours] | Medium | [Any notes] |
|
||||
| [Documentation](https://github.com/dat515-2025/group-name) | Both | ❌ Not Started | [X hours] | Easy | [Any notes] |
|
||||
| [Presentation Video](https://github.com/dat515-2025/group-name) | Both | ❌ Not Started | [X hours] | Medium | [Any notes] |
|
||||
|
||||
**Legend**: ✅ Complete | 🔄 In Progress | ⏳ Pending | ❌ Not Started
|
||||
|
||||
@@ -244,25 +348,16 @@ cd [repository-name]
|
||||
| [Date] | Documentation | [X.X] | Updated README and design doc |
|
||||
| **Total** | | **[XX.X]** | |
|
||||
|
||||
### [Team Member 2 Name]
|
||||
### Dejan
|
||||
|
||||
| Date | Activity | Hours | Description |
|
||||
| --------- | -------------------- | ---------- | ----------------------------------------- |
|
||||
| [Date] | Frontend Development | [X.X] | Created user interface mockups |
|
||||
| [Date] | Integration | [X.X] | Connected frontend to backend API |
|
||||
| [Date] | Deployment | [X.X] | Docker configuration and cloud deployment |
|
||||
| [Date] | Testing | [X.X] | End-to-end testing |
|
||||
| **Total** | | **[XX.X]** | |
|
||||
| Date | Activity | Hours | Description |
|
||||
|-------------|----------------------|--------|--------------------------------|
|
||||
| 25.9. | Design | 1.5 | 6design |
|
||||
| 9-11.10. | Backend APIs | 10 | Implemented Backend APIs |
|
||||
| 13-15.10. | Frontend Development | 6.5 | Created user interface mockups |
|
||||
| Continually | Documantation | 3 | Documenting the dev process |
|
||||
| **Total** | | **21** | |
|
||||
|
||||
### [Team Member 3 Name] (if applicable)
|
||||
|
||||
| Date | Activity | Hours | Description |
|
||||
| --------- | ------------------------ | ---------- | -------------------------------- |
|
||||
| [Date] | Database Design | [X.X] | Schema design and implementation |
|
||||
| [Date] | Cloud Configuration | [X.X] | AWS/GCP setup and configuration |
|
||||
| [Date] | Performance Optimization | [X.X] | Caching and query optimization |
|
||||
| [Date] | Monitoring | [X.X] | Logging and monitoring setup |
|
||||
| **Total** | | **[XX.X]** | |
|
||||
|
||||
### Group Total: [XXX.X] hours
|
||||
|
||||
@@ -292,11 +387,8 @@ cd [repository-name]
|
||||
|
||||
[Personal reflection on growth, challenges, and learning]
|
||||
|
||||
#### [Team Member 3 Name] (if applicable)
|
||||
|
||||
[Personal reflection on growth, challenges, and learning]
|
||||
|
||||
---
|
||||
|
||||
**Report Completion Date**: [Date]
|
||||
**Last Updated**: [Date]
|
||||
**Last Updated**: 15.10.2025
|
||||
Reference in New Issue
Block a user