@live-change/user-frontend 0.0.3

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

@@ -0,0 +1,95 @@
+<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" v-if="isUnknown">
+      <div class="text-900 font-medium mb-3 text-xl">Unknown link</div>
+      <p class="mt-0 mb-2 p-0 line-height-3">We can't find your secret link. Check if you copied the address correctly.</p>
+    </div>
+
+    <div class="surface-card border-round shadow-2 p-4" v-if="isUsed">
+      <div class="text-900 font-medium mb-3 text-xl">Link used</div>
+      <p class="mt-0 mb-2 p-0 line-height-3">This link was already used.</p>
+    </div>
+
+    <div class="surface-card border-round shadow-2 p-4" v-if="isExpired && !isUsed">
+      <div class="text-900 font-medium mb-3 text-xl">Link expired</div>
+      <p class="mt-0 mb-4 p-0 line-height-3">Your secret link already expired. To send another link click button below.</p>
+      <Button label="Resend" class="p-button-lg" @click="resend"></Button>
+    </div>
+
+    <div class="surface-card border-round shadow-2 p-4 flex justify-content-center" v-if="isReady">
+      <ProgressSpinner class="m-3" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import ProgressSpinner from "primevue/progressspinner"
+
+  import { computed, inject } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useNow } from '@vueuse/core'
+  import { path, live, actions } from '@live-change/vue3-ssr'
+
+  const { secretCode } = defineProps({
+    secretCode: {
+      type: String,
+      required: true
+    }
+  })
+
+  const now = useNow({ interval: 1000 })
+
+  const workingZone = inject('workingZone')
+  const router = useRouter()
+
+  const { finishMessageAuthentication, resendMessageAuthentication } = actions().messageAuthentication
+
+  function resend() {
+    workingZone.addPromise('resendMessageAuthentication', (async () => {
+      const { authentication } = await resendMessageAuthentication({
+        authentication: link?.value?.authenticationData?.id
+      })
+      router.push({
+        name: 'user:sent',
+        params: {
+          authentication
+        }
+      })
+    })())
+  }
+
+  const [ link ] = await Promise.all([
+    live(
+      path().secretLink.link({ secretCode })
+          .with(link => path().messageAuthentication.authentication({
+            authentication: link.authentication.$nonEmpty()
+          }).bind('authenticationData')
+      )
+    )
+  ])
+
+  const authenticationState = computed(() => link?.value?.authenticationData?.state )
+
+  const isUnknown = computed(() => link.value === null)
+  const isExpired = computed(() => link.value ? (now.value.toISOString() > link.value.expire) : false )
+  const isUsed = computed(() => authenticationState.value && authenticationState.value == 'used')
+  const isReady = computed(() => !(isUnknown.value || isExpired.value || isUsed.value))
+
+  //const targetPage = computed(() => link.value?.authentication?.targetPage )
+
+  if(typeof window != 'undefined') setTimeout(() => { /// timeout "fixes" suspense bug
+    if(isReady.value) {
+      workingZone.addPromise('finishMessageAuthentication', (async () => {
+        const { result, targetPage } = await finishMessageAuthentication({ secretType: 'link', secret: secretCode })
+        router.push(targetPage)
+      })())
+    }
+  }, 10)
+
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,103 @@
+<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" v-if="authenticationData?.state == 'used' && !submitted">
+      <div class="text-900 font-medium mb-3 text-xl">Authentication done</div>
+      <p class="mt-0 mb-1 p-0 line-height-3">You authenticated in a different tab.</p>
+    </div>
+    <div class="surface-card border-round shadow-2 p-4" v-else>
+      <div class="text-900 font-medium mb-3 text-xl">Message sent</div>
+      <p class="mt-0 mb-1 p-0 line-height-3">We sent special secret message to your email.</p>
+      <p class="mt-0 mb-4 p-0 line-height-3">Click on the link or enter the code you found in that message.</p>
+      <Secured :events="['wrong-secret-code']" :actions="['checkSecretCode']">
+        <command-form service="messageAuthentication" action="finishMessageAuthentication"
+                      :parameters="{ secretType: 'code', authentication }"
+                      @submit="handleSubmit" @done="handleAuthenticated" @error="handleError"
+                      v-slot="{ data }">
+          <div class="flex justify-content-center">
+            <div class="p-field mr-1 flex flex-column">
+              <label for="code" class="p-sr-only">Code</label>
+              <InputMask id="code" class="p-inputtext-lg" mask="999999" slotChar="######" placeholder="Enter code"
+                         v-model="data.secret"
+                         aria-describedby="code-help" :class="{ 'p-invalid': data.secretError }" />
+              <span v-if="data.secretError" id="code-help" class="p-error">{{ data.secretError }}</span>
+            </div>
+            <div class="flex flex-column">
+              <Button label="OK" type="submit" class="p-button-lg flex-grow-0"></Button>
+            </div>
+          </div>
+          <div v-if="data.secretError == 'codeExpired'">
+            <p class="mt-0 mb-4 p-0 line-height-3">To send another code click button below.</p>
+            <Button label="Resend" class="p-button-lg" @click="resend"></Button>
+          </div>
+        </command-form>
+      </Secured>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputMask from "primevue/inputmask"
+  import Button from "primevue/button"
+
+  import { Secured } from "@live-change/security-frontend"
+
+  import { useRouter } from 'vue-router'
+  import { ref } from 'vue'
+
+  const router = useRouter()
+
+  const { authentication } = defineProps({
+    authentication: {
+      type: String,
+      required: true
+    }
+  })
+
+  function handleAuthenticated({ parameters, result }) {
+    const { targetPage } = result
+    console.log("TARGET ROUTE", targetPage)
+    router.push(targetPage)
+  }
+
+  const submitted = ref(false)
+
+  function handleSubmit() {
+    submitted.value = true
+  }
+
+  function handleError() {
+    submitted.value = false
+  }
+
+  import { inject } from 'vue'
+  import { actions } from '@live-change/vue3-ssr'
+  const workingZone = inject('workingZone')
+  const { resendMessageAuthentication } = actions().messageAuthentication
+  function resend() {
+    workingZone.addPromise('resendMessageAuthentication', (async () => {
+      const { authentication: newAuthentication } = await resendMessageAuthentication({
+        authentication
+      })
+      router.push({
+        name: 'user:sent',
+        params: {
+          authentication: newAuthentication
+        }
+      })
+    })())
+  }
+
+  import { live, path } from '@live-change/vue3-ssr'
+  const [ authenticationData ] = await Promise.all([
+    live(
+      path().messageAuthentication.authentication({ authentication })
+    )
+  ])
+  if(authenticationData?.value?.state == 'used') {
+    router.push(authenticationData.value.targetPage)
+  }
+</script>
+
+<style>
+
+</style>

