From 2cf100efaaa9dd11e6b2a9c2a1c5278112220bd3 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Tue, 18 May 2021 11:46:55 +0200
Subject: [PATCH] refine unknown room view

---
 .../session/room/UnknownRoomViewModel.js       |  8 ++------
 .../web/ui/css/themes/element/theme.css        | 18 ++++++++++++++++++
 .../web/ui/session/room/UnknownRoomView.js     | 15 ++++++++++-----
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/domain/session/room/UnknownRoomViewModel.js b/src/domain/session/room/UnknownRoomViewModel.js
index d896d4cf..9f1b5d2b 100644
--- a/src/domain/session/room/UnknownRoomViewModel.js
+++ b/src/domain/session/room/UnknownRoomViewModel.js
@@ -22,7 +22,7 @@ export class UnknownRoomViewModel extends ViewModel {
         super(options);
         const {roomIdOrAlias, session} = options;
         this._session = session;
-        this._roomIdOrAlias = roomIdOrAlias;
+        this.roomIdOrAlias = roomIdOrAlias;
         this._error = null;
         this._busy = false;
     }
@@ -31,15 +31,11 @@ export class UnknownRoomViewModel extends ViewModel {
         return this._error?.message;
     }
 
-    get description() {
-        return this.i18n`You are currently not in ${this._roomIdOrAlias}. Want to join it?`;
-    }
-
     async join() {
         this._busy = true;
         this.emitChange("busy");
         try {
-            const roomId = await this._session.joinRoom(this._roomIdOrAlias);
+            const roomId = await this._session.joinRoom(this.roomIdOrAlias);
             // navigate to roomId if we were at the alias
             this.navigation.push("room", roomId);
         } catch (err) {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 00fdefd0..706bd90d 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -910,4 +910,22 @@ button.link {
 
 .RoomArchivedView h3 {
     margin: 0;
+}
+
+.UnknownRoomView {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 16px;
+    box-sizing: border-box;
+}
+
+.UnknownRoomView h2 {
+    word-break: break-all;
+    word-break: break-word;
+}
+
+.UnknownRoomView button {
+    max-width: 200px;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/platform/web/ui/session/room/UnknownRoomView.js b/src/platform/web/ui/session/room/UnknownRoomView.js
index 03076885..6e4cb284 100644
--- a/src/platform/web/ui/session/room/UnknownRoomView.js
+++ b/src/platform/web/ui/session/room/UnknownRoomView.js
@@ -26,13 +26,18 @@ import {AvatarView} from "../../avatar.js";
 
 export class UnknownRoomView extends TemplateView {
     render(t, vm) {
-        return t.main({className: "UnknownRoomView middle"}, [
-            t.h2(vm.description),
-            t.div(t.button({
+        return t.main({className: "UnknownRoomView middle"}, t.div([
+            t.h2([
+                vm.i18n`You are currently not in ${vm.roomIdOrAlias}.`,
+                t.br(),
+                vm.i18n`Want to join it?`
+            ]),
+            t.button({
                 className: "button-action primary",
                 onClick: () => vm.join(),
                 disabled: vm => vm.busy,
-            }, vm.i18n`Join room`))
-        ]);
+            }, vm.i18n`Join room`),
+            t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
+        ]));
     }
 }