feat: account sessions and usable template editors

README.md

@@ -19,7 +19,7 @@ FRAME_FLOW_TOKEN. Read that token locally in an editor and enter it on the login
 screen. Do not paste a KoKonna API Key into Web UI. Demo always forces mock mode
 and disables real writes. It leaves data persistent in ./data and ./config.
 
-打开页面后输入 `.env` 中的 FRAME_FLOW_TOKEN；Token 只留在当前页面内存，刷新后需重新输入。
+网页使用账号密码登录。通过 `python scripts/create-account.py --username YOUR_NAME` 创建账号，再启动服务；密码不会写入代码或明文配置。勾选记住登录可保持 30 天，设置页面可修改密码或退出。
 
 ## Architecture / 架构
 
@@ -90,12 +90,16 @@ until the owner explicitly authorizes it.** Test design: [REAL_DEVICE_TEST.md](d
 
 All protected /api/v1 capabilities use Frame Flow Bearer auth and scope checks.
 SQLite stores token hashes. Device keys live only in env/secret and runtime memory.
-The optional 30-day Remember login stores only the Frame Flow Token in this browser
+Browser login uses SQLite accounts with salted scrypt password hashes and revocable,
-localStorage. Disconnect, expiry or HTTP 401 clears it; shared browsers should opt out.
+HttpOnly/SameSite=Strict cookies (30 days when remembered, 12 hours otherwise).
-Cloud original-image endpoint embeds a key upstream; backend proxies it with no
+Mutations require a session CSRF header. Logout and password changes revoke sessions.
-redirects and no access/transport logging. Key never enters browser URLs or DB.
+Passwords and browser sessions are never stored in localStorage. Bootstrap hashes
-Request validation and exceptions use sanitized standard errors. Strong tokens,
+in private `config/accounts.json` seed new accounts only; restarting does not undo
-trusted LAN and no public exposure are the intended deployment model.
+a password change. Five failed logins per source IP cause a five-minute lockout.
+The browser needs no API Token. Bearer authentication remains compatible for
+external clients; the KoKonna key is never used for account login.
+The LAN deployment uses HTTP; use an explicitly configured HTTPS endpoint if
+transport encryption is needed. No reverse proxy or firewall is changed automatically.
 
 ## API
 
@@ -161,3 +165,14 @@ status is recorded honestly in docs/ACCEPTANCE.md.
 Additional drivers; scoped token administration; signed webhooks; cache retention;
 face-aware cropping; public weather provider; Google Calendar, Home Assistant, MQTT,
 NAS monitoring and AI integrations through the same API. External integration is optional.
+
+## Template editing
+
+Templates provide bilingual form fields, event lists, local photo selection, advanced
+JSON, color/grayscale previews, persistent defaults and reset to built-in defaults.
+Changing content invalidates the previous preview. Weather uses the labeled Mock
+provider until a real provider is configured. Live display controls stay disabled
+until real writes are separately approved.
+
+Browser smoke tests use a disposable Mock account via FRAME_FLOW_TEST_USERNAME
+and FRAME_FLOW_TEST_PASSWORD; never run the mutation smoke suite against live devices.

pigway_frame_flow/api/app.py

@@ -14,6 +14,7 @@ from fastapi.openapi.docs import get_swagger_ui_html
 from fastapi.responses import FileResponse, JSONResponse, Response
 from starlette.exceptions import HTTPException
 
+from pigway_frame_flow.core.accounts import install_accounts, seed_accounts
 from pigway_frame_flow.core.auth import require, seed_client
 from pigway_frame_flow.core.registry import DeviceRegistry
 from pigway_frame_flow.display.service import DisplayService
@@ -66,6 +67,7 @@ def create_app(settings=None, start_worker=True):
     service = DisplayService(db, settings, registry, assets, renderer)
     scheduler = Scheduler(service)
     seed_client(db, settings.api_token)
+    seed_accounts(db, settings.config_dir)
     for name in ["urllib3", "requests", "httpx", "httpcore"]:
         logging.getLogger(name).setLevel(logging.CRITICAL)
 
@@ -88,6 +90,7 @@ def create_app(settings=None, start_worker=True):
         lifespan=lifespan,
         responses=error_responses,
     )
+    install_accounts(app, db)
     app.state.service = service
     app.state.scheduler = scheduler
     app.add_middleware(
@@ -99,6 +102,7 @@ def create_app(settings=None, start_worker=True):
             "Content-Type",
             "Idempotency-Key",
             "X-Request-ID",
+            "X-CSRF-Token",
         ],
     )
 
@@ -221,6 +225,7 @@ def create_app(settings=None, start_worker=True):
             "scheduler": scheduler.healthy() if start_worker else True,
             "authentication": bool(
                 db.one("SELECT client_id FROM clients WHERE enabled=1")
+                or db.one("SELECT username FROM users WHERE enabled=1")
             ),
         }
         good = all(checks.values())
@@ -616,6 +621,16 @@ def create_app(settings=None, start_worker=True):
         )
         return TemplateConfig(data=settings.sanitize(payload.data))
 
