pwr: add captcha daemon

pwr: functioning captcha/recaptcha
form: modularize captcha somewhat
2023-12-23 20:18:16 +00:00 · 2023-12-23 20:10:48 +00:00 · 2023-12-23 18:20:09 +00:00 · 2023-12-23 17:45:18 +00:00 · 2023-12-23 15:36:28 +00:00 · 2023-12-22 21:40:56 +00:00
21 changed files with 424 additions and 206 deletions
--- a/api-users.go
+++ b/api-users.go
@ -503,7 +503,7 @@ func (app *appContext) NewUser(gc *gin.Context) {
 	var req newUserDTO
 	gc.BindJSON(&req)
 	app.debug.Printf("%s: New user attempt", req.Code)
-	if app.config.Section("captcha").Key("enabled").MustBool(false) && !app.verifyCaptcha(req.Code, req.CaptchaID, req.CaptchaText) {
+	if app.config.Section("captcha").Key("enabled").MustBool(false) && !app.verifyCaptcha(req.Code, req.CaptchaID, req.CaptchaText, false) {
 		app.info.Printf("%s: New user failed: Captcha Incorrect", req.Code)
 		respond(400, "errorCaptcha", gc)
 		return
--- a/api.go
+++ b/api.go
@ -114,6 +114,7 @@ func (app *appContext) ResetSetPassword(gc *gin.Context) {
 	var req ResetPasswordDTO
 	gc.BindJSON(&req)
 	validation := app.validator.validate(req.Password)
+	captcha := app.config.Section("captcha").Key("enabled").MustBool(false)
 	valid := true
 	for _, val := range validation {
 		if !val {
@ -121,12 +122,18 @@ func (app *appContext) ResetSetPassword(gc *gin.Context) {
 		}
 	}
 	if !valid || req.PIN == "" {
-		// 200 bcs idk what i did in js
 		app.info.Printf("%s: Password reset failed: Invalid password", req.PIN)
 		gc.JSON(400, validation)
 		return
 	}
 	isInternal := false
+
+	if captcha && !app.verifyCaptcha(req.PIN, req.PIN, req.CaptchaText, true) {
+		app.info.Printf("%s: PWR Failed: Captcha Incorrect", req.PIN)
+		respond(400, "errorCaptcha", gc)
+		return
+	}
+
 	var userID, username string
 	if reset, ok := app.internalPWRs[req.PIN]; ok {
 		isInternal = true
@ -138,6 +145,7 @@ func (app *appContext) ResetSetPassword(gc *gin.Context) {
 		}
 		userID = reset.ID
 		username = reset.Username
+
 		status, err := app.jf.ResetPasswordAdmin(userID)
 		if !(status == 200 || status == 204) || err != nil {
 			app.err.Printf("Password Reset failed (%d): %v", status, err)
--- a/auth.go
+++ b/auth.go
@ -233,7 +233,8 @@ func (app *appContext) getTokenLogin(gc *gin.Context) {
 		respond(500, "Couldn't generate token", gc)
 		return
 	}
-	gc.SetCookie("refresh", refresh, (3600 * 24), "/", gc.Request.URL.Hostname(), true, true)
+	host := gc.Request.URL.Hostname()
+	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", host, true, true)
 	gc.JSON(200, getTokenDTO{token})
 }

@ -297,6 +298,7 @@ func (app *appContext) getTokenRefresh(gc *gin.Context) {
 		respond(500, "Couldn't generate token", gc)
 		return
 	}
-	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", gc.Request.URL.Hostname(), true, true)
+	host := gc.Request.URL.Hostname()
+	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", host, true, true)
 	gc.JSON(200, getTokenDTO{jwt})
 }
--- a/css/base.css
+++ b/css/base.css
@ -575,7 +575,6 @@ input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:befo
    cursor: pointer;
 }

-
 .g-recaptcha {
    overflow: hidden;
    width: 296px;
@ -587,3 +586,8 @@ input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:befo
 .g-recaptcha iframe {
    margin: -2px 0px 0px -4px;
 }
+
+.dropdown-manual-toggle {
+    margin-bottom: -0.5rem;
+    padding-bottom: 0.5rem;
+}
--- a/css/tooltip.css
+++ b/css/tooltip.css
@ -5,6 +5,7 @@

 .tooltip .content {
    visibility: hidden;
+    opacity: 0;
    max-width: 10rem;
    min-width: 6rem;
    background-color: rgba(0, 0, 0, 0.6);
@ -13,12 +14,23 @@
    border-radius: 6px;
    overflow-wrap: break-word;
    text-align: center;
+    transition: opacity 100ms;

    position: absolute;
    z-index: 1;
    top: -1rem;
 }

+.tooltip.below .content {
+    top: 2.5rem;
+    left: 0;
+    right: 0;
+}
+
+.tooltip.darker .content {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
 .tooltip.right .content {
    left: 120%;
 }
@ -31,6 +43,10 @@
    font-size: 0.8rem;
 }

-.tooltip:hover .content {
+.tooltip:hover .content,
+.tooltip:focus .content,
+.tooltip:focus-within .content
+{
    visibility: visible;
+    opacity: 1;
 }
--- a/daemon.go
+++ b/daemon.go
@ -74,6 +74,17 @@ func (app *appContext) clearTelegram() {
 	}
 }

+func (app *appContext) clearPWRCaptchas() {
+	app.debug.Println("Housekeeping: Clearing old PWR Captchas")
+	captchas := map[string]Captcha{}
+	for k, capt := range app.pwrCaptchas {
+		if capt.Generated.Add(CAPTCHA_VALIDITY * time.Second).After(time.Now()) {
+			captchas[k] = capt
+		}
+	}
+	app.pwrCaptchas = captchas
+}
+
 func (app *appContext) clearActivities() {
 	app.debug.Println("Housekeeping: Cleaning up Activity log...")
 	keepCount := app.config.Section("activity_log").Key("keep_n_records").MustInt(1000)
@ -136,6 +147,7 @@ func newInviteDaemon(interval time.Duration, app *appContext) *housekeepingDaemo
 	clearDiscord := app.config.Section("discord").Key("require_unique").MustBool(false)
 	clearTelegram := app.config.Section("telegram").Key("require_unique").MustBool(false)
 	clearMatrix := app.config.Section("matrix").Key("require_unique").MustBool(false)
+	clearPWR := app.config.Section("captcha").Key("enabled").MustBool(false) && !app.config.Section("captcha").Key("recaptcha").MustBool(false)

 	if clearEmail || clearDiscord || clearTelegram || clearMatrix {
 		daemon.jobs = append(daemon.jobs, func(app *appContext) { app.jf.CacheExpiry = time.Now() })
@ -153,6 +165,9 @@ func newInviteDaemon(interval time.Duration, app *appContext) *housekeepingDaemo
 	if clearMatrix {
 		daemon.jobs = append(daemon.jobs, func(app *appContext) { app.clearMatrix() })
 	}
+	if clearPWR {
+		daemon.jobs = append(daemon.jobs, func(app *appContext) { app.clearPWRCaptchas() })
+	}

 	return &daemon
 }
--- a/html/admin.html
+++ b/html/admin.html
@ -26,7 +26,7 @@
    <body class="max-w-full overflow-x-hidden section">
        {{ template "login-modal.html" . }}
        <div id="modal-add-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-add-user" href="">
                <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
                <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
@ -43,7 +43,7 @@
            </form>
        </div>
        <div id="modal-about" class="modal">
-            <div class="relative mx-auto my-[10%] w-4/5 lg:w-1/3 content card">
+            <div class="relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 content card">
                <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                <span class="heading"><span class="modal-close">&times;</span></span>
                <p>{{ .strings.version }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .version }}</span></p>
@ -80,7 +80,7 @@
            </div>
        </div>
        <div id="modal-modify-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-modify-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-modify-user" href="">
                <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
                <div class="flex flex-row mb-4">
@ -111,7 +111,7 @@
        </div>
        {{ if .referralsEnabled }}
        <div id="modal-enable-referrals-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-enable-referrals-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-enable-referrals-user" href="">
                <span class="heading"><span id="header-enable-referrals-user"></span> <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.enableReferralsDescription }}</p>
                <div class="flex flex-row mb-4">
@ -142,7 +142,7 @@
            </form>
        </div>
        <div id="modal-enable-referrals-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-enable-referrals-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-enable-referrals-profile" href="">
                <span class="heading"><span id="header-enable-referrals-profile">{{ .strings.enableReferrals }}</span> <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.enableReferralsProfileDescription }}</p>
                <label class="supra" for="enable-referrals-profile-invites">{{ .strings.invite }}</label>
@ -162,7 +162,7 @@
        </div>
        {{ end }}
        <div id="modal-delete-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-delete-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-delete-user" href="">
                <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
                <div class="content mt-8">
                    <label class="switch mb-4">
@ -178,7 +178,7 @@
            </form>
        </div>
        <div id="modal-extend-expiry" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
                <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
                <div class="content mt-8">
                    <aside class="aside sm ~urge dark:~d_info mb-2 @low row unfocused" id="extend-expiry-date"></aside>
@ -242,7 +242,7 @@
        <div id="modal-announce" class="modal">
            <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-announce" href="">
                <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
+                <div class="flex flex-col md:flex-row">
                    <div class="col card ~neutral @low">
                        <div id="announce-details">
                            <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
@ -275,7 +275,7 @@
            </form>
        </div>
        <div id="modal-customize" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
                <div class="table-responsive">
@ -319,7 +319,7 @@
            </form>
        </div>
        <div id="modal-restart" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~critical @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~critical @low">
                <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
                <div class="float-right">
@ -329,7 +329,7 @@
            </div>
        </div>
        <div id="modal-backups" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                <span class="heading">{{ .strings.backups }} <span class="modal-close">&times;</span></span>
                <div class="content my-4">
                    {{ .strings.backupsDescription }}
@ -345,7 +345,7 @@
                    <input id="backups-file" name="backups-file" type="file" hidden>
                    <button class="button ~neutral @low mr-2 mb-2" id="settings-backups-sort-direction">{{ .strings.sortDirection }}</button>
                </div>
-                <div class="overflow-x-auto">
+                <div class="overflow-x-auto text-xs md:text-sm">
                    <table class="table">
                        <thead>
                            <tr>
@ -360,7 +360,7 @@
            </div>
        </div>
        <div id="modal-backed-up" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.backupCreated }} <span class="modal-close">&times;</span></span>
                <p class="content my-4" id="settings-backed-up-location"></p>
                <p class="content my-4">{{ .strings.backupCanDownload }}</p>
