@ysk-kit/cli 1.0.0

package/templates/capabilities/team/apps/api/src/modules/organizations/infra/organization.app.test.ts

@@ -0,0 +1,213 @@
+import request from 'supertest';
+import { describe, expect, it } from 'vitest';
+import { createApp } from '../../../app';
+import { createMemoryInput } from '../../../create-memory-input';
+
+describe('organizations http', () => {
+  it('creates an org with the actor as owner', async () => {
+    const app = createApp(createMemoryInput().input);
+    const registered = await request(app).post('/v1/auth/register').send({
+      email: 'owner@ysk.hk',
+      password: 'password1',
+      displayName: 'Owner',
+    });
+    const token = registered.body.data.accessToken as string;
+    const created = await request(app)
+      .post('/v1/organizations')
+      .set('authorization', `Bearer ${token}`)
+      .send({ name: 'YSK' });
+    expect(created.status).toBe(201);
+    const list = await request(app)
+      .get('/v1/organizations')
+      .set('authorization', `Bearer ${token}`);
+    expect(list.body.data).toHaveLength(1);
+    const members = await request(app)
+      .get(`/v1/organizations/${created.body.data.id}/members`)
+      .set('authorization', `Bearer ${token}`);
+    expect(members.body.data[0]?.role).toBe('OWNER');
+  });
+
+  it('rejects org list without a token', async () => {
+    const app = createApp(createMemoryInput().input);
+    const res = await request(app).get('/v1/organizations');
+    expect(res.status).toBe(401);
+  });
+
+  it('invites an existing user who accepts with the token only', async () => {
+    const mem = createMemoryInput();
+    const app = createApp(mem.input);
+    const ownerRes = await request(app).post('/v1/auth/register').send({
+      email: 'owner@ysk.hk',
+      password: 'password1',
+      displayName: 'Owner',
+    });
+    await request(app).post('/v1/auth/register').send({
+      email: 'member@ysk.hk',
+      password: 'password1',
+      displayName: 'Member',
+    });
+    const ownerToken = ownerRes.body.data.accessToken as string;
+    const org = await request(app)
+      .post('/v1/organizations')
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ name: 'YSK' });
+    const invited = await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ email: 'member@ysk.hk', role: 'MEMBER' });
+    expect(invited.status).toBe(200);
+    expect(JSON.stringify(invited.body)).not.toContain('token=');
+    const pending = await request(app)
+      .get(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${ownerToken}`);
+    expect(JSON.stringify(pending.body)).not.toContain('token=');
+    const inviteJob = mem.jobs.find(
+      (job) => job.name === 'email.send' && job.payload.vars?.inviteUrl,
+    );
+    const inviteToken = new URL(inviteJob?.payload.vars?.inviteUrl ?? 'http://x').searchParams.get(
+      'token',
+    );
+    expect(inviteToken).toBeTruthy();
+    const accepted = await request(app)
+      .post('/v1/organizations/invites/accept')
+      .send({ token: inviteToken });
+    expect(accepted.status).toBe(200);
+    const memberLogin = await request(app).post('/v1/auth/login').send({
+      email: 'member@ysk.hk',
+      password: 'password1',
+    });
+    const memberToken = memberLogin.body.data.accessToken as string;
+    const members = await request(app)
+      .get(`/v1/organizations/${org.body.data.id}/members`)
+      .set('authorization', `Bearer ${memberToken}`);
+    expect(members.body.data.some((row: { email: string }) => row.email === 'member@ysk.hk')).toBe(
+      true,
+    );
+  });
+
+  it('invites an unknown email then accepts with a password', async () => {
+    const mem = createMemoryInput();
+    const app = createApp(mem.input);
+    const ownerRes = await request(app).post('/v1/auth/register').send({
+      email: 'owner@ysk.hk',
+      password: 'password1',
+      displayName: 'Owner',
+    });
+    const ownerToken = ownerRes.body.data.accessToken as string;
+    const org = await request(app)
+      .post('/v1/organizations')
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ name: 'YSK' });
+    await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ email: 'new@ysk.hk', role: 'ADMIN' });
+    const invitedUser = await mem.users.findByEmail('new@ysk.hk');
+    expect(invitedUser?.status).toBe('INVITED');
+    const conflict = await request(app).post('/v1/auth/register').send({
+      email: 'new@ysk.hk',
+      password: 'password1',
+      displayName: 'New',
+    });
+    expect(conflict.status).toBe(409);
+    const inviteJob = mem.jobs.find(
+      (job) => job.name === 'email.send' && job.payload.vars?.inviteUrl,
+    );
+    const inviteToken = new URL(inviteJob?.payload.vars?.inviteUrl ?? 'http://x').searchParams.get(
+      'token',
+    );
+    const accepted = await request(app)
+      .post('/v1/organizations/invites/accept')
+      .send({ token: inviteToken, password: 'password1', displayName: 'New' });
+    expect(accepted.status).toBe(200);
+    const login = await request(app).post('/v1/auth/login').send({
+      email: 'new@ysk.hk',
+      password: 'password1',
+    });
+    expect(login.status).toBe(200);
+    expect(login.body.data.user.status).toBe('ACTIVE');
+  });
+
+  it('forbids members from inviting and protects the last owner', async () => {
+    const mem = createMemoryInput();
+    const app = createApp(mem.input);
+    const ownerRes = await request(app).post('/v1/auth/register').send({
+      email: 'owner@ysk.hk',
+      password: 'password1',
+      displayName: 'Owner',
+    });
+    const memberRes = await request(app).post('/v1/auth/register').send({
+      email: 'member@ysk.hk',
+      password: 'password1',
+      displayName: 'Member',
+    });
+    const ownerToken = ownerRes.body.data.accessToken as string;
+    const memberUser = await mem.users.findByEmail('member@ysk.hk');
+    const org = await request(app)
+      .post('/v1/organizations')
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ name: 'YSK' });
+    await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ email: 'member@ysk.hk', role: 'MEMBER' });
+    const inviteJob = mem.jobs.find(
+      (job) => job.name === 'email.send' && job.payload.vars?.inviteUrl,
+    );
+    const inviteToken = new URL(inviteJob?.payload.vars?.inviteUrl ?? 'http://x').searchParams.get(
+      'token',
+    );
+    await request(app).post('/v1/organizations/invites/accept').send({ token: inviteToken });
+    const memberToken = memberRes.body.data.accessToken as string;
+    const inviteAttempt = await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${memberToken}`)
+      .send({ email: 'other@ysk.hk', role: 'MEMBER' });
+    expect(inviteAttempt.status).toBe(403);
+    const leave = await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/leave`)
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({});
+    expect(leave.status).toBe(403);
+    const removeOwner = await request(app)
+      .delete(`/v1/organizations/${org.body.data.id}/members/${ownerRes.body.data.user.id}`)
+      .set('authorization', `Bearer ${ownerToken}`);
+    expect(removeOwner.status).toBe(403);
+    const removed = await request(app)
+      .delete(`/v1/organizations/${org.body.data.id}/members/${memberUser?.id}`)
+      .set('authorization', `Bearer ${ownerToken}`);
+    expect(removed.status).toBe(200);
+  });
+
+  it('rejects expired or consumed invite tokens', async () => {
+    const mem = createMemoryInput();
+    const app = createApp(mem.input);
+    const ownerRes = await request(app).post('/v1/auth/register').send({
+      email: 'owner@ysk.hk',
+      password: 'password1',
+      displayName: 'Owner',
+    });
+    const ownerToken = ownerRes.body.data.accessToken as string;
+    const org = await request(app)
+      .post('/v1/organizations')
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ name: 'YSK' });
+    await request(app)
+      .post(`/v1/organizations/${org.body.data.id}/invites`)
+      .set('authorization', `Bearer ${ownerToken}`)
+      .send({ email: 'late@ysk.hk', role: 'MEMBER' });
+    const inviteJob = mem.jobs.find(
+      (job) => job.name === 'email.send' && job.payload.vars?.inviteUrl,
+    );
+    const inviteToken = new URL(inviteJob?.payload.vars?.inviteUrl ?? 'http://x').searchParams.get(
+      'token',
+    );
+    await request(app)
+      .post('/v1/organizations/invites/accept')
+      .send({ token: inviteToken, password: 'password1' });
+    const reused = await request(app)
+      .post('/v1/organizations/invites/accept')
+      .send({ token: inviteToken, password: 'password1' });
+    expect(reused.status).toBe(401);
+  });
+});

package/templates/capabilities/team/apps/api/src/modules/organizations/infra/prisma-organization-repository.ts

@@ -0,0 +1,142 @@
+import type { InviteOrgRole } from '@ysk-kit/contracts';
+import type { Organization, OrgInvite, PrismaClient } from '../../../generated/prisma/client';
+import type {
+  IOrganizationRepository,
+  OrganizationRecord,
+  OrgInviteRecord,
+} from '../domain/organization-repository';
+
+const toOrg = (row: Organization): OrganizationRecord => ({
+  id: row.id,
+  name: row.name,
+  stripeCustomerId: row.stripeCustomerId,
+  createdAt: row.createdAt,
+});
+
+const toInviteRole = (role: OrgInvite['role']): InviteOrgRole =>
+  role === 'ADMIN' ? 'ADMIN' : 'MEMBER';
+
+const toInvite = (row: OrgInvite): OrgInviteRecord => ({
+  id: row.id,
+  organizationId: row.organizationId,
+  email: row.email,
+  role: toInviteRole(row.role),
+  tokenHash: row.tokenHash,
+  expiresAt: row.expiresAt,
+  acceptedAt: row.acceptedAt,
+  invitedById: row.invitedById,
+  createdAt: row.createdAt,
+});
+
+export const createPrismaOrganizationRepository = (
+  prisma: PrismaClient,
+): IOrganizationRepository => ({
+  async createWithOwner(input) {
+    const row = await prisma.organization.create({
+      data: {
+        name: input.name,
+        members: { create: { userId: input.ownerUserId, role: 'OWNER' } },
+      },
+    });
+    return toOrg(row);
+  },
+  async findById(id) {
+    const row = await prisma.organization.findUnique({ where: { id } });
+    return row ? toOrg(row) : null;
+  },
+  async listForUser(userId) {
+    const rows = await prisma.organization.findMany({
+      where: { members: { some: { userId } } },
+      orderBy: { createdAt: 'desc' },
+    });
+    return rows.map(toOrg);
+  },
+  async updateName(id, name) {
+    const row = await prisma.organization.update({ where: { id }, data: { name } });
+    return toOrg(row);
+  },
+  async setStripeCustomerId(id, customerId) {
+    const row = await prisma.organization.update({
+      where: { id },
+      data: { stripeCustomerId: customerId },
+    });
+    return toOrg(row);
+  },
+  async findMembership(organizationId, userId) {
+    return prisma.membership.findUnique({
+      where: { organizationId_userId: { organizationId, userId } },
+    });
+  },
+  async listMembers(organizationId) {
+    return prisma.membership.findMany({
+      where: { organizationId },
+      orderBy: { createdAt: 'asc' },
+    });
+  },
+  async addMembership(input) {
+    return prisma.membership.create({ data: input });
+  },
+  async removeMembership(organizationId, userId) {
+    try {
+      await prisma.membership.delete({
+        where: { organizationId_userId: { organizationId, userId } },
+      });
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async countOwners(organizationId) {
+    return prisma.membership.count({ where: { organizationId, role: 'OWNER' } });
+  },
+  async upsertPendingInvite(input) {
+    const email = input.email.toLowerCase();
+    const existing = await prisma.orgInvite.findFirst({
+      where: { organizationId: input.organizationId, email, acceptedAt: null },
+    });
+    if (existing) {
+      const row = await prisma.orgInvite.update({
+        where: { id: existing.id },
+        data: {
+          role: input.role,
+          tokenHash: input.tokenHash,
+          expiresAt: input.expiresAt,
+          invitedById: input.invitedById,
+        },
+      });
+      return toInvite(row);
+    }
+    const row = await prisma.orgInvite.create({
+      data: { ...input, email },
+    });
+    return toInvite(row);
+  },
+  async findPendingInviteByEmail(organizationId, email) {
+    const row = await prisma.orgInvite.findFirst({
+      where: { organizationId, email: email.toLowerCase(), acceptedAt: null },
+    });
+    return row ? toInvite(row) : null;
+  },
+  async findInviteByTokenHash(tokenHash) {
+    const row = await prisma.orgInvite.findUnique({ where: { tokenHash } });
+    return row ? toInvite(row) : null;
+  },
+  async listPendingInvites(organizationId) {
+    const rows = await prisma.orgInvite.findMany({
+      where: { organizationId, acceptedAt: null },
+      orderBy: { createdAt: 'desc' },
+    });
+    return rows.map(toInvite);
+  },
+  async markInviteAccepted(id, at) {
+    await prisma.orgInvite.update({ where: { id }, data: { acceptedAt: at } });
+  },
+  async deleteInvite(id, organizationId) {
+    const row = await prisma.orgInvite.findFirst({
+      where: { id, organizationId, acceptedAt: null },
+    });
+    if (!row) return false;
+    await prisma.orgInvite.delete({ where: { id } });
+    return true;
+  },
+});

package/templates/capabilities/team/apps/mobile/src/screens/invite-screen.tsx

@@ -0,0 +1,40 @@
+import { AcceptInviteCommandSchema } from '@ysk-kit/contracts';
+import { useState } from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { api } from '../lib/client';
+
+export function InviteScreen({ onDone }: { onDone: () => void }) {
+  const [token, setToken] = useState('');
+  const [password, setPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = () => {
+    const parsed = AcceptInviteCommandSchema.safeParse({
+      token,
+      ...(password.length > 0 ? { password } : {}),
+      ...(displayName.length > 0 ? { displayName } : {}),
+    });
+    if (!parsed.success) {
+      setError(parsed.error.issues[0]?.message ?? 'Invalid');
+      return;
+    }
+    setError(null);
+    api.organizations
+      .acceptInvite(parsed.data)
+      .then(() => onDone())
+      .catch((err: Error) => setError(err.message));
+  };
+
+  return (
+    <View>
+      <Button title="Back" onPress={onDone} />
+      <Text>Accept invite</Text>
+      <TextInput autoCapitalize="none" onChangeText={setToken} value={token} />
+      <TextInput secureTextEntry onChangeText={setPassword} value={password} />
+      <TextInput onChangeText={setDisplayName} value={displayName} />
+      <Button title="Accept" onPress={submit} />
+      {error ? <Text>{error}</Text> : null}
+    </View>
+  );
+}

package/templates/capabilities/team/apps/mobile/src/screens/org-detail-screen.tsx

@@ -0,0 +1,154 @@
+import {
+  InviteMemberCommandSchema,
+  type MembershipDto,
+  type OrganizationDto,
+  type OrgInviteDto,
+  type UserDto,
+} from '@ysk-kit/contracts';
+import { orgRoleCan } from '@ysk-kit/ui-logic';
+import { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { api } from '../lib/client';
+
+const fetchOrgDetail = (organizationId: string) =>
+  Promise.all([
+    api.auth.me(),
+    api.organizations.get(organizationId),
+    api.organizations.members(organizationId),
+  ]).then(([meUser, orgDto, memberList]) => {
+    const role = memberList.find((row) => row.userId === meUser.id)?.role;
+    if (role && orgRoleCan(role, 'org.invite')) {
+      return api.organizations.invites(organizationId).then((inviteList) => ({
+        me: meUser,
+        org: orgDto,
+        members: memberList,
+        invites: inviteList,
+      }));
+    }
+    return {
+      me: meUser,
+      org: orgDto,
+      members: memberList,
+      invites: [] as OrgInviteDto[],
+    };
+  });
+
+export function OrgDetailScreen({
+  organizationId,
+  onBack,
+}: {
+  organizationId: string;
+  onBack: () => void;
+}) {
+  const [me, setMe] = useState<UserDto | null>(null);
+  const [org, setOrg] = useState<OrganizationDto | null>(null);
+  const [members, setMembers] = useState<MembershipDto[]>([]);
+  const [invites, setInvites] = useState<OrgInviteDto[]>([]);
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const myRole = members.find((row) => row.userId === me?.id)?.role;
+  const canInvite = myRole ? orgRoleCan(myRole, 'org.invite') : false;
+  const canRemove = myRole ? orgRoleCan(myRole, 'org.member.remove') : false;
+
+  const apply = (row: {
+    me: UserDto;
+    org: OrganizationDto;
+    members: MembershipDto[];
+    invites: OrgInviteDto[];
+  }) => {
+    setMe(row.me);
+    setOrg(row.org);
+    setMembers(row.members);
+    setInvites(row.invites);
+  };
+
+  useEffect(() => {
+    fetchOrgDetail(organizationId)
+      .then((row) => {
+        setMe(row.me);
+        setOrg(row.org);
+        setMembers(row.members);
+        setInvites(row.invites);
+      })
+      .catch((err: Error) => setError(err.message));
+  }, [organizationId]);
+
+  const reload = () => {
+    fetchOrgDetail(organizationId)
+      .then(apply)
+      .catch((err: Error) => setError(err.message));
+  };
+
+  const invite = () => {
+    const parsed = InviteMemberCommandSchema.safeParse({ email, role: 'MEMBER' });
+    if (!parsed.success) {
+      setError(parsed.error.issues[0]?.message ?? 'Invalid');
+      return;
+    }
+    setError(null);
+    api.organizations
+      .invite(organizationId, parsed.data)
+      .then(() => {
+        setEmail('');
+        reload();
+      })
+      .catch((err: Error) => setError(err.message));
+  };
+
+  return (
+    <View>
+      <Button title="Back" onPress={onBack} />
+      <Text>{org?.name ?? 'Organization'}</Text>
+      {error ? <Text>{error}</Text> : null}
+      {canInvite ? (
+        <View>
+          <TextInput
+            autoCapitalize="none"
+            keyboardType="email-address"
+            onChangeText={setEmail}
+            value={email}
+          />
+          <Button title="Invite" onPress={invite} />
+        </View>
+      ) : null}
+      {members.map((member) => (
+        <View key={member.id}>
+          <Text>
+            {member.displayName} · {member.email ?? '—'} · {member.role}
+          </Text>
+          {canRemove && member.userId !== me?.id ? (
+            <Button
+              title="Remove"
+              onPress={() => {
+                api.organizations
+                  .removeMember(organizationId, member.userId)
+                  .then(() => reload())
+                  .catch((err: Error) => setError(err.message));
+              }}
+            />
+          ) : null}
+        </View>
+      ))}
+      {canInvite && invites.length > 0 ? (
+        <View>
+          <Text>Pending invites</Text>
+          {invites.map((row) => (
+            <Text key={row.id}>
+              {row.email} · {row.role}
+            </Text>
+          ))}
+        </View>
+      ) : null}
+      <Button
+        title="Leave"
+        onPress={() => {
+          api.organizations
+            .leave(organizationId)
+            .then(() => onBack())
+            .catch((err: Error) => setError(err.message));
+        }}
+      />
+    </View>
+  );
+}

package/templates/capabilities/team/apps/mobile/src/screens/orgs-screen.tsx

@@ -0,0 +1,53 @@
+import { CreateOrganizationCommandSchema, type OrganizationDto } from '@ysk-kit/contracts';
+import { useEffect, useState } from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { api } from '../lib/client';
+
+export function OrgsScreen({
+  onBack,
+  onOpen,
+}: {
+  onBack: () => void;
+  onOpen: (organizationId: string) => void;
+}) {
+  const [orgs, setOrgs] = useState<OrganizationDto[]>([]);
+  const [name, setName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.organizations
+      .list()
+      .then(setOrgs)
+      .catch((err: Error) => setError(err.message));
+  }, []);
+
+  const submit = () => {
+    const parsed = CreateOrganizationCommandSchema.safeParse({ name });
+    if (!parsed.success) {
+      setError(parsed.error.issues[0]?.message ?? 'Invalid');
+      return;
+    }
+    setError(null);
+    api.organizations
+      .create(parsed.data)
+      .then(() => {
+        setName('');
+        return api.organizations.list();
+      })
+      .then(setOrgs)
+      .catch((err: Error) => setError(err.message));
+  };
+
+  return (
+    <View>
+      <Button title="Back" onPress={onBack} />
+      <Text>Organizations</Text>
+      <TextInput onChangeText={setName} value={name} />
+      <Button title="Create" onPress={submit} />
+      {error ? <Text>{error}</Text> : null}
+      {orgs.map((org) => (
+        <Button key={org.id} title={org.name} onPress={() => onOpen(org.id)} />
+      ))}
+    </View>
+  );
+}

package/templates/capabilities/team/apps/web/src/features/orgs/invite-page.tsx

@@ -0,0 +1,77 @@
+import { useNavigate } from '@tanstack/react-router';
+import { AcceptInviteCommandSchema } from '@ysk-kit/contracts';
+import { Button, Input } from '@ysk-kit/ui';
+import { createOrganizationHooks } from '@ysk-kit/web-sdk';
+import { type FormEvent, useEffect, useState } from 'react';
+import { api } from '../../lib/client';
+
+const orgHooks = createOrganizationHooks(api);
+
+export function InvitePage() {
+  const accept = orgHooks.useAcceptInvite();
+  const navigate = useNavigate();
+  const [token, setToken] = useState('');
+  const [password, setPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [formError, setFormError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const fromQuery = params.get('token');
+    if (fromQuery) {
+      setToken(fromQuery);
+      params.delete('token');
+      const next = `${window.location.pathname}${params.toString() ? `?${params}` : ''}`;
+      window.history.replaceState({}, '', next);
+    }
+  }, []);
+
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    const parsed = AcceptInviteCommandSchema.safeParse({
+      token,
+      ...(password.length > 0 ? { password } : {}),
+      ...(displayName.length > 0 ? { displayName } : {}),
+    });
+    if (!parsed.success) {
+      setFormError(parsed.error.issues[0]?.message ?? 'Invalid');
+      return;
+    }
+    setFormError(null);
+    accept.mutate(parsed.data, {
+      onSuccess: () => {
+        void navigate({ to: '/login' });
+      },
+      onError: (error) => setFormError(error.message),
+    });
+  };
+
+  return (
+    <section className="mx-auto max-w-sm space-y-4">
+      <h1 className="text-2xl font-semibold">Accept invite</h1>
+      <form onSubmit={onSubmit} className="grid gap-3">
+        <label className="grid gap-1 text-sm" htmlFor="invite-password">
+          Password (required for new accounts)
+          <Input
+            id="invite-password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        <label className="grid gap-1 text-sm" htmlFor="invite-name">
+          Display name
+          <Input
+            id="invite-name"
+            value={displayName}
+            onChange={(e) => setDisplayName(e.target.value)}
+          />
+        </label>
+        {formError ? <p className="text-sm text-red-600">{formError}</p> : null}
+        <Button type="submit" disabled={accept.isPending || token.length === 0}>
+          Accept
+        </Button>
+      </form>
+    </section>
+  );
+}