+    @app.delete(
+        "/api/v1/templates/{template_id}/config",
+        status_code=204,
+        tags=["Templates"],
+        dependencies=[Depends(require("settings:write"))],
+    )
+    def reset_template_config(template_id: str):
+        renderer.info(template_id)
+        db.execute("DELETE FROM template_config WHERE template_id=?", (template_id,))
+
     @app.get(
         "/api/v1/jobs",
         response_model=list[Job],

pigway_frame_flow/core/accounts.py

@@ -0,0 +1,178 @@
+"""Browser accounts: salted password hashes and revocable server-side sessions."""
+
+import hashlib
+import hmac
+import json
+import secrets
+import time
+from pathlib import Path
+
+from fastapi import Request, Response
+from pydantic import BaseModel, Field
+
+from pigway_frame_flow.errors import ErrorCode as E
+from pigway_frame_flow.errors import FlowError
+
+COOKIE = "frameflow_session"
+
+
+def password_hash(password: str) -> str:
+    salt = secrets.token_hex(16)
+    digest = hashlib.scrypt(
+        password.encode(), salt=bytes.fromhex(salt), n=16384, r=8, p=1
+    ).hex()
+    return f"scrypt${salt}${digest}"
+
+
+def verify_password(password: str, encoded: str) -> bool:
+    try:
+        _, salt, expected = encoded.split("$")
+        actual = hashlib.scrypt(
+            password.encode(), salt=bytes.fromhex(salt), n=16384, r=8, p=1
+        ).hex()
+        return hmac.compare_digest(actual, expected)
+    except (ValueError, TypeError):
+        return False
+
+
+class Login(BaseModel):
+    username: str = Field(min_length=1, max_length=80)
+    password: str = Field(min_length=1, max_length=256, repr=False)
+    remember: bool = True
+
+
+class AccountView(BaseModel):
+    username: str
+    csrf_token: str
+
+
+class PasswordChange(BaseModel):
+    current_password: str = Field(min_length=1, max_length=256, repr=False)
+    new_password: str = Field(min_length=8, max_length=256, repr=False)
+
+
+def seed_accounts(db, config_dir: Path):
+    db.execute(
+        "CREATE TABLE IF NOT EXISTS users (username TEXT PRIMARY KEY, password_hash TEXT NOT NULL, enabled INTEGER NOT NULL DEFAULT 1)"
+    )
+    db.execute(
+        "CREATE TABLE IF NOT EXISTS sessions (token_hash TEXT PRIMARY KEY, username TEXT NOT NULL, csrf TEXT NOT NULL, expires_at REAL NOT NULL)"
+    )
+    db.execute(
+        "CREATE TABLE IF NOT EXISTS login_attempts (identity TEXT PRIMARY KEY, failures INTEGER NOT NULL, blocked_until REAL NOT NULL)"
+    )
+    path = config_dir / "accounts.json"
+    if path.exists():
+        for user in json.loads(path.read_text()).get("users", []):
+            db.execute(
+                "INSERT OR IGNORE INTO users VALUES(?,?,1)",
+                (user["username"], user["password_hash"]),
+            )
+
+
+def session_user(request: Request):
+    raw = request.cookies.get(COOKIE, "")
+    if not raw:
+        return None
+    db = request.app.state.service.db
+    row = db.one(
+        "SELECT s.*,u.enabled FROM sessions s JOIN users u USING(username) WHERE token_hash=?",
+        (hashlib.sha256(raw.encode()).hexdigest(),),
+    )
+    if not row or not row["enabled"] or row["expires_at"] <= time.time():
+        return None
+    if request.method in {"POST", "PUT", "DELETE"}:
+        if not hmac.compare_digest(
+            request.headers.get("X-CSRF-Token", ""), row["csrf"]
+        ):
+            raise FlowError(E.FORBIDDEN, "Session CSRF validation failed", 403)
+    return row
+
+
+def install_accounts(app, db):
+    @app.post("/api/v1/auth/login", response_model=AccountView, tags=["Accounts"])
+    def login(payload: Login, request: Request, response: Response):
+        identity = hashlib.sha256(
+            (request.client.host if request.client else "unknown").encode()
+        ).hexdigest()
+        attempt = db.one("SELECT * FROM login_attempts WHERE identity=?", (identity,))
+        if attempt and attempt["blocked_until"] > time.time():
+            raise FlowError(
+                E.RATE_LIMITED, "Too many login attempts; try again later", 429
+            )
+        row = db.one(
+            "SELECT * FROM users WHERE username=? AND enabled=1", (payload.username,)
+        )
+        # Perform a password calculation even for unknown usernames.
+        fallback = "scrypt$" + "00" * 16 + "$" + "00" * 64
+        valid = verify_password(
+            payload.password, row["password_hash"] if row else fallback
+        )
+        if not row or not valid:
+            failures = (
+                attempt["failures"] if attempt and attempt["blocked_until"] == 0 else 0
+            ) + 1
+            db.execute(
+                "INSERT OR REPLACE INTO login_attempts VALUES(?,?,?)",
+                (identity, failures, time.time() + 300 if failures >= 5 else 0),
+            )
+            raise FlowError(E.UNAUTHORIZED, "Invalid username or password", 401)
+        db.execute("DELETE FROM login_attempts WHERE identity=?", (identity,))
+        raw, csrf = secrets.token_urlsafe(32), secrets.token_urlsafe(32)
+        lifetime = 30 * 86400 if payload.remember else 12 * 3600
+        db.execute("DELETE FROM sessions WHERE expires_at<=?", (time.time(),))
+        old = request.cookies.get(COOKIE)
+        if old:
+            db.execute(
+                "DELETE FROM sessions WHERE token_hash=?",
+                (hashlib.sha256(old.encode()).hexdigest(),),
+            )
+        db.execute(
+            "INSERT INTO sessions VALUES(?,?,?,?)",
+            (
+                hashlib.sha256(raw.encode()).hexdigest(),
+                row["username"],
+                csrf,
+                time.time() + lifetime,
+            ),
+        )
+        response.set_cookie(
+            COOKIE,
+            raw,
+            max_age=lifetime if payload.remember else None,
+            httponly=True,
+            samesite="strict",
+            secure=request.url.scheme == "https",
+            path="/",
+        )
+        return AccountView(username=row["username"], csrf_token=csrf)
+
+    def current(request):
+        row = session_user(request)
+        if not row:
+            raise FlowError(E.UNAUTHORIZED, "Account login required", 401)
+        return row
+
+    @app.get("/api/v1/auth/me", response_model=AccountView, tags=["Accounts"])
+    def me(request: Request):
+        row = current(request)
+        return AccountView(username=row["username"], csrf_token=row["csrf"])
+
+    @app.post("/api/v1/auth/logout", status_code=204, tags=["Accounts"])
+    def logout(request: Request, response: Response):
+        row = current(request)
+        db.execute("DELETE FROM sessions WHERE token_hash=?", (row["token_hash"],))
+        response.delete_cookie(COOKIE, path="/")
+
+    @app.put("/api/v1/auth/password", status_code=204, tags=["Accounts"])
+    def change_password(payload: PasswordChange, request: Request, response: Response):
+        session = current(request)
+        user = db.one("SELECT * FROM users WHERE username=?", (session["username"],))
+        if not verify_password(payload.current_password, user["password_hash"]):
+            raise FlowError(E.UNAUTHORIZED, "Current password is incorrect", 401)
+        db.execute(
+            "UPDATE users SET password_hash=? WHERE username=?",
+            (password_hash(payload.new_password), session["username"]),
+        )
+        db.execute("DELETE FROM sessions WHERE username=?", (session["username"],))
+        response.delete_cookie(COOKIE, path="/")

pigway_frame_flow/core/auth.py

@@ -5,6 +5,7 @@ import json
 from fastapi import Request, Security
 from fastapi.security import HTTPBearer
 
+from pigway_frame_flow.core.accounts import session_user
 from pigway_frame_flow.errors import ErrorCode as E
 from pigway_frame_flow.errors import FlowError
 from pigway_frame_flow.storage.database import encode, now_iso
@@ -40,6 +41,10 @@ def require(scope):
     def authorize(request: Request, credentials=Security(bearer)):
         db = request.app.state.service.db
         if not credentials:
+            account = session_user(request)
+            if account:
+                request.state.client_id = "user:" + account["username"]
+                return request.state.client_id
             raise FlowError(E.UNAUTHORIZED, "Frame Flow API token required", 401)
         digest = hashlib.sha256(credentials.credentials.encode()).hexdigest()
         for row in db.all("SELECT * FROM clients WHERE enabled=1"):

pigway_frame_flow/renderers/templates.py

@@ -1,3 +1,4 @@
+import calendar
 import json
 from datetime import datetime
 from io import BytesIO
@@ -99,6 +100,38 @@ class TemplateRenderer:
             x, y, w, h = block["box"]
             if block["kind"] == "rule":
                 draw.rectangle((x, y, x + w, y + h), fill=accent)
+            elif block["kind"] == "month":
+                try:
+                    shown = datetime.strptime(str(values["date"]), "%Y-%m-%d")
+                except ValueError:
+                    raise FlowError(
+                        E.INVALID_REQUEST, "Calendar date must be YYYY-MM-DD"
+                    ) from None
+                text(shown.strftime("%Y-%m"), x, y, w, 70, 48)
+                cells = calendar.Calendar(firstweekday=0).monthdayscalendar(
+                    shown.year, shown.month
+                )
+                cell_w, cell_h = w // 7, (h - 140) // len(cells)
+                for col, label in enumerate(
+                    ["一 M", "二 T", "三 W", "四 T", "五 F", "六 S", "日 S"]
+                ):
+                    text(label, x + col * cell_w + 10, y + 80, cell_w - 20, 60, 30)
+                for row, week in enumerate(cells):
+                    for col, day in enumerate(week):
+                        if not day:
+                            continue
+                        left, top = x + col * cell_w, y + 140 + row * cell_h
+                        if (shown.year, shown.month, day) == (
+                            current.year,
+                            current.month,
+                            current.day,
+                        ):
+                            draw.rectangle(
+                                (left, top, left + cell_w - 6, top + cell_h - 6),
+                                outline=accent,
+                                width=5,
+                            )
+                        text(day, left + 25, top + 10, cell_w - 35, cell_h, 38)
             elif block["kind"] == "photo":
                 asset_id = values.get("photo_id")
                 if asset_id:

pigway_frame_flow/templates/calendar.json

@@ -63,26 +63,25 @@
       "kind": "text"
     },
     {
-      "field": "weekday",
+      "kind": "month",
+      "field": "date",
       "box": [
         72,
-        430,
+        440,
         1056,
-        100
+        600
-      ],
+      ]
-      "size": 42,
-      "kind": "text"
     },
     {
+      "kind": "text",
       "field": "events",
       "box": [
         72,
-        600,
+        1100,
         1056,
-        800
+        340
       ],
-      "size": 54,
+      "size": 42
-      "kind": "text"
     }
   ]
 }

pigway_frame_flow/web/app.js

@@ -1,8 +1,7 @@
 'use strict';
 const $=s=>document.querySelector(s);
-const state={lang:localStorage.getItem('ff-language')||'zh',theme:localStorage.getItem('ff-theme')||'system',page:location.hash.slice(1)||'dashboard',token:rememberedToken(),device:'living-room',settings:null,devices:[],templates:[],gallery:[],assets:[],blobs:[],tab:'cloud',preview:null,templatePreview:null,selectedTemplate:null,epoch:0};
+const state={lang:localStorage.getItem('ff-language')||'zh',theme:localStorage.getItem('ff-theme')||'system',page:location.hash.slice(1)||'dashboard',token:'',csrf:'',device:'living-room',settings:null,devices:[],templates:[],gallery:[],assets:[],blobs:[],tab:'cloud',preview:null,templatePreview:null,selectedTemplate:null,epoch:0};
-function rememberedToken(){try{const saved=JSON.parse(localStorage.getItem('ff-login')||'null');if(saved?.token&&saved.expires_at>Date.now())return saved.token;}catch{}localStorage.removeItem('ff-login');return '';}
+function forgetLogin(){localStorage.removeItem('ff-login');state.token='';state.csrf='';state.settings=null;state.devices=[];state.templates=[];}
-function forgetLogin(){localStorage.removeItem('ff-login');state.token='';state.settings=null;state.devices=[];state.templates=[];}
 async function loadConnection(){state.settings=await api('/api/v1/settings');try{state.devices=await api('/api/v1/devices');}catch(error){state.devices=[];toast(error.message);}state.templates=await api('/api/v1/templates');state.device=state.devices[0]?.id||state.device;}
 const icons={dashboard:'◫',gallery:'▧',upload:'↥',templates:'▦',automation:'◷',playlists:'▤',history:'↺',settings:'⚙'};
 const t=k=>window.MESSAGES[state.lang][k]||k;
@@ -12,7 +11,7 @@ const buttons=(id,text,primary=false)=>`<button id="${id}" class="${primary?'pri
 let toastTimer;
 function toast(message){$('#toast').textContent=message;$('#toast').style.display='block';clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('#toast').style.display='none',6000);}
 async function api(path,options={}){
- const headers={'Authorization':'Bearer '+state.token,...options.headers};
+ const headers={...(state.csrf?{'X-CSRF-Token':state.csrf}:{}),...options.headers};
  if(options.body&&!(options.body instanceof FormData)){headers['Content-Type']='application/json';options.body=JSON.stringify(options.body);}
  const response=await fetch(path,{...options,headers});
  if(!response.ok){if(response.status===401)forgetLogin();let error;try{error=(await response.json()).error;}catch{}
@@ -31,9 +30,9 @@ function notice(){if(!state.settings)return '';return `<div class="notice ${!sta
 async function navigate(page=state.page){state.page=icons[page]?page:'dashboard';location.hash=state.page;shell();clearBlobs();state.epoch++;const epoch=state.epoch;
  if(!state.token){login();return;}
  $('#main').innerHTML='<div class="spinner"></div>';
- try{await views[state.page](epoch);}catch(e){if(epoch!==state.epoch)return;if(!state.token){shell();login();toast(e.message);return;}$('#main').innerHTML=`<div class="card empty"><strong>${t('apiError')}</strong><p>${esc(e.message)}</p>${buttons('retry','refresh')}</div>`;bind('retry',()=>navigate());}
+ try{await views[state.page](epoch);guardDeviceButtons();}catch(e){if(epoch!==state.epoch)return;if(!state.token){shell();login();toast(e.message);return;}$('#main').innerHTML=`<div class="card empty"><strong>${t('apiError')}</strong><p>${esc(e.message)}</p>${buttons('retry','refresh')}</div>`;bind('retry',()=>navigate());}
 }
