137 lines
6 KiB
Svelte
137 lines
6 KiB
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>
|