prototype how i18n would look like

This commit is contained in:
Bruno Windels 2020-04-30 18:27:59 +02:00
parent ceec8937ef
commit d3f7fb5089
2 changed files with 20 additions and 9 deletions

View file

@ -10,9 +10,20 @@ export class LoginViewModel extends EventEmitter {
this._loadViewModel = null; this._loadViewModel = null;
} }
get usernamePlaceholder() { return "Username"; } // TODO: this will need to support binding
get passwordPlaceholder() { return "Password"; } // if any of the expr is a function, assume the function is a binding, and return a binding function ourselves
get hsPlaceholder() { return "Your matrix homeserver"; } i18n(parts, ...expr) {
// just concat for now
let result = "";
for (let i = 0; i < parts.length; ++i) {
result = result + parts[i];
if (i < expr.length) {
result = result + expr[i];
}
}
return result;
}
get defaultHomeServer() { return this._defaultHomeServer; } get defaultHomeServer() { return this._defaultHomeServer; }
get loadViewModel() {return this._loadViewModel; } get loadViewModel() {return this._loadViewModel; }

View file

@ -3,12 +3,12 @@ import {brawlGithubLink} from "./common.js";
export class LoginView extends TemplateView { export class LoginView extends TemplateView {
render(t, vm) { render(t, vm) {
const username = t.input({type: "text", placeholder: vm.usernamePlaceholder, disabled});
const password = t.input({type: "password", placeholder: vm.passwordPlaceholder, disabled});
const homeserver = t.input({type: "text", placeholder: vm.hsPlaceholder, value: vm.defaultHomeServer, disabled});
const disabled = vm => !!vm.loadViewModel; const disabled = vm => !!vm.loadViewModel;
const username = t.input({type: "text", placeholder: vm.i18n`Username`, disabled});
const password = t.input({type: "password", placeholder: vm.i18n`Password`, disabled});
const homeserver = t.input({type: "text", placeholder: vm.i18n`Your matrix homeserver`, value: vm.defaultHomeServer, disabled});
return t.div({className: "LoginView form"}, [ return t.div({className: "LoginView form"}, [
t.h1(["Log in to your homeserver"]), t.h1([vm.i18n`Log in to your homeserver`]),
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(username),
t.div(password), t.div(password),
@ -16,8 +16,8 @@ export class LoginView extends TemplateView {
t.div(t.button({ t.div(t.button({
onClick: () => vm.login(username.value, password.value, homeserver.value), onClick: () => vm.login(username.value, password.value, homeserver.value),
disabled disabled
}, "Log In")), }, vm.i18n`Log In`)),
t.div(t.button({onClick: () => vm.goBack(), disabled}, ["Pick an existing session"])), t.div(t.button({onClick: () => vm.goBack(), disabled}, [vm.i18n`Pick an existing session`])),
t.if(vm => vm.loadViewModel, vm => new SessionLoadView(vm.loadViewModel)), t.if(vm => vm.loadViewModel, vm => new SessionLoadView(vm.loadViewModel)),
t.p(brawlGithubLink(t)) t.p(brawlGithubLink(t))
]); ]);