2020-12-12 22:15:43 +00:00
<!DOCTYPE html>
2020-12-24 21:22:28 +00:00
< html lang = "en" class = "light-theme" >
2020-12-12 22:15:43 +00:00
< head >
2020-12-16 18:25:16 +00:00
< link rel = "stylesheet" type = "text/css" href = "base.css" >
< title > jfa-no< / title >
2020-12-12 22:15:43 +00:00
< / head >
< body class = "max-w-full overflow-x-hidden section" >
2020-12-20 22:49:54 +00:00
< div id = "modal-login" class = "modal" >
< form class = "modal-content card" id = "form-login" href = "" >
2020-12-16 18:25:16 +00:00
< span class = "heading" > Login< / span >
< input type = "text" class = "field input ~neutral !high mt-half mb-1" placeholder = "username" id = "login-user" >
< input type = "password" class = "field input ~neutral !high mb-1" placeholder = "password" id = "login-password" >
2020-12-24 21:22:28 +00:00
< input type = "submit" class = "button ~urge !normal full-width center supra submit" value = "Login" >
2020-12-16 18:25:16 +00:00
< / form >
< / div >
2020-12-20 22:49:54 +00:00
< div id = "modal-add-user" class = "modal" >
< form class = "modal-content card" id = "form-add-user" href = "" >
< span class = "heading" > New User < span class = "modal-close" > × < / span > < / span >
< input type = "text" class = "field input ~neutral !high mt-half mb-1" placeholder = "username" id = "add-user-user" >
< input type = "password" class = "field input ~neutral !high mb-1" placeholder = "password" id = "add-user-password" >
2020-12-24 21:22:28 +00:00
< input type = "submit" class = "button ~urge !normal full-width center supra submit" value = "Create" >
2020-12-20 22:49:54 +00:00
< / form >
< / div >
< div id = "modal-about" class = "modal" >
< div class = "modal-content content card" >
< span class = "heading" > About < span class = "modal-close" > × < / span > < / span >
< img src = "images/banner.svg" class = "mt-1" alt = "jfa-go banner" >
2020-12-27 16:56:55 +00:00
< p > < i class = "icon ri-github-fill" > < / i > < a href = "https://github.com/hrfee/jfa-go" > jfa-go< / a > < / p >
2020-12-20 22:49:54 +00:00
< p > Version < span class = "code monospace" > a17t-redesign< / span > < / p >
< p > Commit < span class = "code monospace" > cb28097< / span > < / p >
< p > < a href = "https://github.com/hrfee/jfa-go/blob/main/LICENSE" > Available under the MIT License.< / a > < / p >
< / div >
< / div >
2020-12-23 01:34:22 +00:00
< div id = "modal-modify-user" class = "modal" >
< form class = "modal-content card" id = "form-modify-user" href = "" >
< span class = "heading" > < span id = "header-modify-user" > Modify Settings< / span > < span class = "modal-close" > × < / span > < / span >
< p class = "content" > Apply settings from an existing profile, or source them directly from a user.< / p >
< div class = "flex-row mb-1" >
2020-12-26 15:51:07 +00:00
< label class = "flex-row-group mr-1" >
< input type = "radio" name = "modify-user-source" class = "unfocused" id = "radio-use-profile" checked >
2020-12-23 01:34:22 +00:00
< span class = "button ~neutral !high supra full-width center" > Profile< / span >
< / label >
2020-12-26 15:51:07 +00:00
< label class = "flex-row-group ml-1" >
< input type = "radio" name = "modify-user-source" class = "unfocused" id = "radio-use-user" >
2020-12-23 01:34:22 +00:00
< span class = "button ~neutral !normal supra full-width center" > User< / span >
< / label >
< / div >
< div id = "modify-user-profiles" class = "select ~neutral !normal mb-1" >
< select >
< option > Friends< / option >
< option > Family< / option >
< option > Default< / option >
< / select >
< / div >
2020-12-26 15:51:07 +00:00
< div id = "modify-user-users" class = "select ~neutral !normal mb-1 unfocused" >
2020-12-23 01:34:22 +00:00
< select >
< option > Person< / option >
< option > Other person< / option >
< / select >
< / div >
< label class = "switch mb-1" >
< input type = "checkbox" id = "modify-user-homescreen" checked >
< span > Apply homescreen layout< / span >
< / label >
2020-12-24 21:22:28 +00:00
< input type = "submit" class = "button ~urge !normal full-width center supra submit" value = "Apply" >
2020-12-23 01:34:22 +00:00
< / form >
< / div >
< div id = "modal-delete-user" class = "modal" >
< form class = "modal-content card" id = "form-delete-user" href = "" >
< span class = "heading" > < span id = "header-delete-user" > Delete User< / span > < span class = "modal-close" > × < / span > < / span >
< div class = "content mt-half" >
< label class = "switch mb-1" >
< input type = "checkbox" id = "delete-user-notify" checked >
< span > Send notification email< / span >
< / label >
< textarea id = "textarea-delete-user" class = "textarea full-width ~neutral !normal mb-1" placeholder = "Your account has been deleted." > < / textarea >
2020-12-24 21:22:28 +00:00
< input type = "submit" class = "button ~urge !normal full-width center supra submit" value = "Apply" >
2020-12-23 01:34:22 +00:00
< / div >
< / form >
< / div >
< div id = "modal-restart" class = "modal" >
< div class = "modal-content card ~critical !normal" >
< span class = "heading" > Restart needed < span class = "modal-close" > × < / span > < / span >
< p class = "content pb-1" > A restart is needed to apply some settings you changed. Do it now or later?< / p >
< div class = "fr" >
< span class = "button ~info !normal" > Apply, restart later< / span >
< span class = "button ~critical !normal" > Apply & restart< / span >
< / div >
< / div >
< / div >
< div id = "modal-refresh" class = "modal" >
2020-12-24 21:22:28 +00:00
< div class = "modal-content card ~urge !normal" >
2020-12-23 01:34:22 +00:00
< span class = "heading" > Settings applied.< / span >
< p class = "content" > Refresh the page in a few seconds.< / p >
< / div >
< / div >
< div id = "modal-ombi-defaults" class = "modal" >
< form class = "modal-content card" id = "form-ombi-defaults" href = "" >
< span class = "heading" > Ombi user defaults < span class = "modal-close" > × < / span > < / span >
< p class = "content" > Create an Ombi user and configure it, then select it here. It's settings/permissions will be stored and applied to new ombi users created by jfa-go.< / p >
< div class = "select ~neutral !normal mb-1" >
< select >
< option > Person< / option >
< option > Other person< / option >
< / select >
< / div >
2020-12-24 21:22:28 +00:00
< input type = "submit" class = "button ~urge !normal full-width center supra submit" value = "Submit" >
2020-12-23 01:34:22 +00:00
< / form >
< / div >
2020-12-26 15:51:07 +00:00
< div class = "page-container max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8" >
2020-12-24 21:22:28 +00:00
< div class = "mb-1" >
2020-12-12 22:15:43 +00:00
< header class = "flex flex-wrap items-center justify-between" >
< div class = "text-neutral-700" >
2020-12-26 15:51:07 +00:00
< 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 >
2020-12-12 22:15:43 +00:00
< / div >
< / header >
< / div >
2020-12-24 21:22:28 +00:00
< div class = "mb-1" >
2020-12-12 22:15:43 +00:00
< div class = "text-neutral-700" >
< span class = "button ~critical !normal mb-1" > Logout< / span >
2020-12-24 21:22:28 +00:00
< span id = "button-theme" class = "button ~neutral !normal mb-1" > Theme< / span >
2020-12-20 22:49:54 +00:00
< span id = "modalButton" class = "button ~neutral !normal mb-1" > Trigger Login< / span >
2020-12-12 22:15:43 +00:00
< / div >
< / div >
2020-12-23 01:34:22 +00:00
< div id = "invitesTab" >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !low invites mb-1" >
2020-12-13 22:00:44 +00:00
< span class = "heading" > Invites< / span >
< div class = "inv" >
2020-12-26 15:51:07 +00:00
< div class = "card ~neutral !normal inv-header flex-expand mt-half" >
2020-12-13 22:00:44 +00:00
< div class = "inv-codearea" >
< a href = "#" class = "code monospace mr-1" > ZD8ZeC55Jcpmbtv54FuVM3< / a >
< span class = "button ~info !normal" > Copy< / span >
< / div >
< div class = "inv-infoarea" >
< span class = "inv-expiry mr-1" > Expires in 30m< / span >
< span class = "button ~critical !normal" > Delete< / span >
< label >
2020-12-27 16:56:55 +00:00
< i class = "icon ri-arrow-down-s-line not-rotated" > < / i >
2020-12-26 15:51:07 +00:00
< input type = "checkbox" class = "toggle-details unfocused" >
2020-12-13 22:00:44 +00:00
< / label >
< / div >
2020-12-12 22:15:43 +00:00
< / div >
2020-12-26 15:51:07 +00:00
< div class = "card ~neutral !normal mt-half inv-details mt-half unfocused" >
< div class = "inv-row flex-expand align-top" >
2020-12-13 22:00:44 +00:00
< div class = "inv-profilearea" >
< p class = "supra mb-1" > Profile< / p >
2020-12-26 15:51:07 +00:00
< div class = "select ~neutral !normal inv-profileselect inline-block" >
2020-12-13 22:00:44 +00:00
< select >
< option > Friends< / option >
< option > Family< / option >
< option > No Profile< / option >
< / select >
< / div >
< p class = "label supra" > Notify on:< / p >
< label class = "switch block" >
< input type = "checkbox" class = "inv-notify-expiry" >
< span > On expiry< / span >
< / label >
< label class = "switch block" >
< input type = "checkbox" class = "inv-notify-creation" >
< span > On user creation< / span >
< / label >
< / div >
< div class = "block" >
< p class = "supra mb-1" > Created < strong class = "inv-created" > 10/12/20 18:46< / strong > < / p >
< p class = "supra mb-1" > Remaining uses < strong class = "inv-remaining" > 8< / strong > < / p >
< / div >
< div class = "card ~neutral !low" >
< strong class = "supra table-header" > Created users< / strong >
< table class = "table inv-table" >
< thead >
< tr >
< th > Name< / th >
< th > Date< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > jeff< / td >
< td > 10/12/20 19:00< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
2020-12-12 22:15:43 +00:00
< / div >
< / div >
2020-12-13 22:00:44 +00:00
< / div >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !low create-inv" >
2020-12-13 22:00:44 +00:00
< span class = "heading" > Create< / span >
< div class = "row" >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !normal col" >
2020-12-13 22:00:44 +00:00
< label class = "label supra" for = "inv-days" > Days< / label >
< div class = "select ~neutral !normal mb-1" >
< select id = "inv-days" >
< option > 0< / option >
< / select >
< / div >
< label class = "label supra" for = "inv-hours" > Hours< / label >
< div class = "select ~neutral !normal mb-1" >
< select id = "inv-hours" >
< option > 0< / option >
< / select >
< / div >
< label class = "label supra" for = "inv-minutes" > Minutes< / label >
< div class = "select ~neutral !normal mb-1" >
< select id = "inv-minutes" >
< option > 0< / option >
< / select >
< / div >
< / div >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !normal col" >
2020-12-13 22:00:44 +00:00
< label class = "label supra" for = "inv-uses" > Number of uses< / label >
2020-12-26 15:51:07 +00:00
< div class = "flex-expand mb-1" >
2020-12-13 22:00:44 +00:00
< input type = "number" min = "0" id = "inv-uses" class = "input ~neutral !normal mr-1" value = 1 >
< label for = "inv-inf-uses" class = "button ~neutral !normal" >
< span > ∞< / span >
< input type = "checkbox" class = "unfocused" id = "inv-inf-uses" aria-label = "Set uses to infinite" >
2020-12-12 22:15:43 +00:00
< / label >
< / div >
2020-12-27 16:56:55 +00:00
< p class = "support unfocused" > < span class = "badge ~critical" > Warning< / span > invites with infinite uses can be used abusively.< / p >
2020-12-13 22:00:44 +00:00
< label class = "label supra" > Profile< / label >
< div class = "select ~neutral !normal mb-1" id = "inv-profile" >
< select >
< option > Friends< / option >
< option > Family< / option >
< option > No Profile< / option >
< / select >
2020-12-12 22:15:43 +00:00
< / div >
2020-12-13 22:00:44 +00:00
< label class = "label supra" > Send to< / label >
2020-12-26 15:51:07 +00:00
< div class = "flex-expand mb-1" >
2020-12-24 21:22:28 +00:00
< input type = "email" id = "inv-email" class = "input ~neutral !normal mr-1" placeholder = "example@example.com" >
2020-12-13 22:00:44 +00:00
< label for = "inv-email-enabled" class = "button ~neutral !normal" >
< input type = "checkbox" id = "inv-email-enabled" aria-label = "Send to address enabled" >
< / label >
2020-12-12 22:15:43 +00:00
< / div >
2020-12-24 21:22:28 +00:00
< span class = "button ~urge !normal supra full-width center button-lg" > Create< / span >
2020-12-12 22:15:43 +00:00
< / div >
< / div >
< / div >
< / div >
2020-12-14 21:40:25 +00:00
< div id = "accountsTab" class = "unfocused" >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !low accounts mb-1" >
2020-12-13 22:00:44 +00:00
< span class = "heading" > Accounts< / span >
2020-12-14 21:40:25 +00:00
< div class = "fr" >
< span class = "button ~neutral !normal" id = "accounts-add-user" > Add User< / span >
2020-12-24 21:22:28 +00:00
< span class = "button ~urge !normal" id = "accounts-modify-user" > Modify Settings< / span >
2020-12-23 01:34:22 +00:00
< span class = "button ~critical !normal" id = "accounts-delete-user" > Delete User< / span >
2020-12-14 21:40:25 +00:00
< / div >
2020-12-13 22:00:44 +00:00
< div class = "card ~neutral !normal accounts-header mt-half" >
< table class = "table" >
< thead >
< tr >
< th > < input type = "checkbox" value = "" id = "accounts-select-all" > < / th >
< th > Username< / th >
< th > Email Address< / th >
< th > Last Active< / th >
< / tr >
< / thead >
< tbody id = "accounts-list" >
< tr >
< td > < input type = "checkbox" value = "" > < / td >
< td > Person < span class = "chip ~info ml-1" > Admin< / span > < / td >
2020-12-27 16:56:55 +00:00
< td > < i class = "icon ri-edit-line" > < / i > < input type = "email" class = "input ~neutral !normal stealth-input stealth-input-hidden" value = "email@addr.ess" readonly > < / td >
2020-12-13 22:00:44 +00:00
< td > 13/12/20 00:39< / td >
< / tr >
2020-12-14 21:40:25 +00:00
< tr >
< td > < input type = "checkbox" value = "" > < / td >
< td > Other person< / td >
2020-12-27 16:56:55 +00:00
< td > < i class = "icon ri-edit-line" > < / i > < input type = "email" class = "input ~neutral !normal stealth-input stealth-input-hidden" value = "eee@ma.il" readonly > < / td >
2020-12-14 21:40:25 +00:00
< td > 12/12/20 17:46< / td >
< / tr >
2020-12-13 22:00:44 +00:00
< / tbody >
< / table >
2020-12-12 22:15:43 +00:00
< / div >
< / div >
2020-12-14 21:40:25 +00:00
< / div >
2020-12-23 01:34:22 +00:00
< div id = "settingsTab" class = "unfocused" >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !low settings" >
2020-12-14 21:40:25 +00:00
< span class = "heading" > Settings< / span >
2020-12-23 01:34:22 +00:00
< div class = "fr" >
< span class = "button ~neutral !normal" id = "accounts-add-user" > Save< / span >
< / div >
2020-12-14 21:40:25 +00:00
< div class = "row" >
< div class = "card ~neutral !normal col" >
2020-12-27 16:56:55 +00:00
< aside class = "aside sm ~info mb-half" > Note: < span class = "badge ~critical" > *< / span > indicates a required field, < span class = "badge ~critical" > R< / span > indicates changes require a restart.< / aside >
2020-12-24 21:22:28 +00:00
< span class = "button ~neutral !low settings-section-button mb-half" id = "setting-about" > About< / span >
< span class = "button ~neutral !low settings-section-button mb-half selected" > User Profiles< / span >
2020-12-14 21:40:25 +00:00
< / div >
2020-12-24 21:22:28 +00:00
< div class = "card ~neutral !normal col" >
2020-12-14 21:40:25 +00:00
< div class = "settings-section" >
2020-12-26 15:51:07 +00:00
< p class = "support lg mb-half" > Settings section description.< / p >
2020-12-14 21:40:25 +00:00
< div class = "setting" >
2020-12-27 16:56:55 +00:00
< label class = "label" for = "settings-select" > Select < span class = "badge ~critical" > R< / span > < / label >
2020-12-14 21:40:25 +00:00
< div class = "select ~neutral !normal mt-half" >
< select id = "settings-select" >
< option > Option 1< / option >
< / select >
< / div >
< / div >
< div class = "setting" >
2020-12-27 16:56:55 +00:00
< label class = "label" for = "settings-input" > Input < span class = "badge ~critical" > *< / span > < / label >
2020-12-14 21:40:25 +00:00
< input type = "text" class = "input ~neutral !normal mt-half" placeholder = "Value" >
< / div >
< div class = "setting" >
< label class = "switch settings" >
< input type = "checkbox" id = "settings-check" >
2020-12-27 16:56:55 +00:00
< span > Checkbox < span class = "badge ~critical" > R< / span > < / span >
2020-12-14 21:40:25 +00:00
< / label >
< / div >
< / div >
< / div >
< / div >
< / div >
2020-12-12 22:15:43 +00:00
< / div >
< / div >
2020-12-20 22:49:54 +00:00
< script src = "modal.js" > < / script >
< script src = "main.js" > < / script >
2020-12-12 22:15:43 +00:00
< / body >
< / html >
