@live-change/user-frontend 0.0.3

package/front/src/password/ResetPasswordForm.vue

@@ -0,0 +1,118 @@
+<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 password reset authentication already expired.</p>
+    </div>
+
+    <div class="surface-card p-4 shadow-2 border-round" v-if="isReady">
+      <div class="text-center mb-5">
+        <div class="text-900 text-3xl font-medium mb-3">Reset password</div>
+      </div>
+
+      <command-form service="passwordAuthentication" action="finishResetPassword" v-slot="{ data }"
+                    :parameters="{ key: resetKey }" ref="form"
+                    @done="handleDone" keepOnDone>
+
+        <template v-if="isMounted">
+          <div class="p-field mb-3">
+            <label for="newPassword" class="block text-900 font-medium mb-2">New password</label>
+            <Password id="newPassword" class="w-full" inputClass="w-full" toggleMask
+                      :class="{ 'p-invalid': data.passwordHashError }"
+                      v-model="data.passwordHash">
+              <template #footer>
+                <Divider />
+                <p class="p-mt-2">Suggestions</p>
+                <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                  <li>At least one lowercase</li>
+                  <li>At least one uppercase</li>
+                  <li>At least one numeric</li>
+                  <li>Minimum 8 characters</li>
+                </ul>
+              </template>
+            </Password>
+            <small id="newPassword-help" class="p-error">{{ data.passwordHashError }}</small>
+          </div>
+
+          <div class="p-field mb-3">
+            <label for="reenterPassword" class="block text-900 font-medium mb-2">Re-enter password</label>
+            <Password id="reenterPassword" class="w-full" inputClass="w-full"
+                      v-model="secondPassword"
+                      :feedback="false" toggleMask />
+          </div>
+
+        </template>
+
+        <Button type="submit" label="Reset password" icon="pi pi-key" class="w-full"></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 Password from "primevue/password"
+
+  const { resetKey } = defineProps({
+    resetKey: {
+      type: String,
+      required: true
+    }
+  })
+
+  import { useNow } from '@vueuse/core'
+  const now = useNow({ interval: 1000 })
+
+  import { ref, onMounted, computed } from 'vue'
+  const secondPassword = ref('')
+  const form = ref()
+  onMounted(() => {
+    form.value.addValidator('passwordHash', () => {
+      const value = form.value.getFieldValue('passwordHash')
+      console.log("PASSWORDS MATCH?", secondPassword.value, value)
+      if(value != secondPassword.value) return "passwordsNotMatch"
+    })
+  })
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { live, path } from '@live-change/vue3-ssr'
+  const [ authentication ] = await Promise.all([
+    live( path().passwordAuthentication.resetPasswordAuthentication({ key: resetKey }) )
+  ])
+
+  const isUnknown = computed(() => authentication.value === null)
+  const isExpired = computed(() =>
+      authentication.value ? (now.value.toISOString() > authentication.value.expire) : false )
+  const isUsed = computed(() => authentication.value && authentication.value.state == 'used')
+  const isReady = computed(() => !(isUnknown.value || isExpired.value || isUsed.value))
+
+  function handleDone({ parameters, result }) {
+    console.log("DONE RESULT", result)
+    router.push({
+      name: 'user:resetPasswordFinished'
+    })
+  }
+</script>
+
+<style>
+
+</style>

package/front/src/password/routes.js

@@ -0,0 +1,41 @@
+export function passwordResetRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:resetPassword', path: prefix + 'reset-password',
+      component: () => import("./ResetPassword.vue") }),
+    route({ name: 'user:resetPasswordForm', path: prefix + 'set-new-password/:resetKey',
+      component: () => import("./ResetPasswordForm.vue"), props: true }),
+    route({ name: 'user:resetPasswordFinished', path: prefix + 'reset-password-finished',
+      component: () => import("./ResetPasswordFinished.vue") }),
+
+  ]
+}
+
+
+export function passwordChangeRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+    route({ name: 'user:changePassword', path: prefix + 'change-password',
+      component: () => import("./ChangePassword.vue") }),
+    route({ name: 'user:changePasswordFinished', path: prefix + 'change-password-finished',
+      component: () => import("./ChangePasswordFinished.vue") })
+
+  ]
+}
+
+export function routes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+
+  return [
+
+      ...passwordResetRoutes(config),
+      ...passwordChangeRoutes(config)
+
+  ]
+}
+
+export default routes

