mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-02 14:36:17 +00:00
User management (#185)
This commit is contained in:
Saeed Vaziry
GitHub
@ -0,0 +1,69 @@
|
||||
<div>
|
||||
<x-primary-button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-user')">New User</x-primary-button>
|
||||
|
||||
<x-modal name="create-user">
|
||||
<form
|
||||
id="create-user-form"
|
||||
hx-post="{{ route("settings.users.store") }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#create-user-form"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-create-user"
|
||||
class="p-6"
|
||||
>
|
||||
@csrf
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Create New User</h2>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="name" value="Name" />
|
||||
<x-text-input value="{{ old('name') }}" id="name" name="name" type="text" class="mt-1 w-full" />
|
||||
@error("name")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="email" value="Email" />
|
||||
<x-text-input value="{{ old('email') }}" id="email" name="email" type="text" class="mt-1 w-full" />
|
||||
@error("email")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="password" value="Password" />
|
||||
<x-text-input id="password" name="password" type="password" class="mt-1 w-full" />
|
||||
@error("password")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="role" value="Role" />
|
||||
<x-select-input id="role" name="role" class="mt-1 w-full">
|
||||
<option
|
||||
value="{{ \App\Enums\UserRole::USER }}"
|
||||
@if(old('role') === \App\Enums\UserRole::USER) selected @endif
|
||||
>
|
||||
User
|
||||
</option>
|
||||
<option
|
||||
value="{{ \App\Enums\UserRole::ADMIN }}"
|
||||
@if(old('role') === \App\Enums\UserRole::ADMIN) selected @endif
|
||||
>
|
||||
Admin
|
||||
</option>
|
||||
</x-select-input>
|
||||
@error("role")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button type="button" x-on:click="$dispatch('close')">Cancel</x-secondary-button>
|
||||
|
||||
<x-primary-button id="btn-create-project" class="ml-3">Create</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
</div>
|
||||
@ -0,0 +1,120 @@
|
||||
<x-card>
|
||||
<x-slot name="title">Projects</x-slot>
|
||||
|
||||
<x-slot name="description">Manage the projects that the user is in</x-slot>
|
||||
|
||||
<x-slot name="aside">
|
||||
<x-secondary-button :href="route('settings.users.index')">Back to Users</x-secondary-button>
|
||||
</x-slot>
|
||||
|
||||
<form
|
||||
id="update-projects"
|
||||
hx-post="{{ route("settings.users.update-projects", ["user" => $user]) }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#update-projects"
|
||||
hx-trigger="submit"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-save-projects"
|
||||
class="mt-6"
|
||||
>
|
||||
@csrf
|
||||
|
||||
<script>
|
||||
let projects = @json($user->projects);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="space-y-6"
|
||||
x-data="{
|
||||
q: '',
|
||||
projects: projects,
|
||||
search() {
|
||||
htmx.ajax('GET', '{{ request()->getUri() }}?q=' + this.q, {
|
||||
target: '#projects-list',
|
||||
swap: 'outerHTML',
|
||||
select: '#projects-list',
|
||||
}).then(() => {
|
||||
document.getElementById('q').focus()
|
||||
})
|
||||
},
|
||||
addProject(project) {
|
||||
if (this.projects.find((p) => p.id === project.id)) {
|
||||
return
|
||||
}
|
||||
|
||||
this.projects.push(project)
|
||||
this.q = ''
|
||||
},
|
||||
removeProject(id) {
|
||||
this.projects = this.projects.filter((project) => project.id !== id)
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<x-input-label value="Projects" />
|
||||
|
||||
<div class="mt-1">
|
||||
<template x-for="project in projects">
|
||||
<div class="mr-1 inline-flex">
|
||||
<x-status status="info" class="flex items-center">
|
||||
<span x-text="project.name"></span>
|
||||
<x-heroicon
|
||||
name="o-x-mark"
|
||||
class="ml-1 h-4 w-4 cursor-pointer"
|
||||
x-on:click="removeProject(project.id)"
|
||||
/>
|
||||
<input type="hidden" name="projects[]" x-bind:value="project.id" />
|
||||
</x-status>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label value="Add new Project" />
|
||||
|
||||
@php
|
||||
$projects = \App\Models\Project::query()
|
||||
->where(function ($query) {
|
||||
if (request()->has("q")) {
|
||||
$query->where("name", "like", "%" . request("q") . "%");
|
||||
}
|
||||
})
|
||||
->take(5)
|
||||
->get();
|
||||
@endphp
|
||||
|
||||
<x-dropdown width="full">
|
||||
<x-slot name="trigger">
|
||||
<x-text-input
|
||||
id="q"
|
||||
name="q"
|
||||
x-model="q"
|
||||
type="text"
|
||||
class="mt-1 w-full"
|
||||
placeholder="Search for projects..."
|
||||
autocomplete="off"
|
||||
x-on:input.debounce.500ms="search"
|
||||
/>
|
||||
</x-slot>
|
||||
<x-slot name="content">
|
||||
<div id="projects-list">
|
||||
@foreach ($projects as $project)
|
||||
<x-dropdown-link
|
||||
class="cursor-pointer"
|
||||
x-on:click="addProject({ id: {{ $project->id }}, name: '{{ $project->name }}' })"
|
||||
>
|
||||
{{ $project->name }}
|
||||
</x-dropdown-link>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-slot name="actions">
|
||||
<x-primary-button id="btn-save-projects" form="update-projects">Save</x-primary-button>
|
||||
</x-slot>
|
||||
</x-card>
|
||||
@ -0,0 +1,99 @@
|
||||
<x-card>
|
||||
<x-slot name="title">User Info</x-slot>
|
||||
|
||||
<x-slot name="description">You can update user's info here</x-slot>
|
||||
|
||||
<form
|
||||
id="update-user-info"
|
||||
hx-post="{{ route("settings.users.update", ["user" => $user]) }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#update-user-info"
|
||||
hx-trigger="submit"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-save-info"
|
||||
class="mt-6 space-y-6"
|
||||
>
|
||||
@csrf
|
||||
<div>
|
||||
<x-input-label for="name" value="Name" />
|
||||
<x-text-input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
value="{{ old('name', $user->name) }}"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="name"
|
||||
/>
|
||||
@error("name")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="email" value="Email" />
|
||||
<x-text-input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value="{{ old('email', $user->email) }}"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
@error("email")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="timezone" value="Timezone" />
|
||||
<x-select-input id="timezone" name="timezone" class="mt-1 block w-full" required>
|
||||
@foreach (timezone_identifiers_list() as $timezone)
|
||||
<option
|
||||
value="{{ $timezone }}"
|
||||
@if(old('timezone', $user->timezone) == $timezone) selected @endif
|
||||
>
|
||||
{{ $timezone }}
|
||||
</option>
|
||||
@endforeach
|
||||
</x-select-input>
|
||||
@error("timezone")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="role" value="Role" />
|
||||
<x-select-input id="role" name="role" class="mt-1 w-full">
|
||||
<option
|
||||
value="{{ \App\Enums\UserRole::USER }}"
|
||||
@if(old('role', $user->role) === \App\Enums\UserRole::USER) selected @endif
|
||||
>
|
||||
User
|
||||
</option>
|
||||
<option
|
||||
value="{{ \App\Enums\UserRole::ADMIN }}"
|
||||
@if(old('role', $user->role) === \App\Enums\UserRole::ADMIN) selected @endif
|
||||
>
|
||||
Admin
|
||||
</option>
|
||||
</x-select-input>
|
||||
@error("role")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="password" value="New Password" />
|
||||
<x-text-input id="password" name="password" type="password" class="mt-1 w-full" />
|
||||
@error("password")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-slot name="actions">
|
||||
<x-primary-button id="btn-save-info" form="update-user-info">Save</x-primary-button>
|
||||
</x-slot>
|
||||
</x-card>
|
||||
@ -0,0 +1,69 @@
|
||||
<x-card>
|
||||
<x-slot name="title">
|
||||
{{ __("Update Password") }}
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
{{ __("Ensure your account is using a long, random password to stay secure.") }}
|
||||
</x-slot>
|
||||
|
||||
<form
|
||||
id="update-password"
|
||||
class="mt-6 space-y-6"
|
||||
hx-post="{{ route("profile.password") }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#update-password"
|
||||
hx-trigger="submit"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-save-password"
|
||||
>
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<x-input-label for="current_password" :value="__('Current Password')" />
|
||||
<x-text-input
|
||||
id="current_password"
|
||||
name="current_password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
@error("current_password")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="password" :value="__('New Password')" />
|
||||
<x-text-input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
@error("password")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
|
||||
<x-text-input
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
@error("password_confirmation")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
</form>
|
||||
<x-slot name="actions">
|
||||
<x-primary-button id="btn-save-password" form="update-password">
|
||||
{{ __("Save") }}
|
||||
</x-primary-button>
|
||||
</x-slot>
|
||||
</x-card>
|
||||
Reference in New Issue
Block a user