football2801
a302ac09b4
CI / test (push) Has been cancelled
Lets users opt into the new atmospheric design without affecting users on v1.
Adds a beta-flag toggle in Settings → Design. Server-side preference persists
across devices; a cookie mirrors it so unauthenticated Twig pages do correct
first-paint without an extra DB roundtrip.
Backend:
- User.designVersion column (nullable VARCHAR(10); null defaults to 'v1')
- Migration Version20260515120000
- PATCH /api/user/design endpoint accepting 'v1'|'v2', sets wevisto_design cookie
- SpaController injects data-design on <html> + refreshes the cookie on every
SPA load (keeps cross-device pref in sync)
- Twig templates (base, login, register, help, setup, token-*) read the
cookie via {{ app.request.cookies.get('wevisto_design')|default('v1') }}
so login/setup pages also respect the user's design choice
Frontend:
- design-v2.scss — opt-in overlay scoped under [data-design="v2"]. Overrides
--color-* tokens to dusk variants per theme (warm-craft → amber, ocean-dusk
stays, etc.), adds harbor photo backdrop via body::before with theme tint
via body::after. Glass-card blur on existing surfaces. v1 untouched.
- harbor.jpg shipped as a public asset (270KB, single-fetch, cached)
- User type gains designVersion ('v1' | 'v2')
- SettingsView toggle (Original / Atmospheric) calls the API, updates the
data-design attribute optimistically, reverts on failure
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 line
8.5 KiB
JavaScript
1 line
8.5 KiB
JavaScript
import{C as e,F as t,J as n,K as r,N as i,U as a,V as o,Y as s,f as c,g as l,h as u,p as ee,q as d,t as f,u as p,v as m,x as h,y as g}from"./_plugin-vue_export-helper-BNDVmFr7.js";import{n as te,r as ne,t as re}from"./index-C81kpUpa.js";var _=a(null),v=a(!1);function y(){return typeof window>`u`?!1:window.matchMedia?.(`(display-mode: standalone)`).matches?!0:window.navigator.standalone===!0}function b(){if(typeof navigator>`u`)return!1;let e=navigator.userAgent,t=e.includes(`Mac`)&&navigator.maxTouchPoints>1;return/iPhone|iPod/.test(e)||t}var x=!1;function S(){x||typeof window>`u`||(x=!0,v.value=y(),window.addEventListener(`beforeinstallprompt`,e=>{e.preventDefault(),_.value=e}),window.addEventListener(`appinstalled`,()=>{_.value=null,v.value=!0}),window.matchMedia?.(`(display-mode: standalone)`).addEventListener(`change`,e=>{v.value=e.matches}))}S();function ie(){let e=b(),t=u(()=>_.value!==null);async function n(){let e=_.value;if(!e)return!1;await e.prompt();let t=await e.userChoice;return _.value=null,t.outcome===`accepted`}return{isStandalone:v,isIOS:e,canPromptInstall:t,install:n}}var ae={class:`settings`},oe={key:0,class:`settings__section`},se={class:`settings__section`},ce={class:`design-toggle`,role:`radiogroup`,"aria-label":`Design version`},le=[`aria-checked`],ue=[`aria-checked`],de={class:`settings__section`},fe={class:`theme-grid`,role:`radiogroup`,"aria-label":`Choose theme`},C=[`aria-checked`,`aria-label`,`onClick`],w={class:`theme-swatch__label`},T={key:0,class:`theme-swatch__check`,"aria-hidden":`true`},E={class:`settings__section`},D={class:`settings__row`},O={class:`settings__row-value`},k={class:`install-modal__card`},A={class:`pw-form__field`},j={class:`pw-form__field`},M={class:`pw-form__field`},N=[`aria-invalid`],P={key:0,class:`pw-form__error`},F={key:0,class:`pw-form__error`,role:`alert`},I={key:1,class:`pw-form__success`,role:`status`},L=[`disabled`],R={class:`install-modal__card`},pe={id:`install-modal-title`,class:`install-modal__title`},z={class:`install-modal__steps`},B={key:0},me={key:1},he={key:0},V=f(e({__name:`SettingsView`,setup(e){let f=ne(),{saveTheme:_}=te(),{isStandalone:v,isIOS:y,canPromptInstall:b,install:x}=ie(),S=u(()=>f.user?.theme??`warm-craft`),V=u(()=>f.user?.designVersion??`v1`),H=a(!1);function ge(e){_(e)}async function U(e){if(V.value===e)return;let t=V.value;f.user&&(f.user.designVersion=e),document.documentElement.setAttribute(`data-design`,e);try{if(!(await fetch(`/api/user/design`,{method:`PATCH`,headers:{"Content-Type":`application/json`},body:JSON.stringify({designVersion:e})})).ok)throw Error(`save failed`)}catch{f.user&&(f.user.designVersion=t),document.documentElement.setAttribute(`data-design`,t)}}async function W(){!await x()&&!b.value&&(H.value=!0)}let G=a(!1),K=a(``),q=a(``),J=a(``),Y=a(!1),X=a(null),Z=a(!1),Q=u(()=>J.value.length>0&&J.value!==q.value);function _e(){K.value=``,q.value=``,J.value=``,X.value=null,Z.value=!1,Y.value=!1}function $(){G.value=!1,_e()}async function ve(){if(!Q.value){X.value=null,Z.value=!1,Y.value=!0;try{let e=await fetch(`/api/user/password`,{method:`PATCH`,headers:{"Content-Type":`application/json`},body:JSON.stringify({currentPassword:K.value,newPassword:q.value})});if(e.status===204){Z.value=!0,K.value=``,q.value=``,J.value=``,setTimeout($,1500);return}X.value=(await e.json().catch(()=>({})))?.error??`Could not update password.`}catch{X.value=`Network error. Try again.`}finally{Y.value=!1}}}return(e,a)=>(i(),g(`main`,ae,[a[33]||=l(`h1`,{class:`settings__title`},`Settings`,-1),r(v)?m(``,!0):(i(),g(`section`,oe,[a[9]||=l(`h2`,{class:`settings__section-title`},`Install app`,-1),a[10]||=l(`p`,{class:`settings__hint`},` Pin WeVisto to your home screen so it opens like a native app. `,-1),r(b)?(i(),g(`button`,{key:0,type:`button`,class:`settings__install`,onClick:W},` Install WeVisto `)):(i(),g(`button`,{key:1,type:`button`,class:`settings__install`,onClick:a[0]||=e=>H.value=!0},` Add to Home Screen `))])),l(`section`,se,[a[13]||=l(`h2`,{class:`settings__section-title`},`Design (beta)`,-1),a[14]||=l(`p`,{class:`settings__hint`},` Try the new atmospheric look. Your theme picks below still apply — v2 just renders them as dusks over a Camogli harbor backdrop. `,-1),l(`div`,ce,[l(`button`,{type:`button`,role:`radio`,"aria-checked":V.value===`v1`,class:d([`design-toggle__opt`,{"design-toggle__opt--active":V.value===`v1`}]),onClick:a[1]||=e=>U(`v1`)},[...a[11]||=[l(`span`,{class:`design-toggle__label`},`Original`,-1),l(`span`,{class:`design-toggle__sub`},`cream & terracotta`,-1)]],10,le),l(`button`,{type:`button`,role:`radio`,"aria-checked":V.value===`v2`,class:d([`design-toggle__opt`,{"design-toggle__opt--active":V.value===`v2`}]),onClick:a[2]||=e=>U(`v2`)},[...a[12]||=[l(`span`,{class:`design-toggle__label`},`Atmospheric`,-1),l(`span`,{class:`design-toggle__sub`},`harbor dusks · beta`,-1)]],10,ue)])]),l(`section`,de,[a[16]||=l(`h2`,{class:`settings__section-title`},`Theme`,-1),l(`div`,fe,[(i(!0),g(ee,null,t(r(re),e=>(i(),g(`button`,{key:e.id,type:`button`,role:`radio`,"aria-checked":S.value===e.id,"aria-label":e.label,class:d([`theme-swatch`,{"theme-swatch--active":S.value===e.id}]),style:n({"--swatch-bg":e.bg,"--swatch-primary":e.primary,"--swatch-text":e.text}),onClick:t=>ge(e.id)},[a[15]||=l(`span`,{class:`theme-swatch__preview`,"aria-hidden":`true`},[l(`span`,{class:`theme-swatch__bar`}),l(`span`,{class:`theme-swatch__dot`})],-1),l(`span`,w,s(e.label),1),S.value===e.id?(i(),g(`span`,T,`✓`)):m(``,!0)],14,C))),128))])]),l(`section`,E,[a[18]||=l(`h2`,{class:`settings__section-title`},`Account`,-1),l(`div`,D,[a[17]||=l(`span`,{class:`settings__row-label`},`Signed in as`,-1),l(`span`,O,s(r(f).user?.email),1)]),l(`button`,{type:`button`,class:`settings__action-link`,onClick:a[3]||=e=>G.value=!0},` Change password `),a[19]||=l(`a`,{href:`/logout`,class:`settings__logout`},`Sign out`,-1)]),G.value?(i(),g(`div`,{key:1,class:`install-modal`,role:`dialog`,"aria-modal":`true`,"aria-labelledby":`pw-modal-title`,onClick:c($,[`self`])},[l(`div`,k,[l(`button`,{type:`button`,class:`install-modal__close`,"aria-label":`Close`,onClick:$},`×`),a[24]||=l(`h2`,{id:`pw-modal-title`,class:`install-modal__title`},`Change password`,-1),l(`form`,{class:`pw-form`,onSubmit:c(ve,[`prevent`])},[l(`label`,A,[a[20]||=l(`span`,{class:`pw-form__label`},`Current password`,-1),o(l(`input`,{"onUpdate:modelValue":a[4]||=e=>K.value=e,type:`password`,autocomplete:`current-password`,required:``,class:`pw-form__input`},null,512),[[p,K.value]])]),l(`label`,j,[a[21]||=l(`span`,{class:`pw-form__label`},`New password`,-1),o(l(`input`,{"onUpdate:modelValue":a[5]||=e=>q.value=e,type:`password`,autocomplete:`new-password`,minlength:`8`,required:``,class:`pw-form__input`},null,512),[[p,q.value]]),a[22]||=l(`span`,{class:`pw-form__hint`},`At least 8 characters.`,-1)]),l(`label`,M,[a[23]||=l(`span`,{class:`pw-form__label`},`Confirm new password`,-1),o(l(`input`,{"onUpdate:modelValue":a[6]||=e=>J.value=e,type:`password`,autocomplete:`new-password`,required:``,class:`pw-form__input`,"aria-invalid":Q.value?`true`:`false`},null,8,N),[[p,J.value]]),Q.value?(i(),g(`span`,P,`Passwords don't match.`)):m(``,!0)]),X.value?(i(),g(`p`,F,s(X.value),1)):m(``,!0),Z.value?(i(),g(`p`,I,`Password updated.`)):m(``,!0),l(`button`,{type:`submit`,class:`settings__install`,disabled:Y.value||Q.value||!K.value||!q.value},s(Y.value?`Saving…`:`Update password`),9,L)],32)])])):m(``,!0),H.value?(i(),g(`div`,{key:2,class:`install-modal`,role:`dialog`,"aria-modal":`true`,"aria-labelledby":`install-modal-title`,onClick:a[8]||=c(e=>H.value=!1,[`self`])},[l(`div`,R,[l(`button`,{type:`button`,class:`install-modal__close`,"aria-label":`Close`,onClick:a[7]||=e=>H.value=!1},`×`),l(`h2`,pe,s(r(y)?`Add to your iPhone home screen`:`Add to your home screen`),1),l(`ol`,z,[r(y)?(i(),g(`li`,B,[...a[25]||=[h(` Tap the `,-1),l(`strong`,null,`Share`,-1),h(` icon at the bottom of Safari (the square with an up-arrow). `,-1)]])):(i(),g(`li`,me,[...a[26]||=[h(` Open your browser's menu (usually the three dots `,-1),l(`strong`,null,`⋮`,-1),h(` in the top right). `,-1)]])),l(`li`,null,[a[28]||=h(` Scroll down and tap `,-1),a[29]||=l(`strong`,null,`Add to Home Screen`,-1),r(y)?m(``,!0):(i(),g(`span`,he,[...a[27]||=[h(`or `,-1),l(`strong`,null,`Install app`,-1)]])),a[30]||=h(`. `,-1)]),a[31]||=l(`li`,null,[h(` Tap `),l(`strong`,null,`Add`),h(` in the top right to confirm. `)],-1)]),a[32]||=l(`p`,{class:`install-modal__footer`},` The app will appear on your home screen. Open it from there and it runs like a regular app — no address bar, no tabs. `,-1)])])):m(``,!0)]))}}),[[`__scopeId`,`data-v-b97700d6`]]);export{V as default}; |