Pengaturan Profil

Profile Settings adalah Account Page tempat signed-in user dapat:

• mengubah nama;
• mengubah alamat email;
• resend verification link;
• menghapus account.

Page dirender di dalam Panel aktif.

PandaBear bertanggung jawab terhadap screen, sedangkan application tetap bertanggung jawab terhadap write.

Gunakan dokumentasi ini untuk mengetahui:

• props yang dikirim;
• endpoint yang digunakan;
• dependency host application;
• serta bagian yang harus tetap disediakan application.

Contoh Minimal

Tidak ada registrasi tambahan.

Panel biasa sudah mendapatkan Settings Pages:

<?php

declare(strict_types=1);

namespace App\Panels\Admin;

use PandaPanel\Core\Panel;
use PandaPanel\Core\PanelProvider;

final class AdminPanelProvider
    extends PanelProvider
{
    public function panel(
        Panel $panel
    ): Panel {
        return $panel
            ->path('admin')
            ->auth();
    }
}

Route:

php artisan route:list --name=panel.admin.pages.settings-profile

GET  admin/settings/profile  panel.admin.pages.settings-profile

Page Class

PandaPanel\Pages\Settings\ProfileSettings

extends:

PandaPanel\Pages\Page

Member	Value
$title	'Profile'
$subheading	'Update your name and email address.'
$slug	'settings-profile'
$component	'panel/settings/Profile'
$navigationIcon	'user'
$navigationGroup	'Account'
$navigationSort	10
$middleware	tidak ada
routePath()	'settings/profile'

Slug tetap satu segment:

settings-profile

sementara route path:

settings/profile

Slug digunakan sebagai registry/route-name key.

Path adalah URL yang dilihat user.

Contoh:

use PandaPanel\Pages\Settings\ProfileSettings;

ProfileSettings::routeName(
    'admin'
);
// panel.admin.pages.settings-profile

ProfileSettings::url(
    'admin'
);
// /admin/settings/profile

ProfileSettings::url(
    'app'
);
// /app/settings/profile

Setiap Panel memiliki copy Page-nya sendiri.

Props

public function props(): array
{
    return [
        'mustVerifyEmail' =>
            Auth::user()
                instanceof MustVerifyEmail,

        'status' =>
            session(
                'status'
            ),
    ];
}

Prop	Type	Arti
mustVerifyEmail	bool	User mengimplementasikan MustVerifyEmail
status	string|null	Session flash status

User sendiri tidak dikirim oleh Page.

Vue membaca:

usePage().props.auth.user

yang harus dibagikan application melalui HandleInertiaRequests.

Contoh:

public function share(
    Request $request
): array {
    return [
        ...parent::share(
            $request
        ),

        'auth' => [
            'user' =>
                $request->user(),
        ],
    ];
}

PandaBear SharePanelData sengaja tidak membagikan auth.

Authenticated user adalah concern application-wide, bukan Panel-only concern.

Frontend

resources/js/pages/panel/settings/Profile.vue

Contoh:

<script setup lang="ts">
import {
    Form,
    usePage,
} from '@inertiajs/vue3';

import {
    computed,
} from 'vue';

import ProfileController
    from '@/actions/App/Http/Controllers/Settings/ProfileController';

import DeleteUser
    from '@/components/DeleteUser.vue';

import {
    send,
} from '@/routes/verification';

const user = computed(
    () =>
        usePage()
            .props
            .auth
            .user,
);
</script>

<template>
    <Form
        v-slot="{ errors, processing }"
        v-bind="ProfileController.update.form()"
    >
        <!-- name, email -->
    </Form>

    <DeleteUser />
</template>

Tiga write operation:

Control	Target
Save Profile	PATCH /settings/profile melalui application ProfileController
Resend Verification	Fortify verification.send
Delete Account	DELETE /settings/profile melalui application

Tidak satupun merupakan PandaBear write route.

Write Tetap Milik Application

Contoh application controller:

<?php

declare(strict_types=1);

namespace App\Http\Controllers\Settings;

use App\Models\User;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Validation\Rule;

