chore(react/type_widget): port protected session

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

@@ -987,7 +987,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "显示受保护的笔记需要输入您的密码：",
-    "start_session_button": "开始受保护的会话 <kbd>Enter</kbd>",
+    "start_session_button": "开始受保护的会话",
     "started": "受保护的会话已启动。",
     "wrong_password": "密码错误。",
     "protecting-finished-successfully": "保护操作已成功完成。",

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

@@ -984,7 +984,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Um die geschützte Notiz anzuzeigen, musst du dein Passwort eingeben:",
-    "start_session_button": "Starte eine geschützte Sitzung <kbd>Eingabetaste</kbd>",
+    "start_session_button": "Starte eine geschützte Sitzung",
     "started": "Geschützte Sitzung gestartet.",
     "wrong_password": "Passwort flasch.",
     "protecting-finished-successfully": "Geschützt erfolgreich beendet.",

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

@@ -987,7 +987,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
-    "start_session_button": "Start protected session <kbd>enter</kbd>",
+    "start_session_button": "Start protected session",
     "started": "Protected session has been started.",
     "wrong_password": "Wrong password.",
     "protecting-finished-successfully": "Protecting finished successfully.",

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

@@ -968,7 +968,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Para mostrar una nota protegida es necesario ingresar su contraseña:",
-    "start_session_button": "Iniciar sesión protegida <kbd>Enter</kbd>",
+    "start_session_button": "Iniciar sesión protegida",
     "started": "La sesión protegida ha iniciado.",
     "wrong_password": "Contraseña incorrecta.",
     "protecting-finished-successfully": "La protección finalizó exitosamente.",

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

@@ -967,7 +967,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "L'affichage de la note protégée nécessite la saisie de votre mot de passe :",
-    "start_session_button": "Démarrer une session protégée <kbd>Entrée</kbd>",
+    "start_session_button": "Démarrer une session protégée",
     "started": "La session protégée a démarré.",
     "wrong_password": "Mot de passe incorrect.",
     "protecting-finished-successfully": "La protection de la note s'est terminée avec succès.",

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

@@ -1 +1,5 @@
-{}
+{
+  "protected_session": {
+    "start_session_button": "Iniciar sessão protegida"
+  }
+}

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

@@ -1200,7 +1200,7 @@
     "unprotecting-in-progress-count": "Remoções de proteção em andamento: {{count}}",
     "protecting-title": "Estado da proteção",
     "unprotecting-title": "Estado da remoção de proteção",
