login ok

src/connection.ts

@@ -19,6 +19,7 @@ export default class Connection {
   _id: string;
   _hash: message.Hash | undefined;
   _msgbox: MsgboxCallback | undefined;
+  _peerInfo: message.PeerInfo | undefined;
 
   constructor() {
     this._msgs = [];
@@ -31,15 +32,6 @@ export default class Connection {
     }, 1);
   }
 
-  close() {
-    clearInterval(this._interval);
-    this._ws?.close();
-  }
-
-  setMsgbox(callback: MsgboxCallback) {
-    this._msgbox = callback;
-  }
-
   async start(id: string) {
     const uri = getDefaultUri();
     const ws = new Websock(uri);
@@ -172,19 +164,64 @@ export default class Connection {
       const msg = this._ws?.parseMessage(await this._ws?.next());
       if (msg?.hash) {
         this._hash = msg?.hash;
+        await this.handleHash();
         this.msgbox("input-password", "Password Required", "");
       } else if (msg?.testDelay) {
         const testDelay = msg?.testDelay;
         if (!testDelay.fromClient) {
           await this._ws?.sendMessage({ testDelay });
         }
+      } else if (msg?.loginResponse) {
+        const r = msg?.loginResponse;
+        if (r.error) {
+          this.msgbox('error', 'Error', r.error);
+        } else if (r.peerInfo) {
+          this._peerInfo = r.peerInfo;
+          this.msgbox('success', 'Successful', 'Connected, waiting for image...');
+        }
       }
     }
   }
 
+  async handleHash() {
+    await this._sendLoginMessage();
+  }
+
   msgbox(type_: string, title: string, text: string) {
     this._msgbox?.(type_, title, text);
   }
+
+  close() {
+    clearInterval(this._interval);
+    this._ws?.close();
+  }
+
+  setMsgbox(callback: MsgboxCallback) {
+    this._msgbox = callback;
+  }
+
+  async login(password: string) {
+    this.msgbox('connecting', 'Connecting...', 'Logging in...');
+    let salt = this._hash?.salt;
+    if (salt) {
+      let p = hash([password, salt]);
+      let challenge = this._hash?.challenge;
+      if (challenge) {
+        p = hash([p, challenge]);
+        await this._sendLoginMessage(p);
+      }
+    }
+  }
+
+  async _sendLoginMessage(password: Uint8Array | undefined = undefined) {
+    const loginRequest = message.LoginRequest.fromPartial({
+      username: this._id!,
+      myId: 'web', // to-do
+      myName: 'web', // to-do
+      password,
+    });
+    await this._ws?.sendMessage({ loginRequest });
+  }
 }
 
 async function testDelay() {
@@ -209,8 +246,13 @@ function getrUriFromRs(uri: string): string {
   return SCHEMA + uri;
 }
 
-function hash(datas: [string]): Uint8Array {
+function hash(datas: (string | Uint8Array)[]): Uint8Array {
   const hasher = new sha256.Hash();
-  datas.forEach((data) => hasher.update(new TextEncoder().encode(data)));
+  datas.forEach((data) => {
+    if (typeof data == 'string') {
+      data = new TextEncoder().encode(data);
+    }
+    return hasher.update(data);
+  });
   return hasher.digest();
 }

src/ui.js

@@ -14,7 +14,7 @@ if (app) {
   </table></div>
   <div id="password" style="display: none;">
     <input type="password" id="password" />
-    <button id="confirm" id="confirm()">Confirm</button>
+    <button id="confirm" onclick="confirm()">Confirm</button>
     <button id="cancel" onclick="cancel();">Cancel</button>
   </div>
   <div id="status" style="display: none;">
@@ -53,7 +53,7 @@ if (app) {
     };
     func();
   }
-  
+
   function msgbox(type, title, text) {
     if (!globals.getConn()) return;
     if (type == 'input-password') {
@@ -61,9 +61,12 @@ if (app) {
       document.querySelector('div#password').style.display = 'block';
     } else if (!type) {
       document.querySelector('div#status').style.display = 'none';
-    } else {
+    } else if (type == 'error') {
       document.querySelector('div#status').style.display = 'block';
       document.querySelector('div#text').innerHTML = '<div style="color: red; font-weight: bold;">' + text + '</div>';
+    } else {
+      document.querySelector('div#status').style.display = 'block';
+      document.querySelector('div#text').innerHTML = '<div style="font-weight: bold;">' + text + '</div>';
     }
   }
 
@@ -75,7 +78,10 @@ if (app) {
   }
 
   window.confirm = () => {
-    //
+    const password = document.querySelector('input#password').value;
+    if (password) {
+      document.querySelector('div#password').style.display = 'none';
+      globals.getConn().login(password);
+    }
   }
-
 }