Merge branch 'main' into staging
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user