remove bootstrap traces from invalid code/404 html

preparing for merge.

README.md

@@ -1,38 +1,88 @@
-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](images/banner.svg)
 
-#### todo
-**general**
-* [x] modal implementation
-* [x] animations
-* [x] utilities
-* [x] CSS for light & dark
+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.
 
-**admin**
-* [x] invites tab
-* [x] accounts tab
-* [x] settings tab
-* [x] modals
-* [ ] integration with existing code
+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.
 
-**invites**
-* [x] page design
-* [ ] 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
 
-#### 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;">
+## Interface
+<p align="center">
+    <img src="images/demo.gif" width="100%"></img>
 </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 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> 
 </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

@@ -0,0 +1,38 @@
+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{
-			"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),
+			"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),
 		}
 		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 {
+select, textarea {
     color: inherit;
     border: 0 solid var(--color-neutral-300);
     appearance: none;

html/404.html

@@ -1,19 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="{{ .cssClass }}">
     <head>
-        <title>404 - jfa-go</title>
-        <link rel="stylesheet" type="text/css" href="{{ .cssFile }}">
+        <link rel="stylesheet" type="text/css" href="css/base.css">
         {{ template "header.html" . }}
-        <style>
-            .messageBox {
-                margin: 20%;        
-            }
-        </style>
+        <title>404 - jfa-go</title>
     </head>
-    <body>
-        <div class="messageBox">
-            <h1>Page not found.</h1>
-            <p>
+    <body class="section">
+        <div class="page-container">
+            <h1 class="heading">Page not found.</h1>
+            <p class="content">
             {{ .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="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>
+                        <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>
                     </div>
                 </header>
             </div>
@@ -194,7 +194,7 @@
                     <span id="button-theme" class="button ~neutral !normal mb-1">Theme</span>
                 </div>
             </div>
-            <div id="invitesTab">
+            <div id="tab-invites">
                 <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="accountsTab" class="unfocused">
+            <div id="tab-accounts" 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="settingsTab" class="unfocused">
+            <div id="tab-settings" class="unfocused">
                 <div class="card ~neutral !low settings overflow">
                     <span class="heading">Settings</span>
                     <div class="fr">

html/invalidCode.html

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

images/README.md

@@ -0,0 +1,6 @@
+# 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

@@ -0,0 +1,3 @@
+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,6 +560,9 @@ 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,9 +69,29 @@ window.notifications = new notificationBox(document.getElementById('notification
 
 // load tabs
 window.tabs = new Tabs();
-window.tabs.addTab("invitesTab");
-window.tabs.addTab("accountsTab", null, accounts.reload);
-window.tabs.addTab("settingsTab", null, settings.reload);
+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);
+});
 
 function login(username: string, password: string, run?: (state?: number) => void) {
     const req = new XMLHttpRequest();
@@ -106,9 +126,19 @@ 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,4 +1,5 @@
 export class Tabs implements Tabs {
+    private _current: string = "";
     tabs: Array<Tab>;
    
     constructor() {
@@ -8,21 +9,26 @@ export class Tabs implements Tabs {
     addTab = (tabID: string, preFunc = () => void {}, postFunc = () => void {}) => {
         let tab = {} as Tab;
         tab.tabID = tabID;
-        tab.tabEl = document.getElementById(tabID) as HTMLDivElement;
-        tab.buttonEl = document.getElementById(tabID + "-button") as HTMLSpanElement;
+        tab.tabEl = document.getElementById("tab-" + tabID) as HTMLDivElement;
+        tab.buttonEl = document.getElementById("button-tab-" + tabID) as HTMLSpanElement;
         tab.buttonEl.onclick = () => { this.switch(tabID); };
         tab.preFunc = preFunc;
         tab.postFunc = postFunc;
         this.tabs.push(tab);
     }
 
-    switch = (tabID: string) => {
+    get current(): string { return this._current; }
+    set current(tabID: string) { this.switch(tabID); }
+
+    switch = (tabID: string, noRun: boolean = false) => {
+        this._current = tabID;
         for (let t of this.tabs) {
             if (t.tabID == tabID) {
                 t.buttonEl.classList.add("active", "~urge");
-                if (t.preFunc) { t.preFunc(); }
+                if (t.preFunc && !noRun) { t.preFunc(); }
                 t.tabEl.classList.remove("unfocused");
-                if (t.postFunc) { t.postFunc(); }
+                if (t.postFunc && !noRun) { t.postFunc(); }
+                document.dispatchEvent(new CustomEvent("tab-change", { detail: tabID }));
             } else {
                 t.buttonEl.classList.remove("active");
                 t.buttonEl.classList.remove("~urge");

ts/typings/d.ts

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

views.go

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