feat(react/dialog): port protected session password

apps/client/src/translations/cn/translation.json

@@ -253,7 +253,7 @@
     "help_title": "关于保护笔记的帮助",
     "close_label": "关闭",
     "form_label": "输入密码进入保护会话以继续：",
-    "start_button": "开始保护会话 <kbd>回车</kbd>"
+    "start_button": "开始保护会话"
   },
   "recent_changes": {
     "title": "最近修改",

apps/client/src/translations/de/translation.json

@@ -253,7 +253,7 @@
     "help_title": "Hilfe zu geschützten Notizen",
     "close_label": "Schließen",
     "form_label": "Um mit der angeforderten Aktion fortzufahren, musst du eine geschützte Sitzung starten, indem du ein Passwort eingibst:",
-    "start_button": "Geschützte Sitzung starten <kbd>enter</kbd>"
+    "start_button": "Geschützte Sitzung starten"
   },
   "recent_changes": {
     "title": "Aktuelle Änderungen",

apps/client/src/translations/en/translation.json

@@ -257,7 +257,7 @@
     "help_title": "Help on Protected notes",
     "close_label": "Close",
     "form_label": "To proceed with requested action you need to start protected session by entering password:",
-    "start_button": "Start protected session <kbd>enter</kbd>"
+    "start_button": "Start protected session"
   },
   "recent_changes": {
     "title": "Recent changes",

apps/client/src/translations/es/translation.json

@@ -256,7 +256,7 @@
     "help_title": "Ayuda sobre notas protegidas",
     "close_label": "Cerrar",
     "form_label": "Para continuar con la acción solicitada, debe iniciar en la sesión protegida ingresando la contraseña:",
-    "start_button": "Iniciar sesión protegida <kbd>entrar</kbd>"
+    "start_button": "Iniciar sesión protegida"
   },
   "recent_changes": {
     "title": "Cambios recientes",

apps/client/src/translations/fr/translation.json

@@ -253,7 +253,7 @@
     "help_title": "Aide sur les notes protégées",
     "close_label": "Fermer",
     "form_label": "Pour procéder à l'action demandée, vous devez démarrer une session protégée en saisissant le mot de passe :",
-    "start_button": "Démarrer une session protégée <kbd>entrer</kbd>"
+    "start_button": "Démarrer une session protégée"
   },
   "recent_changes": {
     "title": "Modifications récentes",

apps/client/src/translations/ro/translation.json

@@ -992,7 +992,7 @@
     "form_label": "Pentru a putea continua cu acțiunea cerută este nevoie să fie pornită sesiunea protejată prin introducerea parolei:",
     "help_title": "Informații despre notițe protejate",
     "modal_title": "Sesiune protejată",
-    "start_button": "Pornește sesiunea protejată <kbd>enter</kbd>"
+    "start_button": "Pornește sesiunea protejată"
   },
   "protected_session_status": {
     "active": "Sesiunea protejată este activă. Clic pentru a închide sesiunea protejată.",

apps/client/src/translations/sr/translation.json

@@ -257,7 +257,7 @@
     "help_title": "Pomoć za Zaštićene beleške",
     "close_label": "Zatvori",
     "form_label": "Da biste nastavili sa traženom akcijom moraćete započeti zaštićenu sesiju tako što ćete uneti lozinku:",
-    "start_button": "Započni zaštićenu sesiju <kbd>enter</kbd>"
+    "start_button": "Započni zaštićenu sesiju"
   },
   "recent_changes": {
     "title": "Nedavne promene",

apps/client/src/translations/tw/translation.json

@@ -231,7 +231,7 @@
     "help_title": "關於保護筆記的幫助",
     "close_label": "關閉",
     "form_label": "輸入密碼進入保護會話以繼續：",
-    "start_button": "開始保護會話 <kbd>Enter</kbd>"
+    "start_button": "開始保護會話"
   },
   "recent_changes": {
     "title": "最近修改",

apps/client/src/widgets/dialogs/protected_session_password.ts

@@ -1,60 +0,0 @@
-import { openDialog } from "../../services/dialog.js";
-import { t } from "../../services/i18n.js";
-import protectedSessionService from "../../services/protected_session.js";
-import BasicWidget from "../basic_widget.js";
-import { Modal } from "bootstrap";
-
-const TPL = /*html*/`
-<div class="protected-session-password-dialog modal mx-auto" data-backdrop="false" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-md" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title flex-grow-1">${t("protected_session_password.modal_title")}</h5>
-                <button class="help-button" type="button" data-help-page="protected-notes.html" title="${t("protected_session_password.help_title")}">?</button>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t("protected_session_password.close_label")}"></button>
-            </div>
-            <form class="protected-session-password-form">
-                <div class="modal-body">
-                    <label for="protected-session-password" class="col-form-label">${t("protected_session_password.form_label")}</label>
-                    <input id="protected-session-password" class="form-control protected-session-password" type="password" autocomplete="current-password">
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-primary">${t("protected_session_password.start_button")}</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>`;
-
-export default class ProtectedSessionPasswordDialog extends BasicWidget {
-
-    private modal!: bootstrap.Modal;
-    private $passwordForm!: JQuery<HTMLElement>;
-    private $passwordInput!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
-
-        this.$passwordForm = this.$widget.find(".protected-session-password-form");
-        this.$passwordInput = this.$widget.find(".protected-session-password");
-        this.$passwordForm.on("submit", () => {
-            const password = String(this.$passwordInput.val());
-            this.$passwordInput.val("");
-
-            protectedSessionService.setupProtectedSession(password);
-
-            return false;
-        });
-    }
-
-    showProtectedSessionPasswordDialogEvent() {
-        openDialog(this.$widget);
-
-        this.$passwordInput.trigger("focus");
-    }
-
-    closeProtectedSessionPasswordDialogEvent() {
-        this.modal.hide();
-    }
-}

