feat: customize site banners and login notices

scripts/review_account_ui.cjs

@@ -4,7 +4,7 @@ const assert = require('node:assert/strict')
 const { chromium } = require(process.env.REVIEW_PLAYWRIGHT || 'playwright')
 const base = process.env.REVIEW_BASE || 'http://127.0.0.1:3101'
 const output = process.env.REVIEW_DIR
-const site = { login: { showJellyfinLogin: true, showLocalLogin: true, showForgotPassword: true, showSignupLink: true }, navigation: { showRequests: true }, banner: { enabled: true, message: 'Beta environment', tone: 'warning' } }
+const site = { login: { message: '', showJellyfinLogin: true, showLocalLogin: true, showForgotPassword: true, showSignupLink: true }, navigation: { showRequests: true }, banner: { enabled: true, message: 'Beta environment', tone: 'warning', backgroundColor: null, borderColor: null } }
 
 ;(async () => {
   const browser = await chromium.launch({ headless: true })
@@ -17,6 +17,18 @@ const site = { login: { showJellyfinLogin: true, showLocalLogin: true, showForgo
   let provider = 'jellyfin'
   let supported = true
   let savedEmail = 'member@example.com'
+  let adminSettings = [
+    ['site_banner_enabled', 'true'],
+    ['site_banner_tone', 'warning'],
+    ['site_banner_background_color', '#24172f'],
+    ['site_banner_border_color', '#d946ef'],
+    ['site_banner_message', 'Maintenance tonight'],
+    ['site_login_message', 'Sign-in help is available from the media team.'],
+    ['site_login_show_jellyfin_login', 'true'],
+    ['site_login_show_local_login', 'true'],
+    ['site_login_show_forgot_password', 'true'],
+    ['site_login_show_signup_link', 'true'],
+  ].map(([key, value]) => ({ key, value, isSet: true, source: 'db', sensitive: false }))
   const calls = []
   const errors = []
   await context.route('**/api/**', async (route) => {
@@ -25,7 +37,18 @@ const site = { login: { showJellyfinLogin: true, showLocalLogin: true, showForgo
     const method = request.method()
     const reply = (json, status = 200) => route.fulfill({ status, json })
     if (path === '/api/site/public' || path === '/api/site/info') return reply(options)
-    if (path === '/api/auth/me') return reply({ username: 'Grizzlyflix member', role: 'user' })
+    if (path === '/api/auth/me') return reply({ username: 'Grizzlyflix member', role: 'admin' })
+    if (path === '/api/admin/settings') {
+      if (method === 'PUT') {
+        const body = request.postDataJSON()
+        calls.push({ path, method, body: request.postData() })
+        adminSettings = adminSettings.map((setting) => Object.hasOwn(body, setting.key)
+          ? { ...setting, value: body[setting.key], isSet: Boolean(body[setting.key]) }
+          : setting)
+        return reply({ status: 'ok', updated: Object.keys(body).length })
+      }
+      return reply({ settings: adminSettings })
+    }
     if (path === '/api/auth/profile') return reply(profileStatus === 200 ? {
       user: { username: 'Grizzlyflix member', role: 'user', email: savedEmail, auth_provider: provider, password_provider: provider, password_change_supported: supported },
       stats: { total: 12, ready: 9, in_progress: 3 },
@@ -86,20 +109,57 @@ const site = { login: { showJellyfinLogin: true, showLocalLogin: true, showForgo
   options.login.showLocalLogin = false
   options.login.showForgotPassword = false
   options.login.showSignupLink = false
+  options.login.message = 'Sign-in help is available from the media team.'
   options.banner.message = 'Maintenance tonight'
+  options.banner.backgroundColor = '#24172f'
+  options.banner.borderColor = '#d946ef'
   await openLogin()
   assert.equal(await page.getByRole('button', { name: 'Sign in', exact: true }).count(), 0)
   assert.equal(await page.getByRole('link', { name: 'Forgot password?' }).count(), 0)
   assert.equal(await page.getByRole('link', { name: /Create an account/ }).count(), 0)
   assert(await page.getByText('Maintenance tonight').isVisible())
+  assert(await page.getByText('Sign-in help is available from the media team.').isVisible())
+  const customBannerStyle = await page.getByText('Maintenance tonight').evaluate((element) => ({
+    background: getComputedStyle(element).backgroundColor,
+    border: getComputedStyle(element).borderTopColor,
+  }))
+  assert.deepEqual(customBannerStyle, { background: 'rgb(36, 23, 47)', border: 'rgb(217, 70, 239)' })
   options = structuredClone(site)
   options.login.showLocalLogin = false
   await openLogin()
   loginStatus = 200
   await login()
-  await page.waitForURL(base + '/')
+  await page.waitForURL(base + '/welcome')
   assert((await context.cookies()).some((cookie) => cookie.name === 'magent_logged_in' && cookie.value === '1'))
-  console.log('PASS: both sign-in providers, disabled methods, error states, password visibility, redirect and notices')
+  console.log('PASS: both sign-in providers, disabled methods, error states, password visibility, redirect, login message and custom banner colours')
+
+  options.banner = { enabled: true, message: 'Custom site banner', tone: 'warning', backgroundColor: '#24172f', borderColor: '#d946ef' }
+  await page.goto(base + '/admin/site')
+  const signedInBannerStyle = await page.getByText('Custom site banner', { exact: true }).evaluate((element) => ({
+    background: getComputedStyle(element).backgroundColor,
+    border: getComputedStyle(element).borderTopColor,
+  }))
+  assert.deepEqual(signedInBannerStyle, { background: 'rgb(36, 23, 47)', border: 'rgb(217, 70, 239)' })
+  const bannerRegion = page.locator('#config-site-banner')
+  const backgroundHex = bannerRegion.getByLabel('Banner background colour', { exact: true })
+  await backgroundHex.waitFor()
+  await backgroundHex.fill('red')
+  assert.equal(await backgroundHex.evaluate((element) => element.checkValidity()), false)
+  await bannerRegion.getByLabel('Choose banner background colour', { exact: true }).fill('#112233')
+  assert.equal(await backgroundHex.inputValue(), '#112233')
+  await bannerRegion.getByRole('button', { name: 'Save changes', exact: true }).click()
+  await bannerRegion.getByText('Settings saved.').waitFor()
+  const bannerSave = calls.filter((call) => call.path === '/api/admin/settings').at(-1)
+  assert.equal(JSON.parse(bannerSave.body).site_banner_background_color, '#112233')
+
+  const loginRegion = page.locator('#config-site-login')
+  await loginRegion.getByLabel('Logged-out login page message', { exact: true }).fill('Welcome. Contact support if you cannot sign in.')
+  await loginRegion.getByRole('button', { name: 'Save changes', exact: true }).click()
+  await loginRegion.getByText('Settings saved.').waitFor()
+  const loginSave = calls.filter((call) => call.path === '/api/admin/settings').at(-1)
+  assert.equal(JSON.parse(loginSave.body).site_login_message, 'Welcome. Contact support if you cannot sign in.')
+  assert(!Object.hasOwn(JSON.parse(loginSave.body), 'site_banner_message'))
+  console.log('PASS: Site & sign-in colour picker, native hex validation, login message and region-only saves')
 
   await page.goto(base + '/profile')
   const email = page.getByLabel('Email address', { exact: true })