@live-change/db-admin 0.5.6

package/e2e/signUpEmailCode.test.js

@@ -0,0 +1,41 @@
+const randomProfile = require('random-profile-generator')
+
+const user = randomProfile.profile()
+user.email = user.firstName.toLowerCase() + '@test.com' // test domain - emails not sent
+
+const happyPath = false
+
+Feature('user')
+
+Scenario('sign up with email code', async ({ I }) => {
+
+  I.amOnPage('/sign-up')
+  I.fillField('input#email', user.email)
+  I.click('button[type=submit]')
+
+  I.seeInCurrentUrl('/sent/')
+  const url = await I.grabCurrentUrl()
+  const authentication = url.split('/').pop()
+
+  const authenticationData = await I.grabObject('messageAuthentication', 'Authentication', authentication)
+  console.log("AUTHENTICATION DATA", authenticationData)
+  I.assert(!!authenticationData, true, 'authentication created')
+
+  await I.useSecretCode(authentication, happyPath)
+
+  I.seeInCurrentUrl('/sign-up-finished')
+  const clientSession = await I.executeScript(() => api.client.value.session)
+  const AuthenticatedUser = await I.haveModel('user', 'AuthenticatedUser')
+  const authenticatedUserData = await AuthenticatedUser.get(clientSession)
+  I.assert(!!authenticatedUserData, true, 'user authenticated server-side')
+  const clientUser = await I.executeScript(() => api.client.value.user)
+  console.log("CLIENT USER", clientUser)
+  console.log("SERVER AUTHENTICATION", authenticatedUserData)
+  I.assert(clientUser, authenticatedUserData.user, 'user authenticated')
+
+  if(!happyPath) {
+    I.amOnPage(url)
+    I.seeInCurrentUrl('/sign-up-finished')
+  }
+
+})

package/e2e/signUpEmailLink.test.js

@@ -0,0 +1,41 @@
+const randomProfile = require('random-profile-generator')
+
+const user = randomProfile.profile()
+user.email = user.firstName.toLowerCase() + '@test.com' // test domain - emails not sent
+
+const happyPath = false
+
+Feature('user')
+
+Scenario('sign up with email link', async ({ I }) => {
+
+  I.amOnPage('/sign-up')
+  I.fillField('input#email', user.email)
+  I.click('button[type=submit]')
+
+  I.seeInCurrentUrl('/sent/')
+  const url = await I.grabCurrentUrl()
+  const authentication = url.split('/').pop()
+
+  const authenticationData = await I.grabObject('messageAuthentication', 'Authentication', authentication)
+  console.log("AUTHENTICATION DATA", authenticationData)
+  I.assert(!!authenticationData, true, 'authentication created')
+
+  const linkData = await I.useSecretLink(authentication, happyPath)
+
+  I.seeInCurrentUrl('/sign-up-finished')
+  const clientSession = await I.executeScript(() => api.client.value.session)
+  const AuthenticatedUser = await I.haveModel('user', 'AuthenticatedUser')
+  const authenticatedUserData = await AuthenticatedUser.get(clientSession)
+  I.assert(!!authenticatedUserData, true, 'user authenticated server-side')
+  const clientUser = await I.executeScript(() => api.client.value.user)
+  console.log("CLIENT USER", clientUser)
+  console.log("SERVER AUTHENTICATION", authenticatedUserData)
+  I.assert(clientUser, authenticatedUserData.user, 'user authenticated')
+
+  if(!happyPath) {
+    I.amOnPage('/link/' + linkData.secretCode)
+    I.see('Link used')
+  }
+
+})

package/e2e/steps.d.ts

@@ -0,0 +1,12 @@
+/// <reference types='codeceptjs' />
+// @ts-ignore
+type steps_file = typeof import('./steps_file.js');
+
+declare namespace CodeceptJS {
+  interface SupportObject { I: I, current: any }
+  interface Methods extends Playwright {}
+  interface I extends ReturnType<steps_file> {}
+  namespace Translation {
+    interface Actions {}
+  }
+}

package/e2e/steps_file.js

