add checkbox in settings to display ApiappAddFormDialog

edrlab · Sep 23, 2024 · 84d02ab · 84d02ab
1 parent 0506210
commit 84d02ab
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 7 deletions.
diff --git a/src/renderer/assets/styles/components/settings.scss b/src/renderer/assets/styles/components/settings.scss
@@ -336,6 +336,10 @@ $setting_color: var(--color-blue);
 .settings_tab {
     margin: 30px 25px 0!important;
 
+    .button_catalog_infos {
+        margin: 0;
+    }
+
     &_container {
     margin: 35px;
 

diff --git a/src/renderer/library/components/settings/Settings.tsx b/src/renderer/library/components/settings/Settings.tsx
@@ -38,6 +38,10 @@ import * as BrushIcon from "readium-desktop/renderer/assets/icons/paintbrush-ico
 import KeyboardSettings, { AdvancedTrigger } from "readium-desktop/renderer/library/components/settings/KeyboardSettings";
 import * as GearIcon from "readium-desktop/renderer/assets/icons/gear-icon.svg";
 import * as CheckIcon from "readium-desktop/renderer/assets/icons/singlecheck-icon.svg";
+import * as ChevronDown from "readium-desktop/renderer/assets/icons/chevron-down.svg";
+import * as ChevronUp from "readium-desktop/renderer/assets/icons/chevron-up.svg";
+import * as FollowLinkIcon from "readium-desktop/renderer/assets/icons/followLink-icon.svg";
+import { shell } from "electron";
 
 interface ISettingsProps {};
 
@@ -87,10 +91,82 @@ export const Auth = () => {
 
 const ConnectionSettings: React.FC<{}> = () => {
     const [__] = useTranslator();
+    const [accessDilicom, setAccessDilicom] = React.useState(false);
+    const onChange = () => {
+        setAccessDilicom(!accessDilicom);
+    };
+    const [infoOpen, setInfoOpen] = React.useState(false);
+
+    const openInfo = (e: any) => {
+        e.preventDefault();
+        setInfoOpen(!infoOpen);
+    };
+
     return (
-        <section className={stylesSettings.section} style={{ position: "relative" }}>
-            <h4>{__("catalog.opds.auth.login")}</h4>
+        <section className={stylesSettings.section} style={{ position: "relative", borderTop: "2px solid var(--color-extralight-grey)", gap: "10px", paddingTop: "15px" }}>
+            <h4>{__("catalog.opds.auth.manageAccess")}</h4>
             <Auth />
+            <h4>{__("opds.addFormApiapp.title")}</h4>
+            {/* <div>
+                <input type="checkbox" id="addForm"></input>
+                <label htmlFor="addForm">{__("opds.addFormApiapp.activeDilicom")}</label>
+            </div> */}
+            <div className={stylesAnnotations.annotations_checkbox}>
+                <input type="checkbox" id="advancedAnnotations" className={stylesGlobal.checkbox_custom_input} name="advancedAnnotations" checked={accessDilicom} onChange={onChange} />
+                <label htmlFor="advancedAnnotations" className={stylesGlobal.checkbox_custom_label}>
+                    <div
+                        tabIndex={0}
+                        role="checkbox"
+                        aria-checked={accessDilicom}
+                        aria-label={__("settings.session.title")}
+                        onKeyDown={(e) => {
+                            // if (e.code === "Space") {
+                            if (e.key === " ") {
+                                e.preventDefault(); // prevent scroll
+                            }
+                        }}
+                        onKeyUp={(e) => {
+                            // if (e.code === "Space") {
+                            if (e.key === " ") {
+                                e.preventDefault();
+                                onChange();
+                            }
+                        }}
+                        className={stylesGlobal.checkbox_custom}
+                        style={{ border: accessDilicom ? "2px solid transparent" : "2px solid var(--color-primary)", backgroundColor: accessDilicom ? "var(--color-blue)" : "transparent" }}>
+                        {accessDilicom ?
+                            <SVG ariaHidden svg={CheckIcon} />
+                            :
+                            <></>
+                        }
+                    </div>
+                    <div aria-hidden>
+                        <h4>{__("opds.addFormApiapp.activeDilicom")}</h4>
+                    </div>
+                </label>
+            </div>
+            <div>
+                    <button className="button_catalog_infos" onClick={(e) => openInfo(e)}>
+                        <SVG ariaHidden svg={InfoIcon} />
+                        {__("apiapp.howItWorks")}
+                        <SVG ariaHidden svg={infoOpen ? ChevronUp : ChevronDown} />
+                    </button>
+                    { infoOpen ?
+                    <div className="catalog_infos_text">
+                        <p>
+                        {__("apiapp.informations")}
+                        </p>
+                        <a href=""
+                            onClick={async (ev) => {
+                                ev.preventDefault(); // necessary because href="", CSS must also ensure hyperlink visited style
+                                await shell.openExternal("https://thorium.edrlab.org/docs/");
+                            }}>
+                        {__("apiapp.documentation")}
+                            <SVG ariaHidden svg={FollowLinkIcon} />
+                        </a>
+                    </div>
+                    : <></>}
+                </div>
         </section>
     );
 };

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -92,6 +92,7 @@
             "auth": {
                 "cancel": "Cancel",
                 "login": "Login",
+                "manageAccess": "Manage access to catalogs",
                 "password": "Password",
                 "register": "Register",
                 "username": "Username / Email Address"
@@ -193,7 +194,8 @@
             "urlPlaceholder": "Link"
         },
         "addFormApiapp": {
-            "title": "Add library account"
+            "title": "Add library account",
+            "activeDilicom": "Activate access to Dilicom PNB API"
         },
         "addMenu": "Add OPDS feed",
         "breadcrumbRoot": "Catalogs",

diff --git a/src/typings/en.translation.d.ts b/src/typings/en.translation.d.ts
@@ -128,8 +128,8 @@ declare namespace typed_i18n {
   },
   readonly "export": string,
   readonly "exportAnnotation": string,
-  readonly "exportAnnotationSuccess": string,
   readonly "exportAnnotationFailure": string,
+  readonly "exportAnnotationSuccess": string,
   readonly "format": string,
   readonly "lang": string,
   readonly "lastRead": string,
@@ -144,6 +144,7 @@ declare namespace typed_i18n {
     readonly "auth": {
       readonly "cancel": string,
       readonly "login": string,
+      readonly "manageAccess": string,
       readonly "password": string,
       readonly "register": string,
       readonly "username": string
@@ -210,8 +211,8 @@ declare namespace typed_i18n {
   (_: "catalog.entry.lastAdditions", __?: {}): string;
   (_: "catalog.export", __?: {}): string;
   (_: "catalog.exportAnnotation", __?: {}): string;
-  (_: "catalog.exportAnnotationSuccess", __?: {}): string;
   (_: "catalog.exportAnnotationFailure", __?: {}): string;
+  (_: "catalog.exportAnnotationSuccess", __?: {}): string;
   (_: "catalog.format", __?: {}): string;
   (_: "catalog.lang", __?: {}): string;
   (_: "catalog.lastRead", __?: {}): string;
@@ -226,6 +227,7 @@ declare namespace typed_i18n {
   readonly "auth": {
     readonly "cancel": string,
     readonly "login": string,
+    readonly "manageAccess": string,
     readonly "password": string,
     readonly "register": string,
     readonly "username": string
@@ -252,12 +254,14 @@ declare namespace typed_i18n {
   (_: "catalog.opds.auth", __?: {}): {
   readonly "cancel": string,
   readonly "login": string,
+  readonly "manageAccess": string,
   readonly "password": string,
   readonly "register": string,
   readonly "username": string
 };
   (_: "catalog.opds.auth.cancel", __?: {}): string;
   (_: "catalog.opds.auth.login", __?: {}): string;
+  (_: "catalog.opds.auth.manageAccess", __?: {}): string;
   (_: "catalog.opds.auth.password", __?: {}): string;
   (_: "catalog.opds.auth.register", __?: {}): string;
   (_: "catalog.opds.auth.username", __?: {}): string;
@@ -431,7 +435,10 @@ declare namespace typed_i18n {
     readonly "url": string,
     readonly "urlPlaceholder": string
   },
-  readonly "addFormApiapp": { readonly "title": string },
+  readonly "addFormApiapp": {
+    readonly "title": string,
+    readonly "activeDilicom": string
+  },
   readonly "addMenu": string,
   readonly "breadcrumbRoot": string,
   readonly "documentation": string,
@@ -477,8 +484,9 @@ declare namespace typed_i18n {
   (_: "opds.addForm.namePlaceholder", __?: {}): string;
   (_: "opds.addForm.url", __?: {}): string;
   (_: "opds.addForm.urlPlaceholder", __?: {}): string;
-  (_: "opds.addFormApiapp", __?: {}): { readonly "title": string };
+  (_: "opds.addFormApiapp", __?: {}): { readonly "title": string, readonly "activeDilicom": string };
   (_: "opds.addFormApiapp.title", __?: {}): string;
+  (_: "opds.addFormApiapp.activeDilicom", __?: {}): string;
   (_: "opds.addMenu", __?: {}): string;
   (_: "opds.breadcrumbRoot", __?: {}): string;
   (_: "opds.documentation", __?: {}): string;