diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css index 18e1ba6c..64ba8698 100644 --- a/src/ui/web/css/main.css +++ b/src/ui/web/css/main.css @@ -26,3 +26,35 @@ body { justify-content: center; flex-direction: row; } + +.SessionPickerView { + padding: 0.4em; +} + +.SessionPickerView ul { + list-style: none; + padding: 0; +} + +.SessionPickerView li { + margin: 0.4em 0; + font-size: 1.2em; + background-color: grey; + padding: 0.5em; + cursor: pointer; +} + +.LoginView { + padding: 0.4em; +} + +.form > div { + margin: 0.4em 0; +} + +.form input { + display: block; + width: 100%; + box-sizing: border-box; +} + diff --git a/src/ui/web/login/LoginView.js b/src/ui/web/login/LoginView.js index 7718d72b..1285020c 100644 --- a/src/ui/web/login/LoginView.js +++ b/src/ui/web/login/LoginView.js @@ -9,7 +9,8 @@ export default class LoginView extends TemplateView { const username = t.input({type: "text", placeholder: vm.usernamePlaceholder}); const password = t.input({type: "password", placeholder: vm.passwordPlaceholder}); const homeserver = t.input({type: "text", placeholder: vm.hsPlaceholder, value: vm.defaultHomeServer}); - return t.div({className: "login form"}, [ + return t.div({className: "LoginView form"}, [ + t.h1(["Log in to your homeserver"]), t.if(vm => vm.error, t => t.div({className: "error"}, vm => vm.error)), t.div(username), t.div(password), @@ -18,7 +19,7 @@ export default class LoginView extends TemplateView { onClick: () => vm.login(username.value, password.value, homeserver.value), disabled: vm => vm.loading }, "Log In")), - t.div(t.button({onClick: () => vm.cancel()}, ["Cancel"])) + t.div(t.button({onClick: () => vm.cancel()}, ["Pick an existing session"])) ]); } } diff --git a/src/ui/web/login/SessionPickerView.js b/src/ui/web/login/SessionPickerView.js index b2030bd2..521c2f92 100644 --- a/src/ui/web/login/SessionPickerView.js +++ b/src/ui/web/login/SessionPickerView.js @@ -3,7 +3,7 @@ import TemplateView from "../general/TemplateView.js"; class SessionPickerItem extends TemplateView { render(t) { - return t.li([vm => `${vm.userId}@${vm.homeServer}`]); + return t.li([vm => vm.userId]); } } @@ -22,8 +22,9 @@ export default class SessionPickerView extends TemplateView { render(t) { return t.div({className: "SessionPickerView"}, [ + t.h1(["Pick a session"]), this._sessionList.mount(), - t.button({onClick: () => this.viewModel.cancel()}, ["Cancel"]) + t.button({onClick: () => this.viewModel.cancel()}, ["Log in to a new session instead"]) ]); }