@@ -0,0 +1,85 @@
+// in this file you can append custom step methods to 'I' object
+
+module.exports = function() {
+  return actor({
+
+    async useSecretCode(authentication, happyPath) {
+      const I = this
+      const Code = await I.haveModel('secretCode', 'Code')
+      let codeData = await Code.indexObjectGet('byAuthentication', authentication)
+      console.log("CODE DATA", codeData)
+      I.assert(!!codeData, true, 'code created')
+
+      if(!happyPath) {
+        const wrongCode = codeData.secretCode == '123456' ? '654321' : '123456'
+        I.fillField('input#code', wrongCode)
+        I.fillField('input#code', wrongCode) /// twice because it can fail once with this type of field
+        I.click('button[type=submit]')
+        I.seeElement('#code-help.p-error')
+      }
+
+      if(!happyPath) {
+        await I.wait(0.2)
+        await Code.update(codeData.id, { expire: new Date() }) // expire now
+        I.fillField('input#code', codeData.secretCode)
+        I.fillField('input#code', codeData.secretCode) /// twice because it can fail once with this type of field
+        I.click('button[type=submit]')
+        I.seeElement('#code-help.p-error')
+
+        I.click('Resend')
+        I.seeInCurrentUrl('/sent/')
+
+        await I.wait(0.2)
+        const newCodeData = await Code.indexRangeGet('byAuthentication', authentication)
+        newCodeData.sort((a,b) => new Date(b.expire).getTime() - new Date(a.expire).getTime())
+        const oldCodeData = codeData
+        codeData = newCodeData[0]
+        I.assert(!!codeData, true, 'code exists')
+        I.assert(oldCodeData.id != codeData.id, true, 'code is different from previous code')
+      }
+
+      I.fillField('input#code', codeData.secretCode)
+      I.fillField('input#code', codeData.secretCode) /// twice because it can fail once with this type of field
+      I.click('button[type=submit]')
+      await I.wait(0.1)
+    },
+
+    async useSecretLink(authentication, happyPath) {
+      const I = this
+      const Link = await I.haveModel('secretLink', 'Link')
+      let linkData = await Link.indexObjectGet('byAuthentication', authentication)
+      console.log("LINK DATA", linkData)
+      I.assert(!!linkData, true, 'link created')
+
+      if(!happyPath) {
+        I.amOnPage('/link/[badSecret]')
+        I.see('Unknown link')
+      }
+
+      if(!happyPath) {
+        await I.wait(0.2)
+        await Link.update(linkData.id, { expire: new Date() }) // expire now
+        I.amOnPage('/link/' + linkData.secretCode)
+        I.see('Link expired')
+
+        I.click('Resend')
+        I.seeInCurrentUrl('/sent/')
+
+        await I.wait(0.2)
+        const newLinksData = await Link.indexRangeGet('byAuthentication', authentication)
+        newLinksData.sort((a,b) => new Date(b.expire).getTime() - new Date(a.expire).getTime())
+        const oldLinkData = linkData
+        linkData = newLinksData[0]
+        I.assert(!!linkData, true, 'link exists')
+        I.assert(oldLinkData.id != linkData.id, true, 'link is different from previous link')
+      }
+
+      console.log("LINK RIGHT", '/link/' + linkData.secretCode)
+      I.amOnPage('/link/'+linkData.secretCode)
+      await I.wait(0.1)
+
+      return linkData
+    }
+
+  })
+}

package/front/assets/images/empty-photo.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" />
+<rect
+   style="fill:#dbdbdb;fill-opacity:1;stroke:none;stroke-width:1.88976383;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="rect821"
+   width="512.54236"
+   height="512.54236"
+   x="0.54237288"
+   y="0.54237235" />
+<path
+   style="fill:#f6f6f6;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   d="M 0.54237288,470.23729 125.83051,306.44068 l 60.20339,70.50847 130.71186,-174.10169 195.79661,261.42373 0.54235,48.81353 H 0.54237288 Z"
+   id="path816" /><circle
+   style="fill:#f6f6f6;fill-opacity:1;stroke:none;stroke-width:4.80000019;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="path818"
+   cx="118.50848"
+   cy="106.57627"
+   r="57.762711" /></svg>