package/front/src/router.js

@@ -0,0 +1,90 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+import messageAuthRoutes from "./message-auth/routes.js"
+import signRoutes from "./sign/routes.js"
+import connectedRoutes from "./connected/routes.js"
+import identificationRoutes from "./identification/routes.js"
+import deleteRoutes from "./delete/routes.js"
+import { passwordResetRoutes, passwordChangeRoutes } from "./password/routes.js"
+import { notificationsSettingsRoutes, notificationsRoutes } from "./notifications/routes.js"
+
+import { dbAdminRoutes } from "@live-change/db-admin"
+
+export function userRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+
+    ...messageAuthRoutes(config),
+    ...signRoutes(config),
+    ...passwordResetRoutes(config),
+    ...notificationsRoutes(config),
+
+    route({
+      path: prefix + 'settings', meta: { pageType: 'wide' },
+      component: () => import("./settings/Settings.vue"),
+      children: [
+        {
+          name: 'user:settings', path: '', meta: { viewType: 'wide', signedIn: true },
+          component: () => import("./settings/SettingsIndex.vue")
+        },
+        ...deleteRoutes({ ...config, prefix: '' }),
+        ...passwordChangeRoutes({ ...config, prefix: '' }),
+        ...connectedRoutes({ ...config, prefix: '' }),
+        ...identificationRoutes({ ...config, prefix: '' }),
+        ...notificationsSettingsRoutes({ ...config, prefix: '' })
+      ]
+    })
+
+  ]
+}
+
+export async function sitemap(route, api) {
+  route({ name: 'SignIn' })
+  route({ name: 'SignUp' })
+}
+
+import { client as useClient } from '@live-change/vue3-ssr'
+
+export function installUserRedirects(router, app, config) {
+  const client = useClient(app._context)
+  router.beforeEach(async (to, from) => {
+    if(to?.matched.find(m => m?.meta.signedIn)) {
+      if(!client.value.user) {
+        console.log("REDIRECT TO LOGIN BECAUSE PAGE REQUIRES LOGIN!")
+        router.redirectAfterSignIn = to.fullPath
+        return { name: 'user:signIn' }
+      }
+    }
+    if(to?.matched.find(m => m?.meta.signedOut)) {
+      if(client.value.user) {
+        console.log("REDIRECT TO USER INDEX BECAUSE PAGE REQUIRES LOGOUT!")
+        return { name: 'user:settings' }
+      }
+    }
+    if(to && to.name == 'user:signIn' && from?.matched.find(m => m?.meta.saveForSignIn)) {
+      console.log("SAVE FOR LOGIN", from.fullPath)
+      localStorage.redirectAfterLogin = from.fullPath
+    }
+  })
+}
+
+export function createRouter(app, config) {
+  //console.log("APP CTX", app._context)
+  const router = _createRouter({
+    // use appropriate history implementation for server/client
+    // import.meta.env.SSR is injected by Vite.
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes: [
+      { path: '/', component: () => import('./Index.vue') },
+      ...userRoutes(config),
+      ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
+    ]
+  })
+  installUserRedirects(router, app, config)
+  return router
+}
+

package/front/src/settings/Settings.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex relative lg:static surface-ground" style="height: calc(100vh - 88px)">
+    <div id="settings-menu" class="surface-section hidden flex-shrink-0 absolute left-0 h-full
+       top-0 z-1 border-right-1 surface-border select-none md:static md:block" style="width:280px">
+      <SettingsMenu />
+    </div>
+
+    <div class="flex flex-column relative flex-auto">
+      <div v-if="viewType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
+        <router-view></router-view>
+      </div>
+      <template v-if="viewType == 'wide'">
+        <router-view></router-view>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SettingsMenu from "./SettingsMenu.vue"
+
+import { computed } from 'vue'
+
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const viewType = computed(() => route.meta.viewType ?? 'simple' )
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/settings/SettingsIndex.vue