package/front/src/message-auth/ResetPasswordEmail.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 reset password 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 reset password 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>

package/front/src/message-auth/SignInEmail.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>
+      We are glad to see you have just signed in for DEMO with your email.
+      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!
+
+    We are glad to see you have just signed in for DEMO with your email.
+    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>

package/front/src/message-auth/SignUpEmail.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>
+      We are glad to see you have just signed up for DEMO with your email.
+      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!
+
+    We are glad to see you have just signed up for DEMO with your email.
+    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>

package/front/src/message-auth/routes.js

@@ -0,0 +1,25 @@
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    /// Message based authentication
+    route({ name: 'user:sent', path: prefix + 'sent/:authentication', props: true,
+      component: () => import("./MessageSent.vue") }),
+    route({ name: 'user:link', path: prefix + 'link/:secretCode', props: true,
+      component: () => import("./MessageLink.vue") }),
+
+    route({ name: 'user:email:signUpWithMessage', path: '/_email/signUpWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./SignUpEmail.vue") }),
+    route({ name: 'user:email:signInWithMessage', path: '/_email/signInWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./SignInEmail.vue") }),
+    route({ name: 'user:email:connectWithMessage', path: '/_email/connectWithMessage/:contact/:json', props: true,
+      meta: { raw: true }, component: () => import("./ConnectEmail.vue") }),
+    route({ name: 'user:email:startResetPasswordWithMessage', path: '/_email/startResetPasswordWithMessage/:contact/:json',
+      props: true, meta: { raw: true }, component: () => import("./ResetPasswordEmail.vue") }),
+
+  ]
+}
+
+export default routes

package/front/src/notifications/NotificationButtons.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="notification-buttons">
+    <Button v-if="notification.readState == 'new'" @click="markRead()"
+            icon="pi pi-eye" class="p-button-rounded p-button-outlined surface-0" />
+    <Button v-if="notification.readState == 'read'" @click="markUnread()"
+            icon="pi pi-eye-slash" class="p-button-rounded p-button-outlined surface-0" />
+    <Button @click="deleteNotification()"
+            icon="pi pi-trash" class="p-button-rounded p-button-outlined ml-1 surface-0" />
+  </div>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+  import Menu from "primevue/menu"
+
+  import { useToast } from 'primevue/usetoast'
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+  const toast = useToast()
+
+  import { actions } from "@live-change/vue3-ssr"
+
+  const { notification } = defineProps({
+    notification: {
+      type: Object,
+      required: true
+    }
+  })
+
+  import { inject } from "vue"
+
+  const workingZone = inject('workingZone')
+
+  const notificationApi = actions().notification
+
+  function markRead() {
+    workingZone.addPromise('markNotificationRead', (async () => {
+      await notificationApi.markRead({ notification: notification.to || notification.id })
+      toast.add({
+        severity: 'success', summary: 'Notification read',
+        detail:'Notification has been marked as read', life: 3000
+      })
+    })())
+  }
+
+  function markUnread() {
+    workingZone.addPromise('markNotificationUnread', (async () => {
+      await notificationApi.markUnread({ notification: notification.to || notification.id })
+      toast.add({
+        severity: 'success', summary: 'Notification unread',
+        detail:'Notification has been marked as unread', life: 3000
+      })
+    })())
+  }
+
+  function deleteNotification() {
+    workingZone.addPromise('deleteNotification', (async () => {
+      await notificationApi.delete({ notification: notification.to || notification.id })
+      toast.add({
+        severity: 'warn', summary: 'Notification deleted',
+        detail: 'Notification has been deleted', life: 3000
+      })
+    })())
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/notifications/NotificationListPage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="w-full lg:w-6 md:w-9">
+    <div v-if="isMounted" class="surface-card border-round shadow-2 p-4">
+      <NotificationsList />
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+  import NotificationsList from "./NotificationsList.vue"
+
+  import { ref, onMounted } from "vue"
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+</script>
+
+<style scoped>
+
+</style>