chore(react/type_widget): port protected session

This commit is contained in:
Elian Doran
2025-09-19 18:55:04 +03:00
parent c9fe358811
commit d1a9890932
15 changed files with 72 additions and 74 deletions

View File

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

View File

@@ -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.",

View File

@@ -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.",

View File

@@ -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.",

View File

@@ -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.",

View File

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

View File

@@ -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",

View File

@@ -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.",

View File

@@ -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": "Защищенный сеанс запущен.",

View File

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

View File

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

View File

@@ -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":
return <Empty />
case "doc":
return <Doc {...props} />
case "search":
return <div className="note-detail-none note-detail-printable" />
default:
break;
case "empty": return <Empty />
case "doc": return <Doc {...props} />
case "search": return <div className="note-detail-none note-detail-printable" />
case "protectedSession": return <ProtectedSession />
default: break;
}
}

View File

@@ -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;
}

View File

@@ -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>
)
}

View File

@@ -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();
}
}