Rodrigo Rodriguez (Pragmatismo)
02eaac783f
Refactored editor.page.html to use a Vue-style `data()` function for reactive state, adding a new `content` property and cleaning up redundant inline styles. Updated profile-form.html to replace single `error` handling with field-specific `errors.<field>` bindings, improving form validation clarity and user feedback.
54 lines
No EOL
2.1 KiB
HTML
54 lines
No EOL
2.1 KiB
HTML
<div id="main-content">
|
|
<div class="content-section active">
|
|
<div class="space-y-6 p-4">
|
|
<div>
|
|
<h2 class="text-lg font-medium">Profile</h2>
|
|
<p class="text-sm text-gray-500"></p>
|
|
</div>
|
|
<div class="border-t border-gray-200 my-4"></div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Username Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Username</label>
|
|
<input class="w-full p-2 border rounded" x-model="username" placeholder="Enter username" />
|
|
<template x-if="errors.username">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.username"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
This is your public display name. It can be your real name or a pseudonym.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Email Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Email</label>
|
|
<input type="email" class="w-full p-2 border rounded" x-model="email" placeholder="Enter email" />
|
|
<template x-if="errors.email">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.email"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
You can manage verified email addresses in your email settings.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bio Field -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-1">Bio</label>
|
|
<textarea class="w-full p-2 border rounded" x-model="bio" rows="4"
|
|
placeholder="Tell us a little bit about yourself"></textarea>
|
|
<template x-if="errors.bio">
|
|
<p class="text-red-500 text-xs mt-1" x-text="errors.bio"></p>
|
|
</template>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
You can @mention other users and organizations to link to them.
|
|
</p>
|
|
</div>
|
|
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" @click="submitForm">
|
|
Update profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |