feat: ✨ Added Onboarding Customisation

* feat: 🚀 Add backend for onboarding pages

* refactor: 📦 Cleanup code for darkmode

* feat: ✨ Add onboarding page configurator

* feat: 🎉 Add wizarr "theme" to markdown editor

* feat: 🎊 Cleanup toolbar for markdown editor

* refactor: 📦 Cleanup code for OnboardingSection

* feat: 🎉 Add custom onboarding markdown to help page

* refactor: 📦 Cleanup imports for md-editor types

* feat: 🎊 Add tooltips for onboarding page manage buttons

* feat: 🎉 Allow translations for markdown editor buttons, etc

* fix: 🩹 Fix error with height in Carousel

* fix: 🩹 Update message and doc for onboarding api

* feat: 🎉 Create migration file for onboarding table

* feat: 🚀 Allow uploading images for onboarding pages

* fix: 🩹 md-editor-v3 as frontend dependency

* fix: 🐛 Fix error in .gitignore

* fix: 🚑 Resolve change request for PR

* feat: 🎊 Add finish button to help page

.gitignore

@@ -444,5 +444,5 @@ poetry.toml
 testing/core
 apps/wizarr-backend-next/
 apps/wizarr-backend-old/
-database/
+/apps/wizarr-backend/database/
 .sentryclirc

apps/wizarr-backend/wizarr_backend/api/routes/__init__.py

@@ -13,6 +13,7 @@
 from .authentication_api import api as authentication_api # REVIEW - This is almost completed
 from .backup_api import api as backup_api
 from .discord_api import api as discord_api
+from .image_api import api as image_api
 from .invitations_api import api as invitations_api # REVIEW - This is almost completed
 from .libraries_api import api as libraries_api
 from .notifications_api import api as notifications_api
@@ -27,6 +28,7 @@
 from .webhooks_api import api as webhooks_api
 from .logging_api import api as logging_api
 from .oauth_api import api as oauth_api
+from .onboarding_api import api as onboarding_api
 from .mfa_api import api as mfa_api
 from .utilities_api import api as utilities_api
 from .jellyfin_api import api as jellyfin_api
@@ -111,13 +113,15 @@ def handle_request_exception(error):
 api.add_namespace(discord_api)
 api.add_namespace(emby_api)
 api.add_namespace(healthcheck_api)
+api.add_namespace(image_api)
 api.add_namespace(invitations_api)
 api.add_namespace(jellyfin_api)
 api.add_namespace(libraries_api)
 api.add_namespace(logging_api)
 api.add_namespace(mfa_api)
 api.add_namespace(notifications_api)
 api.add_namespace(oauth_api)
+api.add_namespace(onboarding_api)
 api.add_namespace(plex_api)
 api.add_namespace(requests_api)
 api.add_namespace(scan_libraries_api)
@@ -135,4 +139,3 @@ def handle_request_exception(error):
 
 # TODO: Tasks API
 # TODO: API API
-# TODO: HTML API

apps/wizarr-backend/wizarr_backend/api/routes/image_api.py

@@ -0,0 +1,85 @@
+import os
+from json import dumps, loads
+from uuid import uuid4
+from flask import send_from_directory, current_app, request
+from flask_jwt_extended import jwt_required
+from flask_restx import Namespace, Resource, reqparse
+from werkzeug.utils import secure_filename
+from werkzeug.datastructures import FileStorage
+
+api = Namespace("Image", description="Image related operations", path="/image")
+
+# Define the file upload parser
+file_upload_parser = reqparse.RequestParser()
+file_upload_parser.add_argument('file', location='files',
+ type=FileStorage, required=True,
+ help='Image file')
+
+@api.route("")
+class ImageListApi(Resource):
+ """API resource for all images"""
+
+ @jwt_required()
+ @api.doc(security="jwt")
+ @api.expect(file_upload_parser)
+ def post(self):
+ """Upload image"""
+ # Check if the post request has the file part
+ if 'file' not in request.files:
+ return {"message": "No file part"}, 400
+ file = request.files['file']
+ # If the user does not select a file, the browser submits an
+ # empty file without a filename.
+ if file.filename == '':
+ return {"message": "No selected file"}, 400
+ if file:
+ # Extract the file extension
+ file_extension = os.path.splitext(secure_filename(file.filename))[1].lower()
+ if file_extension not in ['.png', '.jpg', '.jpeg']:
+ return {"message": "Unsupported file format"}, 400
+
+ upload_folder = current_app.config['UPLOAD_FOLDER']
+ if not os.path.exists(upload_folder):
+ os.makedirs(upload_folder)
+ # Generate a unique filename using UUID
+ filename = f"{uuid4()}{file_extension}"
+
+ # Check if the file exists and generate a new UUID if it does
+ while os.path.exists(os.path.join(upload_folder, filename)):
+ filename = f"{uuid4()}{file_extension}"
+ file_path = os.path.join(upload_folder, filename)
+ file.save(file_path)
+ return {"message": f"File {filename} uploaded successfully", "filename": filename}, 201
+
+
+@api.route("/<filename>")
+class ImageAPI(Resource):
+ """API resource for a single image"""
+
+ @api.response(404, "Image not found")
+ @api.response(500, "Internal server error")
+ def get(self, filename):
+ """Get image"""
+ # Assuming images are stored in a directory specified by UPLOAD_FOLDER config
+ upload_folder = current_app.config['UPLOAD_FOLDER']
+ image_path = os.path.join(upload_folder, filename)
+ if os.path.exists(image_path):
+ return send_from_directory(upload_folder, filename)
+ else:
+ return {"message": "Image not found"}, 404
+
+ @jwt_required()
+ @api.doc(description="Delete a single image")
+ @api.response(404, "Image not found")
+ @api.response(500, "Internal server error")
+ def delete(self, filename):
+ """Delete image"""
+ upload_folder = current_app.config['UPLOAD_FOLDER']
+ image_path = os.path.join(upload_folder, filename)
+
+ # Check if the file exists
+ if not os.path.exists(image_path):
+ return {"message": "Image not found"}, 404
+
+ os.remove(image_path)
+ return {"message": "Image deleted successfully"}, 200

