Expose authentication's states to UI

src/components/UserAuthentication.vue

 <template>
   <div>
+    <div v-if="!stateUser.id">
       <button
         v-if="!loggingIn"
         @click="loggingIn = true"
@@ -14,6 +15,9 @@
         Authenticate
       </button>
       <div v-if="loggingIn">
+        <div v-if="loggingFailed">
+          Authentication failed. Please check your secret token.
+        </div>
         <input
           type="text"
           placeholder="Secret token"
@@ -33,12 +37,20 @@
           <button @click="authenticate(secret.trim())">
             <Checkmark width="30" height="30" class="login-button"></Checkmark>
           </button>
-        <button @click="loggingIn = false">
+          <button
+            @click="
+              loggingIn = false;
+              loggingFailed = false;
+              secret = '';
+            "
+          >
             <XCircle width="30" height="30" class="login-button"></XCircle>
           </button>
         </span>
       </div>
     </div>
+    <div v-else>Welcome, {{ stateUser.username }}</div>
+  </div>
 </template>
 
 <script>
@@ -53,11 +65,12 @@ export default {
   data: function () {
     return {
       loggingIn: false,
+      loggingFailed: false,
       secret: "",
     };
   },
   computed: {
-    ...mapState(['stateUser'])
+    ...mapState(["stateUser"]),
   },
   methods: {
     async authenticate(secret) {
@@ -73,9 +86,8 @@ export default {
             username: data.username,
             secret,
           });
-          console.log("Authenticated successfully");
         } else {
-          console.error("Authenticated failed");
+          this.loggingFailed = true;
         }
       } catch {
         (error) => console.error("Something went terribly wrong... ", error);