final class ProfileController
{
    public function update(
        Request $request
    ): RedirectResponse {
        $user =
            $request->user();

        abort_if(
            ! $user instanceof User,
            403
        );

        $validated =
            $request->validate([
                'name' => [
                    'required',
                    'string',
                    'max:255',
                ],

                'email' => [
                    'required',
                    'string',
                    'email',
                    'max:255',

                    Rule::unique(
                        User::class
                    )
                        ->ignore(
                            $user->id
                        ),
                ],
            ]);

        $user->fill(
            $validated
        );

        if (
            $user
                ->isDirty(
                    'email'
                )
            && $user
                instanceof
                MustVerifyEmail
        ) {
            $user
                ->email_verified_at =
                    null;
        }

        $user->save();

        return back()
            ->with(
                'success',
                'Profile updated.'
            );
    }
}

Dua detail penting:

1. hanya validated attributes yang diassign;
2. email verification direset ketika address berubah.

Dengan whitelist validation, request tambahan seperti:

is_admin=true

tidak ikut masuk.

back()->with('success') kemudian diterjemahkan ShareFlashToast menjadi Panel toast.

Mempertahankan /settings/profile

Jika screen lama dipindahkan ke Panel, application dapat mempertahankan URL lama sebagai redirect alias.

Contoh:

Route::middleware(
    'auth'
)
    ->group(
        function (): void {
            Route::get(
                'settings',
                [
                    SettingsRedirectController::class,
                    'profile',
                ]
            );

            Route::get(
                'settings/profile',
                [
                    SettingsRedirectController::class,
                    'profile',
                ]
            )
                ->name(
                    'profile.edit'
                );

            Route::patch(
                'settings/profile',
                [
                    ProfileController::class,
                    'update',
                ]
            )
                ->name(
                    'profile.update'
                );
        }
    );

Screen berpindah ke Panel.

Write endpoint tetap sama.

Redirect dapat mencari Panel pertama yang benar-benar dapat diakses:

private function toPanel(
    Request $request,
    string $page
): RedirectResponse {
    $panel =
        app(
            PandaPanel\Core\PanelManager::class
        )
            ->firstAccessibleTo(
                $request->user()
            );

    abort_if(
        $panel === null
        || ! $panel
            ->hasSettings(),
        403
    );

    return redirect(
        $page::url(
            $panel
        )
    );
}

Mematikan Page

public function settings(
    bool $settings = true
): self;

public function hasSettings():
    bool;

Panel::make(
    'kiosk'
)
    ->settings(false)
    ->getPages();

// []

Settings bersifat:

Profile + Security + Appearance

secara sekaligus.

Testing

use Inertia\Testing\AssertableInertia;

it(
    'renders the profile settings page in the panel shell',
    function (): void {
        $this
            ->actingAs(
                $admin
            )
            ->get(
                '/admin/settings/profile'
            )
            ->assertOk()
            ->assertInertia(
                fn (
                    AssertableInertia $page
                ) =>
                    $page
                        ->component(
                            'panel/settings/Profile'
                        )
                        ->where(
                            'panel.id',
                            'admin'
                        )
                        ->where(
                            'page.title',
                            'Profile'
                        )
                        ->has(
                            'mustVerifyEmail'
                        )
            );
    }
);

Panel access:

$this
    ->actingAs(
        $member
    )
    ->get(
        '/admin/settings/profile'
    )
    ->assertForbidden();

Guest:

$this
    ->get(
        '/app/settings/profile'
    )
    ->assertRedirect(
        route(
            'login'
        )
    );

Hal yang Perlu Diperhatikan

• Route Page hanya GET.
• POST ke /admin/settings/profile menghasilkan 405.
• Page membutuhkan host modules seperti ProfileController, verification route, dan DeleteUser dependencies.
• auth.user harus dibagikan application melalui Inertia.
• Delete Account juga tetap menggunakan application endpoint.
• Panel access diperiksa sebelum Page.
• PandaBear tidak otomatis mengosongkan email_verified_at ketika email berubah. Logic tersebut harus ada di application controller.

Lihat Juga

• Security Settings
• Appearance Settings
• Email Verification
• User Model Requirements
• Settings Pages
• Page URLs
• Host Modules
• Wayfinder
• Toast Notifications