apps/client/src/widgets/dialogs/protected_session_password.tsx

@@ -0,0 +1,50 @@
+import { useRef, useState } from "preact/hooks";
+import { closeActiveDialog, openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import FormTextBox from "../react/FormTextBox";
+import Modal from "../react/Modal";
+import ReactBasicWidget from "../react/ReactBasicWidget";
+import protected_session from "../../services/protected_session";
+
+function ProtectedSessionPasswordDialogComponent() {
+    const [ password, setPassword ] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <Modal
+            className="protected-session-password-dialog"
+            title={t("protected_session_password.modal_title")}
+            size="md"
+            helpPageId="bwg0e8ewQMak"
+            footer={<Button text={t("protected_session_password.start_button")} />}
+            onSubmit={() => protected_session.setupProtectedSession(password)}
+            onShown={() => inputRef.current?.focus()}
+        >
+            <label htmlFor="protected-session-password" className="col-form-label">{t("protected_session_password.form_label")}</label>
+            <FormTextBox
+                id="protected-session-password"
+                name="protected-session-password"
+                type="password"
+                autoComplete="current-password"
+                onChange={setPassword}
+            />
+        </Modal>
+    )
+}
+
+export default class ProtectedSessionPasswordDialog extends ReactBasicWidget {
+
+    get component() {
+        return <ProtectedSessionPasswordDialogComponent />;
+    }
+
+    showProtectedSessionPasswordDialogEvent() {
+        openDialog(this.$widget);
+    }
+
+    closeProtectedSessionPasswordDialogEvent() {
+        closeActiveDialog();
+    }
+
+}

apps/client/src/widgets/react/FormTextBox.tsx

@@ -1,17 +1,24 @@
+import { HTMLInputTypeAttribute } from "preact/compat";
+
 interface FormTextBoxProps {
+    id?: string;
     name: string;
+    type?: HTMLInputTypeAttribute;
     currentValue?: string;
     className?: string;
+    autoComplete?: string;
     onChange?(newValue: string): void;
 }
 
-export default function FormTextBox({ name, className, currentValue, onChange }: FormTextBoxProps) {
+export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete }: FormTextBoxProps) {
     return (
         <input
-            type="text"
+            type={type ?? "text"}
             className={`form-control ${className}`}
+            id={id}
             name={name}
             value={currentValue}
+            autoComplete={autoComplete}
             onInput={e => onChange?.(e.currentTarget.value)} />
     );
 }

apps/client/src/widgets/react/Modal.tsx

@@ -6,7 +6,7 @@ import type { CSSProperties } from "preact/compat";
 interface ModalProps {
     className: string;
     title: string | ComponentChildren;
-    size: "lg" | "sm";
+    size: "lg" | "md" | "sm";
     children: ComponentChildren;
     footer?: ComponentChildren;
     maxWidth?: number;