@live-change/user-frontend 0.0.3

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,89 @@
+// in this file you can append custom step methods to 'I' object
+
+const steps = {
+
+  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
+  }
+
+}
+
+module.exports = function() {
+  return actor(steps)
+}
+
+module.exports.steps = steps

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,31 @@
+<template>
+  <view-root>
+    <template #navbar>
+      <NavBar />
+    </template>
+  </view-root>
+</template>
+
+<script setup>
+  import 'primevue/resources/themes/lara-light-blue/theme.css'
+
+  import NavBar from "./NavBar.vue"
+  import ViewRoot from "@live-change/frontend-base/ViewRoot.vue"
+
+  import { useMeta } from 'vue-meta'
+  const { meta } = useMeta({
+    title: 'Title',
+    htmlAttrs: {
+      lang: 'en',
+      amp: true
+    }
+  })
+
+  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>

package/front/src/Index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9">
+    <div class="surface-card border-round shadow-2 p-4">
+      <div class="text-900 font-medium mb-3 text-xl">Test Index</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+</style>

package/front/src/NavBar.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
+              relative md:sticky top-0 z-5"
+       style="min-height: 80px" key="navbar">
+    <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
+    <div class="hidden lg:flex">
+      <!-- place for desktop menu -->
+    </div>
+    <div class="flex flex-grow-1"></div>
+    <NotificationsIcon />
+    <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple ml-2 hover:surface-100 p-2"
+       v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+      <i class="pi pi-bars text-4xl"></i>
+    </a>
+    <div class="align-items-center flex-grow-1 justify-content-between hidden absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-home mr-2"></i>
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="lg:relative">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
+             v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+            <i class="pi pi-users mr-2"></i>
+            <span>Customers</span>
+            <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
+          </a>
+          <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
+            <li>
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                <i class="pi pi-user-plus mr-2"></i>
+                <span class="font-medium">Add New</span>
+              </a>
+            </li>
+            <li class="relative">
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
+                 v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+                <i class="pi pi-search mr-2"></i>
+                <span class="font-medium">Search</span>
+                <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
+              </a>
+              <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
+                <li>
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-shopping-cart mr-2"></i>
+                    <span class="font-medium">Purchases</span>
+                  </a>
+                </li>
+                <li class="relative">
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-comments mr-2"></i>
+                    <span class="font-medium">Messages</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-calendar mr-2"></i>
+            <span>Calendar</span>
+          </a>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-chart-line mr-2"></i>
+            <span>Stats</span>
+          </a>
+        </li>
+      </ul>
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
+            <span class="block lg:hidden font-medium">Inbox</span>
+          </a>
+        </li>
+        <li class="border-top-1 surface-border lg:border-top-none">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
+            <div class="block lg:hidden">
+              <div class="text-900 font-medium">Josephine Lillard</div>
+              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Badge from "primevue/badge"
+
+  import NotificationsIcon from "./notifications/NotificationsIcon.vue"
+</script>
+
+<style scoped>
+
+</style>

package/front/src/SettingsTabs.vue

@@ -0,0 +1,48 @@
+<template>
+  <ul class="surface-card p-0 m-0 list-none flex overflow-x-auto select-none">
+    <li v-for="tab in tabs">
+      <router-link v-ripple :to="{ name: tab.route }"
+         class="cursor-pointer px-4 py-3 flex align-items-center border-bottom-2 hover:border-500
+                transition-colors transition-duration-150 p-ripple"
+         :class="isActive(tab) ? 'border-blue-500 text-blue-500 hover:border-blue-500': 'text-700 border-transparent'"
+         style="text-decoration: none">
+        <i class="pi mr-2" :class="tab.icon"></i>
+        <span class="font-medium">{{ tab.title }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+import { live, path } from '@live-change/vue3-ssr'
+import { computed } from 'vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const passwordExists = await live(path().passwordAuthentication.myUserPasswordAuthenticationExists())
+
+const tabs = computed(() => ([{
+  title: "Connected accounts",
+  route: 'user:connected',
+  icon: 'pi-user'
+}, passwordExists.value ? {
+  title: "Change password",
+  route: 'user:changePassword',
+  icon: 'pi-key'
+} : {
+  title: "Set password",
+  route: 'user:changePassword',
+  icon: 'pi-key'
+}]))
+
+function isActive(tab) {
+  return route.name == tab.route
+}
+
+</script>
+
+<style>
+
+</style>

package/front/src/connected/Connect.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="surface-card p-4 shadow-2 border-round">
+      <div class="text-center mb-5">
+        <div class="text-900 text-3xl font-medium mb-3">Connect account</div>
+      </div>
+
+      <command-form service="messageAuthentication" action="connectEmail" v-slot="{ data }"
+                    @done="handleSent" keepOnDone>
+
+        <div class="p-field mb-3">
+          <label for="email" class="block text-900 font-medium mb-2">
+            Email address
+          </label>
+          <InputText id="email" type="text" class="w-full"
+                     aria-describedby="email-help" :class="{ 'p-invalid': data.emailError}"
+                     v-model="data.email" />
+          <small v-if="data.emailError" id="email-help" class="p-error">{{ data.emailError }}</small>
+        </div>
+
+        <Button label="Connect" icon="pi pi-user" class="w-full" type="submit"></Button>
+
+        <Divider align="center" class="my-4">
+          <span class="text-600 font-normal text-sm">OR</span>
+        </Divider>
+
+        <Button label="Connect GitHub account" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>
+        <Button label="Connect Google account" icon="pi pi-google" class="w-full p-button-secondary mb-1"></Button>
+
+      </command-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputText from "primevue/inputtext"
+  import Checkbox from "primevue/checkbox"
+  import Button from "primevue/button"
+  import Divider from "primevue/divider"
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleSent({ parameters, result }) {
+    const { authentication } = result
+    router.push({
+      name: 'user:sent',
+      params: {
+        authentication
+      }
+    })
+  }
+
+</script>
+
+<style>
+
+</style>

package/front/src/connected/ConnectFinished.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9" v-shared-element:form="{ duration: '300ms', includeChildren: true }">
+    <div class="surface-card border-round shadow-2 p-4">
+      <div class="text-900 font-medium mb-4 text-xl">Account connected</div>
+      <div class="mt-0 p-0 line-height-3">Congratulations! You have successfully connected accounts.</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>