enhance account with a display name (#55)

Author: mobergmann

public/auth/sign_up.html

@@ -26,6 +26,12 @@ <h1>Sign Up</h1>
                 <i class="fa-solid fa-user"></i>
                 <input type="text" placeholder="Username" id="username" class="input">
             </div>
+
+            <label for="display-name">Enter your display name</label>
+            <div class="input-group">
+                <i class="fa-solid fa-user"></i>
+                <input type="text" placeholder="Display Name" id="display-name" class="input">
+            </div>
         </div>
 
         <div class="container">
@@ -60,4 +66,4 @@ <h1>Sign Up</h1>
 </main>
 </body>
 
-</html>
+</html>

public/auth/sign_up.js

@@ -4,6 +4,7 @@ document.querySelector("#form").addEventListener("submit", async (e) => {
     e.preventDefault();
 
     const username = document.querySelector("#username").value;
+    const display_name = document.querySelector("#display-name").value;
     const password1 = document.querySelector("#password1").value;
     const password2 = document.querySelector("#password2").value;
 
@@ -12,7 +13,7 @@ document.querySelector("#form").addEventListener("submit", async (e) => {
         return;
     }
 
-    const account = new NewAccount(username, password1);
+    const account = new NewAccount(username, display_name, password1);
     const res = await create(account);
     if (res.ok) {
         window.location = "/index.html";

public/feed.html

@@ -40,9 +40,11 @@ <h1><a href="/challenge.html">Weekly PushUps Challenge</a></h1>
 
 <template id="post-template">
   <div class="container post">
-      <div class="container">
-          <div><b>Athlet:&nbsp;</b></div>
-          <a class="post-athlete-link"><div class="post-name"></div></a>
+      <div class="container flex-row">
+          <!--<div><b>Athlet:&nbsp;</b></div>-->
+          <div class="post-display-name"></div>
+          &nbsp;
+          <a class="post-athlete-link flex-row"><div class="post-username"></div>@sportsfriend</a>
       </div>
 
       <div class="container">

public/feed.js

@@ -116,7 +116,7 @@ async function main() {
         let clone = post_template.content.cloneNode(true);
 
         const athlete_link = `/athletes/${activity.author_id}`;
-        const author_name = user_by_id.get(activity.author_id).username;
+        const author = user_by_id.get(activity.author_id);
         let duration = "";
         {
             const diff = new Date(activity.end_time) - new Date(activity.start_time);
@@ -154,7 +154,8 @@ async function main() {
         }
 
         clone.querySelector(".post").id = `${activity.id}`;
-        clone.querySelector(".post-name").innerHTML = author_name;
+        clone.querySelector(".post-username").innerHTML = author.username;
+        clone.querySelector(".post-display-name").innerHTML = author.display_name;
         clone.querySelector(".post-athlete-link").href = athlete_link;
         clone.querySelector(".post-activity-type").innerHTML = activity.activity_type;
         clone.querySelector(".post-start-time").innerHTML = activity.start_time;

public/scripts/api/account.js

@@ -1,23 +1,26 @@
 import {BASE_ACCOUNT_URL, STATUS, Result} from "./main.js"
 
 export class Account {
-    constructor(id, username, password_hash) {
+    constructor(id, username, display_name, password_hash) {
         this.id = id;
         this.username = username;
+        this.display_name = display_name;
         this.password_hash = password_hash;
     }
 }
 
 export class NewAccount {
-    constructor(username, password) {
+    constructor(username, display_name, password) {
         this.username = username;
+        this.display_name = display_name;
         this.password = password;
     }
 }
 
 export class EditAccount {
-    constructor(username) {
+    constructor(username, display_name) {
         this.username = username;
+        this.display_name = display_name;
     }
 }
 
@@ -45,7 +48,7 @@ export async function get() {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new Account(value.id, value.username, value.password_hash));
+        return new Result(true, new Account(value.id, value.username, value.display_name, value.password_hash));
     } else {
         let error = await response.text();
         return new Result(false, error);
@@ -68,7 +71,7 @@ export async function create(account) {
     let response = await fetch(request);
     if (response.status === STATUS.CREATED) {
         let value = await response.json();
-        return new Result(true, new Account(value.id, value.username, value.password_hash));
+        return new Result(true, new Account(value.id, value.username, value.display_name, value.password_hash));
     } else {
         let error = await response.text();
         return new Result(false, error);
@@ -91,7 +94,7 @@ export async function edit(account) {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new Account(value.id, value.username, value.password_hash));
+        return new Result(true, new Account(value.id, value.username, value.display_name, value.password_hash));
     } else {
         let error = await response.text();
         return new Result(false, error);
@@ -141,7 +144,7 @@ export async function remove(current_password) {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new Account(value.id, value.username, value.password_hash));
+        return new Result(true, new Account(value.id, value.username, value.display_name, value.password_hash));
     } else {
         let error = await response.text();
         return new Result(false, error);

public/scripts/api/auth.js

@@ -18,7 +18,7 @@ export async function login(username, password) {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new Account(value.id, value.username, value.password_hash));
+        return new Result(true, new Account(value.id, value.username, value.display_name, value.password_hash));
     } else {
         let error = await response.text();
         return new Result(false, error);

public/scripts/api/users.js

@@ -1,9 +1,10 @@
 import {BASE_USERS_URL, STATUS, Result} from "./main.js";
 
 export class User {
-    constructor(id, username) {
+    constructor(id, username, display_name) {
         this.id = id;
         this.username = username;
+        this.display_name = display_name;
     }
 }
 
@@ -19,7 +20,7 @@ export async function get(username) {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new User(value.id, value.username));
+        return new Result(true, new User(value.id, value.username, value.display_name));
     } else {
         let error = await response.text();
         return new Result(false, error);
@@ -38,7 +39,7 @@ export async function get_id(id) {
     let response = await fetch(request);
     if (response.status === STATUS.OK) {
         let value = await response.json();
-        return new Result(true, new User(value.id, value.username));
+        return new Result(true, new User(value.id, value.username, value.display_name));
     } else {
         let error = await response.text();
         return new Result(false, error);

src/account.rs

@@ -10,6 +10,7 @@ use std::convert::Into;
 pub struct Account {
     pub id: i64,
     pub username: String,
+    pub display_name: String,
     pub password_hash: String,
 }
 
@@ -27,12 +28,22 @@ impl AuthUser<i64> for Account {
 #[derive(Deserialize)]
 pub struct EditAccount {
     pub username: String,
+    pub display_name: String,
 }
 
 /// Like `Account`, but instead of storing the password hash, it stores the plain-text password.
 /// Is used when the user logs-in or signs-up. !!Should not be used outside of these routes!!
 #[derive(Deserialize)]
 pub struct BareAccount {
+    pub username: String,
+    pub display_name: String,
+    pub password: String,
+}
+
+/// Like `Account`, but instead of storing the password hash, it stores the plain-text password.
+/// Is used when the user logs-in or signs-up. !!Should not be used outside of these routes!!
+#[derive(Deserialize)]
+pub struct LoginAccount {
     pub username: String,
     pub password: String,
 }
@@ -43,6 +54,7 @@ pub struct BareAccount {
 pub struct User {
     pub id: i64,
     pub username: String,
+    pub display_name: String,
 }
 
 /// Because a `User` is a subset of the `Account` we can convert any `Account` into a `User`.
@@ -51,6 +63,7 @@ impl From<Account> for User {
         Self {
             id: user.id,
             username: user.username,
+            display_name: user.display_name,
         }
     }
 }

src/database.rs

@@ -37,6 +37,7 @@ pub async fn init() -> Result<SqlitePool, sqlx::Error> {
             "CREATE TABLE IF NOT EXISTS 'users' (
              'id' INTEGER UNIQUE,
              'username' TEXT NOT NULL UNIQUE,
+             'display_name' TEXT NOT NULL,
              'password_hash' TEXT NOT NULL UNIQUE,
              PRIMARY KEY('id' AUTOINCREMENT))",
         )
@@ -111,9 +112,10 @@ pub mod account {
         let password_hash = hasher::hash(&account.password);
 
         let user: Account = sqlx::query_as(
-            "INSERT INTO users (username, password_hash) VALUES ($1, $2) RETURNING *",
+            "INSERT INTO users (username, display_name, password_hash) VALUES ($1, $2, $3) RETURNING *",
         )
         .bind(&account.username)
+        .bind(&account.display_name)
         .bind(password_hash)
         .fetch_one(&mut connection)
         .await?;
@@ -130,8 +132,9 @@ pub mod account {
         let mut connection = pool.acquire().await?;
 
         let result: Account =
-            sqlx::query_as("UPDATE users SET username = $1 WHERE id = $2 RETURNING *")
+            sqlx::query_as("UPDATE users SET username = $1, display_name = $2 WHERE id = $3 RETURNING *")
                 .bind(&account.username)
+                .bind(&account.display_name)
                 .bind(id)
                 .fetch_one(&mut connection)
                 .await?;
@@ -210,7 +213,7 @@ pub mod user {
         }
     }
 
-    /// Checks weather a account/user (given by its is) exists
+    /// Checks weather a account/user (given by its id) exists
     pub async fn exists_id(pool: SqlitePool, id: i64) -> bool {
         let user = get_id(pool, id).await;
         match user {

src/logic/auth.rs

@@ -1,4 +1,4 @@
-use crate::account::{Account, BareAccount};
+use crate::account::{Account, LoginAccount};
 use crate::database;
 use crate::hasher;
 
@@ -14,7 +14,7 @@ type AuthContext = axum_login::extractors::AuthContext<i64, Account, SqliteStore
 pub async fn login(
     State(pool): State<SqlitePool>,
     mut auth: AuthContext,
-    Json(payload): Json<BareAccount>,
+    Json(payload): Json<LoginAccount>,
 ) -> impl IntoResponse {
     let user = match database::account::get(pool, &payload.username).await {
         Ok(user) => user,