adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 12:12:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Field component system and migrate UI

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-10 12:22:53 +01:00
parent 1ecb332458
commit fd012e7c69
71 changed files with 1023 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/Pages/API/Partials/ApiTokenManager.vue
View File

@@ -8,8 +8,7 @@ import ConfirmationModal from '@/Components/ConfirmationModal.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import SectionBorder from '@/Components/SectionBorder.vue';
@@ -96,20 +95,22 @@ const deleteApiToken = () => {
<template #form>
<!-- Token Name -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Name" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="name">Name</FieldLabel>
<TextInput
id="name"
v-model="createApiTokenForm.name"
type="text"
class="mt-1 block w-full"
class="block w-full"
autofocus />
<InputError :message="createApiTokenForm.errors.name" class="mt-2" />
</div>
<FieldError v-if="createApiTokenForm.errors.name">{{
createApiTokenForm.errors.name
}}</FieldError>
</Field>
<!-- Token Permissions -->
<div v-if="availablePermissions.length > 0" class="col-span-6">
<InputLabel for="permissions" value="Permissions" />
<FieldLabel for="permissions">Permissions</FieldLabel>
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
<div v-for="permission in availablePermissions" :key="permission">

13
resources/js/Pages/Auth/ConfirmPassword.vue
View File

@@ -3,8 +3,7 @@ import { ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -39,19 +38,19 @@ const submit = () => {
</div>
<form @submit.prevent="submit">
<div>
<InputLabel for="password" value="Password" />
<Field>
<FieldLabel for="password">Password</FieldLabel>
<TextInput
id="password"
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="current-password"
autofocus />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<FieldError v-if="form.errors.password">{{ form.errors.password }}</FieldError>
</Field>
<div class="flex justify-end mt-4">
<PrimaryButton

13
resources/js/Pages/Auth/ForgotPassword.vue
View File

@@ -2,8 +2,7 @@
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -38,18 +37,18 @@ const submit = () => {
</div>
<form @submit.prevent="submit">
<div>
<InputLabel for="email" value="Email" />
<Field>
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
class="block w-full"
required
autofocus
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
<FieldError v-if="form.errors.email">{{ form.errors.email }}</FieldError>
</Field>
<div class="flex items-center justify-end mt-4">
<PrimaryButton

23
resources/js/Pages/Auth/Login.vue
View File

@@ -2,8 +2,7 @@
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -60,30 +59,30 @@ const page = usePage<{
</div>
<form @submit.prevent="submit">
<div>
<InputLabel for="email" value="Email" />
<Field>
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
class="block w-full"
required
autofocus
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
<FieldError v-if="form.errors.email">{{ form.errors.email }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="password" value="Password" />
<Field class="mt-4">
<FieldLabel for="password">Password</FieldLabel>
<TextInput
id="password"
v-model="form.password"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="current-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<FieldError v-if="form.errors.password">{{ form.errors.password }}</FieldError>
</Field>
<div class="flex items-center justify-end mt-4">
<Link

113
resources/js/Pages/Auth/Register.vue
View File

@@ -3,8 +3,7 @@ import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -63,54 +62,56 @@ const page = usePage<{
</div>
<form @submit.prevent="submit">
<div>
<InputLabel for="name" value="Name" />
<Field>
<FieldLabel for="name">Name</FieldLabel>
<TextInput
id="name"
v-model="form.name"
type="text"
class="mt-1 block w-full"
class="block w-full"
required
autofocus
autocomplete="name" />
<InputError class="mt-2" :message="form.errors.name" />
</div>
<FieldError v-if="form.errors.name">{{ form.errors.name }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="email" value="Email" />
<Field class="mt-4">
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
<FieldError v-if="form.errors.email">{{ form.errors.email }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="password" value="Password" />
<Field class="mt-4">
<FieldLabel for="password">Password</FieldLabel>
<TextInput
id="password"
v-model="form.password"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<FieldError v-if="form.errors.password">{{ form.errors.password }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<Field class="mt-4">
<FieldLabel for="password_confirmation">Confirm Password</FieldLabel>
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password_confirmation" />
</div>
<FieldError v-if="form.errors.password_confirmation">{{
form.errors.password_confirmation
}}</FieldError>
</Field>
<div
v-if="
@@ -119,45 +120,41 @@ const page = usePage<{
page.props.privacy_policy_url !== null
"
class="mt-4">
<InputLabel for="terms">
<div class="flex items-center">
<Checkbox id="terms" v-model:checked="form.terms" name="terms" />
<div class="ms-2">
I agree to the
<a
target="_blank"
:href="page.props.terms_url"
class="underline text-sm text-text-secondary hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>Terms of Service</a
>
and
<a
target="_blank"
:href="page.props.privacy_policy_url"
class="underline text-sm text-text-secondary hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>Privacy Policy</a
>
</div>
</div>
<InputError class="mt-2" :message="form.errors.terms" />
</InputLabel>
<Field orientation="horizontal">
<Checkbox id="terms" v-model:checked="form.terms" name="terms" />
<FieldLabel for="terms">
I agree to the
<a
target="_blank"
:href="page.props.terms_url"
class="underline text-sm text-text-secondary hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>Terms of Service</a
>
and
<a
target="_blank"
:href="page.props.privacy_policy_url"
class="underline text-sm text-text-secondary hover:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>Privacy Policy</a
>
</FieldLabel>
<FieldError v-if="form.errors.terms">{{ form.errors.terms }}</FieldError>
</Field>
</div>
<div v-if="page.props.newsletter_consent" class="mt-4">
<InputLabel for="newsletter_consent">
<div class="flex items-center">
<Checkbox
id="newsletter_consent"
v-model:checked="form.newsletter_consent"
name="newsletter_consent" />
<div class="ms-2">
I agree to receive emails about product related updates
</div>
</div>
<InputError class="mt-2" :message="form.errors.newsletter_consent" />
</InputLabel>
<Field orientation="horizontal">
<Checkbox
id="newsletter_consent"
v-model:checked="form.newsletter_consent"
name="newsletter_consent" />
<FieldLabel for="newsletter_consent">
I agree to receive emails about product related updates
</FieldLabel>
<FieldError v-if="form.errors.newsletter_consent">{{
form.errors.newsletter_consent
}}</FieldError>
</Field>
</div>
<div class="flex items-center justify-end mt-4">

35
resources/js/Pages/Auth/ResetPassword.vue
View File

@@ -2,8 +2,7 @@
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -35,42 +34,44 @@ const submit = () => {
</template>
<form @submit.prevent="submit">
<div>
<InputLabel for="email" value="Email" />
<Field>
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
class="block w-full"
required
autofocus
autocomplete="username" />
<InputError class="mt-2" :message="form.errors.email" />
</div>
<FieldError v-if="form.errors.email">{{ form.errors.email }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="password" value="Password" />
<Field class="mt-4">
<FieldLabel for="password">Password</FieldLabel>
<TextInput
id="password"
v-model="form.password"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password" />
</div>
<FieldError v-if="form.errors.password">{{ form.errors.password }}</FieldError>
</Field>
<div class="mt-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<Field class="mt-4">
<FieldLabel for="password_confirmation">Confirm Password</FieldLabel>
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="new-password" />
<InputError class="mt-2" :message="form.errors.password_confirmation" />
</div>
<FieldError v-if="form.errors.password_confirmation">{{
form.errors.password_confirmation
}}</FieldError>
</Field>
<div class="flex items-center justify-end mt-4">
<PrimaryButton

25
resources/js/Pages/Auth/TwoFactorChallenge.vue
View File

@@ -3,8 +3,7 @@ import { nextTick, ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import AuthenticationCard from '@/Components/AuthenticationCard.vue';
import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -58,31 +57,33 @@ const submit = () => {
</div>
<form @submit.prevent="submit">
<div v-if="!recovery">
<InputLabel for="code" value="Code" />
<Field v-if="!recovery">
<FieldLabel for="code">Code</FieldLabel>
<TextInput
id="code"
ref="codeInput"
v-model="form.code"
type="text"
inputmode="numeric"
class="mt-1 block w-full"
class="block w-full"
autofocus
autocomplete="one-time-code" />
<InputError class="mt-2" :message="form.errors.code" />
</div>
<FieldError v-if="form.errors.code">{{ form.errors.code }}</FieldError>
</Field>
<div v-else>
<InputLabel for="recovery_code" value="Recovery Code" />
<Field v-else>
<FieldLabel for="recovery_code">Recovery Code</FieldLabel>
<TextInput
id="recovery_code"
ref="recoveryCodeInput"
v-model="form.recovery_code"
type="text"
class="mt-1 block w-full"
class="block w-full"
autocomplete="one-time-code" />
<InputError class="mt-2" :message="form.errors.recovery_code" />
</div>
<FieldError v-if="form.errors.recovery_code">{{
form.errors.recovery_code
}}</FieldError>
</Field>
<div class="flex items-center justify-end mt-4">
<button

26
resources/js/Pages/Profile/Partials/ApiTokensForm.vue
View File

@@ -2,14 +2,13 @@
import FormSection from '@/Components/FormSection.vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { computed, ref, inject, type ComputedRef } from 'vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldDescription, FieldError } from '@/packages/ui/src/field';
import { api, type ApiToken, type CreateApiTokenBody } from '@/packages/api/src';
import SectionBorder from '@/Components/SectionBorder.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import TextInput from '../../../packages/ui/src/Input/TextInput.vue';
import SecondaryButton from '../../../packages/ui/src/Buttons/SecondaryButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import ActionMessage from '@/Components/ActionMessage.vue';
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
import ActionSection from '@/Components/ActionSection.vue';
@@ -147,20 +146,23 @@ const revokeApiTokenMutation = useMutation({
<template #form>
<!-- Token Name -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="api_key_name" value="API Key Name" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="api_key_name">API Key Name</FieldLabel>
<TextInput
id="api_key_name"
v-model="createApiTokenForm.name"
type="text"
class="mt-1 block w-full" />
<InputError :message="createApiTokenForm.errors.name" class="mt-2" />
<div
class="text-text-tertiary text-sm pt-3 flex space-x-1.5 font-medium items-center">
<ClockIcon class="w-4"></ClockIcon>
<span> API Tokens are valid for 1 year </span>
</div>
</div>
class="block w-full" />
<FieldError v-if="createApiTokenForm.errors.name">{{
createApiTokenForm.errors.name
}}</FieldError>
<FieldDescription>
<span class="flex space-x-1.5 items-center text-text-tertiary font-medium">
<ClockIcon class="w-4"></ClockIcon>
<span> API Tokens are valid for 1 year </span>
</span>
</FieldDescription>
</Field>
</template>
<template #actions>

12
resources/js/Pages/Profile/Partials/DeleteUserForm.vue
View File

@@ -4,7 +4,7 @@ import { useForm } from '@inertiajs/vue3';
import ActionSection from '@/Components/ActionSection.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import { Field, FieldError } from '@/packages/ui/src/field';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -63,18 +63,20 @@ const closeModal = () => {
of its resources and data will be permanently deleted. Please enter your
password to confirm you would like to permanently delete your account.
<div class="mt-4">
<Field class="mt-4">
<TextInput
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-3/4"
class="block w-3/4"
placeholder="Password"
autocomplete="current-password"
@keyup.enter="deleteUser" />
<InputError :message="form.errors.password" class="mt-2" />
</div>
<FieldError v-if="form.errors.password">{{
form.errors.password
}}</FieldError>
</Field>
</template>
<template #footer>

12
resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
View File

@@ -4,7 +4,7 @@ import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import ActionSection from '@/Components/ActionSection.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import { Field, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -131,18 +131,20 @@ const closeModal = () => {
Please enter your password to confirm you would like to log out of your other
browser sessions across all of your devices.
<div class="mt-4">
<Field class="mt-4">
<TextInput
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-3/4"
class="block w-3/4"
placeholder="Password"
autocomplete="current-password"
@keyup.enter="logoutOtherBrowserSessions" />
<InputError :message="form.errors.password" class="mt-2" />
</div>
<FieldError v-if="form.errors.password">{{
form.errors.password
}}</FieldError>
</Field>
</template>
<template #footer>

43
resources/js/Pages/Profile/Partials/ThemeForm.vue
View File

@@ -1,6 +1,13 @@
<script setup lang="ts">
import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
import FormSection from '@/Components/FormSection.vue';
import { Field, FieldLabel, FieldDescription } from '@/packages/ui/src/field';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/Components/ui/select';
import { usePreferredColorScheme } from '@vueuse/core';
import { themeSetting } from '@/utils/theme';
@@ -14,26 +21,22 @@ const preferredColor = usePreferredColorScheme();
<template #description> Choose how you want solidtime to look on your device </template>
<template #form>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="theme" value="Theme" />
<select
id="theme"
v-model="themeSetting"
name="theme"
required
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<p
v-if="themeSetting === 'system'"
class="w-full text-sm text-text-tertiary font-medium mt-2">
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="theme">Theme</FieldLabel>
<Select id="theme" v-model="themeSetting">
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="system">System</SelectItem>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
</SelectContent>
</Select>
<FieldDescription v-if="themeSetting === 'system'">
System default: {{ preferredColor }}
</p>
</div>
</FieldDescription>
</Field>
</template>
</FormSection>
</template>
<style scoped></style>

15
resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
View File

@@ -4,8 +4,7 @@ import { router, useForm, usePage } from '@inertiajs/vue3';
import ActionSection from '@/Components/ActionSection.vue';
import ConfirmsPassword from '@/Components/ConfirmsPassword.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -162,22 +161,24 @@ const disableTwoFactorAuthentication = () => {
<p class="font-semibold">Setup Key: <span v-html="setupKey"></span></p>
</div>
<div v-if="confirming" class="mt-4">
<InputLabel for="code" value="Code" />
<Field v-if="confirming" class="mt-4 w-1/2">
<FieldLabel for="code">Code</FieldLabel>
<TextInput
id="code"
v-model="confirmationForm.code"
type="text"
name="code"
class="block mt-1 w-1/2"
class="block w-full"
inputmode="numeric"
autofocus
autocomplete="one-time-code"
@keyup.enter="confirmTwoFactorAuthentication" />
<InputError :message="confirmationForm.errors.code" class="mt-2" />
</div>
<FieldError v-if="confirmationForm.errors.code">{{
confirmationForm.errors.code
}}</FieldError>
</Field>
</div>
<div v-if="recoveryCodes.length > 0 && !confirming">

37
resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
View File

@@ -3,8 +3,7 @@ import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -46,40 +45,44 @@ const updatePassword = () => {
</template>
<template #form>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="current_password" value="Current Password" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="current_password">Current Password</FieldLabel>
<TextInput
id="current_password"
ref="currentPasswordInput"
v-model="form.current_password"
type="password"
class="mt-1 block w-full"
class="block w-full"
autocomplete="current-password" />
<InputError :message="form.errors.current_password" class="mt-2" />
</div>
<FieldError v-if="form.errors.current_password">{{
form.errors.current_password
}}</FieldError>
</Field>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="password" value="New Password" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="password">New Password</FieldLabel>
<TextInput
id="password"
ref="passwordInput"
v-model="form.password"
type="password"
class="mt-1 block w-full"
class="block w-full"
autocomplete="new-password" />
<InputError :message="form.errors.password" class="mt-2" />
</div>
<FieldError v-if="form.errors.password">{{ form.errors.password }}</FieldError>
</Field>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="password_confirmation" value="Confirm Password" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="password_confirmation">Confirm Password</FieldLabel>
<TextInput
id="password_confirmation"
v-model="form.password_confirmation"
type="password"
class="mt-1 block w-full"
class="block w-full"
autocomplete="new-password" />
<InputError :message="form.errors.password_confirmation" class="mt-2" />
</div>
<FieldError v-if="form.errors.password_confirmation">{{
form.errors.password_confirmation
}}</FieldError>
</Field>
</template>
<template #actions>

47
resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
View File

@@ -3,8 +3,7 @@ import { ref } from 'vue';
import { Link, router, useForm, usePage } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -105,7 +104,7 @@ const page = usePage<{
class="hidden"
@change="updatePhotoPreview" />
<InputLabel for="photo" value="Photo" />
<FieldLabel for="photo">Photo</FieldLabel>
<!-- Current Profile Photo -->
<div v-show="!photoPreview" class="mt-2">
@@ -134,33 +133,33 @@ const page = usePage<{
Remove Photo
</SecondaryButton>
<InputError :message="form.errors.photo" class="mt-2" />
<FieldError v-if="form.errors.photo">{{ form.errors.photo }}</FieldError>
</div>
<!-- Name -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Name" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="name">Name</FieldLabel>
<TextInput
id="name"
v-model="form.name"
type="text"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="name" />
<InputError :message="form.errors.name" class="mt-2" />
</div>
<FieldError v-if="form.errors.name">{{ form.errors.name }}</FieldError>
</Field>
<!-- Email -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="email" value="Email" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="form.email"
type="email"
class="mt-1 block w-full"
class="block w-full"
required
autocomplete="username" />
<InputError :message="form.errors.email" class="mt-2" />
<FieldError v-if="form.errors.email">{{ form.errors.email }}</FieldError>
<div
v-if="
@@ -185,17 +184,17 @@ const page = usePage<{
A new verification link has been sent to your email address.
</div>
</div>
</div>
</Field>
<!-- Timezone -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="timezone" value="Timezone" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="timezone">Timezone</FieldLabel>
<select
id="timezone"
v-model="form.timezone"
name="timezone"
required
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
<option value="" disabled>Select a Timezone</option>
<option
v-for="(timezoneTranslated, timezoneKey) in $page.props.timezones"
@@ -204,18 +203,18 @@ const page = usePage<{
{{ timezoneTranslated }}
</option>
</select>
<InputError :message="form.errors.timezone" class="mt-2" />
</div>
<FieldError v-if="form.errors.timezone">{{ form.errors.timezone }}</FieldError>
</Field>
<!-- Week start -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="week_start" value="Start of the week" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="week_start">Start of the week</FieldLabel>
<select
id="week_start"
v-model="form.week_start"
name="week_start"
required
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
<option value="" disabled>Select a week day</option>
<option
v-for="(weekdayTranslated, weekdayKey) in $page.props.weekdays"
@@ -224,8 +223,8 @@ const page = usePage<{
{{ weekdayTranslated }}
</option>
</select>
<InputError :message="form.errors.week_start" class="mt-2" />
</div>
<FieldError v-if="form.errors.week_start">{{ form.errors.week_start }}</FieldError>
</Field>
</template>
<template #actions>

15
resources/js/Pages/Teams/Partials/CreateTeamForm.vue
View File

@@ -1,8 +1,7 @@
<script setup lang="ts">
import { useForm, usePage } from '@inertiajs/vue3';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
import type { User } from '@/types/models';
@@ -38,7 +37,7 @@ const page = usePage<{
<template #form>
<div class="col-span-6">
<InputLabel value="Organization Owner" />
<FieldLabel>Organization Owner</FieldLabel>
<div class="flex items-center mt-2">
<img
@@ -57,16 +56,16 @@ const page = usePage<{
</div>
</div>
<div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Organization Name" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="name">Organization Name</FieldLabel>
<TextInput
id="name"
v-model="form.name"
type="text"
class="block w-full mt-1"
class="block w-full"
autofocus />
<InputError :message="form.errors.name" class="mt-2" />
</div>
<FieldError v-if="form.errors.name">{{ form.errors.name }}</FieldError>
</Field>
</template>
<template #actions>

10
resources/js/Pages/Teams/Partials/ImportData.vue
View File

@@ -3,7 +3,7 @@ import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { computed, onMounted, ref } from 'vue';
import { useNotificationsStore } from '@/utils/notification';
import { api } from '@/packages/api/src';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import { DocumentIcon } from '@heroicons/vue/24/solid';
import { ArrowDownOnSquareIcon, InformationCircleIcon } from '@heroicons/vue/24/outline';
@@ -163,13 +163,13 @@ const showResultModal = ref(false);
<Card>
<div class="px-4 py-5 sm:px-5">
<div>
<InputLabel for="importType" value="Import Type" />
<Field>
<FieldLabel for="importType">Import Type</FieldLabel>
<select
id="importType"
v-model="importType"
name="importType"
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
<option :value="null" selected disabled>
Select an import type to get instructions...
</option>
@@ -184,7 +184,7 @@ const showResultModal = ref(false);
<div class="font-semibold text-text-secondary py-1">Instructions:</div>
<div class="max-w-2xl" v-html="currentImporterDescription"></div>
</div>
</div>
</Field>
<div
class="mt-2 flex justify-center rounded-lg border border-dashed border-border-primary px-6 py-10">

50
resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue
View File

@@ -2,7 +2,7 @@
import FormSection from '@/Components/FormSection.vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { onMounted, ref } from 'vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import type { UpdateOrganizationBody } from '@/packages/api/src';
import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
import { useOrganizationStore } from '@/utils/useOrganization';
@@ -61,35 +61,27 @@ function checkForConfirmationModal() {
v-model:show="showConfirmationModal"
:new-billable-rate="organizationBody.billable_rate"
@submit="submit"></OrganizationBillableRateModal>
<!-- Organization Owner Information -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel
for="organizationBillableRate"
class="mb-2"
value="Organization Billable Rate" />
<BillableRateInput
v-if="organization"
v-model="organizationBody.billable_rate"
:currency="getOrganizationCurrencyString()"
name="organizationBillableRate"></BillableRateInput>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="organizationBillableRate">Organization Billable Rate</FieldLabel>
<BillableRateInput
v-if="organization"
v-model="organizationBody.billable_rate"
:currency="getOrganizationCurrencyString()"
name="organizationBillableRate"></BillableRateInput>
</Field>
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<div class="flex items-center space-x-2">
<Checkbox
v-if="organization"
id="organizationShowBillableRatesToEmployees"
v-model:checked="
organizationBody.employees_can_see_billable_rates
"></Checkbox>
<InputLabel
for="organizationShowBillableRatesToEmployees"
value="Show Billable Rates to Employees" />
</div>
</div>
<div class="col-span-6 sm:col-span-4">
<Field orientation="horizontal">
<Checkbox
v-if="organization"
id="organizationShowBillableRatesToEmployees"
v-model:checked="
organizationBody.employees_can_see_billable_rates
"></Checkbox>
<FieldLabel for="organizationShowBillableRatesToEmployees"
>Show Billable Rates to Employees</FieldLabel
>
</Field>
</div>
</template>
<template #actions>

162
resources/js/Pages/Teams/Partials/OrganizationFormatSettings.vue
View File

@@ -2,7 +2,7 @@
import FormSection from '@/Components/FormSection.vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { onMounted, ref } from 'vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import type { UpdateOrganizationBody } from '@/packages/api/src';
import { useOrganizationStore } from '@/utils/useOrganization';
import { storeToRefs } from 'pinia';
@@ -73,99 +73,89 @@ async function submit() {
<template #form>
<!-- Number Format -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel for="numberFormat" class="mb-2" value="Number Format" />
<Select v-model="form.number_format">
<SelectTrigger id="numberFormat">
<SelectValue placeholder="Select number format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="point-comma">1.111,11</SelectItem>
<SelectItem value="comma-point">1,111.11</SelectItem>
<SelectItem value="space-comma">1 111,11</SelectItem>
<SelectItem value="space-point">1 111.11</SelectItem>
<SelectItem value="apostrophe-point">1'111.11</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="numberFormat">Number Format</FieldLabel>
<Select v-model="form.number_format">
<SelectTrigger id="numberFormat">
<SelectValue placeholder="Select number format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="point-comma">1.111,11</SelectItem>
<SelectItem value="comma-point">1,111.11</SelectItem>
<SelectItem value="space-comma">1 111,11</SelectItem>
<SelectItem value="space-point">1 111.11</SelectItem>
<SelectItem value="apostrophe-point">1'111.11</SelectItem>
</SelectContent>
</Select>
</Field>
<!-- Currency Format -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel for="currencyFormat" class="mb-2" value="Currency Format" />
<Select v-model="form.currency_format">
<SelectTrigger id="currencyFormat">
<SelectValue placeholder="Select currency format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
<SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
<SelectItem value="symbol-before">€111</SelectItem>
<SelectItem value="symbol-after">111€</SelectItem>
<SelectItem value="symbol-before-with-space">€ 111</SelectItem>
<SelectItem value="symbol-after-with-space">111 €</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="currencyFormat">Currency Format</FieldLabel>
<Select v-model="form.currency_format">
<SelectTrigger id="currencyFormat">
<SelectValue placeholder="Select currency format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="iso-code-before-with-space">EUR 111</SelectItem>
<SelectItem value="iso-code-after-with-space">111 EUR</SelectItem>
<SelectItem value="symbol-before">€111</SelectItem>
<SelectItem value="symbol-after">111€</SelectItem>
<SelectItem value="symbol-before-with-space">€ 111</SelectItem>
<SelectItem value="symbol-after-with-space">111 €</SelectItem>
</SelectContent>
</Select>
</Field>
<!-- Date Format -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel for="dateFormat" class="mb-2" value="Date Format" />
<Select v-model="form.date_format">
<SelectTrigger id="dateFormat">
<SelectValue placeholder="Select date format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
<SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
<SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
<SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
<SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
<SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="dateFormat">Date Format</FieldLabel>
<Select v-model="form.date_format">
<SelectTrigger id="dateFormat">
<SelectValue placeholder="Select date format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="point-separated-d-m-yyyy">D.M.YYYY</SelectItem>
<SelectItem value="slash-separated-mm-dd-yyyy">MM/DD/YYYY</SelectItem>
<SelectItem value="slash-separated-dd-mm-yyyy">DD/MM/YYYY</SelectItem>
<SelectItem value="hyphen-separated-dd-mm-yyyy">DD-MM-YYYY</SelectItem>
<SelectItem value="hyphen-separated-mm-dd-yyyy">MM-DD-YYYY</SelectItem>
<SelectItem value="hyphen-separated-yyyy-mm-dd">YYYY-MM-DD</SelectItem>
</SelectContent>
</Select>
</Field>
<!-- Time Format -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel for="timeFormat" class="mb-2" value="Time Format" />
<Select v-model="form.time_format">
<SelectTrigger id="timeFormat">
<SelectValue placeholder="Select time format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="12-hours">12-hour clock</SelectItem>
<SelectItem value="24-hours">24-hour clock</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="timeFormat">Time Format</FieldLabel>
<Select v-model="form.time_format">
<SelectTrigger id="timeFormat">
<SelectValue placeholder="Select time format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="12-hours">12-hour clock</SelectItem>
<SelectItem value="24-hours">24-hour clock</SelectItem>
</SelectContent>
</Select>
</Field>
<!-- Interval Format -->
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4">
<InputLabel for="intervalFormat" class="mb-2" value="Time Duration Format" />
<Select v-model="form.interval_format">
<SelectTrigger id="intervalFormat">
<SelectValue placeholder="Select interval format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="decimal">Decimal</SelectItem>
<SelectItem value="hours-minutes">12h 3m</SelectItem>
<SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
<SelectItem value="hours-minutes-seconds-colon-separated"
>12:03:45</SelectItem
>
</SelectContent>
</Select>
</div>
</div>
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="intervalFormat">Time Duration Format</FieldLabel>
<Select v-model="form.interval_format">
<SelectTrigger id="intervalFormat">
<SelectValue placeholder="Select interval format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="decimal">Decimal</SelectItem>
<SelectItem value="hours-minutes">12h 3m</SelectItem>
<SelectItem value="hours-minutes-colon-separated">12:03</SelectItem>
<SelectItem value="hours-minutes-seconds-colon-separated"
>12:03:45</SelectItem
>
</SelectContent>
</Select>
</Field>
</template>
<template #actions>

38
resources/js/Pages/Teams/Partials/OrganizationTimeEntrySettings.vue
View File

@@ -2,7 +2,7 @@
import FormSection from '@/Components/FormSection.vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import { onMounted, ref } from 'vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import { Checkbox } from '@/packages/ui/src';
import type { UpdateOrganizationBody } from '@/packages/api/src';
import { useOrganizationStore } from '@/utils/useOrganization';
@@ -52,25 +52,23 @@ async function submit() {
</template>
<template #form>
<div class="col-span-6">
<div class="col-span-6 sm:col-span-4 space-y-4">
<div class="flex items-center space-x-2">
<Checkbox
id="preventOverlappingTimeEntries"
v-model:checked="form.prevent_overlapping_time_entries" />
<InputLabel
for="preventOverlappingTimeEntries"
value="Prevent overlapping time entries (new entries only)" />
</div>
<div class="flex items-center space-x-2">
<Checkbox
id="employeesCanManageTasks"
v-model:checked="form.employees_can_manage_tasks" />
<InputLabel
for="employeesCanManageTasks"
value="Allow Employees to manage tasks" />
</div>
</div>
<div class="col-span-6 sm:col-span-4 space-y-4">
<Field orientation="horizontal">
<Checkbox
id="preventOverlappingTimeEntries"
v-model:checked="form.prevent_overlapping_time_entries" />
<FieldLabel for="preventOverlappingTimeEntries"
>Prevent overlapping time entries (new entries only)</FieldLabel
>
</Field>
<Field orientation="horizontal">
<Checkbox
id="employeesCanManageTasks"
v-model:checked="form.employees_can_manage_tasks" />
<FieldLabel for="employeesCanManageTasks"
>Allow Employees to manage tasks</FieldLabel
>
</Field>
</div>
</template>

22
resources/js/Pages/Teams/Partials/TeamMemberManager.vue
View File

@@ -7,8 +7,8 @@ import ConfirmationModal from '@/Components/ConfirmationModal.vue';
import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
import DialogModal from '@/packages/ui/src/DialogModal.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import SectionBorder from '@/Components/SectionBorder.vue';
@@ -139,20 +139,24 @@ const displayableRole = (role: string) => {
</div>
<!-- Member Email -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="email" value="Email" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="email">Email</FieldLabel>
<TextInput
id="email"
v-model="addTeamMemberForm.email"
type="email"
class="mt-1 block w-full" />
<InputError :message="addTeamMemberForm.errors.email" class="mt-2" />
</div>
class="block w-full" />
<FieldError v-if="addTeamMemberForm.errors.email">{{
addTeamMemberForm.errors.email
}}</FieldError>
</Field>
<!-- Role -->
<div v-if="availableRoles.length > 0" class="col-span-6 lg:col-span-4">
<InputLabel for="roles" value="Role" />
<InputError :message="addTeamMemberForm.errors.role" class="mt-2" />
<FieldLabel for="roles">Role</FieldLabel>
<FieldError v-if="addTeamMemberForm.errors.role">{{
addTeamMemberForm.errors.role
}}</FieldError>
<div
class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">

25
resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
View File

@@ -2,8 +2,7 @@
import { Link, useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import FormSection from '@/Components/FormSection.vue';
import InputError from '@/packages/ui/src/Input/InputError.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TextInput from '@/packages/ui/src/Input/TextInput.vue';
import type { Organization } from '@/types/models';
@@ -40,7 +39,7 @@ const updateTeamName = () => {
<!-- Organization Owner Information -->
<div class="col-span-6 flex items-center justify-between">
<div class="">
<InputLabel value="Organization Owner" />
<FieldLabel>Organization Owner</FieldLabel>
<div class="flex items-center mt-2">
<img
@@ -68,28 +67,28 @@ const updateTeamName = () => {
</div>
<!-- Organization Name -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="name" value="Organization Name" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="name">Organization Name</FieldLabel>
<TextInput
id="name"
v-model="form.name"
type="text"
class="mt-1 block w-full"
class="block w-full"
:disabled="!permissions.canUpdateTeam" />
<InputError :message="form.errors.name" class="mt-2" />
</div>
<FieldError v-if="form.errors.name">{{ form.errors.name }}</FieldError>
</Field>
<!-- Currency -->
<div class="col-span-6 sm:col-span-4">
<InputLabel for="currency" value="Currency" />
<Field class="col-span-6 sm:col-span-4">
<FieldLabel for="currency">Currency</FieldLabel>
<select
id="currency"
v-model="form.currency"
name="currency"
:disabled="!permissions.canUpdateTeam"
class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
class="block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
<option value="" disabled>Select a currency</option>
<option
v-for="(currencyTranslated, currencyKey) in $page.props.currencies"
@@ -98,8 +97,8 @@ const updateTeamName = () => {
{{ currencyKey }} - {{ currencyTranslated }}
</option>
</select>
<InputError :message="form.errors.currency" class="mt-2" />
</div>
<FieldError v-if="form.errors.currency">{{ form.errors.currency }}</FieldError>
</Field>
</template>
<template v-if="permissions.canUpdateTeam" #actions>