-function login(){ $('#main').innerHTML=`<div class="card" style="max-width:560px;margin:40px auto"><span class="badge">FRAME FLOW</span><h2 style="margin-top:20px">${t('connect')}</h2><p class="hint">${t('tokenHint')}</p><form id="login-form"><div class="field"><label for="api-token">${t('token')}</label><input id="api-token" type="password" required autocomplete="current-password"></div><label class="check-row"><input id="remember-login" type="checkbox" checked>${t('rememberLogin')}</label><button class="primary" type="submit">${t('connect')}</button></form></div>`;$('#login-form').onsubmit=busy(async e=>{e.preventDefault();state.token=$('#api-token').value.trim();const remember=$('#remember-login').checked;try{await loadConnection();if(remember)localStorage.setItem('ff-login',JSON.stringify({token:state.token,expires_at:Date.now()+30*86400000}));else localStorage.removeItem('ff-login');await navigate();}catch(error){forgetLogin();shell();login();toast(error.message);}});}
+function login(){ $('#main').innerHTML=`<div class="card" style="max-width:560px;margin:40px auto"><span class="badge">FRAME FLOW</span><h2 style="margin-top:20px">${t('connect')}</h2><p class="hint">${t('tokenHint')}</p><form id="login-form"><div class="field"><label for="username">${t('username')}</label><input id="username" required autocomplete="username"></div><div class="field"><label for="password">${t('password')}</label><input id="password" type="password" required autocomplete="current-password"></div><label class="check-row"><input id="remember-login" type="checkbox" checked>${t('rememberLogin')}</label><button class="primary" type="submit">${t('connect')}</button></form></div>`;$('#login-form').onsubmit=busy(async e=>{e.preventDefault();try{const account=await api('/api/v1/auth/login',{method:'POST',body:{username:$('#username').value.trim(),password:$('#password').value,remember:$('#remember-login').checked}});state.token=account.username;state.csrf=account.csrf_token;await loadConnection();await navigate();}catch(error){forgetLogin();shell();login();toast(error.message);}});}
 // LAN HTTP is not a secure context; getRandomValues remains available there.
 function clientUUID(){if(typeof crypto.randomUUID==='function')return crypto.randomUUID();const bytes=crypto.getRandomValues(new Uint8Array(16));bytes[6]=(bytes[6]&15)|64;bytes[8]=(bytes[8]&63)|128;const hex=Array.from(bytes,b=>b.toString(16).padStart(2,'0')).join('');return `${hex.slice(0,8)}-${hex.slice(8,12)}-${hex.slice(12,16)}-${hex.slice(16,20)}-${hex.slice(20)}`;}
 async function accepted(path,payload){const key='web-'+clientUUID();const result=await api(path,{method:'POST',body:payload,headers:{'Idempotency-Key':key}});toast(t('accepted'));return result.operation_id;}
