@live-change/user-frontend 0.0.3

package/front/src/connected/Connected.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9">
+
+    <ConfirmPopup v-if="isMounted" />
+    <Toast v-if="isMounted" />
+
+    <div class="surface-card border-round shadow-2 p-4">
+      <div class="text-900 font-medium mb-3 text-xl">Connected accounts</div>
+
+      <ul class="list-none p-0 m-0 mt-5 mb-4">
+
+        <li v-for="connection in emails"
+            class="flex flex-row align-items-center justify-content-between mb-2">
+          <div class="flex flex-row align-items-center">
+            <i class="pi pi-envelope mr-2"></i>
+            <span class="block text-900 font-medium text-lg">{{ connection.email }}</span>
+          </div>
+          <Button class="p-button-text p-button-plain p-button-rounded mr-1" icon="pi pi-times"
+                  v-if="canDelete"
+                  @click="event => disconnect(event, 'email', connection.email)" />
+        </li>
+
+      </ul>
+
+      <div class="flex flex-row">
+        <router-link :to="{ name: 'user:connect' }" class="mr-2 no-underline">
+          <Button label="Connect Account" icon="pi pi-user-plus" class="p-button-lg" id="connect"></Button>
+        </router-link>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import SettingsTabs from "../SettingsTabs.vue"
+
+  import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
+  import ConfirmPopup from 'primevue/confirmpopup'
+  import Toast from 'primevue/toast'
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  let isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+  onUnmounted(() => isMounted.value = false)
+
+
+  const workingZone = inject('workingZone')
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+  const messageAuthenticationApi = actions().messageAuthentication
+
+  function disconnect(event, contactType, contact) {
+    confirm.require({
+      target: event.currentTarget,
+      message: `Do you want to disconnect ${contactType} account ${contact}?`,
+      icon: 'pi pi-info-circle',
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        const upperCaseType = contactType[0].toUpperCase() + contactType.slice(1)
+        workingZone.addPromise('disconnectContact', (async () => {
+          await messageAuthenticationApi['disconnect'+upperCaseType]({ [contactType]: contact })
+          toast.add({ severity: 'info', summary: 'Account disconnected', life: 1500 })
+        })())
+      },
+      reject: () => {
+        toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+      }
+    })
+  }
+
+  const emails = await live(path().email.myUserEmails({}))
+
+  const allAccountsCount = computed(() => emails.value?.length )
+  const canDelete = computed(() => allAccountsCount.value > 1 )
+
+</script>
+
+<style>
+
+</style>

package/front/src/connected/routes.js

@@ -0,0 +1,16 @@
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:connected', path: prefix + 'connected',
+      component: () => import("./Connected.vue") }),
+    route({ name: 'user:connect', path: prefix + 'connect',
+      component: () => import("./Connect.vue") }),
+    route({ name: 'user:connectFinished', path: prefix + 'connect-finished',
+      component: () => import("./ConnectFinished.vue") }),
+
+  ]
+}
+
+export default routes

package/front/src/delete/Delete.vue

