Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update message for enrolment, renewal, error modal when grace period is over #16551

Merged
merged 5 commits into from
Jan 18, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/i18n/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,8 @@
"acme.error.button.primary": "Retry",
"acme.error.button.secondary": "Cancel",
"acme.error.headline": "Something went wrong",
"acme.error.paragraph": "The certificate couldn’t be issued. [br] You can retry to get the certificate now, or you will get a reminder later.",
"acme.error.paragraph": "The certificate couldn't be issued. [br] You can retry to get the certificate now, or you will get a reminder later.",
"acme.error.gracePeriod.paragraph": "The certificate couldn't be issued. [br] Please try again, or reach out to your team admin.",
"acme.inProgress.button.close": "Close window 'Getting Certificate'",
"acme.inProgress.headline": "Getting Certificate...",
"acme.inProgress.paragraph.alt": "Downloading...",
Expand All @@ -180,6 +181,7 @@
"acme.renewCertificate.button.secondary": "Remind Me Later",
"acme.renewCertificate.headline.alt": "Update end-to-end identity certificate",
"acme.renewCertificate.paragraph": "The end-to-end identity certificate for this device expires soon. To keep your communication at the highest security level, update your certificate now. <br/> <br/> Enter your identity provider’s credentials in the next step to update the certificate automatically. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
"acme.renewCertificate.gracePeriodOver.paragraph": "The end-to-end identity certificate for this device has expired. To keep your Wire communication at the highest security level, please update the certificate. <br/> <br/> Enter your identity provider’s credentials in the next step to update the certificate automatically. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
"acme.renewal.done.headline": "Certificate updated",
"acme.renewal.done.paragraph": "The certificate is updated and your device is verified. You can find more details about this certificate in your [bold]Wire Preferences[/bold] under [bold]Devices.[/bold] <br/> <br/> <a href=\"{{url}}\" target=\"_blank\"> Learn more about end-to-end identity </a>",
"acme.renewal.inProgress.headline": "Updating Certificate...",
Expand All @@ -188,7 +190,8 @@
"acme.settingsChanged.button.secondary": "Remind Me Later",
"acme.settingsChanged.headline.alt": "End-to-end identity certificate",
"acme.settingsChanged.headline.main": "Team settings changed",
"acme.settingsChanged.paragraph": "As of today, your team uses end-to-end identity to make Wire’s usage more secure and practicable. The device verification takes place automatically using a certificate and replaces the previous manual process. This way, you communicate with the highest security standard. <br/> <br/> Enter your identity provider’s credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
"acme.settingsChanged.paragraph": "As of today, your team uses end-to-end identity to make Wire's usage more secure and practicable. The device verification takes place automatically using a certificate and replaces the previous manual process. This way, you communicate with the highest security standard. <br/> <br/> Enter your identity provider's credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
"acme.settingsChanged.gracePeriodOver.paragraph": "Your team now uses end-to-end identity to make Wire's usage more secure. The device verification takes place automatically using a certificate. <br/> <br/> Enter your identity provider's credentials in the next step to automatically get a verification certificate for this device. <br/> <br/> <a href=\"{{url}}\" target=\"_blank\">Learn more about end-to-end identity</a>",
"addParticipantsConfirmLabel": "Add",
"addParticipantsHeader": "Add participants",
"addParticipantsHeaderWithCounter": "Add participants ({{number}})",
Expand Down
10 changes: 8 additions & 2 deletions src/script/E2EIdentity/E2EIdentityEnrollment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -365,13 +365,13 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
// Clear the e2e identity progress
this.coreE2EIService.clearAllProgress();

const isSoftLockEnabled = await shouldEnableSoftLock(this.config!);
const disableSnooze = await shouldEnableSoftLock(this.config!);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 nice renaming