@@ -41,19 +40,33 @@ async function waitOperation(id){for(let n=0;n<120;n++){const operation=await ap
 function showModal(html){$('#modal-content').innerHTML=html;$('#modal').showModal();bind('modal-cancel',()=>$('#modal').close());}
 async function confirmDialog(message,fn){showModal(`<h2>${t('confirm')}</h2><p>${esc(message)}</p><div class="modal-actions">${buttons('modal-cancel','cancel')}${buttons('modal-confirm','confirm',true)}</div>`);bind('modal-confirm',async()=>{await fn();$('#modal').close();});}
 function detail(label,value){return `<div><small>${t(label)}</small><strong>${esc(value)}</strong></div>`;}
+function liveWriteAllowed(){return state.settings?.mock||state.settings?.write_enabled;}
+function guardDeviceButtons(){if(!liveWriteAllowed())document.querySelectorAll('[data-show],'+(state.tab==='cloud'?'.image-card .danger,':'')+'#show-name,#display-template,#display-upload,#restore').forEach(b=>{b.disabled=true;b.title=t('readOnlyWarning');});}
+async function templateEditor(selected){
+ const raw=$('#template-data');const assets=await api('/api/v1/assets');let values=JSON.parse(raw.value);
+ const panel=document.createElement('div');panel.id='template-fields';raw.before(panel);
+ const labels={title:state.lang==='zh'?'标题':'Title',message:state.lang==='zh'?'正文':'Message',quote:state.lang==='zh'?'一句话':'Quote',author:state.lang==='zh'?'作者':'Author',events:t('eventsHelp'),date:t('date'),weekday:state.lang==='zh'?'星期（留空自动）':'Weekday (blank for automatic)',weather:state.lang==='zh'?'天气数据（JSON，可留空使用 Provider）':'Weather JSON (blank uses provider)'};
+ const fields=[...new Set(['title',...selected.fields.filter(k=>Object.hasOwn(selected.defaults,k)),...(['daily-dashboard','calendar'].includes(selected.id)?['events','date','weekday']:[]),...(selected.id==='weather'||selected.id==='daily-dashboard'?['weather']:[]),...(['photo-text','daily-dashboard'].includes(selected.id)?['photo_id']:[])])];
+ function invalidate(){state.templatePreview=null;$('#display-template').disabled=true;$('#template-preview').className='empty';$('#template-preview').textContent=t('previewHint');}
+ function build(){panel.innerHTML=`<h3>${t('formEditor')}</h3>`+fields.map(k=>k==='photo_id'?`<div class="field"><label for="field-photo_id">${t('photo')}</label><select id="field-photo_id" data-field="photo_id"><option value="">${t('noPhoto')}</option>${assets.map(a=>`<option value="${esc(a.asset_id)}" ${a.asset_id===values.photo_id?'selected':''}>${esc(a.name)}</option>`).join('')}</select></div>`:`<div class="field"><label for="field-${k}">${esc(labels[k]||k)}</label><textarea id="field-${k}" data-field="${k}" rows="${['events','message','weather','quote'].includes(k)?3:1}">${esc(k==='events'?(values[k]||[]).map(v=>typeof v==='object'?v.title:v).join('\n'):k==='weather'?(values[k]?JSON.stringify(values[k],null,2):''):values[k]||'')}</textarea></div>`).join('');panel.querySelectorAll('[data-field]').forEach(el=>el.oninput=()=>{try{const k=el.dataset.field;let v=el.value;if(k==='events')v=v.split('\n').filter(x=>x.trim());if(k==='weather')v=v.trim()?JSON.parse(v):null;if(v===null||v==='')delete values[k];else values[k]=v;raw.value=JSON.stringify(values,null,2);el.setCustomValidity('');invalidate();}catch{el.setCustomValidity(t('INVALID_REQUEST'));el.reportValidity();}});}
+ build();const advanced=document.createElement('details');advanced.innerHTML=`<summary>${t('advanced')}</summary>`;raw.before(advanced);advanced.append(raw);raw.oninput=()=>{invalidate();try{values=JSON.parse(raw.value);if(!values||typeof values!=='object'||Array.isArray(values))throw Error();raw.setCustomValidity('');build();}catch{raw.setCustomValidity(t('INVALID_REQUEST'));}};
+ const reset=document.createElement('button');reset.id='reset-template';reset.textContent=t('resetTemplate');$('#save-template').after(reset);bind('reset-template',()=>confirmDialog(t('resetConfirm'),async()=>{await api('/api/v1/templates/'+selected.id+'/config',{method:'DELETE'});await navigate();}));
+ const save=$('#save-template');const oldSave=save.onclick;save.onclick=async e=>{if([...panel.querySelectorAll('textarea'),raw].some(x=>!x.checkValidity())){toast(t('INVALID_REQUEST'));return;}await oldSave(e);};
+}
+function accountSettings(){const section=$('#logout').parentElement;const form=document.createElement('form');form.id='password-form';form.innerHTML=`<h3>${t('changePassword')}</h3><div class="field"><label for="current-password">${t('currentPassword')}</label><input id="current-password" type="password" required autocomplete="current-password"></div><div class="field"><label for="new-password">${t('newPassword')}</label><input id="new-password" type="password" minlength="8" required autocomplete="new-password"></div><button type="submit">${t('changePassword')}</button>`;section.append(form);form.onsubmit=busy(async e=>{e.preventDefault();await api('/api/v1/auth/password',{method:'PUT',body:{current_password:$('#current-password').value,new_password:$('#new-password').value}});forgetLogin();shell();login();toast(t('passwordChanged'));});}
 const views={
  async dashboard(epoch){const d=await api('/api/v1/devices/'+state.device);if(epoch!==state.epoch)return;const s=d.slideshow;$('#main').innerHTML=notice()+`${d.power.battery_percent!==null&&d.power.battery_percent<20?`<div class="notice warning">${t('lowBattery')}</div>`:''}<section class="card hero"><div class="hero-info"><span class="badge ${d.status==='offline'?'bad':''}">● ${t(d.status).toUpperCase()}</span><h2>${esc(d.name)}</h2><p>${esc(d.model)} · ${esc(d.model_code)} · ${d.display.width} × ${d.display.height}</p><div class="actions">${buttons('go-upload','upload',true)}${buttons('restore','restore')}${buttons('refresh-device','refresh')}</div><p class="hint" style="margin-top:28px">${t('refreshInterval')}</p></div><div class="frame-demo"><div class="mini-art"><div class="sun"></div></div><span class="frame-label">${t('testLabel')}</span></div></section><div class="stats">${[['battery',d.power.battery_percent===null?'—':d.power.battery_percent+'%'],['current',d.current_content.id??'—'],['sync',t(d.current_content.synced?'synced':'syncing')],['firmware',d.firmware]].map(([l,v])=>`<div class="card stat"><div class="label">${t(l)}</div><div class="value">${esc(v)}</div></div>`).join('')}</div><div class="columns"><section class="card"><h3>${t('device')}</h3><div class="detail-grid">${detail('heartbeat',fmt(d.last_seen_at))}${detail('rotation',d.display.rotation+'°')}${detail('timezone',d.timezone)}${detail('coverId',d.current_content.cover_id??'—')}${detail('storage',d.storage_used_bytes===null?'—':(d.storage_used_bytes/1024/1024).toFixed(1)+' MiB')}${detail('model',t(d.model_verified?'modelVerified':'modelConfigured'))}</div></section><section class="card"><h3>${t('cloudRotation')}</h3><div class="detail-grid">${detail('mode',s.mode?t(s.mode):'—')}${detail('interval',s.interval_minutes==null?'—':s.interval_minutes+' '+t('minutes'))}</div><p class="hint">${t('rotationNotice')}</p><a href="#playlists" id="go-playlists">${t('playlists')} →</a></section></div>`;bind('go-upload',()=>navigate('upload'));bind('refresh-device',async()=>{await api('/api/v1/devices/'+state.device+'?refresh=true');await navigate();});$('#restore').disabled=!d.can_restore;bind('restore',()=>accepted('/api/v1/devices/'+state.device+'/restore',{}));$('#go-playlists').onclick=e=>{e.preventDefault();navigate('playlists');};},
- async gallery(epoch){let items=state.tab==='cloud'?await api('/api/v1/devices/'+state.device+'/images'):await api('/api/v1/assets');if(epoch!==state.epoch)return;state.gallery=items;$('#main').innerHTML=notice()+`<div class="section-heading"><div class="tabs"><button id="cloud-tab" class="${state.tab==='cloud'?'active':''}">${t('cloud')}</button><button id="local-tab" class="${state.tab==='local'?'active':''}">${t('local')}</button></div><div class="actions">${buttons('gallery-refresh','refresh')}${state.tab==='cloud'?buttons('show-name','displayByName'):''}${buttons('gallery-upload','upload',true)}</div></div>${state.tab==='local'?`<div class="notice">${t('uploadNotice')}</div>`:''}${items.length?`<div class="gallery">${items.map((x,i)=>`<article class="card image-card"><img class="thumb" alt="${esc(x.name)}" data-src="${esc(x.url+(state.tab==='cloud'?'?thumbnail=true':''))}"><h3 title="${esc(x.name)}">${esc(x.name)}</h3><small>${state.tab==='cloud'?'#'+x.image_id:'LOCAL'} · ${esc(fmt(x.created_at))}</small>${x.current?`<div><span class="badge">${t('current')}</span></div>`:''}<div class="actions"><button class="primary" data-show="${i}">${t('display')}</button><button data-original="${i}">${t('original')}</button><button class="danger" data-delete="${i}">${t('delete')}</button></div></article>`).join('')}</div>`:`<div class="card empty"><strong>${t('noImages')}</strong>${t('emptyHint')}</div>`}`;bind('cloud-tab',()=>{state.tab='cloud';return navigate();});bind('local-tab',()=>{state.tab='local';return navigate();});bind('gallery-refresh',()=>navigate());bind('gallery-upload',()=>navigate('upload'));bind('show-name',()=>{showModal(`<h2>${t('displayByName')}</h2><div class="field"><label for="image-name">${t('name')}</label><input id="image-name" maxlength="120"></div><div class="modal-actions">${buttons('modal-cancel','cancel')}${buttons('show-name-confirm','display',true)}</div>`);bind('show-name-confirm',async()=>{await accepted('/api/v1/display',{device_id:state.device,content:{type:'image',image_name:$('#image-name').value}});$('#modal').close();});});hydrateImages();document.querySelectorAll('[data-show]').forEach(b=>b.onclick=busy(()=>{const x=items[b.dataset.show];return accepted('/api/v1/display',{device_id:state.device,content:state.tab==='cloud'?{type:'image',image_id:x.image_id}:{type:'image',asset_id:x.asset_id}});}));document.querySelectorAll('[data-original]').forEach(b=>b.onclick=busy(async()=>{const x=items[b.dataset.original];showModal(`<h2>${esc(x.name)}</h2><img id="original-image" class="preview" alt="${esc(x.name)}"><div class="modal-actions">${buttons('modal-cancel','cancel')}</div>`);await blobImage($('#original-image'),x.url);}));document.querySelectorAll('[data-delete]').forEach(b=>b.onclick=()=>{const x=items[b.dataset.delete];confirmDialog(x.current?t('deleteCurrent'):t('deleteConfirm'),async()=>{if(state.tab==='local'){await api('/api/v1/assets/'+x.asset_id,{method:'DELETE'});}else{const result=await api(`/api/v1/devices/${state.device}/images/${x.image_id}?confirm_current=${x.current}`,{method:'DELETE',headers:{'Idempotency-Key':'web-'+crypto.randomUUID()}});await waitOperation(result.operation_id);}await navigate();});});},
+ async gallery(epoch){let items=state.tab==='cloud'?await api('/api/v1/devices/'+state.device+'/images'):await api('/api/v1/assets');if(epoch!==state.epoch)return;state.gallery=items;$('#main').innerHTML=notice()+`<div class="section-heading"><div class="tabs"><button id="cloud-tab" class="${state.tab==='cloud'?'active':''}">${t('cloud')}</button><button id="local-tab" class="${state.tab==='local'?'active':''}">${t('local')}</button></div><div class="actions">${buttons('gallery-refresh','refresh')}${state.tab==='cloud'?buttons('show-name','displayByName'):''}${buttons('gallery-upload','upload',true)}</div></div>${state.tab==='local'?`<div class="notice">${t('uploadNotice')}</div>`:''}${items.length?`<div class="gallery">${items.map((x,i)=>`<article class="card image-card"><img class="thumb" alt="${esc(x.name)}" data-src="${esc(x.url+(state.tab==='cloud'?'?thumbnail=true':''))}"><h3 title="${esc(x.name)}">${esc(x.name)}</h3><small>${state.tab==='cloud'?'#'+x.image_id:'LOCAL'} · ${esc(fmt(x.created_at))}</small>${x.current?`<div><span class="badge">${t('current')}</span></div>`:''}<div class="actions"><button class="primary" data-show="${i}">${t('display')}</button><button data-original="${i}">${t('original')}</button><button class="danger" data-delete="${i}">${t('delete')}</button></div></article>`).join('')}</div>`:`<div class="card empty"><strong>${t('noImages')}</strong>${t('emptyHint')}</div>`}`;bind('cloud-tab',()=>{state.tab='cloud';return navigate();});bind('local-tab',()=>{state.tab='local';return navigate();});bind('gallery-refresh',()=>navigate());bind('gallery-upload',()=>navigate('upload'));bind('show-name',()=>{showModal(`<h2>${t('displayByName')}</h2><div class="field"><label for="image-name">${t('name')}</label><input id="image-name" maxlength="120"></div><div class="modal-actions">${buttons('modal-cancel','cancel')}${buttons('show-name-confirm','display',true)}</div>`);bind('show-name-confirm',async()=>{await accepted('/api/v1/display',{device_id:state.device,content:{type:'image',image_name:$('#image-name').value}});$('#modal').close();});});hydrateImages();document.querySelectorAll('[data-show]').forEach(b=>b.onclick=busy(()=>{const x=items[b.dataset.show];return accepted('/api/v1/display',{device_id:state.device,content:state.tab==='cloud'?{type:'image',image_id:x.image_id}:{type:'image',asset_id:x.asset_id}});}));document.querySelectorAll('[data-original]').forEach(b=>b.onclick=busy(async()=>{const x=items[b.dataset.original];showModal(`<h2>${esc(x.name)}</h2><img id="original-image" class="preview" alt="${esc(x.name)}"><div class="modal-actions">${buttons('modal-cancel','cancel')}</div>`);await blobImage($('#original-image'),x.url);}));document.querySelectorAll('[data-delete]').forEach(b=>b.onclick=()=>{const x=items[b.dataset.delete];confirmDialog(x.current?t('deleteCurrent'):t('deleteConfirm'),async()=>{if(state.tab==='local'){await api('/api/v1/assets/'+x.asset_id,{method:'DELETE'});}else{const result=await api(`/api/v1/devices/${state.device}/images/${x.image_id}?confirm_current=${x.current}`,{method:'DELETE',headers:{'Idempotency-Key':'web-'+clientUUID()}});await waitOperation(result.operation_id);}await navigate();});});},
  async upload(){state.preview=null;$('#main').innerHTML=notice()+`<div class="notice">${t('uploadNotice')}</div><div class="columns"><section class="card"><h2>${t('upload')}</h2><div class="dropzone"><strong>${t('selectFile')}</strong><p class="hint">${t('uploadHint')}</p><input id="file" type="file" accept="image/jpeg,image/png,image/webp" aria-label="${t('selectFile')}"></div><div class="form-grid" style="margin-top:24px"><div class="field"><label for="fit">${t('mode')}</label><select id="fit">${['contain','cover','smart'].map(x=>`<option value="${x}">${t(x)}</option>`).join('')}</select></div><div class="field"><label for="profile">${t('profile')}</label><select id="profile">${['color','grayscale'].map(x=>`<option value="${x}">${t(x)}</option>`).join('')}</select></div></div>${buttons('make-preview','preview',true)}<p class="hint">${t('previewHint')}</p></section><section class="card"><h3>${t('preview')}</h3><div id="preview-box" class="empty">${t('previewHint')}</div><div class="actions" style="margin-top:18px"><button id="save-local" disabled>${t('staging')}</button><button id="display-upload" class="primary" disabled>${t('display')}</button></div></section></div>`;bind('make-preview',async()=>{const file=$('#file').files[0];if(!file)throw new Error(t('selectFile'));const form=new FormData();form.append('file',file);form.append('fit',$('#fit').value);form.append('profile',$('#profile').value);state.preview=await api('/api/v1/preview',{method:'POST',body:form});$('#preview-box').className='';$('#preview-box').innerHTML='<img id="upload-preview" class="preview" alt="Preview">';await blobImage($('#upload-preview'),state.preview.url);$('#save-local').disabled=false;$('#display-upload').disabled=false;});for(const id of ['file','fit','profile'])$('#'+id).onchange=()=>{state.preview=null;$('#save-local').disabled=true;$('#display-upload').disabled=true;};bind('save-local',async()=>{const id=await accepted('/api/v1/devices/'+state.device+'/upload',{type:'image',asset_id:state.preview.asset_id});await waitOperation(id);state.tab='local';return navigate('gallery');});bind('display-upload',()=>accepted('/api/v1/display',{device_id:state.device,content:{type:'image',asset_id:state.preview.asset_id}}));},
- async templates(){state.templates=await api('/api/v1/templates');const selected=state.templates.find(x=>x.id===state.selectedTemplate)||state.templates[0];state.selectedTemplate=selected.id;state.templatePreview=null;$('#main').innerHTML=notice()+`<div class="notice">${t('templateHint')}</div><div class="template-grid">${state.templates.map((x,i)=>`<div class="card template-card ${x.id===selected.id?'selected':''}" role="button" tabindex="0" data-template="${x.id}"><span>${['☀','▦','◒','▣','❝','☁'][i]}</span><div><h3>${esc(x.name.split(' / ')[state.lang==='zh'?1:0]||x.name)}</h3><small>1200 × 1600 · ${esc(x.id)}</small></div></div>`).join('')}</div><div class="columns"><section class="card"><h3>${t('templateData')}</h3><textarea id="template-data" aria-label="${t('templateData')}">${esc(JSON.stringify(selected.defaults,null,2))}</textarea><div class="field" style="margin-top:16px"><label for="template-profile">${t('profile')}</label><select id="template-profile"><option value="color">${t('color')}</option><option value="grayscale">${t('grayscale')}</option></select></div><div class="actions">${buttons('render-template','render',true)}${buttons('save-template','saveTemplate')}</div></section><section class="card"><h3>${t('preview')}</h3><div id="template-preview" class="empty">${t('previewHint')}</div><button id="display-template" class="primary" style="margin-top:18px" disabled>${t('display')}</button></section></div>`;document.querySelectorAll('[data-template]').forEach(b=>{b.onclick=()=>{state.selectedTemplate=b.dataset.template;navigate();};b.onkeydown=e=>{if(e.key==='Enter')b.click();};});bind('render-template',async()=>{const content={type:'template',template:selected.id,data:JSON.parse($('#template-data').value),profile:$('#template-profile').value};const id=await accepted('/api/v1/render',content);$('#template-preview').textContent=t('previewLoading');const op=await waitOperation(id);state.templatePreview=op.result.asset_id;$('#template-preview').className='';$('#template-preview').innerHTML='<img id="template-image" class="preview" alt="Template preview">';await blobImage($('#template-image'),op.result.url);$('#display-template').disabled=false;});bind('save-template',async()=>{await api('/api/v1/templates/'+selected.id+'/config',{method:'PUT',body:{data:JSON.parse($('#template-data').value)}});toast(t('done'));});$('#template-data').oninput=()=>$('#display-template').disabled=true;$('#template-profile').onchange=()=>$('#display-template').disabled=true;bind('display-template',()=>accepted('/api/v1/display',{device_id:state.device,content:{type:'image',asset_id:state.templatePreview}}));},
+ async templates(){state.templates=await api('/api/v1/templates');const selected=state.templates.find(x=>x.id===state.selectedTemplate)||state.templates[0];state.selectedTemplate=selected.id;state.templatePreview=null;$('#main').innerHTML=notice()+`<div class="notice">${t('templateHint')}</div><div class="template-grid">${state.templates.map((x,i)=>`<div class="card template-card ${x.id===selected.id?'selected':''}" role="button" tabindex="0" data-template="${x.id}"><span>${['☀','▦','◒','▣','❝','☁'][i]}</span><div><h3>${esc(x.name.split(' / ')[state.lang==='zh'?1:0]||x.name)}</h3><small>1200 × 1600 · ${esc(x.id)}</small></div></div>`).join('')}</div><div class="columns"><section class="card"><h3>${t('templateData')}</h3><textarea id="template-data" aria-label="${t('templateData')}">${esc(JSON.stringify(selected.defaults,null,2))}</textarea><div class="field" style="margin-top:16px"><label for="template-profile">${t('profile')}</label><select id="template-profile"><option value="color">${t('color')}</option><option value="grayscale">${t('grayscale')}</option></select></div><div class="actions">${buttons('render-template','render',true)}${buttons('save-template','saveTemplate')}</div></section><section class="card"><h3>${t('preview')}</h3><div id="template-preview" class="empty">${t('previewHint')}</div><button id="display-template" class="primary" style="margin-top:18px" disabled>${t('display')}</button></section></div>`;document.querySelectorAll('[data-template]').forEach(b=>{b.onclick=()=>{state.selectedTemplate=b.dataset.template;navigate();};b.onkeydown=e=>{if(e.key==='Enter')b.click();};});bind('render-template',async()=>{const content={type:'template',template:selected.id,data:JSON.parse($('#template-data').value),profile:$('#template-profile').value};if([...document.querySelectorAll('#template-fields textarea'),$('#template-data')].some(x=>!x.checkValidity())){toast(t('INVALID_REQUEST'));return;}const id=await accepted('/api/v1/render',content);$('#template-preview').textContent=t('previewLoading');const op=await waitOperation(id);state.templatePreview=op.result.asset_id;$('#template-preview').className='';$('#template-preview').innerHTML='<img id="template-image" class="preview" alt="Template preview">';await blobImage($('#template-image'),op.result.url);$('#display-template').disabled=!liveWriteAllowed();});bind('save-template',async()=>{await api('/api/v1/templates/'+selected.id+'/config',{method:'PUT',body:{data:JSON.parse($('#template-data').value)}});toast(t('done'));});$('#template-data').oninput=()=>$('#display-template').disabled=true;$('#template-profile').onchange=()=>$('#display-template').disabled=true;bind('display-template',()=>accepted('/api/v1/display',{device_id:state.device,content:{type:'image',asset_id:state.templatePreview}}));await templateEditor(selected);},
  async automation(epoch){const jobs=await api('/api/v1/jobs');if(epoch!==state.epoch)return;$('#main').innerHTML=notice()+`<div class="section-heading"><p class="hint">Asia/Shanghai · ${t('automation')}</p>${buttons('new-job','newJob',true)}</div><div class="card">${jobs.length?`<div class="table-wrap"><table><thead><tr>${['name','schedule','status','nextRun','lastRun','result','action'].map(x=>`<th>${t(x)}</th>`).join('')}</tr></thead><tbody>${jobs.map((j,i)=>`<tr><td><strong>${esc(j.name)}</strong><br><small>${esc(j.device_id)}</small></td><td>${t(j.schedule.type)}<br>${esc(j.schedule.time||j.schedule.cron||fmt(j.schedule.at))}</td><td><span class="badge">${t(j.enabled?'enabled':'disabled')}</span></td><td>${fmt(j.next_run)}</td><td>${fmt(j.last_run)}</td><td><code>${esc(j.last_result)}</code></td><td><div class="row-actions"><button data-job-edit="${i}">${t('edit')}</button><button data-job-toggle="${i}">${t(j.enabled?'disabled':'enabled')}</button><button class="danger" data-job-delete="${i}">${t('remove')}</button></div></td></tr>`).join('')}</tbody></table></div>`:`<div class="empty"><strong>${t('noTasks')}</strong></div>`}</div>`;bind('new-job',()=>jobEditor());document.querySelectorAll('[data-job-edit]').forEach(b=>b.onclick=()=>jobEditor(jobs[b.dataset.jobEdit]));document.querySelectorAll('[data-job-toggle]').forEach(b=>b.onclick=busy(async()=>{const j=jobs[b.dataset.jobToggle];await api('/api/v1/jobs/'+j.id,{method:'PUT',body:jobPayload(j,{enabled:!j.enabled})});await navigate();}));document.querySelectorAll('[data-job-delete]').forEach(b=>b.onclick=()=>confirmDialog(t('removeConfirm'),async()=>{await api('/api/v1/jobs/'+jobs[b.dataset.jobDelete].id,{method:'DELETE'});await navigate();}));},
  async playlists(epoch){const playlists=await api('/api/v1/playlists');if(epoch!==state.epoch)return;$('#main').innerHTML=notice()+`<div class="notice">${t('playlistNotice')}</div><div class="section-heading"><h2>${t('playlists')}</h2>${buttons('new-playlist','newPlaylist',true)}</div><div class="gallery">${playlists.map((p,i)=>`<section class="card"><span class="badge">${t(p.enabled?'enabled':'disabled')}</span><h3 style="margin-top:16px">${esc(p.name)}</h3><p class="hint">${p.image_ids.length} ${t('count')} · ${p.interval_minutes} ${t('minutes')} · ${t(p.mode)}</p><p><code>${esc(p.image_ids.join(' → '))}</code></p><small>${t('lastScheduled')}: ${p.position>=0?esc(p.image_ids[p.position]):'—'}</small><div class="actions" style="margin-top:16px"><button data-pl-edit="${i}">${t('edit')}</button><button class="danger" data-pl-delete="${i}">${t('remove')}</button></div></section>`).join('')||`<div class="card empty"><strong>${t('noTasks')}</strong></div>`}</div>`;bind('new-playlist',()=>playlistEditor());document.querySelectorAll('[data-pl-edit]').forEach(b=>b.onclick=()=>playlistEditor(playlists[b.dataset.plEdit]));document.querySelectorAll('[data-pl-delete]').forEach(b=>b.onclick=()=>confirmDialog(t('removeConfirm'),async()=>{await api('/api/v1/playlists/'+playlists[b.dataset.plDelete].id,{method:'DELETE'});await navigate();}));},
  async history(epoch){const ops=await api('/api/v1/operations');if(epoch!==state.epoch)return;$('#main').innerHTML=`<div class="section-heading"><h2>${t('history')}</h2>${buttons('history-refresh','refresh')}</div>${ops.some(x=>x.status==='UNKNOWN')?`<div class="notice warning">${t('unknown')}</div>`:''}<div class="card table-wrap">${ops.length?`<table><thead><tr>${['created','action','status','result','client','requestId'].map(x=>`<th>${t(x)}</th>`).join('')}</tr></thead><tbody>${ops.map((o,i)=>`<tr><td>${fmt(o.created_at)}</td><td>${esc(o.action)}<br><small>${esc(o.device_id)}</small></td><td><span class="badge ${['FAILED','UNKNOWN'].includes(o.status)?'bad':''}">${t(o.status)}</span>${o.status==='UNKNOWN'?`<div><button data-reconcile="${i}">${t('reconcile')}</button></div>`:''}</td><td>${esc(o.result?.image_id||o.result?.asset_id||o.error?.code||'—')}</td><td>${esc(o.client_id)}</td><td><code>${esc(o.request_id)}<br>${esc(o.operation_id)}</code></td></tr>`).join('')}</tbody></table>`:`<div class="empty">${t('noHistory')}</div>`}</div>`;bind('history-refresh',()=>navigate());document.querySelectorAll('[data-reconcile]').forEach(b=>b.onclick=busy(async()=>{const o=ops[b.dataset.reconcile];const r=await api('/api/v1/operations/'+o.operation_id+'/reconcile',{method:'POST',body:{acknowledge:false}});showModal(`<h2>${t('reconcile')}</h2><p>${t('current')}: ${esc(r.current_image_id)}</p><p>${t('result')}: ${esc(r.expected_image_id)}</p><p class="hint">${t('unknown')}</p><div class="modal-actions">${buttons('modal-cancel','cancel')}${r.resolved?'':buttons('acknowledge','acknowledge')}</div>`);bind('acknowledge',async()=>{await api('/api/v1/operations/'+o.operation_id+'/reconcile',{method:'POST',body:{acknowledge:true}});$('#modal').close();await navigate();});}));},
- async settings(){state.settings=await api('/api/v1/settings');const s=state.settings;$('#main').innerHTML=notice()+`<div class="columns"><section class="card"><h3>${t('settings')}</h3><div class="field"><label for="theme-select">${t('theme')}</label><select id="theme-select">${['system','light','dark'].map(x=>`<option value="${x}" ${state.theme===x?'selected':''}>${t(x==='system'?'systemTheme':x)}</option>`).join('')}</select></div><div class="field"><label for="language-select">${t('language')}</label><select id="language-select"><option value="zh" ${state.lang==='zh'?'selected':''}>简体中文</option><option value="en" ${state.lang==='en'?'selected':''}>English</option></select></div><p class="hint">${t('tokenHint')}</p>${buttons('logout','logout')}</section><section class="card"><h3>${t('auth')}</h3><div class="detail-grid">${detail('version',s.version)}${detail('writeProtection',t(!s.write_enabled?'yes':'no'))}${detail('keyConfigured',t(s.api_key_configured?'yes':'no'))}${detail('timezone',s.timezone)}</div><p class="hint">${t('refreshInterval')}</p><a href="/docs" target="_blank" rel="noopener">${t('apiDocs')} →</a><p class="hint">GET /openapi.json · /api/v1</p></section></div>`;$('#theme-select').onchange=()=>{state.theme=$('#theme-select').value;localStorage.setItem('ff-theme',state.theme);applyTheme();};$('#language-select').onchange=()=>{state.lang=$('#language-select').value;localStorage.setItem('ff-language',state.lang);navigate();};bind('logout',()=>{forgetLogin();shell();login();});}
+ async settings(){state.settings=await api('/api/v1/settings');const s=state.settings;$('#main').innerHTML=notice()+`<div class="columns"><section class="card"><h3>${t('settings')}</h3><div class="field"><label for="theme-select">${t('theme')}</label><select id="theme-select">${['system','light','dark'].map(x=>`<option value="${x}" ${state.theme===x?'selected':''}>${t(x==='system'?'systemTheme':x)}</option>`).join('')}</select></div><div class="field"><label for="language-select">${t('language')}</label><select id="language-select"><option value="zh" ${state.lang==='zh'?'selected':''}>简体中文</option><option value="en" ${state.lang==='en'?'selected':''}>English</option></select></div><p class="hint">${t('tokenHint')}</p>${buttons('logout','logout')}</section><section class="card"><h3>${t('auth')}</h3><div class="detail-grid">${detail('version',s.version)}${detail('writeProtection',t(!s.write_enabled?'yes':'no'))}${detail('keyConfigured',t(s.api_key_configured?'yes':'no'))}${detail('timezone',s.timezone)}</div><p class="hint">${t('refreshInterval')}</p><a href="/docs" target="_blank" rel="noopener">${t('apiDocs')} →</a><p class="hint">GET /openapi.json · /api/v1</p></section></div>`;$('#theme-select').onchange=()=>{state.theme=$('#theme-select').value;localStorage.setItem('ff-theme',state.theme);applyTheme();};$('#language-select').onchange=()=>{state.lang=$('#language-select').value;localStorage.setItem('ff-language',state.lang);navigate();};bind('logout',async()=>{await api('/api/v1/auth/logout',{method:'POST'});forgetLogin();shell();login();});accountSettings();}
 };
 function jobPayload(j,changes={}){return {name:j.name,enabled:j.enabled,device_id:j.device_id,schedule:j.schedule,source:j.source,display_duration:j.display_duration,restore_previous:j.restore_previous,priority:j.priority,...changes};}
-function jobEditor(job){const j=job||{name:'',enabled:true,device_id:state.device,schedule:{type:'daily',time:'07:00'},source:{type:'template',template:'daily-dashboard',data:{}},display_duration:5400,restore_previous:true,priority:50};showModal(`<h2>${t(job?'edit':'newJob')}</h2><form id="job-form"><div class="field"><label for="job-name">${t('name')}</label><input id="job-name" required maxlength="120" value="${esc(j.name)}"></div><div class="form-grid"><div class="field"><label for="job-schedule">${t('schedule')}</label><select id="job-schedule">${['daily','weekdays','weekends','cron','date','temporary'].map(x=>`<option ${j.schedule.type===x?'selected':''} value="${x}">${t(x)}</option>`).join('')}</select></div><div class="field"><label id="schedule-label" for="schedule-value">${t('time')}</label><input id="schedule-value" required value="${esc(j.schedule.time||j.schedule.cron||(j.schedule.at?j.schedule.at.slice(0,16):'07:00'))}"></div></div><div class="field"><label for="job-source">${t('source')} (JSON)</label><textarea id="job-source">${esc(JSON.stringify(j.source,null,2))}</textarea></div><div class="form-grid"><div class="field"><label for="job-duration">${t('duration')}</label><input id="job-duration" type="number" min="0" max="604800" value="${j.display_duration}"></div><div class="field"><label for="job-priority">${t('priority')}</label><input id="job-priority" type="number" min="0" max="100" value="${j.priority}"></div></div><label class="check-row"><input type="checkbox" id="job-enabled" ${j.enabled?'checked':''}>${t('enabled')}</label><label class="check-row"><input type="checkbox" id="job-restore" ${j.restore_previous?'checked':''}>${t('restoreAfter')}</label><div class="modal-actions">${buttons('modal-cancel','cancel')}<button type="submit" class="primary">${t('save')}</button></div></form>`);function update(){const type=$('#job-schedule').value;$('#schedule-label').textContent=t(type==='cron'?'cron':['date','temporary'].includes(type)?'at':'time');$('#schedule-value').type=type==='cron'?'text':['date','temporary'].includes(type)?'datetime-local':'time';}$('#job-schedule').onchange=()=>{update();$('#schedule-value').value='';};update();$('#job-form').onsubmit=busy(async e=>{e.preventDefault();const type=$('#job-schedule').value,value=$('#schedule-value').value;const schedule={type};if(type==='cron')schedule.cron=value;else if(['date','temporary'].includes(type))schedule.at=value+':00+08:00';else schedule.time=value;const payload=jobPayload(j,{name:$('#job-name').value,schedule,source:JSON.parse($('#job-source').value),display_duration:Number($('#job-duration').value),priority:Number($('#job-priority').value),restore_previous:$('#job-restore').checked,enabled:$('#job-enabled').checked});await api('/api/v1/jobs'+(job?'/'+job.id:''),{method:job?'PUT':'POST',body:payload});$('#modal').close();await navigate();});}
+function jobEditor(job){const j=job||{name:'',enabled:true,device_id:state.device,schedule:{type:'daily',time:'07:00'},source:{type:'template',template:'daily-dashboard',data:{}},display_duration:5400,restore_previous:true,priority:50};showModal(`<h2>${t(job?'edit':'newJob')}</h2><form id="job-form"><div class="field"><label for="job-name">${t('name')}</label><input id="job-name" required maxlength="120" value="${esc(j.name)}"></div><div class="form-grid"><div class="field"><label for="job-schedule">${t('schedule')}</label><select id="job-schedule">${['daily','weekdays','weekends','cron','date','temporary'].map(x=>`<option ${j.schedule.type===x?'selected':''} value="${x}">${t(x)}</option>`).join('')}</select></div><div class="field"><label id="schedule-label" for="schedule-value">${t('time')}</label><input id="schedule-value" required value="${esc(j.schedule.time||j.schedule.cron||(j.schedule.at?j.schedule.at.slice(0,16):'07:00'))}"></div></div><div class="field"><label for="job-source">${t('source')} (JSON)</label><textarea id="job-source">${esc(JSON.stringify(j.source,null,2))}</textarea></div><div class="form-grid"><div class="field"><label for="job-duration">${t('duration')}</label><input id="job-duration" type="number" min="0" max="604800" value="${j.display_duration}"></div><div class="field"><label for="job-priority">${t('priority')}</label><input id="job-priority" type="number" min="0" max="100" value="${j.priority}"></div></div><label class="check-row"><input type="checkbox" id="job-enabled" ${j.enabled?'checked':''}>${t('enabled')}</label><label class="check-row"><input type="checkbox" id="job-restore" ${j.restore_previous?'checked':''}>${t('restoreAfter')}</label><div class="modal-actions">${buttons('modal-cancel','cancel')}<button type="submit" class="primary">${t('save')}</button></div></form>`);const source=$('#job-source');const choose=document.createElement('div');choose.className='field';choose.innerHTML=`<label for="job-template">${t('template')}</label><select id="job-template"><option value="">${t('advanced')}</option>${state.templates.map(x=>`<option value="${esc(x.id)}" ${j.source.template===x.id?'selected':''}>${esc(x.name)}</option>`).join('')}</select>`;source.parentElement.before(choose);$('#job-template').onchange=()=>{const id=$('#job-template').value;if(id)source.value=JSON.stringify({type:'template',template:id,data:{}},null,2);};function update(){const type=$('#job-schedule').value;$('#schedule-label').textContent=t(type==='cron'?'cron':['date','temporary'].includes(type)?'at':'time');$('#schedule-value').type=type==='cron'?'text':['date','temporary'].includes(type)?'datetime-local':'time';}$('#job-schedule').onchange=()=>{update();$('#schedule-value').value='';};update();$('#job-form').onsubmit=busy(async e=>{e.preventDefault();const type=$('#job-schedule').value,value=$('#schedule-value').value;const schedule={type};if(type==='cron')schedule.cron=value;else if(['date','temporary'].includes(type))schedule.at=value+':00+08:00';else schedule.time=value;const payload=jobPayload(j,{name:$('#job-name').value,schedule,source:JSON.parse($('#job-source').value),display_duration:Number($('#job-duration').value),priority:Number($('#job-priority').value),restore_previous:$('#job-restore').checked,enabled:$('#job-enabled').checked});await api('/api/v1/jobs'+(job?'/'+job.id:''),{method:job?'PUT':'POST',body:payload});$('#modal').close();await navigate();});}
 function playlistEditor(p){p=p||{name:'',image_ids:[],interval_minutes:60,mode:'queue',enabled:false};showModal(`<h2>${t('playlists')}</h2><form id="playlist-form"><div class="field"><label for="playlist-name">${t('name')}</label><input id="playlist-name" required maxlength="120" value="${esc(p.name)}"></div><div class="field"><label for="playlist-images">${t('imageIds')}</label><input id="playlist-images" required value="${esc(p.image_ids.join(','))}" placeholder="1,2,3"></div><div class="form-grid"><div class="field"><label for="playlist-interval">${t('interval')}</label><input id="playlist-interval" type="number" min="5" max="10080" value="${p.interval_minutes}"></div><div class="field"><label for="playlist-mode">${t('mode')}</label><select id="playlist-mode"><option value="queue" ${p.mode==='queue'?'selected':''}>${t('queue')}</option><option value="random" ${p.mode==='random'?'selected':''}>${t('random')}</option></select></div></div><label class="check-row"><input id="playlist-enabled" type="checkbox" ${p.enabled?'checked':''}>${t('enabled')}</label><div class="modal-actions">${buttons('modal-cancel','cancel')}<button type="submit" class="primary">${t('save')}</button></div></form>`);$('#playlist-form').onsubmit=busy(async e=>{e.preventDefault();await api('/api/v1/playlists'+(p.id?'/'+p.id:''),{method:p.id?'PUT':'POST',body:{name:$('#playlist-name').value,device_id:p.device_id||state.device,image_ids:$('#playlist-images').value.split(',').map(x=>Number(x.trim())),interval_minutes:Number($('#playlist-interval').value),mode:$('#playlist-mode').value,enabled:$('#playlist-enabled').checked}});$('#modal').close();await navigate();});}
 $('#lang').onclick=()=>{state.lang=state.lang==='zh'?'en':'zh';localStorage.setItem('ff-language',state.lang);navigate();};$('#theme').onclick=()=>{state.theme=document.documentElement.dataset.theme==='dark'?'light':'dark';localStorage.setItem('ff-theme',state.theme);applyTheme();};$('#device').onchange=()=>{state.device=$('#device').value;navigate();};window.addEventListener('hashchange',()=>{const page=location.hash.slice(1);if(page!==state.page)navigate(page);});matchMedia('(prefers-color-scheme:dark)').addEventListener('change',applyTheme);
-applyTheme();(async()=>{if(state.token){try{await loadConnection();}catch(error){forgetLogin();toast(error.message);}}await navigate();})();api('/api/v1/version').then(v=>$('#footer').innerHTML=`<span>Pigway Frame Flow · ${t('footer')}</span><span>v${esc(v.version)} · ${esc(v.commit.slice(0,8))} · ${esc(v.build_time)}</span>`).catch(()=>{});
+applyTheme();localStorage.removeItem('ff-login');(async()=>{try{const account=await api('/api/v1/auth/me');state.token=account.username;state.csrf=account.csrf_token;await loadConnection();}catch{forgetLogin();}await navigate();})();api('/api/v1/version').then(v=>$('#footer').innerHTML=`<span>Pigway Frame Flow · ${t('footer')}</span><span>v${esc(v.version)} · ${esc(v.commit.slice(0,8))} · ${esc(v.build_time)}</span>`).catch(()=>{});
 setInterval(()=>{if(state.token&&state.page==='dashboard'&&!$('#modal').open)navigate();},60000);

scripts/create-account.py

@@ -0,0 +1,27 @@
+"""Create private bootstrap account hashes without storing a password."""
+
+import argparse
+import getpass
+import json
+import sys
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+from pigway_frame_flow.core.accounts import password_hash  # noqa: E402
+
+parser = argparse.ArgumentParser()
+parser.add_argument("--username", required=True)
+parser.add_argument("--config-dir", type=Path, default=Path("config"))
+args = parser.parse_args()
+password = getpass.getpass("Password (minimum 8 characters): ")
+if len(password) < 8 or password != getpass.getpass("Confirm password: "):
+    sys.exit("Password too short or confirmation mismatch")
+args.config_dir.mkdir(parents=True, exist_ok=True)
+path = args.config_dir / "accounts.json"
+users = json.loads(path.read_text()).get("users", []) if path.exists() else []
+if any(u["username"] == args.username for u in users):
+    sys.exit("Bootstrap user already exists. Change the password in Settings.")
+users.append({"username": args.username, "password_hash": password_hash(password)})
+path.write_text(json.dumps({"users": users}) + "\n")
+path.chmod(0o600)
+print("Bootstrap hash saved. Restart the service to seed the account.")

scripts/ui-smoke.cjs

@@ -5,7 +5,7 @@ const fs=require('fs');const path=require('path');const assert=require('assert')
  const base=process.env.FRAME_FLOW_URL||'http://127.0.0.1:18787';const response=await fetch(base+'/api/v1/settings',{headers:{Authorization:'Bearer '+token}});const settings=await response.json();assert(settings.mock===true,'UI smoke requires Mock mode');
  const browser=await chromium.launch({headless:true,executablePath:'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'});
  const context=await browser.newContext({viewport:{width:1440,height:1000}});const page=await context.newPage();const errors=[];page.on('pageerror',e=>errors.push(e.message.replaceAll(token,'[REDACTED]')));let checks=0;
- await page.addInitScript(()=>Object.defineProperty(window.crypto,'randomUUID',{value:undefined,configurable:true}));await page.goto(base);await page.locator('#api-token').fill(token);await page.locator('#login-form button').click();await page.locator('.hero').waitFor();assert(await page.locator('h2').first().innerText()==='客厅相框');checks++;
+ await page.addInitScript(()=>Object.defineProperty(window.crypto,'randomUUID',{value:undefined,configurable:true}));await page.goto(base);await page.locator('#username').fill(process.env.FRAME_FLOW_TEST_USERNAME);await page.locator('#password').fill(process.env.FRAME_FLOW_TEST_PASSWORD);await page.locator('#login-form button').click();await page.locator('.hero').waitFor();assert(await page.locator('h2').first().innerText()==='客厅相框');checks++;
  const shots=process.env.FRAME_FLOW_SCREENSHOT_DIR||path.join(root,'docs/screenshots');fs.mkdirSync(shots,{recursive:true});await page.screenshot({path:path.join(shots,'dashboard-light-zh.png'),fullPage:true});
  await page.locator('#lang').click();await page.getByRole('heading',{name:'Dashboard',exact:true}).waitFor();checks++;
  await page.locator('#theme').click();assert(await page.locator('html').getAttribute('data-theme')==='dark');checks++;
@@ -18,7 +18,7 @@ const fs=require('fs');const path=require('path');const assert=require('assert')
  await uploaded.locator('[data-delete]').click();await page.locator('#modal-confirm').click();await uploaded.waitFor({state:'hidden'});checks++;
  await page.locator('[data-page="templates"]').click();await page.locator('.template-card').first().waitFor();assert(await page.locator('.template-card').count()===6);checks++;
  await page.locator('#render-template').click();await page.locator('#template-image').waitFor({timeout:30000});assert(await page.locator('#display-template').isEnabled());checks++;
- await page.locator('#display-template').click();await page.locator('[data-page="history"]').click();await page.locator('tbody tr').first().waitFor();checks++;
+ await page.locator('#field-title').fill('Edited title');assert(await page.locator('#display-template').isDisabled());checks++;await page.locator('#save-template').click();await page.reload();await page.locator('#field-title').waitFor();assert(await page.locator('#field-title').inputValue()==='Edited title');checks++;await page.locator('#reset-template').click();await page.locator('#modal-confirm').click();await page.waitForFunction(()=>document.querySelector('#field-title')?.value!=='Edited title'&&document.querySelector('#field-title'));assert(await page.locator('#field-title').inputValue()!=='Edited title');checks++;await page.locator('#render-template').click();await page.locator('#template-image').waitFor();await page.locator('#display-template').click();await page.locator('[data-page="history"]').click();await page.locator('tbody tr').first().waitFor();checks++;
  await page.locator('[data-page="automation"]').click();await page.locator('#new-job').click();await page.locator('#job-name').fill('UI acceptance');await page.locator('#job-form button[type=submit]').click();await page.locator('td strong').filter({hasText:'UI acceptance'}).waitFor();checks++;
  await page.locator('[data-job-toggle]').first().click();await page.getByText('Paused',{exact:true}).first().waitFor();checks++;
  await page.locator('[data-job-delete]').first().click();await page.locator('#modal-confirm').click();await page.locator('td strong').filter({hasText:'UI acceptance'}).waitFor({state:'hidden'});checks++;
@@ -31,9 +31,8 @@ const fs=require('fs');const path=require('path');const assert=require('assert')
  await page.reload();await page.locator('.hero').waitFor();checks++;
  const reopened=await page.context().newPage();await reopened.goto(base);await reopened.locator('.hero').waitFor();await reopened.close();checks++;
  await page.locator('[data-page="settings"]').click();await page.locator('#logout').click();await page.locator('#login-form').waitFor();assert(await page.evaluate(()=>localStorage.getItem('ff-login')===null));checks++;
- await page.locator('#remember-login').uncheck();await page.locator('#api-token').fill(token);await page.locator('#login-form button').click();await page.locator('#logout').waitFor();await page.reload();await page.locator('#login-form').waitFor();checks++;
+ await page.locator('#remember-login').uncheck();await page.locator('#username').fill(process.env.FRAME_FLOW_TEST_USERNAME);await page.locator('#password').fill(process.env.FRAME_FLOW_TEST_PASSWORD);await page.locator('#login-form button').click();await page.locator('#logout').waitFor();await page.reload();await page.locator('#logout').waitFor();assert((await context.cookies()).find(c=>c.name==='frameflow_session').expires===-1);checks++;
- await page.evaluate(token=>localStorage.setItem('ff-login',JSON.stringify({token,expires_at:Date.now()-1})),token);await page.reload();await page.locator('#login-form').waitFor();assert(await page.evaluate(()=>localStorage.getItem('ff-login')===null));checks++;
+ assert(await page.evaluate(()=>!document.cookie.includes('frameflow_session')));checks++;
- await page.evaluate(()=>localStorage.setItem('ff-login',JSON.stringify({token:'test-invalid-frame-flow-token',expires_at:Date.now()+60000})));await page.reload();await page.locator('#login-form').waitFor();assert(await page.evaluate(()=>localStorage.getItem('ff-login')===null));checks++;
  assert(errors.length===0,JSON.stringify(errors));checks++;
  await browser.close();console.log('Browser smoke:',checks,'passed; page errors:',errors.length);
 })().catch(error=>{console.error(error.message);process.exit(1)});

