Add invitation form to vue-user package

apps/demo/src/locales/en/user.json

@@ -0,0 +1,14 @@
+{
+  "message": {
+    "invitation": {
+      "success": "Invitation sent to {user} successfully"
+    }
+  },
+  "label": {
+    "basic": "Basic",
+    "invitationForm": "Invitation form",
+    "withAppField": "With app field",
+    "withRoleField": "With role field"
+  },
+  "title": "User library"
+}

apps/demo/src/locales/fr/user.json

@@ -0,0 +1,14 @@
+{
+  "message": {
+    "invitation": {
+      "success": "Invitation sent to {user} successfully"
+    }
+  },
+  "label": {
+    "basic": "Basic",
+    "invitationForm": "Invitation form",
+    "withAppField": "With app field",
+    "withRoleField": "With role field"
+  },
+  "title": "User library"
+}

apps/demo/src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import { feature } from "@/config";
 import form from "./form";
 import ui from "./ui";
+import user from "./user";
 
 // import About from "@/views/About.vue";
 import Home from "@/views/Home.vue";
@@ -49,6 +50,7 @@ const router: Router = createRouter({
     },
     ...form,
     ...ui,
+    ...user,
   ],
 } as RouterOptions);
 

apps/demo/src/router/user.ts

@@ -0,0 +1,22 @@
+const InvitationForm = () => import("@/views/User/invitationForm/Index.vue");
+const User = () => import("@/views/User/Index.vue");
+
+const routes = [
+  {
+    path: "/user",
+    children: [
+      {
+        component: InvitationForm,
+        name: "invitationForm",
+        path: "invitation-form",
+      },
+      {
+        component: User,
+        name: "user",
+        path: "",
+      },
+    ],
+  },
+];
+
+export default routes;

apps/demo/src/views/User/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <UserPage :title="$t('ui.title')" />
+</template>
+
+<script lang="ts">
+export default {
+  name: "User",
+};
+</script>
+
+<script setup lang="ts">
+import UserPage from "./UserPage.vue";
+</script>

apps/demo/src/views/User/UserPage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="demo">
+    <Sidebar :menu="menu" class="demo-aside" no-header />
+    <div class="demo-main">
+      <Page :title="title" :sub-title="subTitle">
+        <template #toolbar>
+          <slot name="toolbar"></slot>
+        </template>
+        <slot></slot>
+      </Page>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "UserPage",
+};
+</script>
+
+<script setup lang="ts">
+import { Sidebar } from "@dzangolab/vue3-layout";
+
+import type { PropType } from "vue";
+
+defineProps({
+  subTitle: {
+    default: undefined,
+    required: false,
+    type: String as PropType<string>,
+  },
+  title: {
+    default: undefined,
+    required: false,
+    type: String as PropType<string>,
+  },
+});
+
+const menu = [
+  {
+    name: "Get started",
+    routeName: "user",
+  },
+  {
+    name: "Invitation form",
+    routeName: "invitationForm",
+  },
+];
+</script>
+
+<style lang="css">
+@import "@/assets/css/demoPage.css";
+</style>

apps/demo/src/views/User/invitationForm/Index.vue

@@ -0,0 +1,197 @@
+<template>
+  <UserPage
+    :title="$t('user.label.invitationForm')"
+    class="demo-invitation-form"
+  >
+    <template #toolbar>
+      <router-link :to="{ name: 'user' }" class="back">
+        {{ $t("common.back") }}
+      </router-link>
+    </template>
+
+    <section>
+      <h2>{{ $t("user.label.basic") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm @submit="onSubmit" />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("user.label.withAppField") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm :apps="apps" @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const apps = [
+            {
+              id: 1,
+              name: "Admin",
+              origin: "admin-origin",
+              supportedRoles: [
+                {
+                  id: 1,
+                  name: "ADMIN",
+                },
+                {
+                  id: 2,
+                  name: "SUPERADMIN",
+                },
+              ],
+            },
+            {
+              id: 2,
+              name: "User",
+              origin: "user-origin",
+              supportedRoles: [
+                {
+                  id: 3,
+                  name: "USER",
+                },
+              ],
+            },
+          ];
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm :apps="apps" @submit="onSubmit" />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("user.label.withRoleField") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm :roles="roles" @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const roles = [
+            {
+              id: 1,
+              name: "ADMIN",
+            },
+            {
+              id: 2,
+              name: "SUPERADMIN",
+            },
+            {
+              id: 3,
+              name: "USER",
+            },
+          ];
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm :roles="roles" @submit="onSubmit" />
+      </div>
+    </section>
+  </UserPage>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@dzangolab/vue3-i18n";
+import { InvitationForm } from "@dzangolab/vue3-user";
+import { notify } from "@kyvg/vue3-notification";
+
+import UserPage from "../UserPage.vue";
+
+import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+const { t } = useI18n();
+
+const roles = [
+  {
+    id: 1,
+    name: "ADMIN",
+  },
+  {
+    id: 2,
+    name: "SUPERADMIN",
+  },
+  {
+    id: 3,
+    name: "USER",
+  },
+];
+
+const apps = [
+  {
+    id: 1,
+    name: "Admin",
+    origin: "admin-origin",
+    supportedRoles: [
+      {
+        id: 1,
+        name: "ADMIN",
+      },
+      {
+        id: 2,
+        name: "SUPERADMIN",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "User",
+    origin: "user-origin",
+    supportedRoles: [
+      {
+        id: 3,
+        name: "USER",
+      },
+    ],
+  },
+];
+
+const onSubmit = (formData: InvitationPayload) => {
+  notify({
+    text: t("user.message.invitation.success", { user: formData.email }),
+    type: "success",
+  });
+};
+</script>

packages/vue-form/src/components/Form.vue

@@ -15,7 +15,7 @@ import { Form } from "vee-validate";
 
 const emit = defineEmits(["submit"]);
 
-const onSubmit = () => {
-  emit("submit");
+const onSubmit = (data: object) => {
+  emit("submit", data);
 };
 </script>

packages/vue-user/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as DropdownUserMenu } from "./DropdownUserMenu.vue";
+export { default as InvitationForm } from "./invitation/InvitationForm.vue";
 export { default as LoginForm } from "./LoginForm.vue";
 export { default as PasswordResetForm } from "./PasswordResetForm.vue";
 export { default as PasswordResetRequestForm } from "./PasswordResetRequestForm.vue";