@ -370,20 +370,20 @@
            </div>
        </div>
        <div id="modal-refresh" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.settingsApplied }}</span>
                <p class="content">{{ .strings.settingsRefreshPage }}</p>
            </div>
        </div>
        <div id="modal-send-pwr" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                <span class="heading">{{ .strings.sendPWR }}</span>
                <p class="content my-2" id="send-pwr-note"></p>
                <span class="button ~urge @low mt-2" id="send-pwr-link">{{ .strings.copy }}</span>
            </div>
        </div>
        <div id="modal-ombi-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
                <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
                <div class="select ~neutral @low mb-4">
@ -422,7 +422,7 @@
            </div>
        </div>
        <div id="modal-add-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-add-profile" href="">
                <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
                <p class="content my-4">{{ .strings.addProfileDescription }}</p>
                <label>
@ -461,7 +461,7 @@
        </div>
        {{ if .telegramEnabled }}
        <div id="modal-telegram" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                <p class="content mb-4">{{ .strings.sendPIN }}</p>
                <h1 class="ac" id="telegram-pin"></h1>
@ -479,7 +479,7 @@
        {{ end }}
        {{ if .discordEnabled }}
        <div id="modal-discord" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                <span class="heading mb-4"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
                <p class="content mb-4" id="discord-description"></p>
                <div class="row">
@ -490,7 +490,7 @@
        </div>
        {{ end }}
        <div id="modal-matrix" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-matrix" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-matrix" href="">
                <span class="heading">{{ .strings.linkMatrix }}</span>
                <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
                <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
@ -503,7 +503,7 @@
            </form>
        </div>
        <div id="notification-box"></div>
-        <div class="top-4 left-4 absolute">
+        <div class="top-4 left-4 absolute flex flex-row gap-2">
            <span class="dropdown z-[11]" tabindex="0" id="lang-dropdown">
                <span class="button ~urge dropdown-button">
                    <i class="ri-global-line"></i>
@ -532,8 +532,8 @@
        {{ end }}
        <div class="page-container">
            <div class="mb-4">
-                <header class="flex flex-wrap items-center justify-between">
-                    <div>
+                <header>
+                    <div class="flex flex-row overflow-x-scroll items-center">
                        <span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.invites }}</span>
                        <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.accounts }}</span>
                        <span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.activity }}</span>
@ -547,7 +547,7 @@
                </div>
            </div>
            <div id="tab-invites">