package/front/assets/images/empty-user-photo.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" />
+<rect
+   style="fill:#dbdbdb;fill-opacity:1;stroke:none;stroke-width:1.88976383;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="rect821"
+   width="512.54236"
+   height="512.54236"
+   x="0.54237288"
+   y="0.54237235" /><path
+   d="m 313.14122,310.64877 c 9.02181,-8.85097 12.15686,-31.23733 20.41627,-39.3056 11.69771,-11.43183 24.39381,-25.50218 27.98588,-43.06851 4.82003,-23.34203 -4.96846,-26.30516 -4.96846,-34.3713 0,-16.90002 -0.15376,-44.65739 -5.43081,-62.68607 -0.30326,-23.7809 -4.20499,-34.123578 -12.38858,-43.031138 -7.72017,-8.33522 -26.68637,-6.366203 -36.59125,-11.85361 C 286.83605,67.825407 274.23818,64.594254 258.15823,64.17461 v -0.09503 c -0.47624,0 -0.93539,0.05659 -1.41162,0.05659 -0.78484,0 -1.53123,-0.05659 -2.35343,-0.05659 l 0.0395,0.151627 c -39.17105,1.472492 -80.84608,26.170627 -95.16524,65.895863 -5.31335,14.71958 -3.28881,46.87521 -3.28881,63.77522 0,8.06721 -9.78742,11.02927 -4.96846,34.37131 3.61129,17.56632 16.28817,31.63668 27.98588,43.06851 8.26048,8.06827 11.39446,30.45462 20.39705,39.30559 1.96902,13.0378 2.1986,9.31012 2.12278,21.23954 -0.0203,4.03307 0.11426,10.28502 -6.32669,16.4398 -12.17822,11.6614 -40.14595,36.95324 -63.08756,46.79832 -30.24,12.98014 -79.41203,33.74237 -90.746691,39.59069 -11.334661,5.84833 -41.2532541,21.69763 -41.2532541,31.79045 0,10.11417 0,47.33542 0,47.33542 h 253.3742451 5.79494 253.37318 c 0,0 0,-37.22125 0,-47.33542 0,-10.09282 -29.89723,-25.94212 -41.25645,-31.79045 -11.35389,-5.84938 -60.48321,-26.61055 -90.72641,-39.59069 -22.32976,-9.57707 -49.43685,-33.81712 -62.09344,-45.84158 -4.2808,-4.05228 -7.3016,-8.29784 -7.3411,-18.62023 -0.0737,-12.00417 0.23278,-7.41692 2.14306,-20.01478"
+   id="path2"
+   style="clip-rule:evenodd;fill-rule:evenodd;stroke-width:1.06779659;fill:#f6f6f6;fill-opacity:1" />
+</svg>

package/front/assets/images/logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46667 135.46667"
+   version="1.1"
+   id="svg977"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs971" />
+  <metadata
+     id="metadata974">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     style="fill:#666666">
+    <path
+       style="fill:#666666;fill-opacity:1;stroke:none;stroke-width:2.70907px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 54.181439,13.558436 67.726801,0.01304296 135.45359,67.739804 67.726801,135.46667 29.799793,97.539626 V 65.030766 L 13.545362,81.285197 0,67.739804 40.636077,27.103727 81.272154,67.739804 67.726801,81.285197 51.472371,65.030766 V 92.12155 l 16.25443,16.25433 40.636069,-40.636076 z"
+       id="path892" />
+  </g>
+</svg>

package/front/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!--head-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <!--app-data-->
+    <script type="module" src="/src/entry-client.js"></script>
+  </body>
+</html>

package/front/public/images/empty-photo.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" />
+<rect
+   style="fill:#dbdbdb;fill-opacity:1;stroke:none;stroke-width:1.88976383;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="rect821"
+   width="512.54236"
+   height="512.54236"
+   x="0.54237288"
+   y="0.54237235" />
+<path
+   style="fill:#f6f6f6;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   d="M 0.54237288,470.23729 125.83051,306.44068 l 60.20339,70.50847 130.71186,-174.10169 195.79661,261.42373 0.54235,48.81353 H 0.54237288 Z"
+   id="path816" /><circle
+   style="fill:#f6f6f6;fill-opacity:1;stroke:none;stroke-width:4.80000019;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="path818"
+   cx="118.50848"
+   cy="106.57627"
+   r="57.762711" /></svg>

