From 2765b6c146aebbf6b465fbc5e8960cadf71e5f3b Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 20 Jan 2020 13:21:08 +1100
Subject: [PATCH] pairing device modal: display errors if any

---
 ts/components/DevicePairingDialog.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx
index fff41699b..05799361d 100644
--- a/ts/components/DevicePairingDialog.tsx
+++ b/ts/components/DevicePairingDialog.tsx
@@ -55,6 +55,22 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     this.closeDialog();
   }
 
+  public renderErrors() {
+    const { errors } = this.state;
+
+    return (
+      <>
+        {errors && (
+          <>
+            <div className="spacer-xs" />
+            <div className="session-label danger">{errors}</div>
+          </>
+        )}
+      </>
+    );
+  }
+
+
   public renderFilterRequestsView() {
     const { currentPubKey, accepted, deviceAlias } = this.state;
     let secretWords: undefined;
@@ -70,6 +86,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
           onClose={this.closeDialog}
         >
           <div className="session-modal__centered">
+            {this.renderErrors()}
             <input
               type="text"
               onChange={this.handleUpdateDeviceAlias}
@@ -96,6 +113,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
         onClose={this.closeDialog}
       >
         <div className="session-modal__centered">
+          {this.renderErrors()}
           <label>{window.i18n('secretWords')}</label>
           <div className="text-subtle">{secretWords}</div>
           <div className="session-modal__button-group">
@@ -125,6 +143,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
     return (
       <SessionModal title={title} onOk={() => null} onClose={this.closeDialog}>
         <div className="session-modal__centered">
+          {this.renderErrors()}
           <h4>{window.i18n('waitingForDeviceToRegister')}</h4>
           <small className="text-subtle">
             {window.i18n('pairNewDevicePrompt')}
@@ -182,6 +201,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
         onClose={this.closeDialog}
       >
         <div className="session-modal__centered">
+          {this.renderErrors()}
           <p className="session-modal__description">
             {window.i18n('confirmUnpairingTitle')}
             <br />
@@ -280,9 +300,6 @@ export class DevicePairingDialog extends React.Component<Props, State> {
       if (conv) {
         conv.setNickname(this.state.deviceAlias);
       }
-
-      // FIXME display error somewhere
-      // FIXME display list of linked device
       // FIXME do not show linked device in list of contacts
       console.log('FIXME');