mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-16 20:22:15 +01:00
Add Field component system and migrate UI
This commit is contained in:
Gregor Vostrak
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user