-    "start_session_button": "Iniciar sessão protegida <kbd>enter</kbd>"
+    "start_session_button": "Iniciar sessão protegida"
   },
   "relation_map": {
     "open_in_new_tab": "Abrir em nova aba",

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

@@ -979,7 +979,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Afișarea notițelor protejate necesită introducerea parolei:",
-    "start_session_button": "Deschide sesiunea protejată <kbd>enter</kbd>",
+    "start_session_button": "Deschide sesiunea protejată",
     "started": "Sesiunea protejată este activă.",
     "wrong_password": "Parolă greșită.",
     "protecting-finished-successfully": "Protejarea a avut succes.",

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

@@ -1687,7 +1687,7 @@
     "unprotecting-title": "Статус снятия защиты",
     "protecting-finished-successfully": "Защита успешно завершена.",
     "unprotecting-finished-successfully": "Снятие защиты успешно завершено.",
-    "start_session_button": "Начать защищенный сеанс <kbd>enter</kbd>",
+    "start_session_button": "Начать защищенный сеанс",
     "protecting-in-progress": "Защита в процессе: {{count}}",
     "unprotecting-in-progress-count": "Снятие защиты в процессе: {{count}}",
     "started": "Защищенный сеанс запущен.",

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

@@ -984,7 +984,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "顯示受保護的筆記需要輸入您的密碼：",
-    "start_session_button": "開始受保護的作業階段 <kbd>Enter</kbd>",
+    "start_session_button": "開始受保護的作業階段",
     "started": "已啟動受保護的作業階段。",
     "wrong_password": "密碼錯誤。",
     "protecting-finished-successfully": "已成功完成保護操作。",

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

@@ -1090,7 +1090,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "Для відображення захищеної нотатки потрібно ввести пароль:",
-    "start_session_button": "Розпочати захищений сеанс <kbd>enter</kbd>",
+    "start_session_button": "Розпочати захищений сеанс",
     "started": "Захищений сеанс розпочато.",
     "wrong_password": "Неправильний пароль.",
     "protecting-finished-successfully": "Захист успішно завершено.",

apps/client/src/widgets/NoteDetail.tsx

@@ -8,6 +8,7 @@ import Empty from "./type_widgets/Empty";
 import { VNode } from "preact";
 import Doc from "./type_widgets/Doc";
 import { TypeWidgetProps } from "./type_widgets/type_widget";
+import ProtectedSession from "./type_widgets/ProtectedSession";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -55,14 +56,11 @@ function useNoteInfo() {
 
 function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: TypeWidgetProps) {
     switch (noteType) {
-        case "empty":
+        case "empty": return <Empty />
-            return <Empty />
+        case "doc": return <Doc {...props} />
-        case "doc":
+        case "search": return <div className="note-detail-none note-detail-printable" />
-            return <Doc {...props} />
+        case "protectedSession": return <ProtectedSession />
-        case "search":
+        default: break;
-            return <div className="note-detail-none note-detail-printable" />
-        default:
-            break;
     }
 }
 

apps/client/src/widgets/type_widgets/ProtectedSession.css

@@ -0,0 +1,9 @@
+.protected-session-password-component {
+    width: 300px;
+    margin: 30px auto auto;
+}
+
+.protected-session-password-component input,
+.protected-session-password-component button {
+    margin-top: 12px;
+}

apps/client/src/widgets/type_widgets/ProtectedSession.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useRef } from "preact/hooks";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import FormGroup from "../react/FormGroup";
+import FormTextBox from "../react/FormTextBox";
+import "./ProtectedSession.css";
+import protected_session from "../../services/protected_session";
+import type { TargetedSubmitEvent } from "preact";
+
+export default function ProtectedSession() {
+    const passwordRef = useRef<HTMLInputElement>(null);
+
+    const submitCallback = useCallback((e: TargetedSubmitEvent<HTMLFormElement>) => {
+        if (!passwordRef.current) return;
+        e.preventDefault();
+
+        const password = String(passwordRef.current.value);
+        passwordRef.current.value = "";
+        protected_session.setupProtectedSession(password);
+    }, [ passwordRef ]);
+
+    return (
+        <div className="protected-session-password-component note-detail-printable">
+            <form class="protected-session-password-form" onSubmit={submitCallback}>
+                <FormGroup name="protected-session-password-in-detail" label={t("protected_session.enter_password_instruction")}>
+                    <FormTextBox
+                        type="password"
+                        className="protected-session-password"
+                        autocomplete="current-password"
+                        inputRef={passwordRef}
+                    />
+                </FormGroup>
+
+                <Button
+                    text={t("protected_session.start_session_button")}
+                    primary
+                    keyboardShortcut="Enter"
+                />
+            </form>
+        </div>
+    )
+}

apps/client/src/widgets/type_widgets_old/protected_session.ts

@@ -1,55 +0,0 @@
-import protectedSessionService from "../../services/protected_session.js";
-import TypeWidget from "./type_widget.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="protected-session-password-component note-detail-printable">
-    <style>
-    .protected-session-password-component {
-        width: 300px;
-        margin: 30px auto auto;
-    }
-
-    .protected-session-password-component input,
-    .protected-session-password-component button {
-        margin-top: 12px;
-    }
-
-    </style>
-
-    <form class="protected-session-password-form">
-        <div class="form-group">
-            <label for="protected-session-password-in-detail">${t("protected_session.enter_password_instruction")}</label>
-            <input id="protected-session-password-in-detail" class="form-control protected-session-password" type="password" autofocus autocomplete="current-password">
-        </div>
-
-        <button class="btn btn-primary">${t("protected_session.start_session_button")}</button>
-    </form>
-</div>`;
-
-export default class ProtectedSessionTypeWidget extends TypeWidget {
-
-    private $passwordForm!: JQuery<HTMLElement>;
-    private $passwordInput!: JQuery<HTMLElement>;
-
-    static getType() {
-        return "protectedSession";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        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;
-        });
-
-        super.doRender();
-    }
-}