Informasi Profil

Perbarui nama, email, nomor telepon, dan data pribadi Anda

fileInputRef.current?.click()}>

{auth.user.avatar ? (

) : ( {auth.user.name.charAt(0).toUpperCase()} )}

Foto Profil

Gunakan foto berformat JPG, PNG, atau GIF dengan ukuran maksimal 2MB untuk hasil terbaik.

{({ processing, errors }) => ( <>

Nama Lengkap

Alamat Email

{mustVerifyEmail && auth.user.email_verified_at === null && (

Email Anda belum diverifikasi.{' '} Kirim ulang email verifikasi.

{status === 'verification-link-sent' && (

Tautan verifikasi baru telah dikirim ke email Anda.

)}

Nomor Telepon

{ const el = e.currentTarget; el.value = el.value.replace(/[^0-9+\-\s()]/g, ''); }} />

Bio

<div className="grid gap-3 pt-2">
                                    <div>
                                        <Label className="text-xs font-semibold text-gray-700">Kategori Pengguna</Label>
                                        <p className="text-[11px] text-gray-400">
                                            Pilih kategori untuk personalisasi pengalaman belajar Anda
                                        </p>
                                    </div>
                                    
                                    <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
                                        {UI_THEMES.map((theme) => (
                                            <label
                                                key={theme.value}
                                                className="relative flex flex-col justify-center cursor-pointer rounded-xl border border-gray-200 p-3.5 transition-all hover:bg-gray-50/50 has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/40"
                                            >
                                                <input
                                                    type="radio"
                                                    name="ui_theme"
                                                    value={theme.value}
                                                    defaultChecked={auth.user.ui_theme === theme.value}
                                                    className="sr-only"
                                                />
                                                <span className="font-semibold text-xs text-gray-800 checked:text-emerald-900">{theme.label}</span>
                                                <span className="text-[10px] text-gray-400 mt-0.5 leading-tight">{theme.desc}</span>
                                            </label>
                                        ))}
                                    </div>
                                    <InputError className="mt-1" message={errors.ui_theme} />
                                </div>

<div className="flex justify-end pt-2">
                                    <Button
                                        disabled={processing}
                                        className="rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold px-6"
                                        data-test="update-profile-button"
                                    >
                                        Simpan Perubahan
                                    </Button>
                                </div>
                            </>
                        )}
                    </Form>
                </div>

<div className="bg-white rounded-3xl border border-gray-100 shadow-sm p-6 space-y-6">
                    <div>
                        <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
                            <Lock className="h-5 w-5 text-emerald-600" />
                            Keamanan Akun
                        </h2>
                        <p className="text-xs text-gray-400 mt-0.5">Perbarui kata sandi Anda untuk memastikan akun tetap aman</p>
                    </div>

<Form
                        {...SecurityController.update.form()}
                        options={{
                            preserveScroll: true,
                        }}
                        resetOnError={[
                            'password',
                            'password_confirmation',
                            'current_password',
                        ]}
                        resetOnSuccess
                        onError={(errors) => {
                            if (errors.password) {
                                passwordInput.current?.focus();
                            }

if (errors.current_password) {
                                currentPasswordInput.current?.focus();
                            }
                        }}
                        className="space-y-5"
                    >
                        {({ errors, processing }) => (
                            <>
                                <div className="grid gap-2">
                                    <Label htmlFor="current_password" className="text-xs font-semibold text-gray-700">
                                        Kata Sandi Saat Ini
                                    </Label>
                                    <PasswordInput
                                        id="current_password"
                                        ref={currentPasswordInput}
                                        name="current_password"
                                        className="rounded-xl border-gray-200 focus-visible:ring-emerald-500/20 focus-visible:border-emerald-500"
                                        autoComplete="current-password"
                                        placeholder="Kata sandi saat ini"
                                    />
                                    <InputError message={errors.current_password} />
                                </div>

<div className="grid gap-2">
                                    <Label htmlFor="password" className="text-xs font-semibold text-gray-700">
                                        Kata Sandi Baru
                                    </Label>
                                    <PasswordInput
                                        id="password"
                                        ref={passwordInput}
                                        name="password"
                                        className="rounded-xl border-gray-200 focus-visible:ring-emerald-500/20 focus-visible:border-emerald-500"
                                        autoComplete="new-password"
                                        placeholder="Kata sandi baru"
                                        passwordrules={passwordRules}
                                    />
                                    <InputError message={errors.password} />
                                </div>

<div className="grid gap-2">
                                    <Label htmlFor="password_confirmation" className="text-xs font-semibold text-gray-700">
                                        Konfirmasi Kata Sandi Baru
                                    </Label>
                                    <PasswordInput
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        className="rounded-xl border-gray-200 focus-visible:ring-emerald-500/20 focus-visible:border-emerald-500"
                                        autoComplete="new-password"
                                        placeholder="Konfirmasi kata sandi baru"
                                        passwordrules={passwordRules}
                                    />
                                    <InputError message={errors.password_confirmation} />
                                </div>

<div className="flex justify-end pt-2">
                                    <Button
                                        disabled={processing}
                                        className="rounded-xl bg-emerald-600 hover:bg-emerald-700 font-semibold px-6"
                                        data-test="update-password-button"
                                    >
                                        Perbarui Kata Sandi
                                    </Button>
                                </div>
                            </>
                        )}
                    </Form>
                </div>

<div className="bg-white rounded-3xl border border-red-100 shadow-sm p-6">
                    <DeleteUser />
                </div>
            </div>
        </>
    );
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Pengaturan Profil',
        href: edit(),
    },
];

Profile.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);