fix(frontend): Improve error messages

Author: wale

components/Nav.vue

@@ -33,9 +33,12 @@
                         class="absolute -right-1 md:-top-6 text-grayscale-950 rounded-md bg-grayscale-400 md:bg-inherit pl-8 pr-4 mt-4 md:pl-0 md:pr-0 md:m-0 md:flex md:flex-row text-right"
                     >
                         <li v-if="user.id">
-                            <span class="md:p-4 py-2 block font-bold">{{
-                                user.email
-                            }}</span>
+                            <div class="flex flex-row md:p-4 py-2 gap-1">
+                                <span class="font-bold">{{ user.email }}</span>
+                                <span class="font-regular"
+                                    >(@{{ user.username }})</span
+                                >
+                            </div>
                         </li>
                         <li v-else>
                             <a href="/login" class="md:p-4 py-2 block">Login</a>

pages/login.vue

@@ -70,8 +70,11 @@
                         Log In
                     </button>
                 </div>
-                <div v-if="error" class="mt-2 flex flex-row">
-                    <span class="text-red-500 font-bold">{{ error }}</span>
+                <div v-if="error" class="mt-2 flex flex-row justify-center">
+                    <span class="text-red-500 font-bold"
+                        >{{ error.statusCode }} -
+                        {{ error.statusMessage }}</span
+                    >
                 </div>
             </form>
         </div>