@@ -0,0 +1,53 @@
+<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">Delete account</div>
+      </div>
+
+      <div>
+        <p>
+          Account deletion is irreversible, check the box below only if you are
+          100% sure that you want to delete your account.
+        </p>
+        <div class="p-field-checkbox mb-3">
+          <Checkbox id="deleteCheckbox" v-model="wantDelete" :binary="true" />
+          <label for="deleteCheckbox" class="ml-2">I want to delete my account.</label>
+        </div>
+
+        <Button id="delete" label="Delete account" icon="pi pi-user-minus" class="p-button-lg"
+                :disabled="!wantDelete" @click="deleteUser" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Checkbox from "primevue/checkbox"
+  import Button from "primevue/button"
+
+  import { actions } from "@live-change/vue3-ssr"
+  import { inject, ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  const workingZone = inject('workingZone')
+
+  const wantDelete = ref(false)
+
+  const { deleteMe } = actions().user
+
+  function deleteUser() {
+    if(!wantDelete.value) return
+    workingZone.addPromise('deleteMe', (async () => {
+      await deleteMe()
+      router.push({ name: 'user:deleteFinished' })
+    })())
+  }
+
+</script>
+
+<style>
+
+</style>

package/front/src/delete/DeleteFeedbackSent.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-3 text-xl mb-4">Feedback sent</div>
+      <p class="mt-0 p-0 line-height-3">Thank you for your feedback.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

package/front/src/delete/DeleteFinished.vue

@@ -0,0 +1,32 @@
+<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">Account deleted</div>
+      </div>
+
+      <div class="mb-3">
+        Account has been deleted, please leave feedback why you are leaving us.
+      </div>
+
+      <Textarea class="w-full" :autoResize="true" rows="4" cols="30" />
+      <div class="flex flex-row align-items-end">
+        <Button label="Send" icon="pi pi-send" class="ml-auto p-button-lg"></Button>
+      </div>
+
+    </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 Textarea from "primevue/textarea"
+
+</script>
+
+<style>
+
+</style>

package/front/src/delete/routes.js

@@ -0,0 +1,16 @@
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:delete', path: prefix + 'delete',
+      component: () => import("./Delete.vue") }),
+    route({ name: 'user:deleteFinished', path: prefix + 'delete-finished',
+      component: () => import("./DeleteFinished.vue") }),
+    route({ name: 'user:deleteFeedbackSent', path: prefix + 'delete-feedback-sent',
+      component: () => import("./DeleteFeedbackSent.vue") }),
+
+  ]
+}
+
+export default routes

package/front/src/entry-client.js

@@ -0,0 +1,6 @@
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+
+clientEntry(App, createRouter)

package/front/src/entry-server.js

@@ -0,0 +1,6 @@
+import { serverEntry } from '@live-change/frontend-base/server-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+const render = serverEntry(App, createRouter)
+export { render }

package/front/src/identification/IdentificationSettings.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9">
+    <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">
+          Identification
+        </div>
+      </div>
+
+      <div class="flex flex-wrap align-items-center" v-if="userData !== undefined">
+        <div class="relative" @click="openImageEditor">
+          <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle profile-image"
+                 domResize width="200" height="200" />
+          <img v-else :src="identiconUrl" class="mr-2 border-circle profile-image">
+        </div>
+        <command-form service="userIdentification" :action="updateMethod"
+                      :initialValues="{ name: userData?.name }"
+                      :parameters="{ image: userData?.image }" v-slot="{ data }"
+                      keepOnDone @done="handleNameSaved"
+                      class="ml-3 mb-3 flex flex-column">
+          <div class="p-field flex flex-column">
+            <InputText type="text" v-model="data.name"
+                       :class="{ 'p-invalid': data.nameError }"
+                       class="p-inputtext-lg" placeholder="Your name" />
+            <small id="currentPassword-help" class="p-error">{{ data.nameError }}</small>
+          </div>
+          <Button type="submit" label="Save name" class="mt-3" icon="pi pi-save" />
+        </command-form>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { FileInput } from "@live-change/upload-frontend"
+  import { ComponentDialog } from "@live-change/frontend-base"
+  import { ImageEditor, Image } from "@live-change/image-frontend"
+  import { useDialog } from 'primevue/usedialog'
+  import InputText from 'primevue/inputtext'
+  import Button from 'primevue/button'
+  const dialog = useDialog()
+
+  import { shallowRef, ref, inject, computed } from 'vue'
+  import { path, live, actions,  api as useApi } from '@live-change/vue3-ssr'
+
+  import { useToast } from 'primevue/usetoast'
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  const toast = useToast()
+
+  const api = useApi()
+  const [ ownerType, owner ] = api.client.value.user
+      ? ['user_User', api.client.value.user]
+      : ['session_Session', api.client.value.session]
+
+  const dataPromise = live(path().userIdentification.sessionOrUserOwnedIdentification({
+    sessionOrUserType: ownerType, sessionOrUser: owner
+  }))
+
+  const identiconUrl = `/api/identicon/jdenticon/${ownerType}:${owner}/28.svg`
+
+  const workingZone = inject('workingZone')
+
+
+  function openImageEditor() {
+    dialog.open(ComponentDialog, {
+      props: {
+        header: 'Image Editor',
+        style: {
+          width: '50vw',
+        },
+        breakpoints:{
+          '960px': '75vw',
+          '640px': '90vw'
+        },
+        modal: true,
+        contentClass: "p-0"
+      },
+      data: {
+        component: shallowRef(ImageEditor),
+        props: {
+          type: 'circle'
+        }
+      },
+      onClose: (options) => {
+        const data = options.data
+        console.log("EDITOR RESULT", data)
+        console.log("WZ", workingZone)
+        workingZone.addPromise('update user image', (async () => {
+          await api.command(['userIdentification', updateMethod.value], { image: data.value })
+          toast.add({ severity:'info', summary: 'User image saved', life: 1500 })
+        })())
+      }
+    })
+  }
+
+  function handleNameSaved() {
+    toast.add({ severity:'info', summary: 'User name saved', life: 1500 })
+  }
+
+  const [ userData ] = await Promise.all([ dataPromise ])
+
+  const updateMethod = computed(() => userData.value ? 'updateMyIdentification' : 'setMyIdentification')
+
+</script>
+
+<style scoped>
+  .profile-image {
+    aspect-ratio: 1/1;
+    width: 200px;
+    max-width: 100%;
+    height: auto;
+    border: 1px solid gray;
+  }
+</style>

