form: add more customizable success card

Success card could be customized simply with the "Success message" setting, but a new "Post sign-up help card" in the Message editor supports full markdown.
2024-12-22 09:00:10 +00:00 · 2024-07-28 19:32:48 +01:00 · 2024-07-28 19:32:48 +01:00 · dabef831d7
commit dabef831d7
parent e44d11c58c
11 changed files with 108 additions and 27 deletions
--- a/api-messages.go
+++ b/api-messages.go
@ -39,6 +39,7 @@ func (app *appContext) GetCustomContent(gc *gin.Context) {
 		"UserExpired":        {Name: app.storage.lang.Email[lang].UserExpired["name"], Enabled: app.storage.MustGetCustomContentKey("UserExpired").Enabled},
 		"UserLogin":          {Name: app.storage.lang.Admin[adminLang].Strings["userPageLogin"], Enabled: app.storage.MustGetCustomContentKey("UserLogin").Enabled},
 		"UserPage":           {Name: app.storage.lang.Admin[adminLang].Strings["userPagePage"], Enabled: app.storage.MustGetCustomContentKey("UserPage").Enabled},
+		"PostSignupCard":     {Name: app.storage.lang.Admin[adminLang].Strings["postSignupCard"], Enabled: app.storage.MustGetCustomContentKey("PostSignupCard").Enabled, Description: app.storage.lang.Admin[adminLang].Strings["postSignupCardDescription"]},
 	}

 	filter := gc.Query("filter")
@ -145,7 +146,11 @@ func (app *appContext) GetCustomMessageTemplate(gc *gin.Context) {
 	} else if id == "UserLogin" {
 		variables = []string{}
 		customMessage.Variables = variables
+	} else if id == "PostSignupCard" {
+		variables = []string{"{username}", "{myAccountURL}"}
+		customMessage.Variables = variables
 	}
+
 	content = customMessage.Content
 	noContent := content == ""
 	if !noContent {
@ -210,14 +215,14 @@ func (app *appContext) GetCustomMessageTemplate(gc *gin.Context) {
 			msg, err = app.email.constructUserExpired(app, true)
 		}
 		values = app.email.userExpiredValues(app, false)
-	case "UserLogin", "UserPage":
+	case "UserLogin", "UserPage", "PostSignupCard":
 		values = map[string]interface{}{}
 	}
 	if err != nil {
 		respondBool(500, false, gc)
 		return
 	}
