Krzysztof Kotlarek
b47b1d8af8
This commit https://github.com/discourse/discourse/commit/fe9293b8b554ab79636faa61a4756d5ff514a233 created a regression. The problem is that dom changed a little bit. Before it was ``` <tr class="instructions create-account-email"> <td></td> <div id="account-email-validation" class="tip bad ember-view"></div> <td><label>Never shown to the public.</label></td> </tr> ``` And after we got ``` <tr class="instructions create-account-email"> <td></td> <div id="account-email-validation" class="tip bad ember-view"> </div> <td><label>Never shown to the public.</label></td> </tr> ``` That small space may look like not important change. However, now helpers are hitting that CSS rule: ``` .login-form { .tip { &:not(:empty) + td { display: none; } } ``` To fix it, we should render template only if there is a reason - like it was before ``` if (reason) { buffer.push(iconHTML(this.good ? "check" : "times") + " " + reason); } ``` * FIX: remove rerenderTriggers
30 lines
742 B
JavaScript
30 lines
742 B
JavaScript
import { alias, not } from "@ember/object/computed";
|
|
import Component from "@ember/component";
|
|
import { iconHTML } from "discourse-common/lib/icon-library";
|
|
|
|
export default Component.extend({
|
|
classNameBindings: [":tip", "good", "bad"],
|
|
tipIcon: null,
|
|
tipReason: null,
|
|
|
|
bad: alias("validation.failed"),
|
|
good: not("bad"),
|
|
|
|
tipIconHTML() {
|
|
let icon = iconHTML(this.good ? "check" : "times");
|
|
return `${icon}`.htmlSafe();
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
let reason = this.get("validation.reason");
|
|
if (reason) {
|
|
this.set("tipIcon", this.tipIconHTML());
|
|
this.set("tipReason", reason);
|
|
} else {
|
|
this.set("tipIcon", null);
|
|
this.set("tipReason", null);
|
|
}
|
|
}
|
|
});
|