cms/resources/js/components/admin/Profile.svelte

<script>
    let { user, adminPath, status, errors } = $props();

    // Use $derived for parsed data to stay reactive to prop changes if needed
    // but here props are static from mount. Still, cleaner for Svelte 5.
    const userData = $derived(typeof user === 'string' ? JSON.parse(user) : user);
    const errorList = $derived(typeof errors === 'string' ? JSON.parse(errors) : errors);

    let name = $state('');
    let email = $state('');
    let current_password = $state('');
    let new_password = $state('');
    let new_password_confirmation = $state('');

    const isProtected = $derived(userData.is_protected);

    $effect(() => {
        if (userData) {
            name = userData.name;
            email = userData.email;
        }
    });
</script>

<div class="ui container" style="margin-top: 2em;">
    <div class="ui stackable grid">
        <div class="sixteen wide column">
            <h2 class="ui header">
                <i class="user icon"></i>
                <div class="content">
                    Profile Settings
                    <div class="sub header">Update your account information</div>
                </div>
            </h2>
            <div class="ui divider"></div>
        </div>

        <div class="ten wide column">
            {#if status === 'profile-updated'}
                <div class="ui success message">
                    <i class="close icon"></i>
                    <div class="header">Profile Updated</div>
                    <p>Your profile information has been successfully updated.</p>
                </div>
            {/if}

            {#if errorList && errorList.length > 0}
                <div class="ui error message">
                    <i class="close icon"></i>
                    <div class="header">There were some errors with your submission</div>
                    <ul class="list">
                        {#each errorList as error}
                            <li>{error}</li>
                        {/each}
                    </ul>
                </div>
            {/if}

            <form action="{window.location.origin}{adminPath}/profile" method="POST" class="ui form">
                <input type="hidden" name="_token" value="{document.querySelector('meta[name=\"csrf-token\"]').content}">
                <input type="hidden" name="_method" value="PUT">

                <div class="ui segment">
                    <h4 class="ui dividing header">Basic Information</h4>
                    <div class="field">
                        <label for="profile_name">Full Name</label>
                        <input id="profile_name" type="text" name="name" bind:value={name} placeholder="Your Name" required>
                    </div>
                    <div class="field">
                        <label for="profile_email">Email Address</label>
                        <input id="profile_email" type="email" name="email" bind:value={email} placeholder="Email Address" required readonly={isProtected}>
                        {#if isProtected}
                            <div class="ui pointing label">
                                Critical fields are protected for this account.
                            </div>
                        {/if}
                    </div>
                </div>

                <div class="ui segment">
                    <h4 class="ui dividing header">Change Password</h4>
                    <p class="text-muted">Leave blank if you don't want to change it.</p>
                    <div class="field">
                        <label for="current_password">Current Password</label>
                        <input id="current_password" type="password" name="current_password" bind:value={current_password} autocomplete="current-password">
                    </div>
                    <div class="two fields">
                        <div class="field">
                            <label for="new_password">New Password</label>
                            <input id="new_password" type="password" name="new_password" bind:value={new_password} autocomplete="new-password">
                        </div>
                        <div class="field">
                            <label for="new_password_confirmation">Confirm New Password</label>
                            <input id="new_password_confirmation" type="password" name="new_password_confirmation" bind:value={new_password_confirmation} autocomplete="new-password">
                        </div>
                    </div>
                </div>

                <button class="ui primary button" type="submit">Save Changes</button>
            </form>
        </div>

        <div class="six wide column">
            <div class="ui fluid card">
                <div class="content">
                    <div class="header">Account Summary</div>
                </div>
                <div class="content">
                    <div class="ui list">
                        <div class="item">
                            <i class="user icon"></i>
                            <div class="content">
                                <div class="header">Name</div>
                                <div class="description">{userData.name}</div>
                            </div>
                        </div>
                        <div class="item">
                            <i class="mail icon"></i>
                            <div class="content">
                                <div class="header">Email</div>
                                <div class="description">{userData.email}</div>
                            </div>
                        </div>
                        <div class="item">
                            <i class="shield alternate icon"></i>
                            <div class="content">
                                <div class="header">Role Protection</div>
                                <div class="description">{isProtected ? 'Protected' : 'Standard'}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>