@@ -0,0 +1,22 @@
+<template>
+
+  <SettingsMenu class="h-full block md:hidden surface-section" />
+
+  <div class="flex-column flex-auto align-items-center p-5 hidden md:flex">
+    <Connected class="mb-5" />
+    <ChangePassword />
+  </div>
+
+</template>
+
+<script setup>
+  import SettingsMenu from "./SettingsMenu.vue"
+
+  import ChangePassword from "../password/ChangePassword.vue"
+  import Connected from "../connected/Connected.vue"
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/settings/SettingsMenu.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex flex-column h-full">
+    <div class="overflow-y-auto">
+      <ul class="list-none p-2 m-0">
+        <li>
+          <div class="p-3 text-500 font-medium">SETTINGS</div>
+        </li>
+
+        <SettingsMenuItem name="user:identification" icon="id-card" label="Identification" class="hidden md:block" />
+
+        <SettingsMenuItem name="user:settings" icon="id-card" label="General Settings" class="hidden md:block" />
+
+        <SettingsMenuItem name="user:notificationsSettings" icon="exclamation-circle" label="Notifications" />
+
+      </ul>
+
+      <ul class="list-none p-2 m-0 border-top-1 surface-border">
+        <li>
+          <div class="p-3 text-500 font-medium">AUTHORIZATION</div>
+        </li>
+
+        <SettingsMenuItem name="user:connected" icon="users" label="Connected Accounts" />
+
+        <SettingsMenuItem name="user:changePassword" icon="key" label="ChangePassword" />
+
+      </ul>
+
+      <ul class="list-none p-2 m-0 border-top-1 surface-border">
+
+        <SettingsMenuItem name="user:delete" icon="trash" label="Delete Account" />
+
+      </ul>
+    </div>
+
+    <!--        <div class="p-2 mt-auto border-top-1 surface-border">
+              <ul class="list-none p-2 m-0 hidden origin-bottom animation-duration-150">
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
+                      border-round transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-user mr-2"></i>
+                    <span class="font-medium">Profile</span>
+                  </a>
+                </li>
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
+                      border-round transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-cog mr-2"></i>
+                    <span class="font-medium">Settings</span>
+                  </a>
+                </li>
+                <li>
+                  <a v-ripple class="flex align-items-center cursor-pointer p-3 text-700 hover:surface-100
+                      border-round transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-sign-out mr-2"></i>
+                    <span class="font-medium">Sign Out</span>
+                  </a>
+                </li>
+              </ul>
+              <a v-ripple class="p-3 flex align-items-center cursor-pointer text-700 hover:surface-100
+                  border-round transition-colors transition-duration-150 p-ripple"
+                 v-styleclass="{ selector: '@prev', enterClass: 'hidden', enterActiveClass: 'scalein',
+                   leaveToClass: 'hidden', leaveActiveClass: 'fadeout' }">
+                <img src="/images/empty-user-photo.svg" class="mr-2 border-circle" style="width: 28px; height: 28px"/>
+                <span class="font-medium">Amy Elsner</span>
+                <i class="pi pi-chevron-up ml-auto"></i>
+              </a>
+            </div>-->
+  </div>
+</template>
+
+<script setup>
+  import SettingsMenuItem from "./SettingsMenuItem.vue"
+
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/settings/SettingsMenuItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <li class="block">
+    <router-link :to="{ name }"
+                 :class="route.name == name ? 'text-blue-500' : 'text-700'"
+                 v-ripple
+                 class="flex align-items-center cursor-pointer p-3 hover:surface-100
+                          border-round transition-colors transition-duration-150 p-ripple no-underline">
+      <i class="pi mr-2" :class="'pi-'+icon"></i>
+      <span class="font-medium">{{ label }}</span>
+    </router-link>
+  </li>
+</template>
+
+<script setup>
+
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+
+
+  const { name, label, icon } = defineProps({
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: true
+    }
+  })
+
+</script>

package/front/src/sign/SignIn.vue

