some minimal styling for login and session picker

This commit is contained in:
Bruno Windels 2019-09-08 10:40:05 +02:00
parent 09b9eff7c1
commit ed67689fdf
3 changed files with 38 additions and 4 deletions

View File

@ -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;
}

View File

@ -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"]))
]);
}
}

View File

@ -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"])
]);
}