return new Promise<void>(resolve => {
const {modalOptions, modalType} = getModalOptions({
type: ModalType.ERROR,
hideClose: true,
hideSecondary: isSoftLockEnabled,
hideSecondary: disableSnooze,
primaryActionFn: async () => {
this.currentStep = E2EIHandlerStep.INITIALIZED;
await this.enroll();
Expand All @@ -381,6 +381,9 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
await this.startEnrollment(ModalType.ENROLL);
resolve();
},
extraParams: {
isGracePeriodOver: disableSnooze,
},
});

PrimaryModal.show(modalType, modalOptions);
Expand All @@ -406,6 +409,9 @@ export class E2EIHandler extends TypedEventEmitter<Events> {
this.showSnoozeConfirmationModal();
resolve();
},
extraParams: {
isGracePeriodOver: disableSnooze,
},
type: modalType,
hideClose: true,
});
Expand Down
28 changes: 24 additions & 4 deletions src/script/E2EIdentity/Modals/Modals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,28 @@ export enum ModalType {
SNOOZE_REMINDER = 'snooze_reminder',
}

/**
* Options for configuring a modal.
* @typedef {Object} GetModalOptions
* @property {ModalType} type - The type of modal to display.
* @property {Function} [primaryActionFn] - Function to execute for the primary action.
* @property {Function} [secondaryActionFn] - Function to execute for the secondary action.
* @property {boolean} [hideSecondary=false] - Flag to hide the secondary action button.
* @property {boolean} [hidePrimary=false] - Flag to hide the primary action button.
* @property {boolean} [hideClose=false] - Flag to hide the close button.
* @property {Object} [extraParams] - Additional parameters for the modal.
* @property {string} [extraParams.delayTime] - time left to remind the user again for enroll/renewal.
* @property {boolean} [extraParams.isRenewal] - Flag indicating if this is a renewal action.
* @property {boolean} [extraParams.isGracePeriodOver] - Flag indicating if the grace period is over.
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, you did it the hard way. There is actually a super nice jsdoc/typescript feature where you can inline jsdoc directly in the types. I'll show you in a diff comment

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh ok, shall i remove my jsdoc then?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can remove them then :)
Inline jsdoc has the benefit of showing up on the typescript server language :)

interface GetModalOptions {
type: ModalType;
primaryActionFn?: () => void;
secondaryActionFn?: () => void;
hideSecondary?: boolean;
hidePrimary?: boolean;
hideClose?: boolean;
extraParams?: {delayTime?: string; isRenewal?: boolean};
extraParams?: {delayTime?: string; isRenewal?: boolean; isGracePeriodOver?: boolean};
arjita-mitra marked this conversation as resolved.
Show resolved Hide resolved
}
export const getModalOptions = ({
type,
Expand Down Expand Up @@ -69,7 +83,9 @@ export const getModalOptions = ({
options = {
text: {
closeBtnLabel: t('acme.settingsChanged.button.close'),
htmlMessage: t('acme.settingsChanged.paragraph', {}, {br: '<br>', ...replaceLearnMore}),
htmlMessage: extraParams?.isGracePeriodOver
? t('acme.settingsChanged.gracePeriodOver.paragraph', {}, {br: '<br>', ...replaceLearnMore})
: t('acme.settingsChanged.paragraph', {}, {br: '<br>', ...replaceLearnMore}),
title: t('acme.settingsChanged.headline.alt'),
},
primaryAction: {
Expand All @@ -90,7 +106,9 @@ export const getModalOptions = ({
options = {
text: {
closeBtnLabel: t('acme.renewCertificate.button.close'),
htmlMessage: t('acme.renewCertificate.paragraph'),
htmlMessage: extraParams?.isGracePeriodOver
? t('acme.renewCertificate.gracePeriodOver.paragraph')
: t('acme.renewCertificate.paragraph'),
title: t('acme.renewCertificate.headline.alt'),
},
primaryAction: {
Expand Down Expand Up @@ -128,7 +146,9 @@ export const getModalOptions = ({
options = {
text: {
closeBtnLabel: t('acme.error.button.close'),
htmlMessage: t('acme.error.paragraph', {}, {br: '<br>'}),
htmlMessage: extraParams?.isGracePeriodOver
? t('acme.error.gracePeriod.paragraph', {}, {br: '<br>'})
: t('acme.error.paragraph', {}, {br: '<br>'}),
title: t('acme.error.headline'),
},
primaryAction: {
Expand Down
Loading