feat: show user list on frontend

This commit is contained in:
Fu Zi Xiang 2023-10-10 16:57:02 +08:00
parent 0ef6095481
commit c91ea9234a
No known key found for this signature in database
7 changed files with 46 additions and 36 deletions

View File

@ -1,4 +1,5 @@
# Admin Frontend
- Start the whole stack: `docker compose up -d`
- Go to [web server](localhost)
- Quick rebuild only frontend after editing `docker compose up -d --no-deps --build admin_frontend`

View File

@ -1,4 +1,5 @@
# Development
- Run the dev docker compose in the previous directory: `docker compose --file docker-compose-dev.yml up -d`
- cp `dev.env` to `.env`
- run the frontend: `cargo watch -x run -w .`

View File

@ -23,9 +23,9 @@ where
let token = jar
.get("access_token")
.ok_or(AccessTokenRejection::NoAccessToken)?
.to_string();
.value();
Ok(WebAccessToken(token))
Ok(WebAccessToken(token.to_string()))
}
}

View File

@ -11,3 +11,9 @@ pub struct Home;
#[derive(Template)]
#[template(path = "admin.html")]
pub struct Admin;
#[derive(Template)]
#[template(path = "users.html")]
pub struct Users<'a> {
pub users: &'a [gotrue_entity::User],
}

View File

@ -30,8 +30,20 @@ pub async fn admin_users_handler(
State(state): State<AppState>,
access_token: WebAccessToken,
) -> Result<Html<String>, RenderError> {
let users = state.gotrue_client.admin_list_user(&access_token.0).await;
todo!()
let users = state
.gotrue_client
.admin_list_user(&access_token.0)
.await
.map_or_else(
|err| {
// Log the error and return an empty vector.
println!("Failed to fetch users: {:?}", err);
vec![]
},
|r| r.users,
);
let s = templates::Users { users: &users }.render()?;
Ok(Html(s))
}
pub async fn login_handler() -> Result<Html<String>, RenderError> {

View File

@ -9,7 +9,8 @@
.getElementById("logoutBtn")
.addEventListener("click", function () {
// Remove the cookie by setting its value to an empty string and its expiry date to the past.
document.cookie = "access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
document.cookie =
"access_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
// Redirect to the login page.
window.location.href = "/web/login";

View File

@ -1,36 +1,25 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<body>
<body>
<h1>User List</h1>
<ul id="userList"></ul>
<h1>User List</h1>
<ul id="userList"></ul>
<table>
<tr>
<th>Id</th>
<th>Email</th>
<th>Created At</th>
</tr>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Fetch the user list from the API
fetch('/web-api/users')
.then(response => {
// Check if HTTP status code indicates success
if (!response.ok) {
return Promise.reject('Failed to fetch users');
}
return response.json(); // Parse the JSON response
})
.then(data => {
// Display the users on the page
const userList = document.getElementById('userList');
data.forEach(user => {
const li = document.createElement('li');
li.textContent = `${user.name} (${user.email})`;
userList.appendChild(li);
});
})
.catch(error => {
console.error('Error:', error);
alert('Failed to fetch users');
});
});
</script>
{% for user in users %}
<tr>
<td>{{ user.id|escape }}</td>
<td>{{ user.email|escape }}</td>
<td>{{ user.created_at|escape }}</td>
</tr>
{% endfor %}
</table>
</body>
<script></script>
</body>
</html>