Profiles replace user templates

Profile functionality is essentially complete, and they can be created
in settings. Only thing currently missing is a way to set a default
profile.

api.go

@@ -469,6 +469,71 @@ func (app *appContext) SetProfile(gc *gin.Context) {
 	gc.JSON(200, map[string]bool{"success": true})
 }
 
+func (app *appContext) GetProfiles(gc *gin.Context) {
+	app.storage.loadProfiles()
+	app.debug.Println("Profiles requested")
+	out := map[string]map[string]interface{}{}
+	for name, p := range app.storage.profiles {
+		out[name] = map[string]interface{}{
+			"admin":     p.Admin,
+			"libraries": p.LibraryAccess,
+			"fromUser":  p.FromUser,
+		}
+	}
+	fmt.Println(out)
+	gc.JSON(200, out)
+}
+
+type newProfileReq struct {
+	Name       string `json:"name"`
+	ID         string `json:"id"`
+	Homescreen bool   `json:"homescreen"`
+}
+
+func (app *appContext) CreateProfile(gc *gin.Context) {
+	fmt.Println("Profile creation requested")
+	var req newProfileReq
+	gc.BindJSON(&req)
+	user, status, err := app.jf.userById(req.ID, false)
+	if !(status == 200 || status == 204) || err != nil {
+		app.err.Printf("Failed to get user from Jellyfin: Code %d", status)
+		app.debug.Printf("Error: %s", err)
+		respond(500, "Couldn't get user", gc)
+		return
+	}
+	profile := Profile{
+		FromUser: user["Name"].(string),
+		Policy:   user["Policy"].(map[string]interface{}),
+	}
+	app.debug.Printf("Creating profile from user \"%s\"", user["Name"].(string))
+	if req.Homescreen {
+		profile.Configuration = user["Configuration"].(map[string]interface{})
+		profile.Displayprefs, status, err = app.jf.getDisplayPreferences(req.ID)
+		if !(status == 200 || status == 204) || err != nil {
+			app.err.Printf("Failed to get DisplayPrefs: Code %d", status)
+			app.debug.Printf("Error: %s", err)
+			respond(500, "Couldn't get displayprefs", gc)
+			return
+		}
+	}
+	app.storage.loadProfiles()
+	app.storage.profiles[req.Name] = profile
+	app.storage.storeProfiles()
+	app.storage.loadProfiles()
+	gc.JSON(200, map[string]bool{"success": true})
+}
+
+func (app *appContext) DeleteProfile(gc *gin.Context) {
+	req := map[string]string{}
+	gc.BindJSON(&req)
+	name := req["name"]
+	if _, ok := app.storage.profiles[name]; ok {
+		delete(app.storage.profiles, name)
+	}
+	app.storage.storeProfiles()
+	gc.JSON(200, map[string]bool{"success": true})
+}
+
 func (app *appContext) GetInvites(gc *gin.Context) {
 	app.debug.Println("Invites requested")
 	current_time := time.Now()
@@ -726,12 +791,13 @@ func (app *appContext) SetOmbiDefaults(gc *gin.Context) {
 
 type defaultsReq struct {
 	From       string   `json:"from"`
+	Profile    string   `json:"profile"`
 	ApplyTo    []string `json:"apply_to"`
 	ID         string   `json:"id"`
 	Homescreen bool     `json:"homescreen"`
 }
 
-func (app *appContext) SetDefaults(gc *gin.Context) {
+/*func (app *appContext) SetDefaults(gc *gin.Context) {
 	var req defaultsReq
 	gc.BindJSON(&req)
 	userID := req.ID
@@ -765,28 +831,31 @@ func (app *appContext) SetDefaults(gc *gin.Context) {
 		app.debug.Println("DisplayPrefs template stored")
 	}
 	gc.JSON(200, map[string]bool{"success": true})
-}
+}*/
 
 func (app *appContext) ApplySettings(gc *gin.Context) {
+	app.info.Println("User settings change requested")
 	var req defaultsReq
 	gc.BindJSON(&req)
-	applyingFrom := "template"
+	applyingFrom := "profile"
 	var policy, configuration, displayprefs map[string]interface{}
-	if req.From == "template" {
-		if len(app.storage.policy) == 0 {
-			respond(500, "No policy template available", gc)
+	if req.From == "profile" {
+		app.storage.loadProfiles()
+		if _, ok := app.storage.profiles[req.Profile]; !ok || len(app.storage.profiles[req.Profile].Policy) == 0 {
+			app.err.Printf("Couldn't find profile \"%s\" or profile was empty", req.Profile)
+			respond(500, "Couldn't find profile", gc)
 			return
 		}
-		app.storage.loadPolicy()
-		policy = app.storage.policy
 		if req.Homescreen {
-			if len(app.storage.configuration) == 0 || len(app.storage.displayprefs) == 0 {
+			if len(app.storage.profiles[req.Profile].Configuration) == 0 || len(app.storage.profiles[req.Profile].Displayprefs) == 0 {
+				app.err.Printf("No homescreen saved in profile \"%s\"", req.Profile)
 				respond(500, "No homescreen template available", gc)
 				return
 			}
-			configuration = app.storage.configuration
-			displayprefs = app.storage.displayprefs
+			configuration = app.storage.profiles[req.Profile].Configuration
+			displayprefs = app.storage.profiles[req.Profile].Displayprefs
 		}
+		policy = app.storage.profiles[req.Profile].Policy
 	} else if req.From == "user" {
 		applyingFrom = "user"
 		user, status, err := app.jf.userById(req.ID, false)
@@ -891,7 +960,7 @@ func (app *appContext) ModifyConfig(gc *gin.Context) {
 	tempConfig.SaveTo(app.config_path)
 	app.debug.Println("Config saved")
 	gc.JSON(200, map[string]bool{"success": true})
-	if req["restart-program"].(bool) {
+	if req["restart-program"] != nil && req["restart-program"].(bool) {
 		app.info.Println("Restarting...")
 		err := app.Restart()
 		if err != nil {

data/templates/admin.html

@@ -88,40 +88,6 @@
                 </div>
             </div>
         </div>
-        <div class="modal fade" id="settingsMenu" role="dialog" aria-labelledby="settings menu" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="settingsTitle">Settings</h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <ul class="list-group list-group-flush" style="margin-bottom: 1rem;">
-                            <p>Note: <sup class="text-danger">*</sup> Indicates required field, <sup class="text-danger">R</sup> Indicates changes require a restart.</p>
-                            <button type="button" class="list-group-item list-group-item-action" id="openAbout">
-                            About <i class="fa fa-info-circle settingIcon"></i>
-                            </button>
-                            <button type="button" class="list-group-item list-group-item-action" id="openDefaultsWizard">
-                                New User Defaults <i class="fa fa-user settingIcon"></i>
-                            </button>
-                            {{ if .ombiEnabled }}
-                            <button type="button" class="list-group-item list-group-item-action" id="openOmbiDefaults">
-                                Ombi User Defaults <i class="fa fa-chain-broken settingIcon"></i>
-                            </button>
-                            {{ end }}
-                        </ul>
-                        <div class="list-group list-group-flush" id="settingsList">
-                        </div>
-                    </div>
-                    <div class="modal-footer" id="settingsFooter">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary" id="settingsSave">Save</button>
-                    </div>
-                </div>
-            </div>
-        </div>
         <div class="modal fade" id="users" role="dialog" aria-labelledby="users" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered" role="document">
                 <div class="modal-content">
@@ -153,12 +119,21 @@
                     <div class="modal-body">
                         <p id="userDefaultsDescription"></p>
                         <div class="mb-3" id="defaultsSourceSection">
-                            <label for="defaultsSource">Use settings from:</label>
+                            <label for="defaultsSource" class="form-label">Use settings from:</label>
                             <select class="form-select" id="defaultsSource" aria-label="User settings source">
-                                <option value="userTemplate" selected>Use existing user template</option>
+                                <option value="profile" selected>Profile</option>
                                 <option value="fromUser">Source from existing user</option>
                             </select>
                         </div>
+                        <div class="mb-3 unfocused" id="profileSelectBox">
+                            <label for="profileSelect" class="form-label">Profile</label>
+                            <select class="form-select" id="profileSelect" aria-label="Profile to apply">
+                            </select>
+                        </div>
+                        <div class="mb-3 unfocused" id="newProfileBox">
+                            <label for="newProfileName" class="form-label">Name</label>
+                            <input type="text" class="form-control" id="newProfileName" aria-describedby="Profile Name">
+                        </div>
                         <div id="defaultUserRadios"></div>
                         <div class="form-check" style="margin-top: 1rem;">
                             <input class="form-check-input" type="checkbox" value="" id="storeDefaultHomescreen" checked>
@@ -204,7 +179,7 @@
                         <p>A restart is needed to apply some settings. Restart now, later, or cancel?</p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-light" data-dismiss="modal" id="restartModalCancel">Cancel</button>
                         <button type="button" class="btn btn-secondary" id="applyRestarts" data-dismiss="modal">Apply, Restart later</button>
                         <button type="button" class="btn btn-primary" id="applyAndRestart" data-dismiss="modal">Apply &amp; Restart</button>
                     </div>
@@ -308,11 +283,11 @@
                 <li class="nav-item">
                     <h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2>
                 </li>
+                <li class="nav-item">
+                    <h2><a id="settingsTabButton" class="nl nav-link">Settings</a></h2>
+                </li>
             </ul>
             <div class="btn-group" role="group" id="headerButtons">
-                <button type="button" class="btn btn-primary" id="openSettings">
-                    Settings <i class="fa fa-cog"></i>
-                </button>
                 <button type="button" class="btn btn-danger unfocused" id="logoutButton">
                     Logout <i class="fa fa-sign-out"></i>
                 </button>
@@ -428,6 +403,60 @@
                     </div>
                 </div>
             </div>
+            <div id="settingsTab" class="unfocused mb-3 tabGroup card">
+                <div class="card-header d-flex" style="align-items: center;">
+                    <div>Settings</div>
+                    <div class="ml-auto">
+                        <button type="button" class="btn btn-primary" id="settingsSave">Save</button>
+                    </div>
+                </div>
+                <div class="container card-body">
+                    <div class="row">
+                        <div class="col-sm">
+                            <div class="" id="settingsLeft">
+                                <ul class="list-group list-group-flush" style="margin-bottom: 1rem;">
+                                    <p>Note: <sup class="text-danger">*</sup> Indicates required field, <sup class="text-danger">R</sup> Indicates changes require a restart.</p>
+                                    <button type="button" class="list-group-item list-group-item-action static" id="openAbout">
+                                    About <i class="fa fa-info-circle settingIcon"></i>
+                                    </button>
+                                    <button type="button" class="list-group-item list-group-item-action" id="profiles_button">
+                                        User Profiles <i class="fa fa-user settingIcon"></i>
+                                    </button>
+                                    {{ if .ombiEnabled }}
+                                    <button type="button" class="list-group-item list-group-item-action static" id="openOmbiDefaults">
+                                        Ombi User Defaults <i class="fa fa-chain-broken settingIcon"></i>
+                                    </button>
+                                    {{ end }}
+                                </ul>
+                                <div class="list-group list-group-flush" id="settingsSections">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class="" id="settingsContent">
+                                <div id="profiles" class="unfocused">
+                                    <div class="card card-body">
+                                        <p>Profiles are applied to users when they create an account. They include things like access rights and homescreen layout. You can create them here.</p>
+                                        <table class="table table-striped table-borderless">
+                                            <thead>
+                                                <tr>
+                                                    <th scope="col">Name</th>
+                                                    <th scope="col">From</th>
+                                                    <th scope="col">Admin?</th>
+                                                    <th scope="col">Libraries</th>
+                                                    <th scope="col"><button class="btn btn-outline-primary" onclick="createProfile()">Create</button></th>
+                                                </tr>
+                                            </thead>
+                                            <tbody id="profileList">
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="contactBox">
                 <p>{{ .contactMessage }}</p>
             </div>

main.go

@@ -458,13 +458,16 @@ func start(asDaemon, firstCall bool) {
 		api.POST("/newUserAdmin", app.NewUserAdmin)
 		api.POST("/generateInvite", app.GenerateInvite)
 		api.GET("/getInvites", app.GetInvites)
+		api.GET("/getProfiles", app.GetProfiles)
 		api.POST("/setProfile", app.SetProfile)
+		api.POST("/createProfile", app.CreateProfile)
+		api.POST("/deleteProfile", app.DeleteProfile)
 		api.POST("/setNotify", app.SetNotify)
 		api.POST("/deleteInvite", app.DeleteInvite)
 		api.POST("/deleteUser", app.DeleteUser)
 		api.GET("/getUsers", app.GetUsers)
 		api.POST("/modifyEmails", app.ModifyEmails)
-		api.POST("/setDefaults", app.SetDefaults)
+		// api.POST("/setDefaults", app.SetDefaults)
 		api.POST("/applySettings", app.ApplySettings)
 		api.GET("/getConfig", app.GetConfig)
 		api.POST("/modifyConfig", app.ModifyConfig)

package-lock.json

@@ -1858,11 +1858,6 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
     },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.1.tgz",
-      "integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs="
-    },
     "postcss": {
       "version": "7.0.32",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",

scss/base.scss

@@ -1,6 +1,11 @@
+.pageContainer {
+    margin: 5% 30% 5% 30%;
+}
+@media (max-width: 1900px) {
     .pageContainer {
         margin: 5% 20% 5% 20%;
     }
+}
 @media (max-width: 1100px) {
     .pageContainer {
         margin: 2%;

storage.go

@@ -3,6 +3,7 @@ package main
 import (
 	"encoding/json"
 	"io/ioutil"
+	"strconv"
 	"time"
 )
 
@@ -17,9 +18,12 @@ type Storage struct {
 // timePattern: %Y-%m-%dT%H:%M:%S.%f
 
 type Profile struct {
-	Policy        map[string]interface{} `json:"policy"`
-	Configuration map[string]interface{} `json:"configuration"`
-	Displayprefs  map[string]interface{} `json:"displayprefs"`
+	Admin         bool                   `json:"admin,omitempty"`
+	LibraryAccess string                 `json:"libraries,omitempty"`
+	FromUser      string                 `json:"fromUser,omitempty"`
+	Policy        map[string]interface{} `json:"policy,omitempty"`
+	Configuration map[string]interface{} `json:"configuration,omitempty"`
+	Displayprefs  map[string]interface{} `json:"displayprefs,omitempty"`
 }
 
 type Invite struct {
@@ -84,7 +88,34 @@ func (st *Storage) storeOmbiTemplate() error {
 }
 
 func (st *Storage) loadProfiles() error {
-	return loadJSON(st.profiles_path, &st.profiles)
+	err := loadJSON(st.profiles_path, &st.profiles)
+	for name, profile := range st.profiles {
+		change := false
+		if profile.Policy["IsAdministrator"] != nil {
+			profile.Admin = profile.Policy["IsAdministrator"].(bool)
+			change = true
+		}
+		if profile.Policy["EnabledFolders"] != nil {
+			length := len(profile.Policy["EnabledFolders"].([]interface{}))
+			if length == 0 {
+				profile.LibraryAccess = "All"
+			} else {
+				profile.LibraryAccess = strconv.Itoa(length)
+			}
+			change = true
+		}
+		if profile.FromUser == "" {
+			profile.FromUser = "Unknown"
+			change = true
+		}
+		if change {
+			st.profiles[name] = profile
+		}
+	}
+	if err != nil {
+		panic(err)
+	}
+	return err
 }
 
 func (st *Storage) storeProfiles() error {

ts/accounts.ts

@@ -247,23 +247,36 @@ function populateRadios(): void {
     if (userIDs.length > 1) {
         userString += "s";
     }
+    populateProfiles(true);
+    const profileSelect = document.getElementById('profileSelect') as HTMLSelectElement;
+    profileSelect.textContent = '';
+    for (let i = 0; i < availableProfiles.length; i++) {
+        profileSelect.innerHTML += `
+        <option value="${availableProfiles[i]}" ${(i == 0) ? "selected" : ""}>${availableProfiles[i]}</option>
+        `;
+    }
     document.getElementById('defaultsTitle').textContent = `Apply settings to ${userIDs.length} ${userString}`;
     document.getElementById('userDefaultsDescription').textContent = `
-    Create an account and configure it to your liking, then choose it from below to apply to your selected users.
+    Apply settings from an existing profile or source settings from a user.
     `;
     document.getElementById('storeHomescreenLabel').textContent = `Apply homescreen layout`;
     Focus(document.getElementById('defaultsSourceSection'));
-    (<HTMLSelectElement>document.getElementById('defaultsSource')).value = 'userTemplate';
+    (<HTMLSelectElement>document.getElementById('defaultsSource')).value = 'profile';
+    Focus(document.getElementById('profileSelectBox'));
     Unfocus(document.getElementById('defaultUserRadios'));
+    Unfocus(document.getElementById('newProfileBox'));
     document.getElementById('storeDefaults').onclick = (): void => storeDefaults(userIDs);
     userDefaultsModal.show();
 };
 
 (<HTMLSelectElement>document.getElementById('defaultsSource')).addEventListener('change', function (): void {
     const radios = document.getElementById('defaultUserRadios');
-    if (this.value == 'userTemplate') {
+    const profileBox = document.getElementById('profileSelectBox');
+    if (this.value == 'profile') {
         Unfocus(radios);
+        Focus(profileBox);
     } else {
+        Unfocus(profileBox);
         Focus(radios);
     }
 });

ts/admin.ts

@@ -35,38 +35,49 @@ const Focus = (el: HTMLElement): void => rmAttr(el, 'unfocused');
 const Unfocus = (el: HTMLElement): void => addAttr(el, 'unfocused');
 
 interface TabSwitcher {
-    invitesEl: HTMLDivElement;
-    accountsEl: HTMLDivElement;
-    invitesTabButton: HTMLAnchorElement;
-    accountsTabButton: HTMLAnchorElement;
+    els: Array<HTMLDivElement>;
+    tabButtons: Array<HTMLAnchorElement>;
+    focus: (el: number) => void;
     invites: () => void;
     accounts: () => void;
+    settings: () => void;
 }
 
 const tabs: TabSwitcher = {
-    invitesEl: document.getElementById('invitesTab') as HTMLDivElement,
-    accountsEl: document.getElementById('accountsTab') as HTMLDivElement,
-    invitesTabButton: document.getElementById('invitesTabButton') as HTMLAnchorElement,
-    accountsTabButton: document.getElementById('accountsTabButton') as HTMLAnchorElement,
-    invites: (): void => {
-        Unfocus(tabs.accountsEl);
-        Focus(tabs.invitesEl);
-        rmAttr(tabs.accountsTabButton, "active");
-        addAttr(tabs.invitesTabButton, "active");
+    els: [document.getElementById('invitesTab') as HTMLDivElement, document.getElementById('accountsTab') as HTMLDivElement, document.getElementById('settingsTab') as HTMLDivElement],
+    tabButtons: [document.getElementById('invitesTabButton') as HTMLAnchorElement, document.getElementById('accountsTabButton') as HTMLAnchorElement, document.getElementById('settingsTabButton') as HTMLAnchorElement],
+    focus: (el: number): void => {
+        for (let i = 0; i < tabs.els.length; i++) {
+            if (i == el) {
+                Focus(tabs.els[i]);
+                addAttr(tabs.tabButtons[i], "active");
+            } else {
+                Unfocus(tabs.els[i]);
+                rmAttr(tabs.tabButtons[i], "active");
+            }
+        }
     },
+    invites: (): void => tabs.focus(0),
     accounts: (): void => {
         populateUsers();
         (document.getElementById('selectAll') as HTMLInputElement).checked = false;
         checkCheckboxes();
-        Unfocus(tabs.invitesEl);
-        Focus(tabs.accountsEl);
-        rmAttr(tabs.invitesTabButton, "active");
-        addAttr(tabs.accountsTabButton, "active");
-    }
+        tabs.focus(1);
+    },
+    settings: (): void => openSettings(document.getElementById('settingsSections'), document.getElementById('settingsContent'), (): void => {
+        triggerTooltips();
+        showSetting("ui");
+        tabs.focus(2);
+    })
 };
 
-tabs.invitesTabButton.onclick = tabs.invites;
-tabs.accountsTabButton.onclick = tabs.accounts;
+// for (let i = 0; i < tabs.els.length; i++) {
+//     tabs.tabButtons[i].onclick = (): void => tabs.focus(i);
+// }
+tabs.tabButtons[0].onclick = tabs.invites;
+tabs.tabButtons[1].onclick = tabs.accounts;
+tabs.tabButtons[2].onclick = tabs.settings;
+
 
 tabs.invites();
 
@@ -90,7 +101,6 @@ if (buttonColor != "custom") {
 }
 
 var loginModal = createModal('login');
-var settingsModal = createModal('settingsMenu');
 var userDefaultsModal = createModal('userDefaults');
 var usersModal = createModal('users');
 var restartModal = createModal('restartModal');
@@ -196,25 +206,23 @@ function storeDefaults(users: string | Array<string>): void {
         '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
         'Loading...';
     const button = document.getElementById('storeDefaults') as HTMLButtonElement;
+    let data = { "homescreen": false };
+    if ((document.getElementById('defaultsSource') as HTMLSelectElement).value == 'profile') {
+        data["from"] = "profile";
+        data["profile"] = (document.getElementById('profileSelect') as HTMLSelectElement).value;
+    } else {
         const radio = document.querySelector('input[name=defaultRadios]:checked') as HTMLInputElement
         let id = radio.id.replace("default_", "");
-    let route = "/setDefaults";
-    let data = {
-        "from": "user",
-        "id": id,
-        "homescreen": false
-    };
-    if ((document.getElementById('defaultsSource') as HTMLSelectElement).value == 'userTemplate') {
-        data["from"] = "template";
+        data["from"] = "user";
+        data["id"] = id;
     }
     if (users != "all") {
         data["apply_to"] = users;
-        route = "/applySettings";
     }
     if ((document.getElementById('storeDefaultHomescreen') as HTMLInputElement).checked) {
         data["homescreen"] = true;
     }
-    _post(route, data, function (): void {
+    _post("/applySettings", data, function (): void {
         if (this.readyState == 4) {
             if (this.status == 200 || this.status == 204) {
                 button.textContent = "Success";

ts/bs4.ts

@@ -23,8 +23,7 @@ function createModal(id: string, find?: boolean): any {
 }
 
 function triggerTooltips(): void {
-    $("#settingsMenu").on("shown.bs.modal", (): void => {
-        const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]'));
+    const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]'));
     for (const i in checkboxes) {
         checkboxes[i].click();
         checkboxes[i].click();
@@ -33,6 +32,5 @@ function triggerTooltips(): void {
     tooltips.map((el: HTMLAnchorElement): any => {
         return ($(el) as any).tooltip();
     });
-    });
 }
 

ts/bs5.ts

@@ -21,8 +21,7 @@ function createModal(id: string, find?: boolean): any {
 }
 
 function triggerTooltips(): void {
-    (document.getElementById('settingsMenu') as HTMLButtonElement).addEventListener('shown.bs.modal', (): void => {
-        const checkboxes = [].slice.call(document.getElementById('settingsMenu').querySelectorAll('input[type="checkbox"]'));
+    const checkboxes = [].slice.call(document.getElementById('settingsContent').querySelectorAll('input[type="checkbox"]'));
     for (const i in checkboxes) {
         checkboxes[i].click();
         checkboxes[i].click();
@@ -31,6 +30,5 @@ function triggerTooltips(): void {
     tooltips.map((el: HTMLAnchorElement): any => {
         return new bootstrap.Tooltip(el);
     });
-    });
 }
 

ts/ombi.ts

@@ -36,7 +36,6 @@ const ombiDefaultsModal = createModal('ombiDefaults');
                 addAttr(submitButton,  "btn-primary");
                 rmAttr(submitButton, "btn-success");
                 rmAttr(submitButton, "btn-danger");
-                settingsModal.hide();
                 ombiDefaultsModal.show();
             }
         }
@@ -46,7 +45,6 @@ const ombiDefaultsModal = createModal('ombiDefaults');
 (document.getElementById('storeOmbiDefaults') as HTMLButtonElement).onclick = function (): void {
     let button = this as HTMLButtonElement;
     button.disabled = true;
-    const ogHTML = button.innerHTML;
     button.innerHTML =
         '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
         'Loading...';

ts/settings.ts

@@ -1,15 +1,22 @@
 var config: Object = {};
 var modifiedConfig: Object = {};
 
-function sendConfig(modalID: string, restart?: boolean): void {
+function sendConfig(restart?: boolean): void {
     modifiedConfig["restart-program"] = restart;
     _post("/modifyConfig", modifiedConfig, function (): void {
         if (this.readyState == 4) {
+            const save = document.getElementById("settingsSave") as HTMLButtonElement
             if (this.status == 200 || this.status == 204) {
-                createModal(modalID, true).hide();
-                if (modalID != "settingsMenu") {
-                    settingsModal.hide();
-                }
+                save.textContent = "Success";
+                addAttr(save, "btn-success");
+                rmAttr(save, "btn-primary");
+                setTimeout((): void => {
+                    save.textContent = "Save";
+                    addAttr(save, "btn-primary");
+                    rmAttr(save, "btn-success");
+                }, 1000);
+            } else {
+                save.textContent = "Save";
             }
             if (restart) {
                 refreshModal.show();
@@ -18,55 +25,18 @@ function sendConfig(modalID: string, restart?: boolean): void {
     });
 }
 
-(document.getElementById('openDefaultsWizard') as HTMLButtonElement).onclick = function (): void {
-    const button = this as HTMLButtonElement;
-    button.disabled = true;
-    const ogHTML = button.innerHTML;
-    button.innerHTML = `
-    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
-    Loading...`;
-    _get("/getUsers", null, function (): void {
-        if (this.readyState == 4) {
-            if (this.status == 200) {
-                jfUsers = this.response['users'];
-                populateRadios();
-                button.disabled = false;
-                button.innerHTML = ogHTML;
-                const submitButton = document.getElementById('storeDefaults') as HTMLButtonElement;
-                submitButton.disabled = false;
-                submitButton.textContent = 'Submit';
-                addAttr(submitButton, "btn-primary");
-                rmAttr(submitButton, "btn-danger");
-                rmAttr(submitButton, "btn-success");
-                document.getElementById('defaultsTitle').textContent = `New user defaults`;
-                document.getElementById('userDefaultsDescription').textContent = `
-                Create an account and configure it to your liking, then choose it from below to store the settings as a template for all new users.`;
-                document.getElementById('storeHomescreenLabel').textContent = `Store homescreen layout`;
-                (document.getElementById('defaultsSource') as HTMLSelectElement).value = 'fromUser';
-                document.getElementById('defaultsSourceSection').classList.add('unfocused');
-                (document.getElementById('storeDefaults') as HTMLButtonElement).onclick = (): void => storeDefaults('all');
-                Focus(document.getElementById('defaultUserRadios'));
-                settingsModal.hide();
-                userDefaultsModal.show();
-            }
-        }
-    });
-};
-
 (document.getElementById('openAbout') as HTMLButtonElement).onclick = (): void => {
-    settingsModal.hide();
     aboutModal.show();
 };
 
-(document.getElementById('openSettings') as HTMLButtonElement).onclick = (): void => _get("/getConfig", null, function (): void {
+const openSettings = (settingsList: HTMLElement, settingsContent: HTMLElement, callback?: () => void): void => _get("/getConfig", null, function (): void {
     if (this.readyState == 4 && this.status == 200) {
-        const settingsList = document.getElementById('settingsList');
         settingsList.textContent = '';
         config = this.response;
         for (const i in config["order"]) {
             const section: string = config["order"][i]
             const sectionCollapse = document.createElement('div') as HTMLDivElement;
-            addAttr(sectionCollapse, "collapse");
+            Unfocus(sectionCollapse);
             sectionCollapse.id = section;
 
             const title: string = config[section]["meta"]["name"];
@@ -151,16 +121,163 @@ function sendConfig(modalID: string, restart?: boolean): void {
             }
         
             settingsList.innerHTML += `
-            <button type="button" class="list-group-item list-group-item-action" id="${section}_button" data-toggle="collapse" data-target="#${section}">${title}</button>
+            <button type="button" class="list-group-item list-group-item-action" id="${section}_button" onclick="showSetting('${section}')">${title}</button>
             `;
-            settingsList.appendChild(sectionCollapse);
+            settingsContent.appendChild(sectionCollapse);
+        }
+        if (callback) {
+            callback();
         }
-        settingsModal.show();
     }
 });
 
+interface Profile {
+    Admin: boolean;
+    LibraryAccess: string;
+    FromUser: string;
+}
+
+(document.getElementById('profiles_button') as HTMLButtonElement).onclick = (): void => showSetting("profiles", populateProfiles);
+
+const populateProfiles = (noTable?: boolean): void => _get("/getProfiles", null, function (): void {
+    if (this.readyState == 4 && this.status == 200) {
+        const profileList = document.getElementById('profileList');
+        profileList.textContent = '';
+        availableProfiles = [];
+        for (let name in this.response) {
+            availableProfiles.push(name);
+            if (!noTable) {
+                const profile: Profile = {
+                    Admin: this.response[name]["admin"],
+                    LibraryAccess: this.response[name]["libraries"],
+                    FromUser: this.response[name]["fromUser"]
+                };
+                profileList.innerHTML += `
+                <td nowrap="nowrap" class="align-middle"><strong>${name}</strong></td>
+                <td nowrap="nowrap" class="align-middle">${profile.FromUser}</td>
+                <td nowrap="nowrap" class="align-middle">${profile.Admin ? "Yes" : "No"}</td>
+                <td nowrap="nowrap" class="align-middle">${profile.LibraryAccess}</td>
+                <td nowrap="nowrap" class="align-middle"><button class="btn btn-outline-danger" onclick="deleteProfile('${name}')">Delete</button></td>
+                `;
+            }
+        }
+    }
+});
+
+const deleteProfile = (name: string): void => _post("/deleteProfile", { "name": name }, function (): void {
+    if (this.readyState == 4 && this.status == 200) {
+        populateProfiles();
+    }
+});
+
+const createProfile = (): void => _get("/getUsers", null, function (): void {
+    if (this.readyState == 4 && this.status == 200) {
+        jfUsers = this.response["users"];
+        populateRadios();
+        const submitButton = document.getElementById('storeDefaults') as HTMLButtonElement;
+        submitButton.disabled = false;
+        submitButton.textContent = 'Create';
+        addAttr(submitButton, "btn-primary");
+        rmAttr(submitButton, "btn-danger");
+        rmAttr(submitButton, "btn-success");
+        document.getElementById('defaultsTitle').textContent = `Create Profile`;
+        document.getElementById('userDefaultsDescription').textContent = `
+        Create an account and configure it to your liking, then choose it from below to store the settings as a profile. Profiles can be specified per invite, so that any new user on that invite will have the settings applied.`;
+        document.getElementById('storeHomescreenLabel').textContent = `Store homescreen layout`;
+        (document.getElementById('defaultsSource') as HTMLSelectElement).value = 'fromUser';
+        document.getElementById('defaultsSourceSection').classList.add('unfocused');
+        (document.getElementById('storeDefaults') as HTMLButtonElement).onclick = storeProfile;
+        Focus(document.getElementById('newProfileBox'));
+        (document.getElementById('newProfileName') as HTMLInputElement).value = '';
+        Focus(document.getElementById('defaultUserRadios'));
+        userDefaultsModal.show();
+    }
+});
+
+function storeProfile(): void {
+    this.disabled = true;
+    this.innerHTML =
+        '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
+        'Loading...';
+    const button = document.getElementById('storeDefaults') as HTMLButtonElement;
+    const radio = document.querySelector('input[name=defaultRadios]:checked') as HTMLInputElement
+    const name = (document.getElementById('newProfileName') as HTMLInputElement).value;
+    let id = radio.id.replace("default_", "");
+    let data = {
+        "name": name,
+        "id": id,
+        "homescreen": false
+    }
+    if ((document.getElementById('storeDefaultHomescreen') as HTMLInputElement).checked) {
+        data["homescreen"] = true;
+    }
+    _post("/createProfile", data, function (): void {
+        if (this.readyState == 4) {
+            if (this.status == 200 || this.status == 204) {
+                button.textContent = "Success";
+                addAttr(button, "btn-success");
+                rmAttr(button, "btn-danger");
+                rmAttr(button, "btn-primary");
+                button.disabled = false;
+                setTimeout((): void => {
+                    button.textContent = "Create";
+                    addAttr(button, "btn-primary");
+                    rmAttr(button, "btn-success");
+                    button.disabled = false;
+                    populateProfiles();
+                    userDefaultsModal.hide();
+
+                }, 1000);
+            } else {
+                if ("error" in this.response) {
+                    button.textContent = this.response["error"];
+                } else if (("policy" in this.response) || ("homescreen" in this.response)) {
+                    button.textContent = "Failed (check console)";
+                } else {
+                    button.textContent = "Failed";
+                }
+                addAttr(button, "btn-danger");
+                rmAttr(button, "btn-primary");
+                setTimeout((): void => {
+                    button.textContent = "Create";
+                    addAttr(button, "btn-primary");
+                    rmAttr(button, "btn-danger");
+                    button.disabled = false;
+                }, 1000);
+            }
+        }
+    });
+}
+
+function showSetting(id: string, runBefore?: () => void): void {
+    const els = document.getElementById('settingsLeft').querySelectorAll("button[type=button]:not(.static)") as NodeListOf<HTMLButtonElement>;
+    for (let i = 0; i < els.length; i++) {
+        const el = els[i];
+        if (el.id != `${id}_button`) {
+            rmAttr(el, "active");
+        }
+        const sectEl = document.getElementById(el.id.replace("_button", ""));
+        if (sectEl.id != id) {
+            Unfocus(sectEl);
+        }
+    }
+    addAttr(document.getElementById(`${id}_button`), "active");
+    const section = document.getElementById(id);
+    if (runBefore) {
+        runBefore();
+    }
+    Focus(section);
+    if (screen.width <= 1100) {
+        // ugly
+        setTimeout((): void => section.scrollIntoView(<ScrollIntoViewOptions>{ block: "center", behavior: "smooth" }), 200);
+    }
+}
+
+// (document.getElementById('openSettings') as HTMLButtonElement).onclick = (): void => openSettings(document.getElementById('settingsList'), document.getElementById('settingsList'), (): void => settingsModal.show());
+
 (document.getElementById('settingsSave') as HTMLButtonElement).onclick = function (): void {
     modifiedConfig = {};
+    const save = this as HTMLButtonElement;
     let restartSettingsChanged = false;
     let settingsChanged = false;
     for (const i in config["order"]) {
@@ -178,7 +295,7 @@ function sendConfig(modalID: string, restart?: boolean): void {
             } else {
                 val = el.value.toString();
             }
-            if (val != config[section][entry]["value"]) {
+            if (val != config[section][entry]["value"].toString()) {
                 if (!(section in modifiedConfig)) {
                     modifiedConfig[section] = {};
                 }
@@ -190,17 +307,23 @@ function sendConfig(modalID: string, restart?: boolean): void {
             }
         }
     }
+    const spinnerHTML = ` 
+    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>
+    Loading...`;
     if (restartSettingsChanged) {
-        (document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig("restartModal");
+        save.innerHTML = spinnerHTML;
+        (document.getElementById('applyRestarts') as HTMLButtonElement).onclick = (): void => sendConfig();
         const restartButton = document.getElementById('applyAndRestart') as HTMLButtonElement;
         if (restartButton) {
-            restartButton.onclick = (): void => sendConfig("restartModal", true);
+            restartButton.onclick = (): void => sendConfig(true);
         }
-        settingsModal.hide();
         restartModal.show();
     } else if (settingsChanged) {
-        sendConfig("settingsMenu");
-    } else {
-        settingsModal.hide();
+        save.innerHTML = spinnerHTML;
+        sendConfig();
     }
 };
+
+(document.getElementById('restartModalCancel') as HTMLButtonElement).onclick = (): void => {
+    document.getElementById('settingsSave').textContent = "Save";
+};