package/front/src/identification/ObjectIdentification.vue

@@ -0,0 +1,36 @@
+<template>
+  <UserIdentification v-if="objectType == 'session_Session' || objectType == 'user_User'"
+                      :ownerType="objectType" :owner="object"
+                      :data="data" :inline="inline" />
+  <span v-else><strong>{{ objectType }}</strong>: {{ object }}</span>
+</template>
+
+<script setup>
+
+  const props = defineProps({
+    objectType: {
+      type: String,
+      required: true
+    },
+    object: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  import { toRefs } from "@vueuse/core"
+  const { objectType, object, data, inline } = toRefs(props)
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/identification/UserIdentification.vue

@@ -0,0 +1,101 @@
+<template>
+  <span>
+    <router-link v-if="ownerType == 'user_User' && profileRouteExists"
+                 :to="{ name: 'user:profile', params: { user: owner } }"
+                 v-ripple
+                 :class="inline ? inlineClass : blockClass">
+      <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle"
+             :style="imageStyle"/>
+      <img v-else :src="identiconUrl" class="mr-2 border-circle" :style="imageStyle" domResize />
+      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden"
+            :class="[ ownerType == 'user_User' ? 'font-medium' : 'font-italic' ]">
+        {{ name }}
+      </span>
+    </router-link>
+    <span v-else-if="ownerType == 'email_Email'">
+      <i class="pi pi-envelope mr-2 ml-1"
+         style="font-size: 1.3rem; margin-right: 0.7rem !important; position: relative; top: 3px;" />
+      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden">
+        {{ owner }}
+      </span>
+    </span>
+    <span v-else :class="inline ? inlineClass : blockClass">
+      <Image v-if="userData?.image" :image="userData.image" class="mr-2 border-circle"
+             :style="imageStyle"/>
+      <img v-else :src="identiconUrl" class="mr-2 border-circle" :style="imageStyle" domResize />
+      <span class="text-overflow-ellipsis white-space-nowrap overflow-hidden"
+            :class="[ ownerType == 'user_User' ? 'font-medium' : 'font-italic' ]">
+        {{ name }}
+      </span>
+    </span>
+  </span>
+</template>
+
+<script setup>
+
+  import { Image } from "@live-change/image-frontend"
+  import { colors, animals, uniqueNamesGenerator } from "unique-names-generator"
+
+  const props = defineProps({
+    ownerType: {
+      type: String,
+      required: true
+    },
+    owner: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+  const inlineClass = ""
+  const blockClass = "flex align-items-center cursor-pointer text-700 hover:surface-100 border-round p-ripple"
+  const inlineImageSize = '1em'
+  const blockImageSize = '28px'
+
+  import { toRefs } from "@vueuse/core"
+  const { data, inline } = toRefs(props)
+  const { ownerType, owner } = props
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const profileRouteExists = router.hasRoute('user:profile')
+
+  import { path, live, actions } from '@live-change/vue3-ssr'
+
+  const dataPromise = data !== undefined ? Promise.resolve(data)
+      : live(path().userIdentification.sessionOrUserOwnedIdentification({
+        sessionOrUserType: ownerType, sessionOrUser: owner
+      }))
+
+  const identiconUrl = `/api/identicon/jdenticon/${ownerType}:${owner}/28.svg`
+
+  import { computed } from 'vue'
+
+  const imageStyle = computed(() => inline
+      ? { width: inlineImageSize, height: inlineImageSize }
+      : { width: blockImageSize, height: blockImageSize }
+  )
+
+  const [ userData ] = await Promise.all([ dataPromise ])
+
+  const nameGeneratorConfig = {
+    dictionaries: [/*["anonymous", "unnamed"],*/ colors, animals],
+    separator: ' ',
+    seed: ownerType + '_' + owner
+  }
+
+  const name = computed(() => userData.value?.name || uniqueNamesGenerator(nameGeneratorConfig))
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/identification/routes.js

@@ -0,0 +1,12 @@
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:identification', path: prefix + 'identification',
+      component: () => import("./IdentificationSettings.vue") })
+
+  ]
+}
+
+export default routes