package/front/public/images/empty-user-photo.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+   id="metadata9"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs7" />
+<rect
+   style="fill:#dbdbdb;fill-opacity:1;stroke:none;stroke-width:1.88976383;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="rect821"
+   width="512.54236"
+   height="512.54236"
+   x="0.54237288"
+   y="0.54237235" /><path
+   d="m 313.14122,310.64877 c 9.02181,-8.85097 12.15686,-31.23733 20.41627,-39.3056 11.69771,-11.43183 24.39381,-25.50218 27.98588,-43.06851 4.82003,-23.34203 -4.96846,-26.30516 -4.96846,-34.3713 0,-16.90002 -0.15376,-44.65739 -5.43081,-62.68607 -0.30326,-23.7809 -4.20499,-34.123578 -12.38858,-43.031138 -7.72017,-8.33522 -26.68637,-6.366203 -36.59125,-11.85361 C 286.83605,67.825407 274.23818,64.594254 258.15823,64.17461 v -0.09503 c -0.47624,0 -0.93539,0.05659 -1.41162,0.05659 -0.78484,0 -1.53123,-0.05659 -2.35343,-0.05659 l 0.0395,0.151627 c -39.17105,1.472492 -80.84608,26.170627 -95.16524,65.895863 -5.31335,14.71958 -3.28881,46.87521 -3.28881,63.77522 0,8.06721 -9.78742,11.02927 -4.96846,34.37131 3.61129,17.56632 16.28817,31.63668 27.98588,43.06851 8.26048,8.06827 11.39446,30.45462 20.39705,39.30559 1.96902,13.0378 2.1986,9.31012 2.12278,21.23954 -0.0203,4.03307 0.11426,10.28502 -6.32669,16.4398 -12.17822,11.6614 -40.14595,36.95324 -63.08756,46.79832 -30.24,12.98014 -79.41203,33.74237 -90.746691,39.59069 -11.334661,5.84833 -41.2532541,21.69763 -41.2532541,31.79045 0,10.11417 0,47.33542 0,47.33542 h 253.3742451 5.79494 253.37318 c 0,0 0,-37.22125 0,-47.33542 0,-10.09282 -29.89723,-25.94212 -41.25645,-31.79045 -11.35389,-5.84938 -60.48321,-26.61055 -90.72641,-39.59069 -22.32976,-9.57707 -49.43685,-33.81712 -62.09344,-45.84158 -4.2808,-4.05228 -7.3016,-8.29784 -7.3411,-18.62023 -0.0737,-12.00417 0.23278,-7.41692 2.14306,-20.01478"
+   id="path2"
+   style="clip-rule:evenodd;fill-rule:evenodd;stroke-width:1.06779659;fill:#f6f6f6;fill-opacity:1" />
+</svg>

package/front/public/images/logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 135.46667 135.46667"
+   version="1.1"
+   id="svg977"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs971" />
+  <metadata
+     id="metadata974">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     style="fill:#666666">
+    <path
+       style="fill:#666666;fill-opacity:1;stroke:none;stroke-width:2.70907px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 54.181439,13.558436 67.726801,0.01304296 135.45359,67.739804 67.726801,135.46667 29.799793,97.539626 V 65.030766 L 13.545362,81.285197 0,67.739804 40.636077,27.103727 81.272154,67.739804 67.726801,81.285197 51.472371,65.030766 V 92.12155 l 16.25443,16.25433 40.636069,-40.636076 z"
+       id="path892" />
+  </g>
+</svg>

