style login page

This commit is contained in:
Bruno Windels 2020-08-14 14:49:22 +02:00
parent c12ecd6cc1
commit bab1178790
5 changed files with 60 additions and 23 deletions

View File

@ -15,10 +15,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.form > div {
margin: 0.4em 0;
}
.form input { .form input {
display: block; display: block;
width: 100%; width: 100%;

View File

@ -28,7 +28,6 @@ limitations under the License.
.SessionPickerView li { .SessionPickerView li {
margin: 0.4em 0; margin: 0.4em 0;
padding: 0.5em;
} }
.SessionPickerView .session-info { .SessionPickerView .session-info {

View File

@ -72,6 +72,22 @@ limitations under the License.
flex: 1 0 auto; flex: 1 0 auto;
} }
.form-row {
margin: 12px 0;
}
.form-row input {
padding: 12px;
border: 1px solid rgba(141, 151, 165, 0.15);
border-radius: 8px;
margin-top: 5px;
font-size: 1em;
}
.form-row label, .form-row input {
display: block;
}
button.styled.secondary { button.styled.secondary {
color: #03B381; color: #03B381;
} }

View File

@ -94,7 +94,7 @@ export const TAG_NAMES = {
[HTML_NS]: [ [HTML_NS]: [
"a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
"p", "strong", "em", "span", "img", "section", "main", "article", "aside", "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button", "time", "input", "textarea"], "pre", "button", "time", "input", "textarea", "label"],
[SVG_NS]: ["svg", "circle"] [SVG_NS]: ["svg", "circle"]
}; };

View File

@ -21,23 +21,49 @@ import {SessionLoadView} from "./SessionLoadView.js";
export class LoginView extends TemplateView { export class LoginView extends TemplateView {
render(t, vm) { render(t, vm) {
const disabled = vm => !!vm.isBusy; const disabled = vm => !!vm.isBusy;
const username = t.input({type: "text", placeholder: vm.i18n`Username`, disabled}); const username = t.input({
const password = t.input({type: "password", placeholder: vm.i18n`Password`, disabled}); id: "username",
const homeserver = t.input({type: "text", placeholder: vm.i18n`Your matrix homeserver`, value: vm.defaultHomeServer, disabled}); type: "text",
return t.div({className: "LoginView form"}, [ placeholder: vm.i18n`Username`,
t.h1([vm.i18n`Log in to your homeserver`]), disabled
});
const password = t.input({
id: "password",
type: "password",
placeholder: vm.i18n`Password`,
disabled
});
const homeserver = t.input({
id: "homeserver",
type: "text",
placeholder: vm.i18n`Your matrix homeserver`,
value: vm.defaultHomeServer,
disabled
});
return t.div({className: "PreSessionScreen"}, [
t.div({className: "logo"}),
t.div({className: "LoginView form"}, [
t.h1([vm.i18n`Sign In`]),
t.if(vm => vm.error, t.createTemplate(t => t.div({className: "error"}, vm => vm.error))), t.if(vm => vm.error, t.createTemplate(t => t.div({className: "error"}, vm => vm.error))),
t.div(username), t.div({className: "form-row"}, [t.label({for: "username"}, vm.i18n`Username`), username]),
t.div(password), t.div({className: "form-row"}, [t.label({for: "password"}, vm.i18n`Password`), password]),
t.div(homeserver), t.div({className: "form-row"}, [t.label({for: "homeserver"}, vm.i18n`Homeserver`), homeserver]),
t.div(t.button({ t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null),
t.div({className: "button-row"}, [
t.button({
className: "styled secondary",
onClick: () => vm.cancel(), disabled
}, [vm.i18n`Go Back`]),
t.button({
className: "styled primary",
onClick: () => vm.login(username.value, password.value, homeserver.value), onClick: () => vm.login(username.value, password.value, homeserver.value),
disabled disabled
}, vm.i18n`Log In`)), }, vm.i18n`Log In`),
t.div(t.button({onClick: () => vm.cancel(), disabled}, [vm.i18n`Pick an existing session`])), ]),
// use t.mapView rather than t.if to create a new view when the view model changes too // use t.mapView rather than t.if to create a new view when the view model changes too
t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null),
t.p(hydrogenGithubLink(t)) t.p(hydrogenGithubLink(t))
])
]); ]);
} }
} }