-                <div class="card @low invites dark:~d_neutral mb-4">
+                <div class="card @low invites dark:~d_neutral mb-4 overflow-visible">
                    <span class="heading">{{ .strings.invites }}</span>
                    <div id="invites"></div>
                </div>
@ -696,29 +696,33 @@
            </div>
            <div id="tab-accounts" class="unfocused">
                <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
-                    <div class="flex-expand align-middle">
-                        <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
-                        <div id="accounts-filter-dropdown" class="dropdown z-10" tabindex="0">
-                            <span class="h-100 button ~neutral @low center" id="accounts-filter-button">{{ .strings.filters }}</span>
-                            <div class="dropdown-display">
-                                <div class="card ~neutral @low mt-2" id="accounts-filter-list">
-                                    <p class="supra pb-2">{{ .strings.filters }}</p>
-                                </div>
+                    <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
+                        <div class="flex flex-col md:flex-row align-middle gap-2">
+                            <div class="flex flex-row align-middle justify-between md:justify-normal">
+                                <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
+                                <span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
+                            </div>
+                            <div class="flex flex-row align-middle w-100">
+                                <input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
+                                <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                            </div>
+                        </div>
+                        <div class="dropdown-display max-w-full">
+                            <div class="card ~neutral @low mt-2 overflow-x-scroll" id="accounts-filter-list">
+                                <p class="supra pb-2">{{ .strings.filters }}</p>
                            </div>
                        </div>
-                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
-                        <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
                    </div>
                    <div class="supra py-1 sm hidden" id="accounts-search-options-header">{{ .strings.searchOptions }}</div>
                    <div class="row -mx-2 mb-2">
                        <button type="button" class="button ~neutral @low center mx-2 hidden"><span id="accounts-sort-by-field"></span> <i class="ri-close-line ml-2 text-2xl"></i></button>
                        <span id="accounts-filter-area"></span>
                    </div>
-                    <div class="supra py-1 sm">{{ .strings.actions }}</div>
-                    <div class="row -mx-2">
-                        <span class="col button ~neutral @low center max-w-[20%]" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                        <div id="accounts-announce-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
-                            <span class="w-100 button ~info @low center" id="accounts-announce">{{ .strings.announce }}</span>
+                    <div class="supra pt-1 pb-2 sm">{{ .strings.actions }}</div>
+                    <div class="flex flex-row flex-wrap gap-3 mb-4">
+                        <span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
+                        <div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
+                            <span class="w-100 button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
                            <div class="dropdown-display">
                                <div class="card ~neutral @low">
                                    <span class="supra sm">{{ .strings.templates }}</span>
@ -726,12 +730,12 @@
                                </div>
                            </div>
                        </div>
-                        <span class="col button ~urge @low center max-w-[20%]" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
+                        <span class="button ~urge @low center " id="accounts-modify-user">{{ .strings.modifySettings }}</span>
                        {{ if .referralsEnabled }}
-                            <span class="col button ~urge @low center max-w-[20%]" id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
+                            <span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
                        {{ end }}
-                        <div id="accounts-expiry-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
-                            <span class="w-100 button ~positive @low center" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
+                        <div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0">
+                            <span class="w-100 button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
                            <div class="dropdown-display">
                                <div class="card ~neutral @low">
                                    <span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
@ -739,7 +743,7 @@
                                </div>
                            </div>
                        </div>
-                        <div id="accounts-disable-enable-dropdown" class="col dropdown manual pb-0i max-w-[20%]" tabindex="0">
+                        <div id="accounts-disable-enable-dropdown" class="dropdown manual pb-0i " tabindex="0">
                            <span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
                            <div class="dropdown-display">
                                <div class="card ~neutral @low">
@ -747,8 +751,8 @@
                                </div>
                            </div>
                        </div>
-                        <span class="col button ~info @low center unfocused max-w-[20%]" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
-                        <span class="col button ~critical @low center max-w-[20%]" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
+                        <span class="button ~info @low center unfocused " id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
+                        <span class="button ~critical @low center " id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                    </div>
                    <div class="card @low accounts-header table-responsive mt-2">
                        <table class="table text-base leading-4">
@ -791,27 +795,33 @@
            </div>
            <div id="tab-activity" class="unfocused">
                <div class="card @low dark:~d_neutral activity mb-4 overflow-visible">
-                    <div class="flex-expand align-middle">
-                        <span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
-                        <div id="activity-filter-dropdown" class="dropdown z-10" tabindex="0">
-                            <span class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</span>
-                            <div class="dropdown-display">
-                                <div class="card ~neutral @low mt-2" id="activity-filter-list">
-                                    <p class="supra pb-2">{{ .strings.filters }}</p>
+                    <div id="activity-filter-dropdown" class="dropdown manual z-10 w-100" tabindex="0">
+                        <div class="flex flex-col md:flex-row align-middle gap-2">
+                            <div class="flex flex-row align-middle justify-between md:justify-normal">
+                                <span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
+                                <div class="flex flex-row align-middle">
+                                    <span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span>
+                                    <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
                                </div>
                            </div>
+                            <div class="flex flex-row align-middle w-100">
+                                <input type="search" class="field ~neutral @low input search mr-2" id="activity-search" placeholder="{{ .strings.search }}">
+                                <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                                <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
+                            </div>
+                        </div>
+                        <div class="dropdown-display max-w-full">
+                            <div class="card ~neutral @low mt-2 overflow-x-scroll" id="activity-filter-list">
+                                <p class="supra pb-2">{{ .strings.filters }}</p>
+                            </div>
                        </div>
-                        <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
-                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="activity-search" placeholder="{{ .strings.search }}">
-                        <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
-                        <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
                    </div>
-                    <div class="flex flex-row justify-between py-2">
+                    <div class="flex flex-row justify-between pt-3 pb-2">
                        <div class="supra sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div>
-                        <div class="supra sm">
-                            <span id="activity-total-records" class="mx-2"></span>
-                            <span id="activity-loaded-records" class="mx-2"></span>
-                            <span id="activity-shown-records" class="mx-2"></span>
+                        <div class="supra sm flex flex-row gap-2">
+                            <span id="activity-total-records"></span>
+                            <span id="activity-loaded-records"></span>
+                            <span id="activity-shown-records"></span>
                        </div>
                    </div>
                    <div class="row -mx-2 mb-2">
@ -842,19 +852,19 @@
            </div>
            <div id="tab-settings" class="unfocused">
                <div class="card @low dark:~d_neutral settings overflow">
