()
| 35 | } |
| 36 | |
| 37 | onOpen(): void { |
| 38 | const { contentEl } = this; |
| 39 | contentEl.empty(); |
| 40 | contentEl.addClass("tasknotes-device-code-modal"); |
| 41 | |
| 42 | // Header |
| 43 | const header = contentEl.createDiv({ cls: "tasknotes-device-code-header" }); |
| 44 | const headerIcon = header.createSpan({ cls: "tasknotes-device-code-icon" }); |
| 45 | setIcon(headerIcon, "shield-check"); |
| 46 | header.createEl("h2", { |
| 47 | text: this.translate("modals.deviceCode.title"), |
| 48 | cls: "tasknotes-device-code-title", |
| 49 | }); |
| 50 | |
| 51 | // Instructions |
| 52 | const instructions = contentEl.createDiv({ cls: "tasknotes-device-code-instructions" }); |
| 53 | instructions.createEl("p", { |
| 54 | text: this.translate("modals.deviceCode.instructions.intro"), |
| 55 | }); |
| 56 | |
| 57 | // Steps |
| 58 | const stepsList = instructions.createEl("ol", { cls: "tasknotes-device-code-steps" }); |
| 59 | |
| 60 | const step1 = stepsList.createEl("li"); |
| 61 | step1.createSpan({ text: this.translate("modals.deviceCode.steps.open") + " " }); |
| 62 | const linkSpan = step1.createEl("a", { |
| 63 | text: this.deviceCode.verificationUrl, |
| 64 | href: this.deviceCode.verificationUrl, |
| 65 | cls: "tasknotes-device-code-link", |
| 66 | }); |
| 67 | linkSpan.setAttribute("target", "_blank"); |
| 68 | step1.createSpan({ text: " " + this.translate("modals.deviceCode.steps.inBrowser") }); |
| 69 | |
| 70 | const step2 = stepsList.createEl("li"); |
| 71 | step2.createSpan({ text: this.translate("modals.deviceCode.steps.enterCode") }); |
| 72 | |
| 73 | const step3 = stepsList.createEl("li"); |
| 74 | step3.createSpan({ text: this.translate("modals.deviceCode.steps.signIn") }); |
| 75 | |
| 76 | const step4 = stepsList.createEl("li"); |
| 77 | step4.createSpan({ text: this.translate("modals.deviceCode.steps.returnToObsidian") }); |
| 78 | |
| 79 | // Code display |
| 80 | const codeContainer = contentEl.createDiv({ cls: "tasknotes-device-code-container" }); |
| 81 | codeContainer.createEl("div", { |
| 82 | text: this.translate("modals.deviceCode.codeLabel"), |
| 83 | cls: "tasknotes-device-code-label", |
| 84 | }); |
| 85 | |
| 86 | const codeBox = codeContainer.createEl("div", { cls: "tasknotes-device-code-box" }); |
| 87 | codeBox.createEl("code", { |
| 88 | text: this.formatUserCode(this.deviceCode.userCode), |
| 89 | cls: "tasknotes-device-code-text", |
| 90 | }); |
| 91 | |
| 92 | const copyIcon = codeBox.createEl("button", { |
| 93 | cls: "tasknotes-device-code-copy", |
| 94 | attr: { "aria-label": this.translate("modals.deviceCode.copyCodeAriaLabel") }, |
nothing calls this directly
no test coverage detected