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; justify-content: center;
flex-direction: row; 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 username = t.input({type: "text", placeholder: vm.usernamePlaceholder});
const password = t.input({type: "password", placeholder: vm.passwordPlaceholder}); const password = t.input({type: "password", placeholder: vm.passwordPlaceholder});
const homeserver = t.input({type: "text", placeholder: vm.hsPlaceholder, value: vm.defaultHomeServer}); 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.if(vm => vm.error, t => t.div({className: "error"}, vm => vm.error)),
t.div(username), t.div(username),
t.div(password), t.div(password),
@ -18,7 +19,7 @@ export default class LoginView extends TemplateView {
onClick: () => vm.login(username.value, password.value, homeserver.value), onClick: () => vm.login(username.value, password.value, homeserver.value),
disabled: vm => vm.loading disabled: vm => vm.loading
}, "Log In")), }, "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 { class SessionPickerItem extends TemplateView {
render(t) { 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) { render(t) {
return t.div({className: "SessionPickerView"}, [ return t.div({className: "SessionPickerView"}, [
t.h1(["Pick a session"]),
this._sessionList.mount(), this._sessionList.mount(),
t.button({onClick: () => this.viewModel.cancel()}, ["Cancel"]) t.button({onClick: () => this.viewModel.cancel()}, ["Log in to a new session instead"])
]); ]);
} }