package/front/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+  <ConfirmPopup v-if="isClientSide"></ConfirmPopup>
+  <Toast v-if="isClientSide"></Toast>
+  <router-view v-slot="{ route, Component }">
+    <template v-if="route?.meta?.raw">
+      <component :is="Component" />
+    </template>
+    <loading-zone v-else suspense @isLoading="l => loading = l">
+      <template v-slot:loading>
+        <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+          <ProgressSpinner animationDuration=".5s"/>
+        </div>
+      </template>
+      <template v-slot:default="{ isLoading }">
+        <page :loading="loading" :working="working">
+          <working-zone @isWorking="w => working = w">
+            <template v-slot:working>
+              <div class="fixed w-full h-full flex align-items-center justify-content-center top-0 left-0">
+                <ProgressSpinner animationDuration=".5s"/>
+              </div>
+            </template>
+            <template v-slot:default="{ isWorking }">
+              <component :is="Component"
+                         :style="isWorking || isLoading ? 'filter: blur(4px)' : ''"
+                         class="working-blur" />
+            </template>
+          </working-zone>
+        </page>
+      </template>
+    </loading-zone>
+  </router-view>
+</template>
+
+<script setup>
+  import ConfirmPopup from 'primevue/confirmpopup'
+  import Toast from 'primevue/toast'
+
+  import 'primevue/resources/primevue.min.css'
+  import 'primevue/resources/themes/saga-blue/theme.css'
+  import 'primeflex/primeflex.css'
+  import 'primeicons/primeicons.css'
+
+  import ProgressSpinner from 'primevue/progressspinner'
+
+  import { useMeta } from 'vue-meta'
+  import Page from "./Page.vue"
+
+  const { meta } = useMeta({
+    title: 'Title',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport',
+        content: "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1," +
+            " width=device-width, viewport-fit=cover" }
+    ],
+    htmlAttrs: {
+      lang: 'en',
+      amp: true
+    }
+  })
+
+  import { onMounted } from 'vue'
+  import isClientSide from "./isClientSide.js"
+  onMounted(() => isClientSide.value = true)
+
+  import { ref } from 'vue'
+  const working = ref(false)
+  const loading = ref(false)
+
+  import { watch } from 'vue'
+  import { client as useClient } from '@live-change/vue3-ssr'
+  const client = useClient()
+  watch(client, (newClient, oldClient) => {
+    console.log("WATCH CLIENT", oldClient, '=>', newClient)
+  })
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--surface-a);
+    font-family: var(--font-family);
+    font-weight: 400;
+    color: var(--text-color);
+  }
+  .working-blur {
+    transition: filter 0.3s;
+  }
+</style>

package/front/src/CodeEditor.vue

@@ -0,0 +1,92 @@
+<template>
+  <prism-editor v-if="isMounted"
+                class="config-editor" :highlight="highlight"
+                :style="{ height: (codeLines * 1.35) + 'em' }"
+                v-model="code"
+                :readonly="readOnly" :line-numbers="codeLines > 1" />
+  <small v-if="editResult.error" class="p-error">{{ editResult.error }}</small>
+</template>
+
+<script setup>
+
+  import { stringify } from "javascript-stringify"
+
+  import 'vue-prism-editor/dist/prismeditor.min.css'
+  import 'prismjs/themes/prism-coy.css'
+  import * as Prism from 'prismjs/components/prism-core'
+  import 'prismjs/components/prism-clike'
+  import 'prismjs/components/prism-javascript'
+
+  import { PrismEditor } from 'vue-prism-editor'
+
+  import { ref, computed, watch, onMounted } from 'vue'
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const props = defineProps({
+    initialCode: {
+      type: String
+    },
+    initialData: {
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    env: {
+      type: Object
+    },
+    dbSugar: {
+      type: Object
+    }
+  })
+
+  const { readOnly, env, dbSugar } = props
+
+  const emit = defineEmits(['result'])
+
+
+  const code = ref(props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  "))
+
+  function highlight(code) {
+    return Prism.highlight(code, Prism.languages.js, "js")
+  }
+
+  const codeLines = computed(() => code.value.split('\n').length)
+
+  const modified = computed(() => code.value != props.initialCode)
+
+  const editResult = computed(() => {
+    if(!modified.value && props.initialData) return { data: props.initialData, code: code.value }
+    try {
+      const $ = env || {}
+      const db = dbSugar || {}
+      console.log("COMPILE CODE", code.value)
+      const result = eval(`(${code.value})`)
+      if(result === false) return { data: false, code: code.value }
+      if(result) return { data: result, code: code.value }
+      return { error: 'empty' }
+    } catch(e) {
+      if(e instanceof SyntaxError) {
+        if(e.lineNumber) return {
+          error: `${e.message} at ${e.lineNumber}:${e.columnNumber - (e.lineNumber ? 0 : -1)}`
+        }
+      }
+      return { error: e.message }
+    }
+  })
+
+  function reset() {
+    code.value = props.initialCode !== undefined ? props.initialCode : stringify(props.initialData, null, "  ")
+  }
+
+  watch(() => editResult.value, () => emit('result', editResult.value))
+
+  defineExpose({ reset })
+
+</script>
+
+<style scoped>
+
+</style>