package/front/src/message-auth/ConnectEmail.vue

@@ -0,0 +1,105 @@
+<template>
+  <pre data-headers>{{ JSON.stringify(metadata, null, '  ') }}</pre>
+  <div data-html class="message m-6">
+    <p class="text-lg">
+      Hello!
+    </p>
+    <p>
+      You are trying to connect this email address to your DEMO account.
+      In order to confirm that, please enter secret code:
+    </p>
+    <p class="text-3xl font-medium">{{ code }}</p>
+    <p>
+      Or click the button below:
+    </p>
+    <div>
+      <a :href="linkAddress" class="no-underline">
+        <Button label="Confirm email" class="p-button-lg" />
+      </a>
+    </div>
+    <p>
+      Or copy this address to your browser address bar:<br>
+      <a :href="linkAddress">
+        {{ linkAddress }}
+      </a>
+    </p>
+    <p>
+      Let us know in case it's not you.
+    </p>
+    <p>
+      See you soon<br>
+      Live Change Team
+    </p>
+    <img src="/images/logo128.png">
+  </div>
+  <pre class="message" data-text>
+    Hello!
+
+    You are trying to connect this email address to your DEMO account.
+    In order to confirm that, please enter secret code:
+    {{ code }}
+
+    Or please click link below or copy address to your browser address bar:
+
+    {{ linkAddress }}
+
+    Let us know in case it's not you.
+
+    See you soon
+    Live Change Team
+  </pre>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+
+  const { action, contact, json } = defineProps({
+    action: {
+      type: String,
+      required: true
+    },
+    contact: {
+      type: String,
+      required: true
+    },
+    json: {
+      type: String,
+      required: true
+    }
+  })
+
+  const data = JSON.parse(json)
+  const secrets = data.secrets
+
+  const secretLink = secrets.find(secret => secret.type == 'link')
+
+  const secretCode = secrets.find(secret => secret.type == 'code')
+
+
+  const metadata = {
+    from: 'admin@flipchart.live',
+    subject: 'Confirm your email address.',
+    to: contact
+  }
+
+  const linkAddress = ENV_BASE_HREF + '/link/' + secretLink.secret.secretCode
+
+  const code = secretCode.secret.secretCode
+
+</script>
+
+<style scoped>
+  img {
+    width: 100%;
+    max-width: 100px;
+  }
+  .message {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+    color: #495057;
+    font-weight: 400;
+  }
+  pre {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>