-	if noContent && id != "Announcement" && id != "UserPage" && id != "UserLogin" {
+	if noContent && id != "Announcement" && id != "UserPage" && id != "UserLogin" && id != "PostSignupCard" {
 		content = msg.Text
 		variables = make([]string, strings.Count(content, "{"))
 		i := 0
@ -243,17 +248,32 @@ func (app *appContext) GetCustomMessageTemplate(gc *gin.Context) {
 	}
 	app.storage.SetCustomContentKey(id, customMessage)
 	var mail *Message
-	if id != "UserLogin" && id != "UserPage" {
+	if id != "UserLogin" && id != "UserPage" && id != "PostSignupCard" {
 		mail, err = app.email.constructTemplate("", "<div class=\"preview-content\"></div>", app)
 		if err != nil {
 			respondBool(500, false, gc)
 			return
 		}
+	} else if id == "PostSignupCard" {
+		// Jankiness follows.
+		// Source content from "Success Message" setting.
+		if noContent {
+			content = "# " + app.storage.lang.User[app.storage.lang.chosenUserLang].Strings.get("successHeader") + "\n" + app.config.Section("ui").Key("success_message").String()
+			if app.config.Section("user_page").Key("enabled").MustBool(false) {
+				content += "\n\n<br>\n" + app.storage.lang.User[app.storage.lang.chosenUserLang].Strings.template("userPageSuccessMessage", tmpl{
+					"myAccount": "[" + app.storage.lang.User[app.storage.lang.chosenUserLang].Strings.get("myAccount") + "]({myAccountURL})",
+				})
+			}
+		}
+		mail = &Message{
+			HTML: "<div class=\"card ~neutral dark:~d_neutral @low\"><div class=\"preview-content\"></div><br><button class=\"button ~urge dark:~d_urge @low full-width center supra submit\">" + app.storage.lang.User[app.storage.lang.chosenUserLang].Strings.get("continue") + "</a></div>",
+		}
+		mail.Markdown = mail.HTML
 	} else {
 		mail = &Message{
 			HTML: "<div class=\"card ~neutral dark:~d_neutral @low preview-content\"></div>",
-			Markdown: "<div class=\"card ~neutral dark:~d_neutral @low preview-content\"></div>",
 		}
+		mail.Markdown = mail.HTML
 	}
 	gc.JSON(200, customEmailDTO{Content: content, Variables: variables, Conditionals: conditionals, Values: values, HTML: mail.HTML, Plaintext: mail.Text})
 }
--- a/config/config-base.json
+++ b/config/config-base.json
@ -247,7 +247,7 @@
                    "requires_restart": false,
                    "type": "text",
                    "value": "Your account has been created. Click below to continue to Jellyfin.",
-                    "description": "Displayed when a user creates an account"
+                    "description": "Displayed when a user creates an account. Use the \"post-signup card\" in the Message editor for more control."
                },
                "url_base": {
                    "name": "Reverse Proxy subfolder",
@ -273,7 +273,7 @@
                    "type": "bool",
                    "value": false,
                    "advanced": true,
-                    "description": "Navigate directly to the above URL instead of needing the user to click \"Continue\"."
+                    "description": "Navigate directly to the above URL instead of needing the user to click \"Continue\". Overrides the post-signup card."
                },
                "login_appearance": {
                    "name": "Login screen appearance",
@ -702,7 +702,7 @@
                    "description": "Allow users to start a Password Reset by inputting their Discord/Telegram/Matrix username/id."
                },
                "pwr_note": {
-                    "name": "PWR Methods",
+                    "name": "PWR Methods:",
                    "type": "note",
                    "depends_true": "enabled",
                    "value": "",
--- a/html/admin.html
+++ b/html/admin.html
@ -297,6 +297,7 @@
                <span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
                <div class="row">
                    <div class="col card ~neutral @low">
+                        <aside class="aside sm ~urge dark:~d_info mb-2 @low" id="aside-editor"></aside> 
                        <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
                        <div id="editor-variables" class="mt-4"></div>
                        <span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
--- a/html/form-base.html
+++ b/html/form-base.html
@ -31,6 +31,11 @@
    window.reCAPTCHASiteKey = "{{ .reCAPTCHASiteKey }}";
    window.userPageEnabled = {{ .userPageEnabled }};
    window.userPageAddress = "{{ .userPageAddress }}";
+    {{ if index . "customSuccessCard" }}
+        window.customSuccessCard = {{ .customSuccessCard }};
+    {{ else }}
+        window.customSuccessCard = false;
+    {{ end }}
 </script>
 {{ if .passwordReset }}
 <script src="js/pwr.js" type="module"></script>
--- a/html/form.html
+++ b/html/form.html
@ -14,12 +14,19 @@
    </head>
    <body class="max-w-full overflow-x-hidden section">
        <div id="modal-success" class="modal">
+            {{ if .customSuccessCard }}
+                <div class="card @low dark:~d_neutral content break-words relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+                    {{ .customSuccessCardContent }}
+                    <a class="button ~urge @low full-width center supra submit my-2" href="{{ .jfLink }}" id="create-success-button">{{ .strings.continue }}</a>
+                </div>
+            {{ else }}
                <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
                    <span class="heading mb-4">{{ if .passwordReset }}{{ .strings.passwordReset }}{{ else }}{{ .strings.successHeader }}{{ end }}</span>
                    <p class="content mb-4">{{ if .passwordReset }}{{ .strings.youCanLoginPassword }}{{ else }}{{ .successMessage }}{{ end }}</p>
                    {{ if .userPageEnabled }}<p class="content mb-4" id="modal-success-user-page-area" my-account-term="{{ .strings.myAccount }}">{{ .strings.userPageSuccessMessage }}</p>{{ end }}
                    <a class="button ~urge @low full-width center supra submit" href="{{ .jfLink }}" id="create-success-button">{{ .strings.continue }}</a>
                </div>
+            {{ end }}
        </div>
        <div id="modal-confirmation" class="modal">
            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
--- a/lang/admin/en-us.json
+++ b/lang/admin/en-us.json
@ -137,6 +137,8 @@
        "jellyfinID": "Jellyfin ID",
        "userPageLogin": "User Page: Login",
        "userPagePage": "User Page: Page",
+        "postSignupCard": "Post-signup help card",
+        "postSignupCardDescription": "Card shown to user after signing up. Overrides \"Success Message\". Overriden by \"Auto redirect on success\" setting.",
        "buildTime": "Build Time",  
        "builtBy": "Built By",
        "loginNotAdmin": "Not an Admin?",
--- a/migrations.go
+++ b/migrations.go
@ -339,7 +339,7 @@ func migrateToBadger(app *appContext) {
 	app.info.Println("All data migrated to database. JSON files in the config folder can be deleted if you are sure all data is correct in the app. Create an issue if you have problems.")
 }

-// Simply creates an emply CC template if not imn the DB already.
+// Simply creates an emply CC template if not in the DB already.
 // Add new CC types here!
 func intialiseCustomContent(app *appContext) {
 	emptyCC := CustomContent{
@ -384,6 +384,10 @@ func intialiseCustomContent(app *appContext) {
 	if _, ok := app.storage.GetCustomContentKey("UserExpiryAdjusted"); !ok {
 		app.storage.SetCustomContentKey("UserExpiryAdjusted", emptyCC)
 	}
+	if _, ok := app.storage.GetCustomContentKey("PostSignupCard"); !ok {
+		app.storage.SetCustomContentKey("PostSignupCard", emptyCC)
+
+	}
 }

 // Migrate between hyphenated & non-hyphenated user IDs. Doesn't seem to happen anymore, so disabled.
--- a/models.go
+++ b/models.go
@ -241,6 +241,7 @@ type emailListDTO map[string]emailListEl
 type emailListEl struct {
 	Name        string `json:"name"`
 	Enabled     bool   `json:"enabled"`
+	Description string `json:"description"`
 }

 type emailSetDTO struct {
--- a/ts/form.ts
+++ b/ts/form.ts
@ -38,6 +38,7 @@ interface formWindow extends Window {
    reCAPTCHASiteKey: string;
    userPageEnabled: boolean;
    userPageAddress: string;
+    customSuccessCard: boolean;
 }

 loadLangSelector("form");
@ -296,7 +297,10 @@ const create = (event: SubmitEvent) => {
                const url = ((document.getElementById("modal-success") as HTMLDivElement).querySelector("a.submit") as HTMLAnchorElement).href;
                window.location.href = url;
            } else {
-                if (window.userPageEnabled) {
+                if (window.customSuccessCard) {
+                    const content = window.successModal.asElement().querySelector(".card");
+                    content.innerHTML = content.innerHTML.replace(new RegExp("{username}", "g"), send.username)
+                } else if (window.userPageEnabled) {
                    const userPageNoticeArea = document.getElementById("modal-success-user-page-area");
                    const link = `<a href="${window.userPageAddress}" target="_blank">${userPageNoticeArea.getAttribute("my-account-term")}</a>`;
                    userPageNoticeArea.innerHTML = userPageNoticeArea.textContent.replace("{myAccount}", link);
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@ -1083,6 +1083,7 @@ export interface templateEmail {
 interface emailListEl {
    name: string;
    enabled: boolean;
+    description: string;
 }

 class MessageEditor {
@ -1092,6 +1093,7 @@ class MessageEditor {
    private _templ: templateEmail;
    private _form = document.getElementById("form-editor") as HTMLFormElement;
    private _header = document.getElementById("header-editor") as HTMLSpanElement;
+    private _aside = document.getElementById("aside-editor") as HTMLElement;
    private _variables = document.getElementById("editor-variables") as HTMLDivElement;
    private _variablesLabel = document.getElementById("label-editor-variables") as HTMLElement;
    private _conditionals = document.getElementById("editor-conditionals") as HTMLDivElement;
@ -1113,6 +1115,12 @@ class MessageEditor {
                if (this._names[id] !== undefined) {
                    this._header.textContent = this._names[id].name;
                } 
+                this._aside.classList.add("unfocused");
+                if (this._names[id].description != "") {
+                    this._aside.textContent = this._names[id].description;
+                    this._aside.classList.remove("unfocused");
+                }
+
                this._templ = req.response as templateEmail;
                this._textArea.value = this._templ.content;
                if (this._templ.html == "") {
@ -1212,11 +1220,22 @@ class MessageEditor {
                    if (this._names[id].enabled) {
                        resetButton = `<i class="icon ri-restart-line" title="${window.lang.get("strings", "reset")}"></i>`;
                    }
-                    tr.innerHTML = `
-                    <td>${this._names[id].name}</td>
+                    let innerHTML = `
+                    <td>
+                        ${this._names[id].name}
+                    `;
+                    if (this._names[id].description != "") innerHTML += `
+                        <div class="tooltip right">
+                            <i class="icon ri-information-line"></i>
+                            <span class="content sm">${this._names[id].description}</span>
+                        </div>
+                    `;
+                    innerHTML += `
+                    </td>
                    <td class="table-inline justify-center"><span class="customize-reset">${resetButton}</span></td>
                    <td><span class="button ~info @low" title="${window.lang.get("strings", "edit")}"><i class="icon ri-edit-line"></i></span></td>
                    `;
+                    tr.innerHTML = innerHTML;
                    (tr.querySelector("span.button") as HTMLSpanElement).onclick = () => {
                        window.modals.customizeEmails.close()
                        this.loadEditor(id);
--- a/views.go
+++ b/views.go
@ -278,6 +278,7 @@ func (app *appContext) ResetPassword(gc *gin.Context) {
 		"strings":           app.storage.lang.PasswordReset[lang].Strings,
 		"success":           false,
 		"ombiEnabled":       app.config.Section("ombi").Key("enabled").MustBool(false),
+		"customSuccessCard": false,
 	}
 	pwr, isInternal := app.internalPWRs[pin]
 	// if isInternal && setPassword {
@ -734,6 +735,7 @@ func (app *appContext) InviteProxy(gc *gin.Context) {
 		"userExpiryMessage":  app.storage.lang.User[lang].Strings.get("yourAccountIsValidUntil"),
 		"langName":           lang,
 		"passwordReset":      false,
+		"customSuccessCard":  false,
 		"telegramEnabled":    telegram,
 		"discordEnabled":     discord,
 		"matrixEnabled":      matrix,
@ -766,6 +768,22 @@ func (app *appContext) InviteProxy(gc *gin.Context) {
 		data["discordServerName"] = app.discord.serverName
 		data["discordInviteLink"] = app.discord.inviteChannelName != ""
 	}
+	if msg, ok := app.storage.GetCustomContentKey("PostSignupCard"); ok && msg.Enabled {
+		data["customSuccessCard"] = true
+		// We don't template here, since the username is only known after login.
+		data["customSuccessCardContent"] = template.HTML(markdown.ToHTML(
+			[]byte(templateEmail(
+				msg.Content,
+				msg.Variables,
+				msg.Conditionals,
+				map[string]interface{}{
+					"username":     "{username}",
+					"myAccountURL": userPageAddress,
+				},
+			),
+			), nil, markdownRenderer,
+		))
+	}

 	// if discordEnabled {
 	// 	pin := ""