show result inline instead of using alert

assets/style.css

@@ -129,6 +129,10 @@ button:hover {
   color: #f16363;
 }
 
+.success {
+  color: #528152;
+}
+
 .error {
   padding: 1em;
 }

index.html

@@ -90,7 +90,7 @@
         x-text="sending ? 'Sending...' : 'Send card'"
       ></button>
     </div>
-    <div x-text="error" x-show="error" class="error"></div>
+    <div x-text="error || success" x-show="error || success" :class="error ? 'error' : 'success'"></div>
 
   </section>
 </main>

src/main.js

@@ -74,11 +74,13 @@ const model = {
   },
 
   async checkToken() {
+    this.botName = '';
+    this.botAvatar = '';
+    this.recipientName = '';
+    this.recipientAvatar = null;
     this.error = false;
     const token = this.botToken.trim();
     try {
-      this.botName = '';
-      this.botAvatar = '';
       const res = await whoAmI(token);
       if (!res.ok) {
         this.error = 'Token does not seem to be valid.';
@@ -171,29 +173,30 @@ const model = {
 
   async send() {
     this.error = false;
-    this.sending = true;
     this.success = false;
+    this.sending = true;
 
     try {
       const text = 'Testing card from The Card Yard.'
       const token = this.botToken;
       const to = this.recipient;
       const json = JSON.parse(this.currentJson);
       const res = await sendWebexCard(token, to, text, json);
-      this.success = res.ok;
       if (!res.ok) {
         const json = await res.json();
-        console.log(res, json);
+        this.success = false;
         this.error = res.status + ': ' + json.message;
       }
       else {
+        this.success = 'Card sent';
+        this.error = false;
         this.rememberData();
-        alert('Card sent succesfully to ' + to);
       }
     }
     catch(e) {
       console.log(e);
       this.error = e.reason;
+      this.success = false;
     }
     this.sending = false;
   },