@@ -0,0 +1,93 @@
+<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">Welcome Back</div>
+        <span class="text-600 font-medium line-height-3">Don't have an account?</span>
+        <router-link :to="{ name: 'user:signUp' }"
+                     class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">
+          Create today!</router-link>
+      </div>
+
+      <command-form service="passwordAuthentication" action="signInEmail" v-slot="{ data }"
+                    @done="handleDone" keepOnDone v-if="isMounted">
+
+        <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 id="email-help" class="p-error">{{ data.emailError }}</small>
+        </div>
+
+        <div class="p-field mb-3">
+          <label for="password" class="block text-900 font-medium mb-2">Password (optional)</label>
+          <Password id="password" class="w-full" inputClass="w-full" toggleMask
+                    aria-describedby="password-help" :class="{ 'p-invalid': data.passwordHashError }"
+                    v-model="data.passwordHash" />
+          <small id="password-help" class="p-error">{{ data.passwordHashError }}</small>
+        </div>
+
+        <div class="flex align-items-center justify-content-between mb-6">
+          <div class="flex align-items-center">
+            <Checkbox id="rememberme" :binary="true" class="mr-2"></Checkbox>
+            <label for="rememberme">Remember me</label>
+          </div>
+          <router-link :to="{ name: 'user:resetPassword' }"
+                       class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">
+            Forgot password?
+          </router-link>
+        </div>
+
+        <Button label="Sign In" 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="Sign In with GitHub" icon="pi pi-github" class="w-full p-button-secondary mb-2"></Button>
+        <Button label="Sign In with Google" 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 Password from "primevue/password"
+
+  import { onMounted, ref } from 'vue'
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  function handleDone({ parameters, result }) {
+    console.log("DONE RESULT", result)
+    if(result.type == 'sent') {
+      const { authentication } = result
+      router.push({
+        name: 'user:sent',
+        params: {
+          authentication
+        }
+      })
+    } else {
+      router.push({
+        name: 'user:signInFinished',
+      })
+    }
+  }
+
+</script>
+
+<style>
+
+</style>

package/front/src/sign/SignInFinished.vue

@@ -0,0 +1,27 @@
+<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">Signed In</div>
+      <p class="mt-0 p-0 line-height-3">Congratulations! You have successfully logged in to your account.</p>
+      <div v-if="afterSignIn" class="flex flex-row align-items-center">
+        <Button label="Next" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Button from 'primevue/button'
+
+  import { onMounted, ref } from 'vue'
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { computed } from 'vue'
+
+  const afterSignIn = computed( () => isMounted.value && localStorage.redirectAfterSignIn )
+</script>
+
+<style>
+
+</style>

package/front/src/sign/SignOut.vue

@@ -0,0 +1,37 @@
+<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">Sign Out</div>
+      <p class="mt-0 p-0 line-height-3">Signing out</p>
+      <ProgressSpinner v-if="isMounted" class="m-3" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import ProgressSpinner from "primevue/progressspinner"
+
+  import { onMounted, ref } from 'vue'
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  import { actions } from '@live-change/vue3-ssr'
+  import { inject } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  const workingZone = inject('workingZone')
+
+  const { signOut } = actions().user
+
+  if(typeof window != 'undefined') {
+    workingZone.addPromise('signOut', (async () => {
+      await signOut({})
+      router.push({name: 'user:signOutFinished'})
+    })())
+  }
+</script>
+
+<style>
+
+</style>

package/front/src/sign/SignOutFinished.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">Signed Out</div>
+      <p class="mt-0 p-0 line-height-3">You have successfully signed out of your account.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

package/front/src/sign/SignUp.vue

@@ -0,0 +1,51 @@
+<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">Sign Up</div>
+      </div>
+
+      <command-form service="messageAuthentication" action="signUpEmail" v-slot="{ data, submit }"
+                    @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="Sign Up with email" icon="pi pi-user" class="w-full" type="submit"></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/sign/SignUpFinished.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">Signed Up</div>
+      <p class="mt-0 p-0 line-height-3">Congratulations! You have successfully created your account.</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>