tests/contract.json

@@ -1,4 +1,68 @@
 {
+  "/api/v1/auth/login": {
+    "post": [
+      "200",
+      "400",
+      "401",
+      "403",
+      "404",
+      "409",
+      "413",
+      "422",
+      "429",
+      "500",
+      "502",
+      "503"
+    ]
+  },
+  "/api/v1/auth/me": {
+    "get": [
+      "200",
+      "400",
+      "401",
+      "403",
+      "404",
+      "409",
+      "413",
+      "422",
+      "429",
+      "500",
+      "502",
+      "503"
+    ]
+  },
+  "/api/v1/auth/logout": {
+    "post": [
+      "204",
+      "400",
+      "401",
+      "403",
+      "404",
+      "409",
+      "413",
+      "422",
+      "429",
+      "500",
+      "502",
+      "503"
+    ]
+  },
+  "/api/v1/auth/password": {
+    "put": [
+      "204",
+      "400",
+      "401",
+      "403",
+      "404",
+      "409",
+      "413",
+      "422",
+      "429",
+      "500",
+      "502",
+      "503"
+    ]
+  },
   "/health": {
     "get": [
       "200",
@@ -379,6 +443,20 @@
       "500",
       "502",
       "503"
+    ],
+    "delete": [
+      "204",
+      "400",
+      "401",
+      "403",
+      "404",
+      "409",
+      "413",
+      "422",
+      "429",
+      "500",
+      "502",
+      "503"
     ]
   },
   "/api/v1/jobs": {

tests/test_accounts.py

@@ -0,0 +1,117 @@
+import hashlib
+import time
+
+from pigway_frame_flow.core.accounts import password_hash
+
+
+def account(app):
+    app.state.service.db.execute(
+        "INSERT INTO users VALUES(?,?,1)",
+        ("test-user", password_hash("fixture-password")),
+    )
+
+
+def login(client, app, remember=True):
+    account(app)
+    client.headers.pop("Authorization", None)
+    return client.post(
+        "/api/v1/auth/login",
+        json={
+            "username": "test-user",
+            "password": "fixture-password",
+            "remember": remember,
+        },
+    )
+
+
+def test_session_login_and_csrf(client, app):
+    response = login(client, app)
+    assert response.status_code == 200
+    assert "HttpOnly" in response.headers["set-cookie"]
+    assert "SameSite=strict" in response.headers["set-cookie"]
+    assert client.get("/api/v1/devices").status_code == 200
+    assert client.post("/api/v1/jobs", json={}).status_code == 403
+    assert client.get("/api/v1/auth/me").json()["username"] == "test-user"
+    client.headers["X-CSRF-Token"] = response.json()["csrf_token"]
+    assert client.post("/api/v1/auth/logout").status_code == 204
+    assert client.get("/api/v1/devices").status_code == 401
+
+
+def test_password_change_revokes_sessions(client, app):
+    response = login(client, app)
+    client.headers["X-CSRF-Token"] = response.json()["csrf_token"]
+    assert (
+        client.put(
+            "/api/v1/auth/password",
+            json={"current_password": "wrong", "new_password": "replacement-password"},
+        ).status_code
+        == 401
+    )
+    assert (
+        client.put(
+            "/api/v1/auth/password",
+            json={
+                "current_password": "fixture-password",
+                "new_password": "replacement-password",
+            },
+        ).status_code
+        == 204
+    )
+    assert client.get("/api/v1/auth/me").status_code == 401
+    assert (
+        client.post(
+            "/api/v1/auth/login",
+            json={"username": "test-user", "password": "replacement-password"},
+        ).status_code
+        == 200
+    )
+
+
+def test_login_rate_limit(client, app):
+    account(app)
+    for _ in range(5):
+        assert (
+            client.post(
+                "/api/v1/auth/login",
+                json={"username": "test-user", "password": "wrong"},
+            ).status_code
+            == 401
+        )
+    assert (
+        client.post(
+            "/api/v1/auth/login",
+            json={"username": "test-user", "password": "fixture-password"},
+        ).status_code
+        == 429
+    )
+
+
+def test_session_expiry_and_no_plaintext(client, app):
+    response = login(client, app, False)
+    assert "Max-Age" not in response.headers["set-cookie"]
+    raw = client.cookies.get("frameflow_session")
+    row = app.state.service.db.one("SELECT * FROM sessions")
+    assert row["token_hash"] == hashlib.sha256(raw.encode()).hexdigest()
+    app.state.service.db.execute("UPDATE sessions SET expires_at=?", (time.time() - 1,))
+    assert client.get("/api/v1/auth/me").status_code == 401
+    assert "fixture-password" not in str(
+        app.state.service.db.one("SELECT * FROM users")
+    )
+
+
+def test_reset_template(client):
+    assert (
+        client.put(
+            "/api/v1/templates/quote/config", json={"data": {"title": "Saved title"}}
+        ).status_code
+        == 200
+    )
+    assert (
+        client.get("/api/v1/templates/quote").json()["defaults"]["title"]
+        == "Saved title"
+    )
+    assert client.delete("/api/v1/templates/quote/config").status_code == 204
+    assert (
+        client.get("/api/v1/templates/quote").json()["defaults"]["title"]
+        != "Saved title"
+    )