Add success and error message feedback for user profile operations (#8716)

* mws authentication

* add more tests and permission checkers

* add logic to ensure that only authenticated users' requests are handled

* add custom login page

* Implement user authentication as well as session handling

* work on user operations authorization

* add middleware to route handlers for bags & tiddlers routes

* add feature that only returns the tiddlers and bags which the user has permission to access on index page

* refactor auth routes & added user management page

* fix Ci Test failure issue

* fix users list page, add manage roles page

* add commands and scripts to create new user & assign roles and permissions

* resolved ci-test failure

* add ACL permissions to bags & tiddlers on creation

* fix comments and access control list bug

* fix indentation issues

* working on user profile edit

* remove list users command & added support for database in server options

* implement user profile update and password change feature

* update plugin readme

* implement command which triggers protected mode on the server

* revert server-wide auth flag. Implement selective authorization

* ACL management feature

* Complete Access control list implementation

* Added support to manage users' assigned role by admin

* fix comments

* fix comment

* Add user profile management and account deletion functionality

* add success and error message feedback for user profile operations

* fix indentation issues

* Add command to create admin user if none exists when the start command is executed

* refactor annonymous user flow with create admin implementation

* remove mws-add-user from start command
This commit is contained in:
webplusai
2024-11-08 11:09:42 +01:00
committed by GitHub
parent 3a5f67d4f5
commit 316bd65296
25 changed files with 580 additions and 390 deletions

View File

@@ -27,6 +27,20 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-index
</$set>
</$tiddler>
<$list filter="[<first-guest-user>match[yes]]">
<div class="mws-security-warning">
<div class="mws-security-warning-content">
<div class="mws-security-warning-icon">⚠️</div>
<div class="mws-security-warning-text">
<strong>Warning:</strong> TiddlyWiki is currently running in anonymous access mode which allows anyone with access to the server to read and modify data.
</div>
<div class="mws-security-warning-action">
<a href="/admin/users" class="mws-security-warning-button">Add Admin Account</a>
</div>
</div>
</div>
</$list>
<ul class="mws-vertical-list">
<$list filter="[<recipe-list>jsonindexes[]] :sort[<currentTiddler>jsonget[recipe_name]]" variable="recipe-index">
<li>
@@ -226,4 +240,48 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-index
.mws-admin-dropdown:hover .mws-admin-dropdown-content {display: block;}
.mws-admin-dropdown:hover {background-color: #2980B9;}
.mws-security-warning {
background-color: #fff3cd;
border: 1px solid #ffeeba;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 4px;
}
.mws-security-warning-content {
display: flex;
align-items: center;
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.mws-security-warning-icon {
font-size: 1.5rem;
}
.mws-security-warning-text {
flex-grow: 1;
color: #856404;
}
.mws-security-warning-button {
display: flex;
padding: 0.5rem 1rem;
background-color: #856404;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
transition: background-color 0.2s;
flex-direction: row;
align-items: center;
text-align: center;
text-wrap: nowrap;
}
.mws-security-warning-button:hover {
background-color: #6d5204;
}
</style>

View File

@@ -18,34 +18,36 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-users
</$tiddler>
<div class="users-container">
<div class="users-list">
<$list filter="[<user-list>jsonindexes[]]" variable="user-index">
<$let currentUser={{{ [<user-list>jsonextract<user-index>] }}}>
<$set name="user-id" value={{{ [<currentUser>jsonget[user_id]] }}}>
<a href={{{ [[/admin/users/]addsuffix<user-id>] }}} class="user-item">
<div class="user-info">
<span class="user-name">
<$text text={{{ [<currentUser>jsonget[username]] }}}/>
</span>
<span class="user-email">
<$text text={{{ [<currentUser>jsonget[email]] }}}/>
</span>
</div>
<div class="user-details">
<span class="user-created">
Created: <$text text={{{ [<currentUser>jsonget[created_at]] }}}/>
</span>
<span class="user-last-login">
Last Login: <$text text={{{ [<currentUser>jsonget[last_login]] }}}/>
</span>
</div>
</a>
</$set>
</$let>
</$list>
</div>
<$list filter="[<user-list>jsonindexes[]count[]!match[0]]">
<div class="users-list">
<$list filter="[<user-list>jsonindexes[]]" variable="user-index">
<$let currentUser={{{ [<user-list>jsonextract<user-index>] }}}>
<$set name="user-id" value={{{ [<currentUser>jsonget[user_id]] }}}>
<a href={{{ [[/admin/users/]addsuffix<user-id>] }}} class="user-item">
<div class="user-info">
<span class="user-name">
<$text text={{{ [<currentUser>jsonget[username]] }}}/>
</span>
<span class="user-email">
<$text text={{{ [<currentUser>jsonget[email]] }}}/>
</span>
</div>
<div class="user-details">
<span class="user-created">
Created: <$text text={{{ [<currentUser>jsonget[created_at]] }}}/>
</span>
<span class="user-last-login">
Last Login: <$text text={{{ [<currentUser>jsonget[last_login]] }}}/>
</span>
</div>
</a>
</$set>
</$let>
</$list>
</div>
</$list>
<$list filter="[<user-is-admin>match[yes]]">
<$list filter="[<user-is-admin>match[yes]][<first-guest-user>match[yes]]">
<div class="add-user-card">
<$transclude tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/add-user-form" mode="inline"/>
</div>
@@ -73,6 +75,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-users
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin: auto;
}
.user-item {
display: block;
@@ -121,4 +124,9 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-users
.tc-btn-big-green:hover {
background-color: #45a049;
}
.no-users-message {
text-align: center;
padding: 2rem;
color: #666;
}
</style>

View File

@@ -28,6 +28,17 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account
</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]] %>
@@ -35,6 +46,11 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account
<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]] %>
@@ -51,6 +67,16 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account
<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>
@@ -58,6 +84,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account
<style>
.user-profile-management {
padding: 20px;
flex: 1;
}
.user-profile-management h2 {
@@ -133,4 +160,14 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account
.delete-account-btn:hover {
background: #c0392b;
}
.tc-error-message {
color: red;
font-weight: bold;
}
.tc-success-message {
color: green;
font-weight: bold;
}
</style>

View File

@@ -14,7 +14,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
<h1 class="user-profile-name"><$text text={{{ [<user>jsonget[username]] }}}/></h1>
<p class="user-profile-email"><$text text={{{ [<user>jsonget[email]] }}}/></p>
</div>
<div class="user-profile-details">
<div class="user-profile-item">
<span class="user-profile-label">User ID:</span>
@@ -39,7 +39,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
</div>
</div>
</div>
<% if [<user-is-admin>match[yes]] %>
<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/manage-user-account">
<$transclude/>
@@ -70,7 +70,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/manage-user
}
.user-profile-container {
flex: 1;
flex: 4;
margin: 2rem auto;
background: #fff;
border-radius: 8px;

View File

@@ -12,7 +12,7 @@ title: $:/plugins/tiddlywiki/multiwikiserver/templates/mws-header
<a href="/admin/roles">Manage Roles</a>
</div>
</div>
<% elseif [<username>!match[Guest]] %>
<% elseif [<username>!match[Guest]]+[<first-guest-user>match[no]] %>
<a href={{{ [<user>jsonget[user_id]addprefix[/admin/users/]] }}}>
<button class="mws-profile-btn">Profile</button>
</a>