@open-commune/web 0.1.3

package/pages/index/password/define/[token].vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="mt-12 text-center">
+    <h2 class="inline-flex mt-6 text-sm font-semibold">
+      Nouveau mot de passe
+    </h2>
+    <p class="mt-4 font-light text-sm text-gray-600">
+      Choisissez un mot de passe robuste (10 caractères minimum).
+    </p>
+    <form class="mt-12 space-y-6" @submit.prevent="_updatePassword">
+      <input-text
+        place-holder="Mot de passe"
+        name="password"
+        type="password"
+        autocomplete="new-password"
+        :value="password"
+        required
+        @change="password = $event"
+      />
+      <input-text
+        place-holder="Confirmation"
+        name="password-confirmation"
+        type="password"
+        autocomplete="new-password"
+        :value="passwordConfirmation"
+        required
+        @change="passwordConfirmation = $event"
+      />
+      <button-primary
+        type="submit"
+        :label="isLoading ? 'Envoie en cours' : 'Confirmer'"
+        :disabled="!password || password !== passwordConfirmation"
+        :loading="isLoading"
+        class="w-full"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import InputText from '~/components/forms/inputs/input-text'
+import ButtonPrimary from '~/components/elements/buttons/primary'
+
+// Prepare composables
+const notificationsStore = useNotificationsStore()
+const $route = useRoute()
+const $router = useRouter()
+const { Entrance } = useModels()
+
+// Prepare data
+const password = ref('')
+const passwordConfirmation = ref('')
+const isLoading = ref(false)
+
+// Prepare methods
+// Cette page ne sert QUE la réinitialisation : le compte existe déjà, son nom
+// est conservé côté serveur. L'invitation, elle, a son propre écran (/welcome)
+// — c'est le seul parcours qui a un nom d'affichage à demander. Les deux
+// partageaient cet écran, et un utilisateur venu du mail « mot de passe
+// oublié » se voyait réclamer un nom sous un titre « Votre compte ».
+const _updatePassword = async () => {
+  isLoading.value = true
+  try {
+    const { token } = $route.params
+    await Entrance.updatePassword({ token, password: password.value })
+    notificationsStore.add({ icon: 'iconoir:password-cursor', type: 'success', title: 'Mot de passe mis à jour, connectez-vous.' })
+    $router.push('/')
+  } catch (err) {
+    console.log(err)
+    notificationsStore.add({
+      icon: 'iconoir:password-error',
+      type: 'warn',
+      title: 'Lien expiré ou déjà utilisé, ou mot de passe trop court (10 caractères minimum).'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>

package/pages/index/password/recover/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="mt-12 text-center">
+    <h2 class="inline-flex mt-6 text-sm font-semibold">
+      {{ title }}
+    </h2>
+    <p class="mt-4 font-light text-sm text-gray-600">
+      {{ message }}
+    </p>
+    <form v-if="!isSent" class="mt-12 space-y-6" @submit.prevent="_recoverPassword">
+      <input-text
+        place-holder="Adresse email"
+        name="email"
+        type="email"
+        autocomplete="email"
+        :value="emailAddress"
+        :read-only="isLoading"
+        required
+        @change="emailAddress = $event"
+      />
+      <button-primary
+        type="submit"
+        :label="isLoading ? 'Envoie en cours' : 'Continuer'"
+        :disabled="!emailAddress"
+        :loading="isLoading"
+        class="w-full"
+      />
+    </form>
+    <button-primary
+      v-if="isSent"
+      label="← Revenir à l'espace de connexion"
+      class="w-full mt-8"
+      @click="$router.push('/')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import InputText from '~/components/forms/inputs/input-text'
+import ButtonPrimary from '~/components/elements/buttons/primary'
+
+// Prepare composables
+const notificationsStore = useNotificationsStore()
+const { Entrance } = useModels()
+
+// Prepare data
+const isLoading = ref(false)
+const isSent = ref(false)
+const emailAddress = ref('')
+
+// Prepare computed
+const title = computed(() => {
+  return isSent.value ? 'Le mail est parti' : 'Réinitialiser votre mot de passe'
+})
+const message = computed(() => {
+  return isSent.value ? 'N\'hésitez pas à vérifier vos courriers indesirables.' : 'Entrez votre adresse email et nous vous enverrons un lien pour mettre à jour votre mot de passe.'
+})
+
+// Prepare methods
+const _recoverPassword = async () => {
+  isLoading.value = true
+  try {
+    await Entrance.recoverPassword(emailAddress.value)
+    notificationsStore.add({ icon: 'iconoir:mail-out', type: 'success', title: 'Email envoyé.' })
+    isSent.value = true
+  } catch (err) {
+    console.log(err) // eslint-disable-line
+  } finally {
+    setTimeout(() => { isLoading.value = false }, 2 * 1000)
+  }
+}
+</script>

package/pages/index/welcome/[token].vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="mt-12 text-center">
+    <h2 class="inline-flex mt-6 text-sm font-semibold">
+      Bienvenue !
+    </h2>
+    <p class="mt-4 font-light text-sm text-gray-600">
+      Vous avez été invité·e à rejoindre l'espace d'administration.
+      Choisissez votre nom d'affichage et un mot de passe robuste (10 caractères minimum).
+    </p>
+    <form class="mt-12 space-y-6" @submit.prevent="_createAccount">
+      <input-text
+        place-holder="Votre nom"
+        name="name"
+        autocomplete="name"
+        :value="name"
+        required
+        @change="name = $event"
+      />
+      <input-text
+        place-holder="Mot de passe"
+        name="password"
+        type="password"
+        autocomplete="new-password"
+        :value="password"
+        required
+        @change="password = $event"
+      />
+      <input-text
+        place-holder="Confirmation"
+        name="password-confirmation"
+        type="password"
+        autocomplete="new-password"
+        :value="passwordConfirmation"
+        required
+        @change="passwordConfirmation = $event"
+      />
+      <button-primary
+        type="submit"
+        :label="isLoading ? 'Envoie en cours' : 'Créer mon compte'"
+        :disabled="!name || !password || password !== passwordConfirmation"
+        :loading="isLoading"
+        class="w-full"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import InputText from '~/components/forms/inputs/input-text'
+import ButtonPrimary from '~/components/elements/buttons/primary'
+
+// Flux invitation Commun : la validité du jeton est vérifiée au moment de
+// l'acceptation (auth.acceptInvitation) — plus d'étape « confirmation d'email »
+// préalable.
+//
+// L'écran porte désormais le formulaire au lieu de renvoyer sur
+// /password/define : cette page-là ne sert plus qu'à la réinitialisation, où
+// il n'y a pas de nom à demander.
+const notificationsStore = useNotificationsStore()
+const $route = useRoute()
+const $router = useRouter()
+const { Entrance } = useModels()
+
+// Prepare data
+const name = ref('')
+const password = ref('')
+const passwordConfirmation = ref('')
+const isLoading = ref(false)
+
+// Prepare methods
+const _createAccount = async () => {
+  isLoading.value = true
+  try {
+    const { token } = $route.params
+    await Entrance.acceptInvitation({ token, name: name.value, password: password.value })
+    notificationsStore.add({ icon: 'iconoir:password-cursor', type: 'success', title: 'Compte activé, connectez-vous.' })
+    $router.push('/')
+  } catch (err) {
+    console.log(err)
+    notificationsStore.add({
+      icon: 'iconoir:password-error',
+      type: 'warn',
+      title: 'Invitation invalide ou mot de passe trop court (10 caractères minimum).'
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>

package/pages/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="min-h-screen bg-white flex">
+    <div class="m-auto w-full max-w-lg lg:w-96">
+      <div class="flex flex-col items-center space-y-2 mb-4">
+        <img
+          src="/logo-black.svg"
+          alt="Logo"
+          class="dark:hidden h-16 w-auto"
+        >
+        <img
+          src="/logo-white.svg"
+          alt="Logo"
+          class="hidden h-24 w-auto"
+        >
+        <p v-if="demoEnv" class="text-sm text-gray-400 w-full border-t border-gray-100 text-center pt-2">
+          <span class="bg-black rounded-lg text-white px-4 text-xs py-0.5 h-5 mx-auto">
+            beta
+          </span>
+        </p>
+      </div>
+      <nuxt-page />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const $config = useRuntimeConfig()
+
+definePageMeta({
+  layout: 'entrance',
+  auth: {
+    unauthenticatedOnly: true,
+    navigateAuthenticatedTo: '/overview',
+  }
+})
+
+// Prepare computed
+// L'image d'instance est COMMUNE à tous les clients : rien de spécifique n'y est
+// cuit. L'hôte servi est donc la seule source fiable pour distinguer une démo.
+const demoEnv = computed(() => {
+  const host = import.meta.client ? window.location.host : ''
+  return host.includes('.beta') || host.includes('localhost')
+})
+</script>

package/pages/management/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="relative block w-full">
+
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  permissions: ['manage:all'],
+  headings: {
+    title: 'Bienvenue',
+    description: 'Cette section est réservée aux administrateurs.'
+  }
+})
+</script>

package/pages/management/members.vue

@@ -0,0 +1,176 @@
+<template>
+  <section class="w-full">
+    <button-secondary label="Inviter un membre" class="mb-6" @click="_openModalForm('create')" />
+    <default-table
+      v-if="!$route.params.event"
+      :headers="TABLE_HEADERS"
+      :filters="filters"
+      :items="records"
+      :actions="abilities"
+      :pagination-size="limit"
+      display-search-bar
+      paginated-content
+      @fetch-more="_fetchMore"
+      @update="_openModalForm('update', $event)"
+      @remove="_handle('remove', $event)"
+    />
+  </section>
+</template>
+
+<script setup>
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import defaultTable from '~/components/data/lists/data-lists-table'
+import { useModalStore } from '~/store/layout/modal'
+import { useNotificationsStore } from '~/store/layout/notifications'
+
+
+definePageMeta({
+  permissions: ['manage:all'],
+  preFetch: ['User'],
+  headings: {
+    title: 'Membres',
+    description: 'Retrouvez & managez ici toutes les membres de la plateforme.'
+  }
+})
+
+const { User } = useModels()
+const $route = useRoute()
+const $modalStore = useModalStore()
+const notificationsStore = useNotificationsStore()
+
+// Prepare constants
+const TABLE_HEADERS = [
+  {
+    nestedValue: false,
+    componentOptions: {
+      titleKey: 'fullName',
+      descriptionKey: 'emailAddress',
+    },
+    component: 'data-summary'
+  },
+  {
+    title: 'Rôle',
+    property: 'role',
+    component: 'data-text'
+  },
+  {
+    component: "data-spacer",
+    grow: true
+  },
+  {
+    component: 'actions',
+    componentOptions: {
+      options: [{ label: 'Voir', action: 'read' }, { label: 'Modifier', action: 'update' }, { label: 'Supprimer', action: 'remove' }]
+    }
+  },
+]
+
+// Prepare reactive data
+const limit = ref(25)
+
+// Prepare computed
+const records = computed(() => User.repo.all())
+const filters = computed(() => [])
+const abilities = computed(() => ['update', 'remove'])
+
+// Prepare methods
+const _fetchMore = async (skip = 0) => {
+  await User.list(undefined, undefined, { skip, limit: limit.value })
+}
+
+// Prepare methods
+const _handle = async (action, data = {}) => {
+  const { _id } = data
+  switch (action) {
+    case 'create': {
+      // Une INVITATION est émise : l'email part côté serveur, et le lien est
+      // copié au presse-papier comme second recours.
+      // L'origine vient du navigateur, jamais d'une URL cuite au build —
+      // l'image d'instance est commune à tous les clients.
+      const { token } = await User.create(data)
+      const link = `${window.location.origin}/welcome/${token}`
+      try {
+        await navigator.clipboard.writeText(link)
+        notificationsStore.add({
+          icon: 'iconoir:mail-out',
+          type: 'success',
+          title: 'Lien d\'invitation copié dans le presse-papier (valable 7 jours).'
+        })
+      } catch {
+        console.log('Lien d\'invitation :', link)
+        notificationsStore.add({
+          icon: 'iconoir:mail-out',
+          type: 'success',
+          title: 'Invitation créée — lien affiché dans la console (valable 7 jours).'
+        })
+      }
+      await User.list()
+      break
+    }
+    case 'update':
+      await User.update(_id, data)
+      break
+    case 'remove':
+      await User.remove(data._id)
+      break
+    default:
+      throw new Error('E_UNHANDLED')
+  }
+}
+
+const _openModalForm = (action, record) => {
+  $modalStore.open({
+    onSubmit: async (data) => _handle(action, data),
+    details: {
+      title: `${action === 'create' ? 'Inviter' : 'Modifier'} un membre`,
+      subTitle: action === 'create'
+        ? 'Un lien d\'invitation sera généré pour ce nouveau membre.'
+        : 'Modifiez les informations du membre.',
+      acceptButton: `${action === 'create' ? 'Inviter' : 'Modifier'}`,
+      closeButton: 'Annuler'
+    },
+    attributes: action === 'create'
+      ? [
+          {
+            property: 'emailAddress',
+            componentOptions: {
+              label: 'Adresse mail',
+              name: 'emailAddress'
+            },
+            component: 'input-text'
+          },
+          {
+            property: 'role',
+            componentOptions: {
+              label: 'Rôle',
+              name: 'role',
+              items: ['admin', 'redacteur'],
+              object: false
+            },
+            component: 'select-enum'
+          }
+        ]
+      : [
+          {
+            property: 'firstName',
+            componentOptions: {
+              label: 'Nom d\'affichage',
+              name: 'firstName'
+            },
+            component: 'input-text'
+          },
+          {
+            property: 'role',
+            componentOptions: {
+              label: 'Rôle',
+              name: 'role',
+              items: ['admin', 'redacteur'],
+              object: false
+            },
+            component: 'select-enum'
+          }
+        ],
+    record
+  })
+}
+</script>

package/pages/management/organizations.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="relative block w-full">
+    <!-- Instance single-tenant : une seule collectivité par déploiement. -->
+    <p class="mb-6 rounded-md bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-800">
+      Cette instance héberge une seule collectivité — la création d'organisations n'est plus disponible.
+    </p>
+
+    <data-list :items="sortedOrganizations" :density="1" :density-children="2" :group-by="'type'" :item-value="'type'" class="space-y-4 bg-gray-50 p-2 rounded-md">
+      <template #item="{ item }">
+        <h3 class="text-gray-400 text-sm font-medium mb-2 pl-2">
+          @ {{ item.type }}
+        </h3>
+      </template>
+      <template #item-child="{ item: itemChild }">
+        <data-list-row
+          :item="itemChild"
+          :to="`/${itemChild._id}`"
+          :headers="ROW_DEFINITION"
+          class="border border-gray-100 bg-white shadow-sm rounded-lg"
+          @click="_handleRowEvent"
+        />
+      </template>
+    </data-list>
+  </div>
+</template>
+
+<script setup>
+import ButtonSecondary from '~/components/elements/buttons/secondary'
+import dataList from '~/components/data/lists/data-list'
+import dataListRow from '~/components/data/display/row'
+import { useWorkspaceStore } from '~/store/layout/workspace'
+import { useModalStore } from '~/store/layout/modal'
+
+definePageMeta({
+  permissions: ['manage:all'],
+  preFetch: ['Organization'],
+  headings: {
+    title: 'Organisations',
+    description: 'Retrouvez & managez ici toutes les organisations.'
+  }
+})
+
+const { Organization } = useModels()
+const modalStore = useModalStore()
+
+// Prepare constants
+const ORGANIZATIONS_ORDER = ['customer', 'network', 'country', 'bu', 'root'];
+const ROW_DEFINITION = [
+  {
+    component: 'data-avatar',
+    nestedValue: false
+  },
+  {
+    nestedValue: false,
+    componentOptions: {
+      titleKey: 'name',
+      descriptionKey: 'path',
+    },
+    component: 'data-summary'
+  },
+  {
+    component: "data-spacer",
+    grow: true
+  },
+  {
+    component: 'actions',
+    componentOptions: {
+      options: [{ label: 'Voir', action: 'read' }]
+    }
+  }
+]
+
+// Prepare data
+const { data: organizations } = await useAsyncData('overview', () => Organization.list())
+
+// Prepare computed
+const sortedOrganizations = computed(() => organizations.value.sort((a, b) => ORGANIZATIONS_ORDER.indexOf(a.type) - ORGANIZATIONS_ORDER.indexOf(b.type)))
+
+// Prepare methods
+const _handleRowEvent = async (eventName, value) => {
+  console.log(eventName, value)
+}
+// import { UPDATE_ORGANIZATION } from '~/store/actions'
+// import buttonSecondary from '~/components/elements/buttons/secondary'
+
+// export default {
+//   name: 'Organizations',
+//   meta: {
+//     permissions: ['entrance:self'],
+//     preFetch: ['Organization'],
+//     headings: {
+//       title: 'Organisations',
+//       description: 'Retrouvez & managez ici toutes les organisations.'
+//     }
+//   },
+//   components: { buttonSecondary },
+//   computed: {
+//     organizations () {
+//       return this.$api.Organization.all()
+//     }
+//   },
+//   beforeDestroy () {
+//     this.$nuxt.$off('modalCreateOrganization')
+//   },
+//   mounted () {
+//     this.$nuxt.$on('modalCreateOrganization', this.createOrganization)
+//   },
+//   methods: {
+//     async updateSelectedOrganization (organizationRecord) {
+//       try {
+//         await this.$store.dispatch(UPDATE_ORGANIZATION, organizationRecord)
+//         this.$router.replace(`${organizationRecord.slug}/`)
+//       } catch (err) {
+//         console.log(err) // eslint-disable-line
+//       }
+//     },
+//     openModalForm (record) {
+//       this.$nuxt.$emit('openModalForm', {
+//         submitEvent: 'modalCreateOrganization',
+//         details: {
+//           title: 'Créer une nouvelle organisation',
+//           subTitle: 'Renseignez cette nouvelle entité.'
+//         },
+//         attributes: [
+//           // directParent
+//           {
+//             property: 'directParent',
+//             componentOptions: {
+//               placeHolder: 'Parent de l\'organisation',
+//               name: 'directParent',
+//               model: 'Organization',
+//               object: true,
+//               itemKey: 'name',
+//               itemValue: 'slug'
+//             },
+//             component: 'select-model'
+//           },
+//           {
+//             property: 'type',
+//             componentOptions: {
+//               placeHolder: 'Type d\'organisation',
+//               name: 'type',
+//               items: [
+//                 'bu',
+//                 'country',
+//                 'network',
+//                 'customer'
+//               ]
+//             },
+//             component: 'select-enum'
+//           },
+//           {
+//             property: 'slug',
+//             componentOptions: {
+//               placeHolder: 'Identifiant de l\'organisation (slug)',
+//               name: 'slug'
+//             },
+//             component: 'input-text'
+//           },
+//           {
+//             property: 'name',
+//             componentOptions: {
+//               placeHolder: 'Nom de l\'organisation',
+//               name: 'name'
+//             },
+//             component: 'input-text'
+//           },
+//           {
+//             property: 'type',
+//             componentOptions: {
+//               placeHolder: 'Localisation',
+//               name: 'organization'
+//             },
+//             component: 'input-location'
+//           }
+//         ],
+//         record
+//       })
+//     },
+//     async createOrganization (data = {}) {
+//       this.$nuxt.$loading.start()
+//       try {
+//         await this.$api.Organization.create(data)
+//       } catch (err) {
+//         console.log(err)
+//       } finally {
+//         this.$nuxt.$loading.finish()
+//       }
+//     }
+//   }
+// }
+</script>