-                    <div class="flex-expand">
-                        <div class="flex-row">
+                    <div class="flex flex-col md:flex-row align-middle gap-2">
+                        <div class="flex flex-row align-middle justify-between md:justify-normal">
                            <span class="heading">{{ .strings.settings }}</span>
-                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2 my-2">
+                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2">
                                <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
                                <span class="ml-2">{{ .strings.advancedSettings }} </span>
                            </label>
                        </div>
-                        <div>
-                            <span class="button ~neutral @low my-1" id="settings-logs">{{ .strings.logs }}</span>
-                            <span class="button ~info @low my-1" id="settings-backups">{{ .strings.backups }}</span>
-                            <span class="button ~neutral @low my-1" id="settings-restart">{{ .strings.settingsRestart }}</span>
-                            <span class="button ~urge @low unfocused my-1" id="settings-save">{{ .strings.settingsSave }}</span>
+                        <div class="flex flex-row justify-start md:justify-end gap-2 w-100">
+                            <span class="button ~neutral @low" id="settings-logs">{{ .strings.logs }}</span>
+                            <span class="button ~info @low" id="settings-backups">{{ .strings.backups }}</span>
+                            <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
+                            <span class="button ~urge @low unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
                        </div>
                    </div>
                    <div class="flex flex-col md:flex-row gap-3">
--- a/html/form-base.html
+++ b/html/form-base.html
@ -34,8 +34,12 @@
 </script>
 {{ if .passwordReset }}
 <script src="js/pwr.js" type="module"></script>
+<script>
+    window.pwrPIN = "{{ .pwrPIN }}";
+</script>
 {{ else }}
 <script src="js/form.js" type="module"></script>
