Redesign return from settings page

src/site/api/routes.js

@@ -4,6 +4,7 @@ const {fetchUser, getOrFetchShortcode, userRequestCache, history, assistantSwitc
 const {render, redirect, getStaticURL} = require("pinski/plugins")
 const {pugCache} = require("../passthrough")
 const {getSettings} = require("./utils/getsettings")
+const {getSettingsReferrer} = require("./utils/settingsreferrer")
 
 /** @param {import("../../lib/structures/TimelineEntry")} post */
 function getPageTitle(post) {
@@ -16,6 +17,7 @@ module.exports = [
 			const settings = getSettings(req)
 			return render(200, "pug/home.pug", {
 				settings,
+				settingsReferrer: getSettingsReferrer("/"),
 				rssEnabled: constants.feeds.enabled,
 				allUnblocked: history.testNoneBlocked() || assistantSwitcher.displaySomeUnblocked(),
 				torAvailable: switcher.canUseTor(),
@@ -76,7 +78,14 @@ module.exports = [
 
 				const settings = getSettings(req)
 
-				return render(200, "pug/user.pug", {url, user, followerCountsAvailable, constants, settings})
+				return render(200, "pug/user.pug", {
+					url,
+					user,
+					followerCountsAvailable,
+					constants,
+					settings,
+					settingsReferrer: getSettingsReferrer(req.url)
+				})
 			}).catch(error => {
 				if (error === constants.symbols.NOT_FOUND || error === constants.symbols.ENDPOINT_OVERRIDDEN) {
 					return render(404, "pug/friendlyerror.pug", {

src/site/api/settings.js

@@ -1,6 +1,7 @@
 const constants = require("../../lib/constants")
 const {render, redirect} = require("pinski/plugins")
 const {getSettings, getToken, generateCSRF, checkCSRF} = require("./utils/getsettings")
+const {getSettingsReferrer} = require("./utils/settingsreferrer")
 const crypto = require("crypto")
 const db = require("../../lib/db")
 
@@ -12,11 +13,21 @@ module.exports = [
 			const csrf = generateCSRF()
 			const message = url.searchParams.get("message")
 			const status = url.searchParams.get("status")
-			return render(200, "pug/settings.pug", {constants, settings, csrf, status, message})
+			return render(200, "pug/settings.pug", {
+				stayAction: getSettingsReferrer(url.searchParams.get("referrer"), "/settings/stay"),
+				returnAction: getSettingsReferrer(url.searchParams.get("referrer"), "/settings/return"),
+				returnURL: url.searchParams.get("referrer") || "/",
+				constants,
+				settings,
+				csrf,
+				status,
+				message
+			})
 		}
 	},
 	{
-		route: "/settings", methods: ["POST"], upload: true, code: async ({req, body}) => {
+		route: "/settings/(stay|return)", methods: ["POST"], upload: true, code: async ({req, body, fill, url}) => {
+			const action = fill[0]
 			const oldToken = getToken(req)
 			const params = new URLSearchParams(body.toString())
 			if (!checkCSRF(params.get("csrf"))) {
@@ -53,10 +64,22 @@ module.exports = [
 			db.prepare(`INSERT INTO UserSettings (token, created, ${fields.join(", ")}) VALUES (@token, @created, ${fields.map(f => "@"+f).join(", ")})`).run(prepared)
 			db.prepare("DELETE FROM UserSettings WHERE token = ?").run(oldToken)
 			const expires = new Date(Date.now() + 4000*24*60*60*1000).toUTCString()
+			let location
+			if (action === "return" && url.searchParams.has("referrer")) {
+				location = url.searchParams.get("referrer")
+			} else { // stay
+				const newParams = new URLSearchParams()
+				newParams.append("status", "success")
+				newParams.append("message", "Saved.")
+				if (url.searchParams.has("referrer")) {
+					newParams.append("referrer", url.searchParams.get("referrer"))
+				}
+				location = "/settings?" + newParams.toString()
+			}
 			return {
 				statusCode: 303,
 				headers: {
-					"Location": "/settings?status=success&message=Saved.",
+					"Location": location,
 					"Set-Cookie": `settings=${prepared.token}; Path=/; Expires=${expires}; SameSite=Lax`
 				},
 				contentType: "text/html; charset=UTF-8",

src/site/api/utils/settingsreferrer.js

@@ -0,0 +1,8 @@
+function getSettingsReferrer(current, settingsURL = "/settings") {
+	if (!current) return settingsURL
+	const params = new URLSearchParams()
+	params.append("referrer", current)
+	return settingsURL + "?" + params.toString()
+}
+
+module.exports.getSettingsReferrer = getSettingsReferrer

src/site/pug/home.pug

@@ -36,7 +36,7 @@ html
 
 				h2 About this instance
 				ul
-					li: a(href="/settings") Settings
+					li: a(href=settingsReferrer) Settings
 					if hasPrivacyPolicy
 						li: a(href="/privacy") Privacy policy
 					else

src/site/pug/settings.pug

@@ -34,9 +34,12 @@ html
 		if status && message
 			.status-notice(class=status)= message
 			script.
-				history.replaceState(null, "", "/settings")
+				const params = new URLSearchParams(window.location.search)
+				params.delete("status")
+				params.delete("message")
+				history.replaceState(null, "", "?" + params.toString())
 		main.settings
-			form(action="/settings" method="post" enctype="application/x-www-form-urlencoded")
+			form(action=returnAction method="post" enctype="application/x-www-form-urlencoded")
 				input(type="hidden" name="csrf" value=csrf)
 
 				h1 Settings
@@ -123,5 +126,6 @@ html
 									span.fake-checkbox
 
 				.action-container
-					a(href="/").home-link ← Home
-					button(type="submit").save-button Save settings
+					span.home-link-container: a(href=returnURL).home-link ← Return
+					button(type="submit" formaction=stayAction).save-button Save
+					button(type="submit").save-button Save & return

src/site/pug/user.pug

@@ -35,7 +35,7 @@ html
 			//- Alt text guidelines from https://axesslab.com/alt-texts/
 			a(href="/").nav-icon-link
 				img(src="/static/img/logo-circle-min.svg" alt="Bibliogram").logo
-			a(href="/settings").nav-icon-link
+			a(href=settingsReferrer).nav-icon-link
 				img(src="/static/img/settings.svg" alt="Settings").settings
 		.main-divider
 			header.profile-overview
@@ -74,7 +74,7 @@ html
 					section.bibliogram-meta
 						.links
 							a(href="/") Home
-							a(href="/settings") Settings
+							a(href=settingsReferrer) Settings
 
 			- const hasPosts = !user.data.is_private && user.timeline.pages.length && user.timeline.pages[0].length
 			main(class=hasPosts ? "" : "no-posts")#timeline.timeline

src/site/sass/includes/_main.sass

@@ -691,14 +691,22 @@ body
 
 	.action-container
 		margin-top: 20px
-		display: flex
-		justify-content: space-between
+		display: grid
+		grid-template-columns: 1fr auto auto
+		grid-gap: 10px
 		align-items: center
 
-		.save-button
-			padding: 12px
-			width: 180px
+		@media screen and (max-width: 400px)
+			display: flex
+			flex-direction: column
+			align-items: stretch
+			text-align: center
 
+			.home-link-container
+				order: 1
+
+		.save-button
+			padding: 12px 32px
 			&:not(:active)
 				@include forms.curve-out-major