client: add login notes to show present task during login

client/core/core.go

@@ -4268,6 +4268,7 @@ func (c *Core) Login(pw []byte) error {
 		return fmt.Errorf("cannot log in because app has not been initialized")
 	}
 
+	c.notify(newLoginNote("Verifying credentials..."))
 	if len(creds.EncInnerKey) == 0 {
 		err := c.initializePrimaryCredentials(pw, creds.OuterKeyParams)
 		if err != nil {
@@ -4293,8 +4294,11 @@ func (c *Core) Login(pw []byte) error {
 		// resolveActiveTrades. We won't try to unlock here, but if the wallet
 		// is needed for active trades, it will be unlocked in resolveActiveTrades
 		// and the balance updated there.
+		c.notify(newLoginNote("Connecting wallets..."))
 		c.connectWallets()
+		c.notify(newLoginNote("Resuming active trades..."))
 		c.resolveActiveTrades(crypter)
+		c.notify(newLoginNote("Connecting to DEX servers..."))
 		c.initializeDEXConnections(crypter)
 		if err = c.loadBotPrograms(); err != nil {
 			c.log.Errorf("Error loading bot programs: %v", err)

client/core/notification.go

@@ -33,6 +33,7 @@ const (
 	NoteTypeDEXAuth      = "dex_auth"
 	NoteTypeFiatRates    = "fiatrateupdate"
 	NoteTypeCreateWallet = "createwallet"
+	NoteTypeLogin        = "login"
 )
 
 var noteChanCounter uint64
@@ -613,3 +614,16 @@ func newBotNote(topic Topic, subject, details string, severity db.Severity, repo
 		Report:       report,
 	}
 }
+
+// LoginNote is a notification with the recent login status.
+type LoginNote struct {
+	db.Notification
+}
+
+const TopicLoginStatus Topic = "LoginStatus"
+
+func newLoginNote(message string) *LoginNote {
+	return &LoginNote{
+		Notification: db.NewNotification(NoteTypeLogin, TopicLoginStatus, "", message, db.Data),
+	}
+}

client/webserver/site/src/css/forms.scss

@@ -302,6 +302,10 @@ button.form-button {
 
 #loginForm {
   width: 250px;
+
+  #loader {
+    backdrop-filter: blur(4px);
+  }
 }
 
 #unlockWalletForm,

client/webserver/site/src/html/bodybuilder.tmpl

@@ -46,6 +46,7 @@
   </div>
   <div id="loader" class="fill-abs flex-center d-hide">
     <div class="ico-spinner spinner"></div>
+    <div id="loaderMsg" class="mx-2"></div>
   </div>
 
   <div id="noteBox" class="d-hide">
@@ -102,7 +103,7 @@
 {{end}}
 
 {{define "bottom"}}
-<script src="/js/entry.js?v=XYXY183gH"></script>
+<script src="/js/entry.js?v=jBRE183gH"></script>
 </body>
 </html>
 {{end}}

client/webserver/site/src/js/app.ts

@@ -167,7 +167,7 @@ export default class Application {
     })
     // The main element is the interchangeable part of the page that doesn't
     // include the header. Main should define a data-handler attribute
-    // associated with  one of the available constructors.
+    // associated with one of the available constructors.
     this.main = idel(document, 'main')
     const handler = this.main.dataset.handler
     // Don't fetch the user until we know what page we're on.

client/webserver/site/src/js/forms.ts

@@ -22,7 +22,8 @@ import {
   WalletStateNote,
   WalletInfo,
   Token,
-  WalletCreationNote
+  WalletCreationNote,
+  CoreNote
 } from './registry'
 import { XYRangeHandler } from './opts'
 
@@ -1573,6 +1574,16 @@ export class LoginForm {
     this.headerTxt = page.header.textContent || ''
 
     bind(form, page.submit, () => { this.submit() })
+
+    app().registerNoteFeeder({
+      login: (note: CoreNote) => { this.handleLoginNote(note) }
+    })
+  }
+
+  handleLoginNote (n: CoreNote) {
+    if (n.details === '') return
+    const loginMsg = Doc.idel(this.form, 'loaderMsg')
+    if (loginMsg) loginMsg.textContent = n.details
   }
 
   focus () {