+{{ end }}
 {{ if .reCAPTCHA }}
 <script>
    var reCAPTCHACallback = () => {
@ -49,4 +53,3 @@
 <script src="https://www.google.com/recaptcha/api.js?onload=reCAPTCHACallback&render=explicit" async defer></script>
 {{ end }}
 {{ end }}
-{{ end }}
--- a/html/login-modal.html
+++ b/html/login-modal.html
@ -1,21 +1,21 @@
 <div id="modal-login" class="modal">
-    <div class="my-[10%] row items-stretch relative mx-auto w-[40%] lg:w-[60%]">
+    <div class="my-[10%] row items-stretch relative mx-auto w-11/12 sm:w-4/5 lg:w-1/2">
        {{ if index . "LoginMessageEnabled" }}
            {{ if .LoginMessageEnabled }}
-                <div class="card mx-2 flex-initial w-[100%] xl:w-[35%] mb-4 xl:mb-0 dark:~d_neutral @low content">
+                <div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                    {{ .LoginMessageContent }}
                </div>
            {{ end }}
        {{ end }}
        {{ if index . "userPageEnabled" }}
                {{ if and .userPageEnabled .showUserPageLink }}
-                <div class="card mx-2 flex-initial w-[100%] xl:w-[35%] mb-4 xl:mb-0 dark:~d_neutral @low content">
+                <div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                    <span class="heading row">{{ .strings.loginNotAdmin }}</span>
                    <a class="button ~info h-12 w-100" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
                </div>
            {{ end }}
        {{ end }}
-        <form class="card mx-2 flex-auto form-login w-[100%] xl:w-[55%] mb-0" href="">
+        <form class="card mx-2 flex-auto form-login w-[100%] lg:w-[55%] mb-0" href="">
            <span class="heading">{{ .strings.login }}</span>
            <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
            <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
--- a/main.go
+++ b/main.go
@ -120,6 +120,7 @@ type appContext struct {
 	proxyTransport       *http.Transport
 	proxyConfig          easyproxy.ProxyConfig
 	internalPWRs         map[string]InternalPWR
+	pwrCaptchas          map[string]Captcha
 	ConfirmationKeys     map[string]map[string]newUserDTO // Map of invite code to jwt to request
 	confirmationKeysLock sync.Mutex
 }
--- a/models.go
+++ b/models.go
@ -332,8 +332,9 @@ type MatrixLoginDTO struct {
 }

 type ResetPasswordDTO struct {
-	PIN      string `json:"pin"`
-	Password string `json:"password"`
+	PIN         string `json:"pin"`
+	Password    string `json:"password"`
+	CaptchaText string `json:"captcha_text"`
 }

 type AdminPasswordResetDTO struct {
--- a/ts/admin.ts
+++ b/ts/admin.ts
@ -7,7 +7,7 @@ import { accountsList } from "./modules/accounts.js";
 import { settingsList } from "./modules/settings.js";
 import { activityList } from "./modules/activity.js";
 import { ProfileEditor } from "./modules/profiles.js";
-import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
+import { _get, _post, notificationBox, whichAnimationEvent, bindManualDropdowns } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
 import { Login } from "./modules/login.js";

@ -216,6 +216,8 @@ login.onLogin = () => {
    }
 }

+bindManualDropdowns();
+
 login.bindLogout(document.getElementById("logout-button"));

 login.login("", "");
--- a/ts/form.ts
+++ b/ts/form.ts
@ -4,6 +4,7 @@ import { _get, _post, toggleLoader, addLoader, removeLoader, toDateString } from
 import { loadLangSelector } from "./modules/lang.js";
 import { Validator, ValidatorConf, ValidatorRespDTO } from "./modules/validator.js";
 import { Discord, Telegram, Matrix, ServiceConfiguration, MatrixConfiguration } from "./modules/account-linking.js";
+import { Captcha, GreCAPTCHA } from "./modules/captcha.js";

 interface formWindow extends Window {
    invalidPassword: string;
@ -172,35 +173,7 @@ if (!window.usernameEnabled) { usernameField.parentElement.remove(); usernameFie
 const passwordField = document.getElementById("create-password") as HTMLInputElement;
 const rePasswordField = document.getElementById("create-reenter-password") as HTMLInputElement;

-let captchaVerified = false;
-let captchaID = "";
-let captchaInput = document.getElementById("captcha-input") as HTMLInputElement;
-const captchaCheckbox = document.getElementById("captcha-success") as HTMLSpanElement;
-let prevCaptcha = "";
-
-let baseValidator = (oncomplete: (valid: boolean) => void): void => {
-    if (window.captcha && !window.reCAPTCHA && (captchaInput.value != prevCaptcha)) {
-        prevCaptcha = captchaInput.value;
-        _post("/captcha/verify/" + window.code + "/" + captchaID + "/" + captchaInput.value, null, (req: XMLHttpRequest) => {
-            if (req.readyState == 4) {
-                if (req.status == 204) {
-                    captchaCheckbox.innerHTML = `<i class="ri-check-line"></i>`;
-                    captchaCheckbox.classList.add("~positive");
-                    captchaCheckbox.classList.remove("~critical");
-                    captchaVerified = true;
-                } else {
-                    captchaCheckbox.innerHTML = `<i class="ri-close-line"></i>`;
-                    captchaCheckbox.classList.add("~critical");
-                    captchaCheckbox.classList.remove("~positive");
-                    captchaVerified = false;
-                }
-                _baseValidator(oncomplete, captchaVerified);
-            }
-        });
-    } else {
-        _baseValidator(oncomplete, captchaVerified);
-    }
-}
+let captcha = new Captcha(window.code, window.captcha, window.reCAPTCHA, false);

 function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: boolean): void {
    if (window.emailRequired) {
@ -228,20 +201,9 @@ function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: bool
    oncomplete(true);
 }

-interface GreCAPTCHA {
-    render: (container: HTMLDivElement, parameters: {
-        sitekey?: string,
-        theme?: string,
-        size?: string,
-        tabindex?: number,
-        "callback"?: () => void,
-        "expired-callback"?: () => void,
-        "error-callback"?: () => void
-    }) => void;
-    getResponse: (opt_widget_id?: HTMLDivElement) => string;
-}
+let baseValidator = captcha.baseValidatorWrapper(_baseValidator); 

-declare var grecaptcha: GreCAPTCHA
+declare var grecaptcha: GreCAPTCHA;

 let validatorConf: ValidatorConf = {
    passwordField: passwordField,
@ -273,29 +235,15 @@ interface sendDTO {
    captcha_text?: string;
 }

-const genCaptcha = () => {
-    _get("/captcha/gen/"+window.code, null, (req: XMLHttpRequest) => {
-        if (req.readyState == 4) {
-            if (req.status == 200) {
-                captchaID = req.response["id"];
-                document.getElementById("captcha-img").innerHTML = `
-                <img class="w-100" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${window.code}/${captchaID}"></img>
-                `;
-                captchaInput.value = "";
-            }
-        }
-    });
-};
-
 if (window.captcha && !window.reCAPTCHA) {
-    genCaptcha();
-    (document.getElementById("captcha-regen") as HTMLSpanElement).onclick = genCaptcha;
-    captchaInput.onkeyup = validator.validate;
+    captcha.generate();
+    (document.getElementById("captcha-regen") as HTMLSpanElement).onclick = captcha.generate;
+    captcha.input.onkeyup = validator.validate;
 }

 const create = (event: SubmitEvent) => {
    event.preventDefault();
-    if (window.captcha && !window.reCAPTCHA && !captchaVerified) {
+    if (window.captcha && !window.reCAPTCHA && !captcha.verified) {
        
    }
    addLoader(submitSpan);
@ -330,8 +278,8 @@ const create = (event: SubmitEvent) => {
        if (window.reCAPTCHA) {
            send.captcha_text = grecaptcha.getResponse();
        } else {
-            send.captcha_id = captchaID;
-            send.captcha_text = captchaInput.value;
+            send.captcha_id = captcha.captchaID;
+            send.captcha_text = captcha.input.value;
        }
    }
    _post("/newUser", send, (req: XMLHttpRequest) => {
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@ -188,7 +188,7 @@ class user implements User, SearchableItem {
        if (!telegram && !discord && !matrix && !email) return;
        let innerHTML = `
        <i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
-        <div class="dropdown over-top manual">
+        <div class="dropdown manual">
            <div class="dropdown-display lg">
                <div class="card ~neutral @low">
                    <div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>
--- a/ts/modules/captcha.ts
+++ b/ts/modules/captcha.ts
@ -0,0 +1,81 @@
+import { _get, _post } from "./common.js";
+
+export class Captcha {
+    isPWR = false;
+    enabled = true;
+    verified = false;
+    captchaID = "";
+    input = document.getElementById("captcha-input") as HTMLInputElement;
+    checkbox = document.getElementById("captcha-success") as HTMLSpanElement;
+    previous = "";
+    reCAPTCHA = false;
+    code = "";
+
+    get value(): string { return this.input.value; }
+
+    hasChanged = (): boolean => { return this.value != this.previous; }
+
+    baseValidatorWrapper = (_baseValidator: (oncomplete: (valid: boolean) => void, captchaValid: boolean) => void) => {
+        return (oncomplete: (valid: boolean) => void): void => {
+            if (this.enabled && !this.reCAPTCHA && this.hasChanged()) {
+                this.previous = this.value;
+                this.verify(() => {
+                    _baseValidator(oncomplete, this.verified);
+                });
+            } else {
+                _baseValidator(oncomplete, this.verified);
+            }
+        };
+    };
+
+    verify = (callback: () => void) => _post("/captcha/verify/" + this.code + "/" + this.captchaID + "/" + this.input.value + (this.isPWR ? "?pwr=true" : ""), null, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            if (req.status == 204) {
+                this.checkbox.innerHTML = `<i class="ri-check-line"></i>`;
+                this.checkbox.classList.add("~positive");
+                this.checkbox.classList.remove("~critical");
+                this.verified = true;
+            } else {
+                this.checkbox.innerHTML = `<i class="ri-close-line"></i>`;
+                this.checkbox.classList.add("~critical");
+                this.checkbox.classList.remove("~positive");
+                this.verified = false;
+            }
+            callback();
+        }
+    });
+    
+    generate = () => _get("/captcha/gen/"+this.code+(this.isPWR ? "?pwr=true" : ""), null, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            if (req.status == 200) {
+                this.captchaID = this.isPWR ? this.code : req.response["id"];
+                // the Math.random() appearance below is used for PWRs, since they don't have a unique captchaID. The parameter is ignored by the server, but tells the browser to reload the image.
+                document.getElementById("captcha-img").innerHTML = `
+                <img class="w-100" src="${window.location.toString().substring(0, window.location.toString().lastIndexOf("/invite"))}/captcha/img/${this.code}/${this.isPWR ? Math.random() : this.captchaID}${this.isPWR ? "?pwr=true" : ""}"></img>
+                `;
+                this.input.value = "";
+            }
+        }
+    });
+
+    constructor(code: string, enabled: boolean, reCAPTCHA: boolean, isPWR: boolean) {
+        this.code = code;
+        this.enabled = enabled;
+        this.reCAPTCHA = reCAPTCHA;
+        this.isPWR = isPWR;
+    }
+}
+
+export interface GreCAPTCHA {
+    render: (container: HTMLDivElement, parameters: {
+        sitekey?: string,
+        theme?: string,
+        size?: string,
+        tabindex?: number,
+        "callback"?: () => void,
+        "expired-callback"?: () => void,
+        "error-callback"?: () => void
+    }) => void;
+    getResponse: (opt_widget_id?: HTMLDivElement) => string;
+}
+
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@ -263,3 +263,31 @@ export function insertText(textarea: HTMLTextAreaElement, text: string) {
        textarea.focus();
    }
 }
+
+export function bindManualDropdowns() {
+    const buttons = Array.from(document.getElementsByClassName("dropdown-manual-toggle") as HTMLCollectionOf<HTMLSpanElement>);
+    for (let button of buttons) {
+        const parent = button.closest(".dropdown.manual");
+        const display = parent.querySelector(".dropdown-display");
+        const mousein = () => parent.classList.add("selected");
+        const mouseout = () => parent.classList.remove("selected");
+        button.addEventListener("mouseover", mousein);
+        button.addEventListener("mouseout", mouseout);
+        display.addEventListener("mouseover",  mousein);
+        display.addEventListener("mouseout", mouseout);
+        button.onclick = () => {
+            parent.classList.add("selected");
+            document.addEventListener("click", outerClickListener);
+            button.removeEventListener("mouseout", mouseout);
+            display.removeEventListener("mouseout", mouseout);
+        };
+        const outerClickListener = (event: Event) => {
+            if (!(event.target instanceof HTMLElement && (display.contains(event.target) || button.contains(event.target)))) {
+                parent.classList.remove("selected");
+                document.removeEventListener("click", outerClickListener);
+                button.addEventListener("mouseout", mouseout);
+                display.addEventListener("mouseout", mouseout);
+            }
+        };
+    }
+}
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@ -78,7 +78,7 @@ class DOMInvite implements Invite {
    get expiresIn(): string { return this._expiresIn }
    set expiresIn(expiry: string) {
        this._expiresIn = expiry;
-        this._infoArea.querySelector("span.inv-duration").textContent = expiry;
+        this._codeArea.querySelector("span.inv-duration").textContent = expiry;
    }

    private _userExpiry: string;
@ -110,15 +110,15 @@ class DOMInvite implements Invite {
        const chip = container.querySelector("span.inv-email-chip");
        const tooltip = container.querySelector("span.content") as HTMLSpanElement;
        if (address == "") {
-            container.classList.remove("mr-4");
            icon.classList.remove("ri-mail-line");
            icon.classList.remove("ri-mail-close-line");
            chip.classList.remove("~neutral");
            chip.classList.remove("~critical");
-            chip.classList.remove("chip");
+            chip.classList.remove("button");
+            chip.parentElement.classList.remove("h-100");
        } else {
-            container.classList.add("mr-4");
-            chip.classList.add("chip");
+            chip.classList.add("button");
+            chip.parentElement.classList.add("h-100");
            if (address.includes("Failed")) {
                icon.classList.remove("ri-mail-line");
                icon.classList.add("ri-mail-close-line");
@ -266,18 +266,21 @@ class DOMInvite implements Invite {
    constructor(invite: Invite) {
        // first create the invite structure, then use our setter methods to fill in the data.
        this._container = document.createElement('div') as HTMLDivElement;
-        this._container.classList.add("inv");
+        this._container.classList.add("inv", "overflow-y-visible");

        this._header = document.createElement('div') as HTMLDivElement;
        this._container.appendChild(this._header);
-        this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex-expand", "row", "mt-2", "overflow-y");
+        this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "flex", "flex-row", "justify-between", "mt-2", "overflow-visible", "gap-2");

        this._codeArea = document.createElement('div') as HTMLDivElement;
        this._header.appendChild(this._codeArea);
-        this._codeArea.classList.add("inv-codearea");
+        this._codeArea.classList.add("flex", "flex-row", "flex-wrap", "justify-between", "w-100", "items-baseline", "gap-2", "truncate");
        this._codeArea.innerHTML = `
-        <a class="invite-link text-black dark:text-white font-mono bg-inherit mr-4" href=""></a>
-        <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
+        <div class="flex items-baseline gap-x-4 gap-y-2 truncate">
+            <a class="invite-link text-black dark:text-white font-mono bg-inherit" href=""></a>
+            <span class="button ~info @low" title="${window.lang.strings("copy")}"><i class="ri-file-copy-line"></i></span>
+        </div>
+        <span class="inv-duration"></span>
        `;
        const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement;
        copyButton.onclick = () => { 
@ -297,14 +300,13 @@ class DOMInvite implements Invite {

        this._infoArea = document.createElement('div') as HTMLDivElement;
        this._header.appendChild(this._infoArea);
-        this._infoArea.classList.add("inv-infoarea");
+        this._infoArea.classList.add("inv-infoarea", "flex", "flex-row", "items-baseline", "gap-2");
        this._infoArea.innerHTML = `
-        <div class="tooltip left">
-            <span class="inv-email-chip"><i></i></span>
-            <span class="content sm"></span>
+        <div class="tooltip below darker" tabindex="0">
+            <span class="inv-email-chip h-100"><i></i></span>
+            <span class="content sm p-1"></span>
        </div>
-        <span class="inv-duration mr-4"></span>
-        <span class="button ~critical @low inv-delete">${window.lang.strings("delete")}</span>
+        <span class="button ~critical @low inv-delete h-100">${window.lang.strings("delete")}</span>
        <label>
            <i class="icon clickable ri-arrow-down-s-line not-rotated"></i>
            <input class="inv-toggle-details unfocused" type="checkbox">
@ -315,11 +317,13 @@ class DOMInvite implements Invite {

        const toggle = (this._infoArea.querySelector("input.inv-toggle-details") as HTMLInputElement);
        toggle.onchange = () => { this.expanded = !this.expanded; };
-        this._header.onclick = (event: Event) => { 
-            if (event.target == this._header) {
+        const toggleDetails = (event: Event) => { 
+            if (event.target == this._header || event.target == this._codeArea || event.target == this._infoArea) {
                this.expanded = !this.expanded; 
            }
        };
+        this._header.onclick = toggleDetails;
+

        this._details = document.createElement('div') as HTMLDivElement;
        this._container.appendChild(this._details);
--- a/ts/modules/search.ts
+++ b/ts/modules/search.ts
@ -311,7 +311,7 @@ export class Search {
            }

            const container = document.createElement("span") as HTMLSpanElement;
-            container.classList.add("button", "button-xl", "~neutral", "@low", "mb-1", "mr-2");
+            container.classList.add("button", "button-xl", "~neutral", "@low", "mb-1", "mr-2", "align-bottom");
            container.innerHTML = `
            <div class="flex flex-col mr-2">
                <span>${query.name}</span>
--- a/ts/modules/tabs.ts
+++ b/ts/modules/tabs.ts
@ -22,13 +22,18 @@ export class Tabs implements Tabs {

    switch = (tabID: string, noRun: boolean = false, keepURL: boolean = false) => {
        this._current = tabID;
+        let baseOffset = -1;
        for (let t of this.tabs) {
+            if (baseOffset == -1) baseOffset = t.buttonEl.offsetLeft;
            if (t.tabID == tabID) {
                t.buttonEl.classList.add("active", "~urge");
                if (t.preFunc && !noRun) { t.preFunc(); }
                t.tabEl.classList.remove("unfocused");
                if (t.postFunc && !noRun) { t.postFunc(); }
                document.dispatchEvent(new CustomEvent("tab-change", { detail: keepURL ? "" : tabID }));
+                // t.buttonEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+
+                t.buttonEl.parentElement.scrollTo(t.buttonEl.offsetLeft-baseOffset, 0);
            } else {
                t.buttonEl.classList.remove("active");
                t.buttonEl.classList.remove("~urge");
--- a/ts/pwr.ts
+++ b/ts/pwr.ts
@ -2,6 +2,7 @@ import { Modal } from "./modules/modal.js";
 import { Validator, ValidatorConf } from "./modules/validator.js";
 import { _post, addLoader, removeLoader } from "./modules/common.js";
 import { loadLangSelector } from "./modules/lang.js";
+import { Captcha, GreCAPTCHA } from "./modules/captcha.js";

 interface formWindow extends Window {
    invalidPassword: string;
@ -28,6 +29,10 @@ interface formWindow extends Window {
    userExpiryHours: number;
    userExpiryMinutes: number;
    userExpiryMessage: string;
+    captcha: boolean;
+    reCAPTCHA: boolean;
+    reCAPTCHASiteKey: string;
+    pwrPIN: string;
 }

 loadLangSelector("pwr");
@ -42,11 +47,26 @@ const rePasswordField = document.getElementById("create-reenter-password") as HT

 window.successModal = new Modal(document.getElementById("modal-success"), true);

+function _baseValidator(oncomplete: (valid: boolean) => void, captchaValid: boolean): void {
+    if (window.captcha && !window.reCAPTCHA && !captchaValid) {
+        oncomplete(false);
+        return;
+    }
+    oncomplete(true);
+}
+
+let captcha = new Captcha(window.pwrPIN, window.captcha, window.reCAPTCHA, true);
+
+declare var grecaptcha: GreCAPTCHA;
+
+let baseValidator = captcha.baseValidatorWrapper(_baseValidator);
+
 let validatorConf: ValidatorConf = {
    passwordField: passwordField,
    rePasswordField: rePasswordField,
    submitInput: submitInput,
-    submitButton: submitSpan
+    submitButton: submitSpan,
+    validatorFunc: baseValidator
 };

 var validator = new Validator(validatorConf);
@ -55,6 +75,13 @@ var requirements = validator.requirements;
 interface sendDTO {
    pin: string;
    password: string;
+    captcha_text?: string;
+}
+
+if (window.captcha && !window.reCAPTCHA) {
+    captcha.generate();
+    (document.getElementById("captcha-regen") as HTMLSpanElement).onclick = captcha.generate;
+    captcha.input.onkeyup = validator.validate;
 }

 form.onsubmit = (event: Event) => {
@ -65,12 +92,31 @@ form.onsubmit = (event: Event) => {
        pin: params.get("pin"),
        password: passwordField.value
    };
+    if (window.captcha) {
+        if (window.reCAPTCHA) {
+            send.captcha_text = grecaptcha.getResponse();
+        } else {
+            send.captcha_text = captcha.input.value;
+        }
+    }
    _post("/reset", send, (req: XMLHttpRequest) => {
        if (req.readyState == 4) {
            removeLoader(submitSpan);
            if (req.status == 400) {
-                for (let type in req.response) {
-                    if (requirements[type]) { requirements[type].valid = req.response[type] as boolean; }
+                if (req.response["error"] as string) {
+                    const old = submitSpan.textContent;
+                    submitSpan.textContent = window.messages[req.response["error"]];
+                    submitSpan.classList.add("~critical");
+                    submitSpan.classList.remove("~urge");
+                    setTimeout(() => {
+                        submitSpan.classList.add("~urge");
+                        submitSpan.classList.remove("~critical");
+                        submitSpan.textContent = old;
+                    }, 2000);
+                } else {
+                    for (let type in req.response) {
+                        if (requirements[type]) { requirements[type].valid = req.response[type] as boolean; }
+                    }
                }
                return;
            } else if (req.status != 200) {
--- a/views.go
+++ b/views.go
@ -296,6 +296,10 @@ func (app *appContext) ResetPassword(gc *gin.Context) {
 		data["telegramEnabled"] = false
 		data["discordEnabled"] = false
 		data["matrixEnabled"] = false
+		data["captcha"] = app.config.Section("captcha").Key("enabled").MustBool(false)
+		data["reCAPTCHA"] = app.config.Section("captcha").Key("recaptcha").MustBool(false)
+		data["reCAPTCHASiteKey"] = app.config.Section("captcha").Key("recaptcha_site_key").MustString("")
+		data["pwrPIN"] = pin
 		gcHTML(gc, http.StatusOK, "form-loader.html", data)
 		return
 	}
@ -393,20 +397,28 @@ func (app *appContext) ResetPassword(gc *gin.Context) {
 // @Router /captcha/img/{code}/{captchaID} [get]
 func (app *appContext) GetCaptcha(gc *gin.Context) {
 	code := gc.Param("invCode")
+	isPWR := gc.Query("pwr") == "true"
 	captchaID := gc.Param("captchaID")
-	inv, ok := app.storage.GetInvitesKey(code)
-	if !ok {
-		gcHTML(gc, 404, "invalidCode.html", gin.H{
-			"urlBase":        app.getURLBase(gc),
-			"cssClass":       app.cssClass,
-			"cssVersion":     cssVersion,
-			"contactMessage": app.config.Section("ui").Key("contact_message").String(),
-		})
-	}
+	var inv Invite
 	var capt Captcha
-	ok = true
-	if inv.Captchas != nil {
-		capt, ok = inv.Captchas[captchaID]
+	ok := true
+	if !isPWR {
+		inv, ok = app.storage.GetInvitesKey(code)
+		if !ok {
+			gcHTML(gc, 404, "invalidCode.html", gin.H{
+				"urlBase":        app.getURLBase(gc),
+				"cssClass":       app.cssClass,
+				"cssVersion":     cssVersion,
+				"contactMessage": app.config.Section("ui").Key("contact_message").String(),
+			})
+		}
+		if inv.Captchas != nil {
+			capt, ok = inv.Captchas[captchaID]
+		} else {
+			ok = false
+		}
+	} else {
+		capt, ok = app.pwrCaptchas[code]
 	}
 	if !ok {
 		respondBool(400, false, gc)
@ -425,7 +437,13 @@ func (app *appContext) GetCaptcha(gc *gin.Context) {
 // @tags Users
 func (app *appContext) GenCaptcha(gc *gin.Context) {
 	code := gc.Param("invCode")
-	inv, ok := app.storage.GetInvitesKey(code)
+	isPWR := gc.Query("pwr") == "true"
+	var inv Invite
+	ok := true
+	if !isPWR {
+		inv, ok = app.storage.GetInvitesKey(code)
+	}
+
 	if !ok {
 		gcHTML(gc, 404, "invalidCode.html", gin.H{
 			"urlBase":        app.getURLBase(gc),
@ -440,7 +458,7 @@ func (app *appContext) GenCaptcha(gc *gin.Context) {
 		respondBool(500, false, gc)
 		return
 	}
-	if inv.Captchas == nil {
+	if !isPWR && inv.Captchas == nil {
 		inv.Captchas = map[string]Captcha{}
 	}
 	captchaID := genAuthToken()
@ -450,26 +468,43 @@ func (app *appContext) GenCaptcha(gc *gin.Context) {
 		respondBool(500, false, gc)
 		return
 	}
-	inv.Captchas[captchaID] = Captcha{
-		Answer:    capt.Text,
-		Image:     buf.Bytes(),
-		Generated: time.Now(),
+	if isPWR {
+		if app.pwrCaptchas == nil {
+			app.pwrCaptchas = map[string]Captcha{}
+		}
+		app.pwrCaptchas[code] = Captcha{
+			Answer:    capt.Text,
+			Image:     buf.Bytes(),
+			Generated: time.Now(),
+		}
+	} else {
+		inv.Captchas[captchaID] = Captcha{
+			Answer:    capt.Text,
+			Image:     buf.Bytes(),
+			Generated: time.Now(),
+		}
+		app.storage.SetInvitesKey(code, inv)
 	}
-	app.storage.SetInvitesKey(code, inv)
 	gc.JSON(200, genCaptchaDTO{captchaID})
 	return
 }

-func (app *appContext) verifyCaptcha(code, id, text string) bool {
+func (app *appContext) verifyCaptcha(code, id, text string, isPWR bool) bool {
 	reCAPTCHA := app.config.Section("captcha").Key("recaptcha").MustBool(false)
 	if !reCAPTCHA {
 		// internal CAPTCHA
-		inv, ok := app.storage.GetInvitesKey(code)
-		if !ok || inv.Captchas == nil {
-			app.debug.Printf("Couldn't find invite \"%s\"", code)
-			return false
+		var c Captcha
+		ok := true
+		if !isPWR {
+			inv, ok := app.storage.GetInvitesKey(code)
+			if !ok || (!isPWR && inv.Captchas == nil) {
+				app.debug.Printf("Couldn't find invite \"%s\"", code)
+				return false
+			}
+			c, ok = inv.Captchas[id]
+		} else {
+			c, ok = app.pwrCaptchas[code]
 		}
-		c, ok := inv.Captchas[id]
 		if !ok {
 			app.debug.Printf("Couldn't find Captcha \"%s\"", id)
 			return false
@ -529,21 +564,30 @@ func (app *appContext) verifyCaptcha(code, id, text string) bool {
 // @Router /captcha/verify/{code}/{captchaID}/{text} [get]
 func (app *appContext) VerifyCaptcha(gc *gin.Context) {
 	code := gc.Param("invCode")
+	isPWR := gc.Query("pwr") == "true"
 	captchaID := gc.Param("captchaID")
 	text := gc.Param("text")
-	inv, ok := app.storage.GetInvitesKey(code)
-	if !ok {
-		gcHTML(gc, 404, "invalidCode.html", gin.H{
-			"urlBase":        app.getURLBase(gc),
-			"cssClass":       app.cssClass,
-			"cssVersion":     cssVersion,
-			"contactMessage": app.config.Section("ui").Key("contact_message").String(),
-		})
-		return
-	}
+	var inv Invite
 	var capt Captcha
-	if inv.Captchas != nil {
-		capt, ok = inv.Captchas[captchaID]
+	var ok bool
+	if !isPWR {
+		inv, ok = app.storage.GetInvitesKey(code)
+		if !ok {
+			gcHTML(gc, 404, "invalidCode.html", gin.H{
+				"urlBase":        app.getURLBase(gc),
+				"cssClass":       app.cssClass,
+				"cssVersion":     cssVersion,
+				"contactMessage": app.config.Section("ui").Key("contact_message").String(),
+			})
+			return
+		}
+		if inv.Captchas != nil {
+			capt, ok = inv.Captchas[captchaID]
+		} else {
+			ok = false
+		}
+	} else {
+		capt, ok = app.pwrCaptchas[code]
 	}
 	if !ok {
 		respondBool(400, false, gc)
Author	SHA1	Message	Date
Harvey Tindall	49d8c6f8e4	pwr: add captcha daemon	2023-12-23 20:18:16 +00:00
Harvey Tindall	278588ca39	pwr: functioning captcha/recaptcha	2023-12-23 20:10:48 +00:00
Harvey Tindall	ab05c07469	form: modularize captcha somewhat	2023-12-23 18:20:09 +00:00
Harvey Tindall	6e205760c3	ui: more invites page improvements/cleanup, fix tooltips on mobile	2023-12-23 17:45:18 +00:00
Harvey Tindall	82032b98a8	invites: improve invite wrapping on mobile	2023-12-23 15:36:28 +00:00
Harvey Tindall	e8666d5bf2	ui: general adjustments	2023-12-22 21:40:56 +00:00
Harvey Tindall	d1affe271c	ui: wrap settings header	2023-12-22 18:36:21 +00:00
Harvey Tindall	ea109c7b63	ui: wrap accounts/activity headers	2023-12-22 18:06:12 +00:00
Harvey Tindall	cb5a8c1c23	accounts: position filter dropdown better for mobile	2023-12-22 17:46:57 +00:00