README.md

@@ -1,88 +1,38 @@
-# ![jfa-go](images/banner.svg)
+This branch is for experimenting with [a17t](https://a17t.miles.land/) to replace bootstrap. Page structure is pretty much done (except setup.html), so i'm currently integrating this with the main app and existing web code.
 
-jfa-go is a user management app for [Jellyfin](https://github.com/jellyfin/jellyfin) that provides invite-based account creation as well as other features that make one's instance much easier to manage.
+#### todo
+**general**
+* [x] modal implementation
+* [x] animations
+* [x] utilities
+* [x] CSS for light & dark
 
-I chose to rewrite the python [jellyfin-accounts](https://github.com/hrfee/jellyfin-accounts) in Go mainly as a learning experience, but also to slightly improve speeds and efficiency.
+**admin**
+* [x] invites tab
+* [x] accounts tab
+* [x] settings tab
+* [x] modals
+* [ ] integration with existing code
 
-#### Features
-* 🧑 Invite based account creation: Sends invites to your friends or family, and let them choose their own username and password without relying on you.
-    * Send invites via a link and/or email
-    * Granular control over invites: Validity period as well as number of uses can be specified.
-    * Account profiles: Assign settings profiles to invites so new users have your predefined permissions, homescreen layout, etc. applied to their account on creation.
-    * Password validation: Ensure users choose a strong password.
-* 🔗 Ombi Integration: Automatically creates Ombi accounts for new users using their email address and login details, and your own defined set of permissions.
-* Account management: Apply settings to your users individually or en masse, and delete users, optionally sending them an email notification with a reason.
-* 📨 Email storage: Add your existing users email addresses through the UI, and jfa-go will ask new users for them on account creation.
-    * Email addresses can optionally be used instead of usernames
-* 🔑 Password resets: When user's forget their passwords and request a change in Jellyfin, jfa-go reads the PIN from the created file and sends it straight to the user via email.
-* Notifications: Get notified when someone creates an account, or an invite expires.
-* Authentication via Jellyfin: Instead of using separate credentials for jfa-go and Jellyfin, jfa-go can use it as the authentication provider.
-    * Enables the usage of jfa-go by multiple people
-* 🌓 Customizable look
-    * Specify contact and help messages to appear in emails and pages
-    * Light and dark themes available
+**invites**
+* [x] page design
+* [ ] integration with existing code
 
-## Interface
-<p align="center">
-    <img src="images/demo.gif" width="100%"></img>
+#### screenshots
+##### dark
+<p>
+    <img src="images/dark/invites.png" alt="invites" style="width: 32%; height: auto;">
+    <img src="images/dark/accounts.png" alt="accounts" style="width: 32%; height: auto;">
+    <img src="images/dark/settings.png" alt="settings" style="width: 32%; height: auto;">
+    <img src="images/dark/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
+    <img src="images/dark/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
 </p>
 
-<p align="center">
-    <img src="images/invites.png" width="48%" style="margin-left: 1.5%;" alt="Invites tab"></img>
-    <img src="images/accounts.png" width="48%" style="margin-right: 1.5%;" alt="Accounts tab"></img> 
+##### light
+<p>
+    <img src="images/light/invites.png" alt="invites" style="width: 32%; height: auto;">
+    <img src="images/light/accounts.png" alt="accounts" style="width: 32%; height: auto;">
+    <img src="images/light/settings.png" alt="settings" style="width: 32%; height: auto;">
+    <img src="images/light/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
+    <img src="images/light/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
 </p>
-
-#### Install
-
-Available on the AUR as [jfa-go](https://aur.archlinux.org/packages/jfa-go/) or [jfa-go-git](https://aur.archlinux.org/packages/jfa-go-git/).
-
-For other platforms, grab an archive from the release section for your platform (or nightly builds [here](https://builds.hrfee.pw/view/hrfee/jfa-go)), and extract `jfa-go` and `data` to the same directory.
-* For linux users, you can place them inside `/opt/jfa-go` and then run 
-`sudo ln -s /opt/jfa-go/jfa-go /usr/bin/jfa-go` to place it in your PATH.
-
-Run the executable to start.
-
-For [docker](https://hub.docker.com/repository/docker/hrfee/jfa-go), run: 
-```
-docker create \
-             --name "jfa-go" \ # Whatever you want to name it
-             -p 8056:8056 \
-             -v /path/to/.config/jfa-go:/data \ # Path to wherever you want to store the config file and other data
-             -v /path/to/jellyfin:/jf \ # Path to jellyfin config directory
-             -v /etc/localtime:/etc/localtime:ro \ # Makes sure time is correct
-             hrfee/jfa-go # hrfee/jfa-go:unstable for latest build from git
-```
-
-#### Build from source
-If you're using docker, a Dockerfile is provided that builds from source.
-
-Otherwise, full build instructions can be found [here](https://github.com/hrfee/jfa-go/wiki/Build).
-
-#### Usage
-Simply run `jfa-go` to start the application. A setup wizard will start on `localhost:8056` (or your own specified address). Upon completion, refresh the page.
-
-Note: jfa-go does not run as a daemon by default. You'll need to figure this out yourself.
-
-```
-Usage of ./jfa-go:
-  -config string
-    	alternate path to config file. (default "~/.config/jfa-go/config.ini")
-  -data string
-    	alternate path to data directory. (default "~/.config/jfa-go")
-  -debug
-    	Enables debug logging and exposes pprof.
-  -host string
-    	alternate address to host web ui on.
-  -port int
-    	alternate port to host web ui on.
-  -swagger
-    	Enable swagger at /swagger/index.html
-```
-
-If you're switching from jellyfin-accounts, copy your existing `~/.jf-accounts` to:
-
-* `XDG_CONFIG_DIR/jfa-go` (usually ~/.config/jfa-go) on \*nix systems, 
-* `%AppData%/jfa-go` on Windows,
-* `~/Library/Application Support/jfa-go` on macOS.
-
-(or specify config/data path  with `-config/-data` respectively.)

README.md.old

@@ -1,38 +0,0 @@
-This branch is for experimenting with [a17t](https://a17t.miles.land/) to replace bootstrap. Page structure is pretty much done (except setup.html), so i'm currently integrating this with the main app and existing web code.
-
-#### todo
-**general**
-* [x] modal implementation
-* [x] animations
-* [x] utilities
-* [x] CSS for light & dark
-
-**admin**
-* [x] invites tab
-* [x] accounts tab
-* [x] settings tab
-* [x] modals
-* [ ] integration with existing code
-
-**invites**
-* [x] page design
-* [ ] integration with existing code
-
-#### screenshots
-##### dark
-<p>
-    <img src="images/dark/invites.png" alt="invites" style="width: 32%; height: auto;">
-    <img src="images/dark/accounts.png" alt="accounts" style="width: 32%; height: auto;">
-    <img src="images/dark/settings.png" alt="settings" style="width: 32%; height: auto;">
-    <img src="images/dark/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
-    <img src="images/dark/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
-</p>
-
-##### light
-<p>
-    <img src="images/light/invites.png" alt="invites" style="width: 32%; height: auto;">
-    <img src="images/light/accounts.png" alt="accounts" style="width: 32%; height: auto;">
-    <img src="images/light/settings.png" alt="settings" style="width: 32%; height: auto;">
-    <img src="images/light/login-modal.png" alt="login modal" style="width: 32%; height: auto;">
-    <img src="images/light/modify-settings.png" alt="modify user settings modal" style="width: 32%; height: auto;">
-</p>

api.go

@@ -1168,11 +1168,11 @@ func (app *appContext) ModifyConfig(gc *gin.Context) {
 	if _, ok := req["password_validation"]; ok {
 		app.debug.Println("Reinitializing validator")
 		validatorConf := ValidatorConf{
-			"length":    app.config.Section("password_validation").Key("min_length").MustInt(0),
-			"uppercase": app.config.Section("password_validation").Key("upper").MustInt(0),
-			"lowercase": app.config.Section("password_validation").Key("lower").MustInt(0),
-			"number":    app.config.Section("password_validation").Key("number").MustInt(0),
-			"special":   app.config.Section("password_validation").Key("special").MustInt(0),
+			"characters":           app.config.Section("password_validation").Key("min_length").MustInt(0),
+			"uppercase characters": app.config.Section("password_validation").Key("upper").MustInt(0),
+			"lowercase characters": app.config.Section("password_validation").Key("lower").MustInt(0),
+			"numbers":              app.config.Section("password_validation").Key("number").MustInt(0),
+			"special characters":   app.config.Section("password_validation").Key("special").MustInt(0),
 		}
 		if !app.config.Section("password_validation").Key("enabled").MustBool(false) {
 			for key := range validatorConf {

css/base.css

@@ -343,7 +343,7 @@ sup.\~critical, .text-critical {
     overflow-y: visible;
 }
 
-select, textarea {
+select {
     color: inherit;
     border: 0 solid var(--color-neutral-300);
     appearance: none;

html/404.html

@@ -1,14 +1,19 @@
 <!DOCTYPE html>
-<html lang="en" class="{{ .cssClass }}">
+<html lang="en">
     <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
-        {{ template "header.html" . }}
         <title>404 - jfa-go</title>
+        <link rel="stylesheet" type="text/css" href="{{ .cssFile }}">
+        {{ template "header.html" . }}
+        <style>
+            .messageBox {
+                margin: 20%;        
+            }
+        </style>
     </head>
-    <body class="section">
-        <div class="page-container">
-            <h1 class="heading">Page not found.</h1>
-            <p class="content">
+    <body>
+        <div class="messageBox">
+            <h1>Page not found.</h1>
+            <p>
             {{ .contactMessage }}
             </p>
         </div>

html/admin.html

@@ -182,9 +182,9 @@
             <div class="mb-1">
                 <header class="flex flex-wrap items-center justify-between">
                     <div class="text-neutral-700">
-                        <span id="button-tab-invites" class="tab-button portal">Invites</span>
-                        <span id="button-tab-accounts" class="tab-button portal">Accounts</span>
-                        <span id="button-tab-settings" class="tab-button portal">Settings</span>
+                        <span id="invitesTab-button" class="tab-button portal ~urge active">Invites</span>
+                        <span id="accountsTab-button" class="tab-button portal">Accounts</span>
+                        <span id="settingsTab-button" class="tab-button portal">Settings</span>
                     </div>
                 </header>
             </div>
@@ -194,7 +194,7 @@
                     <span id="button-theme" class="button ~neutral !normal mb-1">Theme</span>
                 </div>
             </div>
-            <div id="tab-invites">
+            <div id="invitesTab">
                 <div class="card ~neutral !low invites mb-1">
                     <span class="heading">Invites</span>
                     <div id="invites"></div>
@@ -251,7 +251,7 @@
                     </div>
                 </div>
             </div>
-            <div id="tab-accounts" class="unfocused">
+            <div id="accountsTab" class="unfocused">
                 <div class="card ~neutral !low accounts mb-1">
                     <span class="heading">Accounts</span>
                     <div class="fr">
@@ -274,7 +274,7 @@
                     </div>
                 </div>
             </div>
-            <div id="tab-settings" class="unfocused">
+            <div id="settingsTab" class="unfocused">
                 <div class="card ~neutral !low settings overflow">
                     <span class="heading">Settings</span>
                     <div class="fr">

html/invalidCode.html

@@ -1,17 +1,20 @@
 <!DOCTYPE html>
-<html lang="en" class="{{ .cssClass }}">
+<html lang="en">
     <head>
-        <link rel="stylesheet" type="text/css" href="css/base.css">
-        {{ template "header.html" . }}
         <title>Invalid Code - jfa-go</title>
+        <link rel="stylesheet" type="text/css" href="{{ .cssFile }}">
+        {{ template "header.html" . }}
+        <style>
+            .messageBox {
+                margin: 20%;        
+            }
+        </style>
     </head>
-    <body class="section">
-        <div class="page-container">
-            <h1 class="heading">Invalid invite code.</h1>
-            <p class="content">The code above was either incorrect, or has expired.</p>
-            <p class="content">
-            {{ .contactMessage }}
-            </p>
+    <body>
+        <div class="messageBox">
+            <h1>Invalid Code.</h1>
+            <p>The above code is either incorrect, or has expired.</p>
+            <p>{{ .contactMessage }}</p>
         </div>
     </body>
 </html>                            

images/README.md

@@ -1,6 +0,0 @@
-# Images
-
-This holds any images on the main README, and the base files for the icons and banner. The font used, like Jellyfin, is [Quicksand](https://fonts.google.com/specimen/Quicksand) by Andrew Paglinawan.
-
-"Go" text logo and Gopher image: Copyright 2018 The Go Authors. All rights reserved.
-https://creativecommons.org/licenses/by/3.0/legalcode

images/gengif.txt

@@ -1,3 +0,0 @@
-Commands for making GIF:
-ffmpeg -i demo.mkv -vf "palettegen" videoPalette.png
-ffmpeg -i demo.mkv -i videoPalette.png -lavfi "fps=25 [x]; [x][1:v] paletteuse" -y demo.gif

main.go

@@ -560,9 +560,6 @@ func start(asDaemon, firstCall bool) {
 	}
 	if !firstRun {
 		router.GET("/", app.AdminPage)
-		router.GET("/accounts", app.AdminPage)
-		router.GET("/settings", app.AdminPage)
-
 		router.GET("/token/login", app.getTokenLogin)
 		router.GET("/token/refresh", app.getTokenRefresh)
 		router.POST("/newUser", app.NewUser)

ts/admin.ts

@@ -1,4 +1,4 @@
-import { toggleTheme, loadTheme } from "./modules/theme.js";
+import  { toggleTheme, loadTheme } from "./modules/theme.js";
 import { Modal } from "./modules/modal.js";
 import { Tabs } from "./modules/tabs.js";
 import { inviteList, createInvite } from "./modules/invites.js";
@@ -69,29 +69,9 @@ window.notifications = new notificationBox(document.getElementById('notification
 
 // load tabs
 window.tabs = new Tabs();
-window.tabs.addTab("invites", null, window.invites.reload);
-window.tabs.addTab("accounts", null, accounts.reload);
-window.tabs.addTab("settings", null, settings.reload);
-
-for (let tab of ["invites", "accounts", "settings"]) {
-    if (window.location.pathname == "/" + tab) {
-        window.tabs.switch(tab, true);
-    }
-}
-
-if (window.location.pathname == "/") {
-    window.tabs.switch("invites", true);
-}
-
-document.addEventListener("tab-change", (event: CustomEvent) => {
-    let tab = "/" + event.detail;
-    if (tab == "/invites") {
-        if (window.location.pathname == "/") {
-            tab = "/";
-        } else { tab = "../"; }
-    }
-    window.history.replaceState("", "Admin - jfa-go", tab);
-});
+window.tabs.addTab("invitesTab");
+window.tabs.addTab("accountsTab", null, accounts.reload);
+window.tabs.addTab("settingsTab", null, settings.reload);
 
 function login(username: string, password: string, run?: (state?: number) => void) {
     const req = new XMLHttpRequest();
@@ -126,19 +106,9 @@ function login(username: string, password: string, run?: (state?: number) => voi
                 const data = this.response;
                 window.token = data["token"];
                 window.modals.login.close();
+                window.invites.reload();
+                accounts.reload();
                 setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
-                const currentTab = window.tabs.current;
-                switch (currentTab) {
-                    case "invites":
-                        window.invites.reload();
-                        break;
-                    case "accounts":
-                        accounts.reload();
-                        break;
-                    case "settings":
-                        settings.reload();
-                        break;
-                }
                 document.getElementById("logout-button").classList.remove("unfocused");
             }
             if (run) { run(+this.status); }

ts/form.ts

@@ -173,6 +173,6 @@ if (!window.validationStrings) {
         const el = document.getElementById("requirement-" + category);
         if (el) {
             requirements[category] = new Requirement(category, el as HTMLLIElement);
-        }
+        } else { console.log(category); }
     }
 }

ts/modules/tabs.ts

@@ -1,5 +1,4 @@
 export class Tabs implements Tabs {
-    private _current: string = "";
     tabs: Array<Tab>;
    
     constructor() {
@@ -9,26 +8,21 @@ export class Tabs implements Tabs {
     addTab = (tabID: string, preFunc = () => void {}, postFunc = () => void {}) => {
         let tab = {} as Tab;
         tab.tabID = tabID;
-        tab.tabEl = document.getElementById("tab-" + tabID) as HTMLDivElement;
-        tab.buttonEl = document.getElementById("button-tab-" + tabID) as HTMLSpanElement;
+        tab.tabEl = document.getElementById(tabID) as HTMLDivElement;
+        tab.buttonEl = document.getElementById(tabID + "-button") as HTMLSpanElement;
         tab.buttonEl.onclick = () => { this.switch(tabID); };
         tab.preFunc = preFunc;
         tab.postFunc = postFunc;
         this.tabs.push(tab);
     }
 
-    get current(): string { return this._current; }
-    set current(tabID: string) { this.switch(tabID); }
-
-    switch = (tabID: string, noRun: boolean = false) => {
-        this._current = tabID;
+    switch = (tabID: string) => {
         for (let t of this.tabs) {
             if (t.tabID == tabID) {
                 t.buttonEl.classList.add("active", "~urge");
-                if (t.preFunc && !noRun) { t.preFunc(); }
+                if (t.preFunc) { t.preFunc(); }
                 t.tabEl.classList.remove("unfocused");
-                if (t.postFunc && !noRun) { t.postFunc(); }
-                document.dispatchEvent(new CustomEvent("tab-change", { detail: tabID }));
+                if (t.postFunc) { t.postFunc(); }
             } else {
                 t.buttonEl.classList.remove("active");
                 t.buttonEl.classList.remove("~urge");

ts/typings/d.ts

@@ -36,10 +36,9 @@ declare interface NotificationBox {
 }
 
 declare interface Tabs {
-    current: string;
     tabs: Array<Tab>;
     addTab: (tabID: string, preFunc?: () => void, postFunc?: () => void) => void;
-    switch: (tabID: string, noRun?: boolean) => void;
+    switch: (tabID: string) => void;
 }
 
 declare interface Tab {

views.go

@@ -53,7 +53,8 @@ func (app *appContext) InviteProxy(gc *gin.Context) {
 		})
 	} else {
 		gcHTML(gc, 404, "invalidCode.html", gin.H{
-			"cssClass":       app.cssClass,
+			"bs5":            app.config.Section("ui").Key("bs5").MustBool(false),
+			"cssFile":        app.cssClass,
 			"contactMessage": app.config.Section("ui").Key("contact_message").String(),
 		})
 	}
@@ -61,7 +62,8 @@ func (app *appContext) InviteProxy(gc *gin.Context) {
 
 func (app *appContext) NoRouteHandler(gc *gin.Context) {
 	gcHTML(gc, 404, "404.html", gin.H{
-		"cssClass":       app.cssClass,
+		"bs5":            app.config.Section("ui").Key("bs5").MustBool(false),
+		"cssFile":        app.cssClass,
 		"contactMessage": app.config.Section("ui").Key("contact_message").String(),
 	})
 }