ceri-login-modal
Version:
A simple, themed login-modal
200 lines (156 loc) • 5.67 kB
JavaScript
// Generated by CoffeeScript 1.12.7
(function() {
module.exports = {
mixins: [require("ceri/lib/structure"), require("ceri/lib/computed"), require("ceri/lib/class"), require("ceri/lib/#model"), require("ceri/lib/#if")],
structure: function(){return [this.el("ceri-modal",{"ref":{"#":"modal"}},[this.el("div",{"ref":{"#":"content"}},[this.el("h4",{"ref":{"#":"header"},"text":{":":"text.header"}},[]),this.el("div",{"class":{"":"row"}},[this.el("div",{"ref":{"#":"nameContainer"}},[this.el("ceri-icon",{"name":{":":"icon.name"},"ref":{"#":"nameIcon"}},[]),this.el("input",{"ref":{"#":"nameInput"},"model":{"#":"name"},"keyup":{"@":"focusPW"},"input":{"@":"nameChanged"},"focus":{"@":"onActiveName"},"blur":{"@":"onActiveName"}},[]),this.el("label",{"ref":{"#":"nameLabel"},"text":{":":"text.name"}},[])])]),this.el("div",{"class":{"":"row"}},[this.el("div",{"ref":{"#":"pwContainer"}},[this.el("ceri-icon",{"name":{":":"icon.pw"},"ref":{"#":"pwIcon"}},[]),this.el("input",{"ref":{"#":"pwInput"},"model":{"#":"pw"},"keyup":{"@":"loginEvent"},"type":{"":"password"},"focus":{"@":"onActivePW"},"blur":{"@":"onActivePW"}},[]),this.el("label",{"ref":{"#":"pwLabel"},"text":{":":"text.pw"}},[])])]),this.el("div",{"class":{"":"row"}},[this.el("div",{"ref":{"#":"btnContainer"}},[this.el("button",{"click":{"@":"loginEvent"},"ref":{"#":"btn"},"text":{":":"text.button"},"disabled":{":":"disabled"}},[])])])])])]}
,
data: function() {
return {
text: {
header: "Login",
name: "Username",
pw: "Password",
button: "login",
error: "Login failed",
timeout: "Login failed"
},
icon: {
name: "",
pw: ""
},
name: "",
pw: "",
activeLabel: "",
timeout: 2000,
disabled: false
};
},
methods: {
setActiveLabel: function(input, label) {
if (!(input && label)) {
return;
}
if (input !== document.activeElement && input.value === "") {
return this.$class.setStr(label, "");
} else {
return this.$class.setStr(label, this.activeLabel);
}
},
onActiveName: function() {
return this.setActiveLabel(this.nameInput, this.nameLabel);
},
onActivePW: function() {
this.setActiveLabel(this.pwInput, this.pwLabel);
return this.disabled = this.pw === "";
},
focusPW: function(e) {
if (e.keyCode === 13) {
if (this.pw === "") {
return this.pwInput.focus();
} else {
return this.loginEvent(e);
}
}
},
loginEvent: function(e) {
var cb, close, failed, promise, success;
if (e.type === "keyup" && e.keyCode !== 13) {
return;
}
close = this.$progress({
el: this.modal,
zIndex: 2000,
timeout: this.timeout,
onTimeout: (function(_this) {
return function() {
_this.disabled = false;
return _this.$toast({
text: _this.text.error
});
};
})(this)
});
this.disabled = true;
success = (function(_this) {
return function(result) {
close();
if (typeof _this.cb === "function") {
_this.cb(result);
}
if (typeof _this.resolve === "function") {
_this.resolve(result);
}
_this.resolve = null;
_this.reject = null;
_this.cb = null;
_this.pw = "";
return _this.modal.hide();
};
})(this);
failed = (function(_this) {
return function() {
close();
_this.pw = "";
_this.pwInput.focus();
return _this.$toast({
text: _this.text.error
});
};
})(this);
cb = function(result) {
if (result) {
return success(result);
} else {
return failed();
}
};
promise = typeof this.login === "function" ? this.login(this.name, this.pw, cb) : void 0;
return promise != null ? typeof promise.then === "function" ? promise.then(success)["catch"](failed) : void 0 : void 0;
},
nameChanged: function() {
return this.pw = "";
},
open: function(cb) {
this.cb = cb;
document.body.appendChild(this);
this.$nextTick((function(_this) {
return function() {
_this.modal.show();
_this.nameInput.focus();
return _this.onActivePW();
};
})(this));
if (this.Promise) {
return new this.Promise((function(_this) {
return function(resolve, reject) {
_this.resolve = resolve;
return _this.reject = reject;
};
})(this));
}
}
},
watch: {
name: "onActiveName",
pw: "onActivePW",
"modal.open": function(val) {
if (val === false) {
if (typeof this.cb === "function") {
this.cb(false);
}
this.cb = null;
if (typeof this.reject === "function") {
this.reject();
}
this.reject = null;
return this.resolve = null;
}
}
},
connectedCallback: function() {
if (this._isFirstConnect) {
return this.Promise != null ? this.Promise : this.Promise = Promise;
}
}
};
}).call(this);