DEV: Convert activation modals to new component-based API (#22227)
This PR converts the following modals: - `activation-edit` - `activation-resent` - `not-activated` to make use of the new component-based API
This commit is contained in:
Isaac Janzen
GitHub
parent
5e2edeb2f7
commit
7df4eab038
|
|
@ -1,2 +1,6 @@
|
|||
<p>{{i18n "login.provide_new_email"}}</p>
|
||||
<Input @value={{this.email}} class="activate-new-email" />
|
||||
<Input
|
||||
@value={{@email}}
|
||||
{{on "input" this.newEmailChanged}}
|
||||
class="activate-new-email"
|
||||
/>
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
import Component from "@ember/component";
|
||||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
|
||||
export default Component.extend({});
|
||||
export default class ActivationEmailForm extends Component {
|
||||
@action
|
||||
newEmailChanged(value) {
|
||||
this.args.updateNewEmail?.(value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<DModal
|
||||
@closeModal={{@closeModal}}
|
||||
@title={{i18n "login.change_email"}}
|
||||
@flash={{this.flash}}
|
||||
>
|
||||
<:body>
|
||||
<ActivationEmailForm
|
||||
@email={{@model.newEmail}}
|
||||
@updateNewEmail={{this.updateNewEmail}}
|
||||
/>
|
||||
</:body>
|
||||
<:footer>
|
||||
<DButton
|
||||
@action={{this.changeEmail}}
|
||||
@label="login.submit_new_email"
|
||||
@disabled={{this.submitDisabled}}
|
||||
class="btn-primary"
|
||||
/>
|
||||
<DButton @action={{@closeModal}} @label="close" />
|
||||
</:footer>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { changeEmail } from "discourse/lib/user-activation";
|
||||
import ActivationResent from "./activation-resent";
|
||||
|
||||
export default class ActivationEdit extends Component {
|
||||
@service login;
|
||||
@service modal;
|
||||
|
||||
@tracked newEmail = this.args.model.newEmail;
|
||||
@tracked flash;
|
||||
|
||||
get submitDisabled() {
|
||||
return this.newEmail === this.args.model.currentEmail;
|
||||
}
|
||||
|
||||
@action
|
||||
changeEmail() {
|
||||
changeEmail({
|
||||
username: this.login?.loginName,
|
||||
password: this.login?.loginPassword,
|
||||
email: this.args.model.newEmail,
|
||||
})
|
||||
.then(() => {
|
||||
this.modal.show(ActivationResent, {
|
||||
model: { currentEmail: this.args.model.newEmail },
|
||||
});
|
||||
})
|
||||
.catch((e) => (this.flash = e));
|
||||
}
|
||||
|
||||
@action
|
||||
updateNewEmail(e) {
|
||||
this.newEmail = e.target.value;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<DModal @title={{i18n "log_in"}} @closeModal={{@closeModal}}>
|
||||
<:body>
|
||||
{{html-safe
|
||||
(i18n
|
||||
"login.sent_activation_email_again" currentEmail=@model.currentEmail
|
||||
)
|
||||
}}
|
||||
</:body>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<DModal @closeModal={{@closeModal}} @title={{i18n "log_in"}}>
|
||||
<:body>
|
||||
{{html-safe (i18n "login.not_activated" sentTo=@model.sentTo)}}
|
||||
</:body>
|
||||
<:footer>
|
||||
<ActivationControls
|
||||
@sendActivationEmail={{this.sendActivationEmail}}
|
||||
@editActivationEmail={{this.editActivationEmail}}
|
||||
/>
|
||||
</:footer>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { action } from "@ember/object";
|
||||
import { inject as service } from "@ember/service";
|
||||
import { resendActivationEmail } from "discourse/lib/user-activation";
|
||||
import ActivationResent from "./activation-resent";
|
||||
import ActivationEdit from "./activation-edit";
|
||||
|
||||
export default class NotActivated extends Component {
|
||||
@service modal;
|
||||
|
||||
@action
|
||||
sendActivationEmail() {
|
||||
resendActivationEmail(this.username).then(() => {
|
||||
this.modal.show(ActivationResent, {
|
||||
model: { currentEmail: this.args.model.currentEmail },
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
editActivationEmail() {
|
||||
this.modal.show(ActivationEdit, {
|
||||
model: {
|
||||
currentEmail: this.args.model.currentEmail,
|
||||
newEmail: this.args.model.currentEmail,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import Controller, { inject as controller } from "@ember/controller";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import { changeEmail } from "discourse/lib/user-activation";
|
||||
import discourseComputed from "discourse-common/utils/decorators";
|
||||
import { flashAjaxError } from "discourse/lib/ajax-error";
|
||||
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
login: controller(),
|
||||
|
||||
currentEmail: null,
|
||||
newEmail: null,
|
||||
password: null,
|
||||
|
||||
@discourseComputed("newEmail", "currentEmail")
|
||||
submitDisabled(newEmail, currentEmail) {
|
||||
return newEmail === currentEmail;
|
||||
},
|
||||
|
||||
actions: {
|
||||
changeEmail() {
|
||||
const login = this.login;
|
||||
|
||||
changeEmail({
|
||||
username: login.get("loginName"),
|
||||
password: login.get("loginPassword"),
|
||||
email: this.newEmail,
|
||||
})
|
||||
.then(() => {
|
||||
const modal = this.showModal("activation-resent", {
|
||||
title: "log_in",
|
||||
});
|
||||
modal.set("currentEmail", this.newEmail);
|
||||
})
|
||||
.catch(flashAjaxError(this));
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import Controller from "@ember/controller";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import { resendActivationEmail } from "discourse/lib/user-activation";
|
||||
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
actions: {
|
||||
sendActivationEmail() {
|
||||
resendActivationEmail(this.username).then(() => {
|
||||
const modal = this.showModal("activation-resent", { title: "log_in" });
|
||||
modal.set("currentEmail", this.currentEmail);
|
||||
});
|
||||
},
|
||||
|
||||
editActivationEmail() {
|
||||
const modal = this.showModal("activation-edit", {
|
||||
title: "login.change_email",
|
||||
});
|
||||
|
||||
const currentEmail = this.currentEmail;
|
||||
modal.set("currentEmail", currentEmail);
|
||||
modal.set("newEmail", currentEmail);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -13,8 +13,9 @@ import mobile from "discourse/lib/mobile";
|
|||
import { inject as service } from "@ember/service";
|
||||
import { setting } from "discourse/lib/computed";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
|
||||
import { action } from "@ember/object";
|
||||
import KeyboardShortcutsHelp from "discourse/components/modal/keyboard-shortcuts-help";
|
||||
import NotActivatedModal from "../components/modal/not-activated";
|
||||
|
||||
function unlessReadOnly(method, message) {
|
||||
return function () {
|
||||
|
|
@ -154,7 +155,7 @@ const ApplicationRoute = DiscourseRoute.extend(OpenComposer, {
|
|||
},
|
||||
|
||||
showNotActivated(props) {
|
||||
showModal("not-activated", { title: "log_in" }).setProperties(props);
|
||||
this.modal.show(NotActivatedModal, { model: props });
|
||||
},
|
||||
|
||||
showUploadSelector() {
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<DModalBody>
|
||||
<ActivationEmailForm @email={{this.newEmail}} />
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<DButton
|
||||
@action={{action "changeEmail"}}
|
||||
@label="login.submit_new_email"
|
||||
@disabled={{this.submitDisabled}}
|
||||
@class="btn-primary"
|
||||
/>
|
||||
<DButton @action={{route-action "closeModal"}} @label="close" />
|
||||
</div>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<DModalBody>
|
||||
{{html-safe
|
||||
(i18n "login.sent_activation_email_again" currentEmail=this.currentEmail)
|
||||
}}
|
||||
</DModalBody>
|
||||
|
||||
<ModalFooterClose @closeModal={{route-action "closeModal"}} />
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<DModalBody>
|
||||
{{html-safe (i18n "login.not_activated" sentTo=this.sentTo)}}
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<ActivationControls
|
||||
@sendActivationEmail={{action "sendActivationEmail"}}
|
||||
@editActivationEmail={{action "editActivationEmail"}}
|
||||
/>
|
||||
</div>
|
||||
Loading…
Reference in New Issue