Show timestamp

Cargo.lock

@@ -242,7 +242,10 @@ checksum = "7f2c685bad3eb3d45a01354cedb7d5faa66194d1d58ba6e267a8de788f79db38"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
+ "js-sys",
  "num-traits",
+ "serde",
+ "wasm-bindgen",
  "windows-targets",
 ]
 
@@ -504,6 +507,7 @@ version = "1.3.58"
 dependencies = [
  "anyhow",
  "bcrypt",
+ "chrono",
  "futures-util",
  "poem",
  "poem-openapi",

Cargo.toml

@@ -15,4 +15,5 @@ serde = "1.0.190"
 thiserror = "1.0.50"
 anyhow = "1.0.75"
 serde_json = "1.0.108"
+chrono = { version = "0.4.31", features = ["serde"] }
 

client/src/components/Chat.vue

@@ -52,9 +52,12 @@ onMounted(async () => {
       </div>
         -->
       <div v-for="msg in msgs" class="d-flex text-body-secondary pt-2 px-3 border-bottom">
-        <p class="pb-2 mb-0 small lh-sm">
+        <p class="pb-2 mb-0 small lh-sm word-wrap">
+        <div class="d-flex justify-content-between">
           <strong class="d-block text-gray-dark">{{ msg.username }}</strong>
-          {{ msg.message }}
+          <div>{{ msg.timestamp }}</div>
+        </div>
+        {{ msg.message }}
         </p>
       </div>
       <form onsubmit="event.preventDefault();" class="container-fluid fixed-bottom mb-3">
@@ -68,3 +71,10 @@ onMounted(async () => {
   </main>
 </template>
 
+<style scoped>
+.word-wrap {
+  word-break: break-all;
+  width: 100vw;
+}
+</style>
+

client/src/components/Header.vue

@@ -2,7 +2,7 @@
 import ThemeToggle from './ThemeToggle.vue'
 
 const props = defineProps(['modelValue'])
-defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
 async function signout(ev) {
   ev.preventDefault()
@@ -16,6 +16,7 @@ async function signout(ev) {
   }
   let resp = await fetch(api_url, fetch_options)
   console.log(resp)
+  emit('update:modelValue', '')
   window.location.reload()
 }
 </script>
@@ -41,11 +42,10 @@ async function signout(ev) {
 
         <div class="offcanvas-body px-2">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-            <!--<li v-if="modelValue !== ''" class="nav-item mx-2 mt-2">-->
+            <li v-if="modelValue.hasOwnProperty('username')" class="nav-item m-2">
-            <li v-if="modelValue.hasOwnProperty('username')" class="nav-item mx-2 mt-2">
               <button @click="signout" class="btn btn-outline-success">Sign out</button>
             </li>
-            <li class="nav-item mf-3 mt-1">
+            <li class="nav-item m-2">
               <div>
                 <ThemeToggle />
               </div>

client/src/components/Login.vue

@@ -22,7 +22,7 @@ async function login(ev) {
 
   let resp = await fetch(api_url, fetch_options)
   if (resp.ok) {
-    emit('update:modelValue', user.value)
+    emit('update:modelValue', await resp.json())
     window.location.hash = "/"
   } else {
     user.value = ''

client/src/components/ThemeToggle.vue

@@ -35,7 +35,7 @@ const currentIcon = computed(() => theme_icons[currentTheme.value])
 </script>
 
 <template>
-  <button type="button" @click="click" class="btn btn-primary align-items-center w-100 py-2">
+  <button type="button" @click="click" class="btn btn-primary align-items-center py-2">
     <component :is="currentIcon" />
   </button>
 </template>

src/main.rs

@@ -1,3 +1,4 @@
+use chrono::{offset::Utc, DateTime};
 use futures_util::{SinkExt, StreamExt};
 use poem::{
     endpoint::StaticFilesEndpoint,
@@ -129,6 +130,7 @@ impl Api {
                                 .send(ChatMsg {
                                     username: name.clone(),
                                     message: text,
+                                    timestamp: Utc::now(),
                                 })
                                 .is_err()
                             {
@@ -255,6 +257,7 @@ impl Api {
 struct ChatMsg {
     username: String,
     message: String,
+    timestamp: DateTime<Utc>,
 }
 
 struct Api {