title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account

<div class="user-profile-management">
  <h2>Manage Account</h2>
  <$set name="current-role-id" value={{{ [<user-role>jsonget[role_id]] }}}>
    <form class="user-profile-form" action="/update-user-profile" method="POST">
      <input type="hidden" name="userId" value={{{ [<user>jsonget[user_id]] }}}>
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" value={{{ [<user>jsonget[username]] }}} required />
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" value={{{ [<user>jsonget[email]] }}} required />
      </div>
      <% if [<user-is-admin>match[yes]] %>
        <div class="form-group">
          <label for="role">Role:</label>
          <select id="role" name="role" required>
            <$list filter="[<all-roles>jsonindexes[]]" variable="role-index">              
              <$set name="role-id" value={{{ [<all-roles>jsonextract<role-index>jsonget[role_id]] }}}> 
                <option value=<<role-id>>>
                  <$text text={{{ [<all-roles>jsonextract<role-index>jsonget[role_name]] }}}/>
                </option>
              </$set>
            </$list>
          </select>
        </div>
      <% endif %>
      <button type="submit" class="update-profile-btn">Update Profile</button>
      <$list filter="[[$:/temp/mws/update-profile/]addsuffix<user-id>addsuffix[/error]!is[missing]]" variable="errorTiddler">
        <div class="tc-error-message">
          <$text text={{{[<errorTiddler>get[text]]}}}/>
        </div>
      </$list>

      <$list filter="[[$:/temp/mws/update-profile/]addsuffix<user-id>addsuffix[/success]!is[missing]]" variable="successTiddler">
        <div class="tc-success-message">
          <$text text={{{[<successTiddler>get[text]]}}}/>
        </div>
      </$list>
    </form>
  </$set>
  <% if [<user-is-admin>match[yes]] && [<is-current-user-profile>match[no]] %>
    <hr />
    <form class="user-profile-form" action="/delete-user-account" method="POST" onsubmit="return confirm('Are you sure you want to delete this user account? This action cannot be undone.');">
      <input type="hidden" name="userId" value={{{ [<user>jsonget[user_id]] }}}>
      <button type="submit" class="delete-account-btn">Delete User Account</button>
      <$list filter="[[$:/temp/mws/delete-user/]addsuffix<user-id>addsuffix[/error]!is[missing]]" variable="deleteErrorTiddler">
        <div class="tc-error-message">
          <$text text={{{[<deleteErrorTiddler>get[text]]}}}/>
        </div>
      </$list>
    </form>
  <% endif %>
  <% if [<is-current-user-profile>match[yes]] %>
    <hr />
    <h2>Change Password</h2>
    <form class="user-profile-form" action="/change-user-password" method="POST">
      <input type="hidden" name="userId" value={{{ [<user>jsonget[user_id]] }}}>
      <div class="form-group">
        <label for="new-password">New Password:</label>
        <input type="password" id="new-password" name="newPassword" required />
      </div>
      <div class="form-group">
        <label for="confirm-password">Confirm New Password:</label>
        <input type="password" id="confirm-password" name="confirmPassword" required />
      </div>
      <button type="submit" class="update-password-btn">Change Password</button>
      <$list filter="[[$:/temp/mws/change-password/]addsuffix<user-id>addsuffix[/error]!is[missing]]" variable="errorTiddler">
        <div class="tc-error-message">
          <$text text={{{[<errorTiddler>get[text]]}}}/>
        </div>
      </$list>
      <$list filter="[[$:/temp/mws/change-password/]addsuffix<user-id>addsuffix[/success]!is[missing]]" variable="successTiddler">
        <div class="tc-success-message">
          <$text text={{{[<successTiddler>get[text]]}}}/>
        </div>
      </$list>
    </form>
  <% endif %>
</div>

<style>
.user-profile-management {
  padding: 20px;
  flex: 1;
}

.user-profile-management h2 {
  font-size: 1.2rem;
  color: #3498db;
  margin-bottom: 1rem;
}

.user-profile-form {
  margin-bottom: 20px;
}

.user-profile-form .form-group {
  margin-bottom: 1rem;
}

.user-profile-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.user-profile-form input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.update-profile-btn,
.update-password-btn {
  background: #3498db;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.update-password-btn {
  background: #00796b;
}

.update-profile-btn:hover {
  background: #2980b9;
}

.update-password-btn:hover {
  background: #00695c;
}

.user-profile-form select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
}

.delete-account-btn {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
}

.delete-account-btn:hover {
  background: #c0392b;
}

.tc-error-message {
  color: red;
  font-weight: bold;
}

.tc-success-message {
  color: green;
  font-weight: bold;
}
</style>