apps/wizarr-backend/wizarr_backend/api/routes/onboarding_api.py

@@ -0,0 +1,106 @@
+from json import dumps, loads
+from flask import request
+from flask_jwt_extended import jwt_required
+from flask_restx import Namespace, Resource
+from playhouse.shortcuts import model_to_dict
+from peewee import fn
+from app.models.database import db
+
+from app.models.database.onboarding import Onboarding as OnboardingDB
+
+api = Namespace("Onboarding", description="Onboarding related operations", path="/onboarding")
+
+@api.route("")
+class OnboardingListApi(Resource):
+ """API resource for all onboarding pages"""
+
+ @api.doc(security="jwt")
+ def get(self):
+ """Get onboarding pages"""
+ response = list(OnboardingDB.select().order_by(OnboardingDB.order).dicts())
+ return loads(dumps(response, indent=4, sort_keys=True, default=str)), 200
+
+ @api.doc(security="jwt")
+ @jwt_required()
+ def post(self):
+ """Create onboarding page"""
+ value = request.form.get("value")
+ enabled = request.form.get("enabled") in ["true", "True", "1"]
+ max_order = OnboardingDB.select(fn.MAX(OnboardingDB.order)).scalar() or 0
+ new_order = max_order + 1
+ onboarding_page = OnboardingDB.create(order=new_order, value=value, enabled=enabled)
+ onboarding_page.save()
+ return { "message": "Onboarding page created", "page": model_to_dict(onboarding_page) }, 200
+
+
+@api.route("/<int:onboarding_id>")
+class OnboardingAPI(Resource):
+ """API resource for a single onboarding page"""
+
+ method_decorators = [jwt_required()]
+
+ @api.doc(description="Updates a single onboarding page")
+ @api.response(404, "Onboarding page not found")
+ @api.response(500, "Internal server error")
+ def put(self, onboarding_id: int):
+ value = request.form.get("value")
+ enabled = request.form.get("enabled")
+ order = request.form.get("order", type=int)
+
+ with db.atomic() as transaction:
+ page = OnboardingDB.get_or_none(OnboardingDB.id == onboarding_id)
+ if not page:
+ return {"error": "Onboarding page not found"}, 404
+
+ if(value is not None):
+ page.value = value
+ if(enabled is not None):
+ page.enabled = enabled in ["true", "True", "1"]
+
+ if order is not None and page.order != order:
+ step = 1 if page.order > order else -1
+ start, end = sorted([page.order, order])
+
+ # Update orders of affected pages
+ affected_pages = OnboardingDB.select().where(
+ OnboardingDB.id != onboarding_id,
+ OnboardingDB.order >= start,
+ OnboardingDB.order <= end,
+ )
+
+ for p in affected_pages:
+ p.order += step
+ p.save() # Save each affected page
+
+ # Update the target page
+ page.order = order
+ page.save() # Save the target page
+
+ try:
+ transaction.commit() # Commit the transaction
+ except Exception as e:
+ transaction.rollback() # Rollback in case of error
+ return {"error": str(e)}, 500
+ return loads(dumps(model_to_dict(page), indent=4, sort_keys=True, default=str)), 200
+
+ @api.doc(description="Delete a single onboarding page")
+ @api.response(404, "Invite not found")
+ @api.response(500, "Internal server error")
+ def delete(self, onboarding_id):
+ """Delete onboarding page"""
+ # Select the invite from the database
+ onboarding_page = OnboardingDB.get_or_none(OnboardingDB.id == onboarding_id)
+
+ # Check if the invite exists
+ if not onboarding_page:
+ return {"message": "Onboarding page not found"}, 404
+
+ onboarding_page.delete_instance()
+
+ # Update order of subsequent pages
+ subsequent_pages = OnboardingDB.select().where(OnboardingDB.order > onboarding_page.order)
+ for page in subsequent_pages:
+ page.order -= 1
+ page.save()
+
+ return { "message": "Onboarding page deleted successfully" }, 200

apps/wizarr-backend/wizarr_backend/app/migrator/migrations/2024-07-30_11-02-04.py

@@ -0,0 +1,40 @@
+#
+# CREATED ON VERSION: V4.1.1
+# MIGRATION: 2024-07-30_11-02-04
+# CREATED: Tue Jul 30 2024
+#
+
+from peewee import *
+from playhouse.migrate import *
+
+from app import db
+
+# Do not change the name of this file,
+# migrations are run in order of their filenames date and time
+
+def run():
+ # Use migrator to perform actions on the database
+ migrator = SqliteMigrator(db)
+
+ # Create new table 'onboarding'
+ with db.transaction():
+ # Check if the table exists
+ cursor = db.cursor()
+ cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='onboarding';")
+ table_exists = cursor.fetchone()
+
+ if not table_exists:
+ db.execute_sql("""
+ CREATE TABLE "onboarding" (
+ "id" INTEGER NOT NULL UNIQUE,
+ "value" TEXT NOT NULL,
+ "order" INTEGER NOT NULL UNIQUE,
+ "enabled" INTEGER NOT NULL DEFAULT 1,
+ PRIMARY KEY("id")
+ )
+ """)
+ print("Table 'onboarding' created successfully")
+ else:
+ print("Table 'onboarding' already exists")
+
+ print("Migration 2024-07-30_11-02-04 complete")

apps/wizarr-backend/wizarr_backend/app/models/database/onboarding.py

@@ -0,0 +1,8 @@
+from peewee import BooleanField, CharField, IntegerField
+from app.models.database.base import BaseModel
+
+class Onboarding(BaseModel):
+ id = IntegerField(primary_key=True, unique=True)
+ value = CharField(null=False)
+ order = IntegerField(null=False, unique=True)
+ enabled = BooleanField(default=False)

apps/wizarr-frontend/src/assets/scss/main.scss

@@ -2,6 +2,7 @@
 
 // Internal libraries
 @import "./tailwind.scss";
+@import "./md-editor-v3.scss";
 @import "./extend.scss";
 @import "./animations.scss";
 @import "./xterm.scss";

apps/wizarr-frontend/src/assets/scss/md-editor-v3.scss

@@ -0,0 +1,30 @@
+.md-editor-preview {
+ --md-theme-quote-border: 5px solid rgb(208, 49, 67) !important;
+ --md-theme-link-color: rgb(208, 49, 67) !important;
+ --md-theme-link-hover-color: rgb(208, 49, 67) !important;
+}
+
+.md-editor-preview {
+ word-break: normal !important;
+
+ h1, h2, h3, h4, h5, h6 {
+ word-break: normal !important;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ &:first-child {
+ margin-top: 0;
+ }
+ }
+}
+
+.md-editor.md-editor-dark, .md-editor-modal-container[data-theme='dark'] {
+ --md-color: #fff;
+}
+
+.md-editor.md-editor-previewOnly {
+ background-color: inherit !important;
+}
+
+.md-editor.md-editor-previewOnly .md-editor-preview-wrapper {
+ padding: inherit !important;
+}

apps/wizarr-frontend/src/components/Carousel.vue

@@ -1,5 +1,5 @@
 <template>
- <div ref="carousel" class="relative overflow-hidden rounded h-screen" style="transition: max-height 0.5s ease-in-out" :style="{ maxHeight: carouselHeight }">
+ <div ref="carousel" class="relative rounded overflow-hidden" style="transition: height 0.5s ease-in-out" :style="{ height: carouselHeight }">
  <template v-for="(view, index) in views" :key="index + 1">
  <div v-if="index == 0" :id="`carousel-item-${index}`"></div>
  <div :id="`carousel-item-${index + 1}`" class="hidden duration-700 ease-in-out">
@@ -132,13 +132,16 @@ export default defineComponent({
 
  const carouselTransition = carouselRef.style.transition;
  carouselRef.style.transition = "none";
- carouselRef.style.maxHeight = this.getCarouselHeight();
+ carouselRef.style.height = this.getCarouselHeight();
  setTimeout(() => (carouselRef.style.transition = carouselTransition), 500);
  },
  onChange(carousel: CarouselInterface) {
  // Update current view index
  this._currentView = carousel._activeItem.position ?? 1;
 
+ // Scroll to top of the page
+ window.scrollTo({ top: 0, behavior: "smooth" });
+
  // Update URL to match current view
  const currentView = this._views[this._currentView - 1];
  if (currentView.url) this.$router.push(currentView.url);

apps/wizarr-frontend/src/main.ts

@@ -27,6 +27,8 @@ import i18n from "./i18n";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import router from "./router";
 
+import './md-editor'; // Initialize the markdown editor
+
 const app = createApp(App);
 const pinia = createPinia();