PetschStudios/KanbanGit
3
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 24 Wiki Activity

Merge branch 'main' into epic/kan-3
linter / quality (pull_request) Successful in 1m30s
Details
tests / ci (8.4) (pull_request) Successful in 1m54s
Details

Browse Source
This commit is contained in:
Twyco
2026-06-25 01:25:53 +02:00
parent 5e7be28daf 8bb08affcc
commit 0f125f17a3
25 changed files with 802 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/AppHeader.vue
+2 -16
View File
@@ -5,7 +5,6 @@ import { computed } from 'vue';
import AppLogo from '@/components/AppLogo.vue';
import AppLogoIcon from '@/components/AppLogoIcon.vue';
import Breadcrumbs from '@/components/Breadcrumbs.vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
@@ -33,10 +32,10 @@ import {
} from '@/components/ui/tooltip';
import UserMenuContent from '@/components/UserMenuContent.vue';
import { useCurrentUrl } from '@/composables/useCurrentUrl';
import { getInitials } from '@/composables/useInitials';
import { toUrl } from '@/lib/utils';
import { dashboard } from '@/routes/index';
import type { BreadcrumbItem, NavItem } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
type Props = {
breadcrumbs?: BreadcrumbItem[];
@@ -245,20 +244,7 @@ const rightNavItems: NavItem[] = [
size="icon"
class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
>
<Avatar
class="size-8 overflow-hidden rounded-full"
>
<AvatarImage
v-if="auth.user.avatar"
:src="auth.user.avatar"
:alt="auth.user.name"
/>
<AvatarFallback
class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
>
{{ getInitials(auth.user?.name) }}
</AvatarFallback>
</Avatar>
<UserAvatar rounded />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-56">
resources/js/components/UserInfo.vue
+2 -7
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useInitials } from '@/composables/useInitials';
import type { User } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
type Props = {
user: User;
@@ -22,12 +22,7 @@ const showAvatar = computed(
</script>
<template>
<Avatar class="h-8 w-8 overflow-hidden rounded-lg">
<AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
<AvatarFallback class="rounded-lg text-black dark:text-white">
{{ getInitials(user.name) }}
</AvatarFallback>
</Avatar>
<UserAvatar />
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{{ user.name }}</span>
resources/js/components/ui/avatar/UserAvatar.vue
+41
View File
@@ -0,0 +1,41 @@
<script setup lang="ts">
import { getInitials } from "@/composables/useInitials";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar/index";
import { usePage } from "@inertiajs/vue3";
import { computed, PropType } from "vue";
import { UserModel } from "@/types/models/user-model";
const props = defineProps({
user: {
type: Object as PropType<UserModel>,
},
rounded: {
type: Boolean,
default: false,
},
})
const page = usePage();
const auth = computed(() => page.props.auth);
const user = computed(() => props.user ?? auth.value.user)
</script>
<template>
<Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
<AvatarImage
v-if="user.avatar"
:src="user.avatar"
:alt="user.name"
/>
<AvatarFallback
class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
>
{{ getInitials(auth.user?.name) }}
</AvatarFallback>
</Avatar>
</template>
resources/js/pages/admin/users/Edit.vue
+13 -4
View File
@@ -126,7 +126,9 @@ const submit = (): void => {
>
<input
id="must_change_password_on_next_login"
v-model="form.must_change_password_on_next_login"
v-model="
form.must_change_password_on_next_login
"
type="checkbox"
class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
/>
@@ -134,13 +136,20 @@ const submit = (): void => {
<span class="block font-medium">
Must change password on next login
</span>
<span class="text-muted-foreground block text-sm">
Keep the user locked to the security settings page until they save a new password.
<span
class="text-muted-foreground block text-sm"
>
Keep the user locked to the security
settings page until they save a new
password.
</span>
</span>
</Label>
<InputError
:message="form.errors.must_change_password_on_next_login"
:message="
form.errors
.must_change_password_on_next_login
"
/>
</div>
resources/js/pages/admin/users/Index.vue
+42 -9
View File
@@ -1,6 +1,13 @@
<script setup lang="ts">
import { Form, Head, Link } from '@inertiajs/vue3';
import { FolderPlus, KeyRound, Pencil, Shield, UserPlus, Users } from 'lucide-vue-next';
import {
FolderPlus,
KeyRound,
Pencil,
Shield,
UserPlus,
Users,
} from 'lucide-vue-next';
import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
import Heading from '@/components/Heading.vue';
import { Badge } from '@/components/ui/badge';
@@ -19,6 +26,7 @@ import {
index as adminUsers,
} from '@/routes/admin/users';
import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
const props = defineProps<AdminUsersPageProps>();
@@ -111,8 +119,13 @@ const hasPermission = (actorId: number, permission: string) =>
>
<td class="px-4 py-4">
<div
class="text-foreground font-medium"
class="text-foreground items-medium flex items-center"
>
<UserAvatar
:user="user"
class="mr-2 size-8"
rounded
/>
{{ user.name }}
</div>
</td>
@@ -122,7 +135,9 @@ const hasPermission = (actorId: number, permission: string) =>
<td class="px-4 py-4">
<div class="flex flex-wrap gap-2">
<Badge
v-if="user.must_change_password_on_next_login"
v-if="
user.must_change_password_on_next_login
"
variant="outline"
class="gap-1.5"
>
@@ -170,10 +185,24 @@ const hasPermission = (actorId: number, permission: string) =>
</td>
<td class="px-4 py-4">
<div class="flex justify-end">
<div class="flex flex-wrap justify-end gap-3">
<Button as-child size="sm" variant="outline">
<Link :href="editAdminUser(user.id)">
<Pencil class="size-4" />
<div
class="flex flex-wrap justify-end gap-3"
>
<Button
as-child
size="sm"
variant="outline"
>
<Link
:href="
editAdminUser(
user.id,
)
"
>
<Pencil
class="size-4"
/>
Edit
</Link>
</Button>
@@ -195,7 +224,9 @@ const hasPermission = (actorId: number, permission: string) =>
<input
type="checkbox"
name="permissions[]"
:value="option.value"
:value="
option.value
"
:checked="
hasPermission(
user.id,
@@ -209,7 +240,9 @@ const hasPermission = (actorId: number, permission: string) =>
}}</span>
</label>
<div class="w-full sm:hidden" />
<div
class="w-full sm:hidden"
/>
<Button
type="submit"
resources/js/pages/settings/Profile.vue
+91 -11
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { Form, Head, Link, usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
import { Form, Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { Trash2 } from 'lucide-vue-next';
import { computed, onBeforeUnmount, ref } from 'vue';
import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
import DeleteUser from '@/components/DeleteUser.vue';
import Heading from '@/components/Heading.vue';
@@ -12,14 +13,10 @@ import AppLayout from '@/layouts/AppLayout.vue';
import SettingsLayout from '@/layouts/settings/Layout.vue';
import { edit } from '@/routes/profile/index';
import { send } from '@/routes/verification';
import type { BreadcrumbItem } from '@/types';
import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
type Props = {
mustVerifyEmail: boolean;
status?: string;
};
defineProps<Props>();
defineProps<SettingsProfilePageProps>();
const breadcrumbItems: BreadcrumbItem[] = [
{
@@ -30,6 +27,43 @@ const breadcrumbItems: BreadcrumbItem[] = [
const page = usePage();
const user = computed(() => page.props.auth.user);
const avatarPreview = ref<string | null>(null);
const avatarDeleteForm = useForm({});
const displayedAvatar = computed(
() => avatarPreview.value ?? user.value.avatar,
);
const canRemoveAvatar = computed(
() => user.value.avatar !== null && !user.value.avatar_is_generated,
);
const clearAvatarPreview = (): void => {
if (avatarPreview.value) {
URL.revokeObjectURL(avatarPreview.value);
avatarPreview.value = null;
}
};
const handleAvatarChange = (event: Event) => {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
clearAvatarPreview();
if (file) {
avatarPreview.value = URL.createObjectURL(file);
}
};
const removeAvatar = (): void => {
avatarDeleteForm.delete(ProfileController.destroyAvatar.url(), {
preserveScroll: true,
onSuccess: clearAvatarPreview,
});
};
onBeforeUnmount(() => {
clearAvatarPreview();
});
</script>
<template>
@@ -43,14 +77,60 @@ const user = computed(() => page.props.auth.user);
<Heading
variant="small"
title="Profile information"
description="Update your name and email address"
description="Update your name, email address, and profile picture"
/>
<Form
v-bind="ProfileController.update.form()"
class="space-y-6"
v-slot="{ errors, processing, recentlySuccessful }"
v-slot="{
errors,
processing,
progress,
recentlySuccessful,
}"
>
<div class="grid gap-3">
<Label for="avatar">Profile picture</Label>
<div class="flex items-center gap-4">
<UserAvatar class="size-16" />
<div class="grid flex-1 gap-2">
<div class="flex flex-col gap-2 sm:flex-row">
<Input
id="avatar"
name="avatar"
type="file"
accept="image/png,image/jpeg,image/webp"
@change="handleAvatarChange"
/>
<Button
v-if="canRemoveAvatar"
type="button"
variant="outline"
:disabled="avatarDeleteForm.processing"
data-test="delete-profile-picture-button"
@click="removeAvatar"
>
<Trash2 class="size-4" />
Remove
</Button>
</div>
<p class="text-muted-foreground text-sm">
PNG, JPG, or WebP up to 2 MB.
</p>
</div>
</div>
<progress
v-if="progress"
class="h-1 w-full overflow-hidden rounded-full"
:value="progress.percentage"
max="100"
>
{{ progress.percentage }}%
</progress>
<InputError class="mt-1" :message="errors.avatar" />
</div>
<div class="grid gap-2">
<Label for="name">Name</Label>
<Input
resources/js/types/models/user-model.ts
+3 -1
View File
@@ -2,7 +2,9 @@ export type UserModel = {
id: number;
name: string;
email: string;
avatar?: string;
avatar: string | null;
avatar_color: string | null;
avatar_is_generated: boolean;
email_verified_at: string | null;
must_change_password_on_next_login: boolean;
created_at: string;
resources/js/types/page-props.ts
+5
View File
@@ -226,6 +226,11 @@ export type SettingsGitConnectionsPageProps = {
status?: string | null;
};
export type SettingsProfilePageProps = {
mustVerifyEmail: boolean;
status?: string | null;
};
export type SettingsApplicationsPageProps = {
applicationKey?: string | null;
applications: UserApplicationModel[];