added invitations
This commit is contained in:
Daan Meijer
@@ -14,3 +14,4 @@
|
||||
@import './components/auth-layout.css';
|
||||
@import './components/chat.css';
|
||||
@import './components/lightbox.css';
|
||||
@import './components/invite-form.css';
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
/* 13. InviteForm Component */
|
||||
.c-invite-form {
|
||||
@apply mt-8;
|
||||
|
||||
.c-invite-form__card {
|
||||
@apply overflow-hidden;
|
||||
background-color: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
|
||||
.c-invite-form__body {
|
||||
@apply p-6;
|
||||
color: var(--foreground);
|
||||
|
||||
.c-invite-form__title {
|
||||
@apply text-lg font-medium;
|
||||
}
|
||||
|
||||
.c-invite-form__form {
|
||||
@apply mt-6 space-y-6;
|
||||
|
||||
.c-invite-form__field {
|
||||
@apply block;
|
||||
|
||||
.c-invite-form__label {
|
||||
@apply block text-sm font-medium;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-invite-form__input {
|
||||
@apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
|
||||
border-color: var(--border);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-invite-form__select {
|
||||
@apply mt-1 block w-full rounded-md border p-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
|
||||
border-color: var(--border);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-invite-form__error {
|
||||
@apply text-sm;
|
||||
color: var(--destructive);
|
||||
}
|
||||
}
|
||||
|
||||
.c-invite-form__actions {
|
||||
@apply flex items-center gap-4;
|
||||
|
||||
.c-invite-form__submit-btn {
|
||||
@apply inline-flex items-center border border-transparent px-4 py-2 text-xs font-semibold tracking-widest uppercase transition duration-150 ease-in-out focus:ring-2 focus:outline-none;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { route } from 'ziggy-js';
|
||||
import Chat from '@/components/Chat.vue';
|
||||
import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
|
||||
import LedgerList from '@/components/LedgerList.vue';
|
||||
import ParticipantsList from '@/components/ParticipantsList.vue';
|
||||
import LedgerList from '@/components/LedgerList.vue';
|
||||
import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { route } from 'ziggy-js';
|
||||
|
||||
const props = defineProps<{
|
||||
dynamic: {
|
||||
@@ -21,6 +21,7 @@ const props = defineProps<{
|
||||
media?: Array<{ id: number; url: string; mime_type: string }>;
|
||||
}>;
|
||||
};
|
||||
isOwner: boolean;
|
||||
}>();
|
||||
|
||||
const breadcrumbs = [
|
||||
@@ -33,6 +34,17 @@ const breadcrumbs = [
|
||||
href: route('dynamics.show', props.dynamic.id),
|
||||
},
|
||||
];
|
||||
|
||||
const inviteForm = useForm({
|
||||
email: '',
|
||||
role: 'participant',
|
||||
});
|
||||
|
||||
function submitInvite() {
|
||||
inviteForm.post(route('dynamics.invitations.store', props.dynamic.id), {
|
||||
onSuccess: () => inviteForm.reset(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -60,6 +72,81 @@ const breadcrumbs = [
|
||||
|
||||
<!-- Create Ledger Form Component -->
|
||||
<CreateLedgerForm :dynamic-id="dynamic.id" />
|
||||
|
||||
<!-- Invite Participant Form (Owners only) -->
|
||||
<div v-if="isOwner" class="c-invite-form">
|
||||
<div class="c-invite-form__card">
|
||||
<div class="c-invite-form__body">
|
||||
<h3 class="c-invite-form__title">
|
||||
Invite User to Dynamic
|
||||
</h3>
|
||||
|
||||
<form
|
||||
@submit.prevent="submitInvite"
|
||||
class="c-invite-form__form"
|
||||
>
|
||||
<div class="c-invite-form__field">
|
||||
<label
|
||||
for="invite_email"
|
||||
class="c-invite-form__label"
|
||||
>Email Address</label
|
||||
>
|
||||
<input
|
||||
v-model="inviteForm.email"
|
||||
id="invite_email"
|
||||
type="email"
|
||||
required
|
||||
class="c-invite-form__input"
|
||||
/>
|
||||
<div
|
||||
v-if="inviteForm.errors.email"
|
||||
class="c-invite-form__error"
|
||||
>
|
||||
{{ inviteForm.errors.email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c-invite-form__field">
|
||||
<label
|
||||
for="invite_role"
|
||||
class="c-invite-form__label"
|
||||
>Role</label
|
||||
>
|
||||
<select
|
||||
v-model="inviteForm.role"
|
||||
id="invite_role"
|
||||
class="c-invite-form__select"
|
||||
>
|
||||
<option value="owner">
|
||||
Owner (Full Access & Approvals)
|
||||
</option>
|
||||
<option value="participant">
|
||||
Participant (Add Suggestions)
|
||||
</option>
|
||||
<option value="editor">Editor</option>
|
||||
<option value="viewer">Viewer</option>
|
||||
</select>
|
||||
<div
|
||||
v-if="inviteForm.errors.role"
|
||||
class="c-invite-form__error"
|
||||
>
|
||||
{{ inviteForm.errors.role }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c-invite-form__actions">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="inviteForm.processing"
|
||||
class="c-invite-form__submit-btn"
|
||||
>
|
||||
Send Invitation
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -92,6 +179,7 @@ const breadcrumbs = [
|
||||
}
|
||||
|
||||
.c-dynamic-show__rules {
|
||||
@apply mt-2 text-sm text-gray-600 dark:text-gray-400;
|
||||
@apply mt-2 text-sm;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<x-mail::message>
|
||||
# You have been invited!
|
||||
|
||||
Hello,
|
||||
|
||||
**{{ $inviterName }}** has invited you to join their Dynamic: **{{ $dynamicName }}** as a **{{ strtoupper($role) }}**.
|
||||
|
||||
Only the user registered with this email address can accept this invitation. The invitation link will be valid for 7 days.
|
||||
|
||||
<x-mail::button :url="$acceptUrl">
|
||||
Accept Invitation
|
||||
</x-mail::button>
|
||||
|
||||
If you do not have an account yet, please register using this email address first, then click the button above.
|
||||
|
||||
Thanks,<br>
|
||||
{{ config('app.name') }}
|
||||
</x-mail::message>
|
||||
Reference in New Issue
Block a user