namirasoft-account-react 1.5.21 → 1.5.22

package/src/components/NSABoxSecret.tsx

@@ -1,265 +1,265 @@
-import { BaseUUID, EnvService } from "namirasoft-core";
-import { NamirasoftSecretMetaDatabase, NamirasoftSecretServer } from "namirasoft-secret";
-import { IBaseComponentProps, INSBox, INSBoxBaseLayoutProps, IValidationProps, IValidationStringProps, NSBoxBoolean, NSBoxSensitive, NSBoxString, NSColumn, safeMenuMenuItem } from "namirasoft-site-react";
-import React, { createRef, HTMLInputAutoCompleteAttribute } from "react";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import Styles from "./NSABoxSecret.module.css";
-
-export interface NSABoxSecretProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSARouterMakerResult, INSBoxBaseLayoutProps<NSABoxSecret | NSBoxString, string>
-{
-    input?: IBaseComponentProps;
-    auto_complete?: HTMLInputAutoCompleteAttribute | undefined;
-    sensitive_enabled?: boolean;
-    onSensitiveChange?: (sensitive: boolean) => void;
-    encryption?: {
-        encryptor: (value: string) => Promise<string>;
-        decryptor: (value: string) => Promise<string>;
-    }
-}
-interface NSABoxSecretState
-{
-    secret_id: string | null;
-    value: string | null;
-    is_sensitive: boolean;
-    is_loading: boolean;
-}
-
-export class NSABoxSecret extends React.Component<NSABoxSecretProps, NSABoxSecretState> implements INSBox
-{
-    private NSBoxSensitive_Main = createRef<NSBoxSensitive>();
-    private NSBoxString_Main = createRef<NSBoxString>();
-    private NSBoxBoolean_Sensitive = createRef<NSBoxBoolean>();
-
-    constructor(props: NSABoxSecretProps)
-    {
-        super(props);
-        this.state = {
-            secret_id: null,
-            value: null,
-            is_sensitive: true,
-            is_loading: false,
-        };
-        this.isEmpty = this.isEmpty.bind(this);
-        this.getError = this.getError.bind(this);
-        this.isSensitive = this.isSensitive.bind(this);
-        this.setSensitive = this.setSensitive.bind(this);
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.getEncryptedValue = this.getEncryptedValue.bind(this);
-        this.setEncryptedValue = this.setEncryptedValue.bind(this);
-        this.onChanged = this.onChanged.bind(this);
-    }
-
-    isEmpty(value: string)
-    {
-        return this.getCurrentBox()?.isEmpty(value) ?? true;
-    }
-    getError(): string | null
-    {
-        if (this.isSensitive() && this.state.secret_id && !this.state.value)
-            return null;
-        return this.getCurrentBox()?.getError() ?? null;
-    }
-    isSensitive(): boolean
-    {
-        return this.NSBoxBoolean_Sensitive.current?.getValueNull() ?? this.state.is_sensitive;
-    }
-    async setSensitive(value: boolean, callback?: (() => void))
-    {
-        await this.handleSensitiveChange(value);
-        this.NSBoxBoolean_Sensitive.current?.setValue(value, callback);
-    }
-    private async handleSensitiveChange(enabled: boolean)
-    {
-        if (!enabled && this.state.secret_id && !this.state.value)
-        {
-            this.setState({ is_loading: true });
-            const value = await this.getSecretValue();
-            this.setState(
-                () => ({ value, secret_id: null, is_loading: false, is_sensitive: false }),
-                () =>
-                {
-                    this.NSBoxString_Main.current?.setValue(value);
-                    this.props.onSensitiveChange?.(false);
-                }
-            );
-            return;
-        }
-        this.setState({ is_sensitive: enabled }, () => this.props.onSensitiveChange?.(enabled));
-    }
-    getValue(checkError: boolean = true): string | null
-    {
-        if (this.isSensitive() && this.state.secret_id && !this.state.value)
-            return "";
-        return this.getCurrentBox()?.getValue(checkError) ?? null;
-    }
-    setValue(value: string | null, callback?: () => void): void
-    {
-        if (!this.isSensitive())
-            this.NSBoxString_Main.current?.setValue(value, callback);
-        else
-        {
-            let meta = new NamirasoftSecretMetaDatabase();
-            let short = meta.tables.secret.uuid.short;
-            if (BaseUUID.isValidShort(value ?? "", short))
-                this.setState({ secret_id: value, value: null });
-            else
-            {
-                this.setState({ secret_id: null, value });
-                this.NSBoxSensitive_Main.current?.setValue(value, callback);
-            }
-        }
-    }
-    async getEncryptedValue(checkError: boolean = true): Promise<string | null>
-    {
-        let value = this.getValue(checkError);
-
-        if (!this.isSensitive())
-            return value;
-
-        if (!value)
-            if (this.state.secret_id)
-                return await this.getSecretValue(false);
-            else
-                return value;
-
-        return await this.props.encryption?.encryptor(value) ?? value;
-    }
-    async setEncryptedValue(value: string | null, callback?: () => void)
-    {
-        if (!this.isSensitive())
-            this.setValue(value, callback);
-        else
-        {
-            if (value)
-            {
-                let encrypted_value = await this.props.encryption?.decryptor(value) ?? value;
-                this.setValue(encrypted_value, callback);
-            }
-            else
-            {
-                this.setValue(value, callback);
-            }
-        }
-    }
-    async getSecretValue(decode: boolean = true)
-    {
-        if (!this.state.secret_id)
-            return null;
-
-        let REACT_APP_BASE_URL_SECRET = new EnvService("REACT_APP_BASE_URL_SECRET", true).getString();
-        let server = new NamirasoftSecretServer(REACT_APP_BASE_URL_SECRET, this.props.account.token_manager, this.props.notifier.onError);
-
-        try
-        {
-            let res = await server.secret.GetValue(this.state.secret_id);
-            if (decode)
-                return await this.props.encryption?.decryptor?.(res) ?? res;
-            return res;
-        }
-        catch (error)
-        {
-            return null;
-        }
-    }
-    setDisabled(disabled: boolean): void
-    {
-        this.NSBoxString_Main.current?.setDisabled(disabled);
-    }
-    onChanged(box: NSBoxSensitive | NSBoxString)
-    {
-        let value = box.getValue(false);
-        this.setState({ value });
-        this.props.onChanged?.(this);
-    }
-    getCurrentBox()
-    {
-        if (this.isSensitive())
-            return this.NSBoxSensitive_Main.current
-        return this.NSBoxString_Main.current
-    }
-
-    override render()
-    {
-        let input_style: React.CSSProperties = {};
-        let placeholder = undefined;
-        if (this.state.secret_id && !this.state.value)
-        {
-            input_style.backgroundColor = "#00000030";
-            input_style.textAlign = "center";
-            placeholder = this.state.secret_id;
-        }
-        let secret_enabled = this.state.secret_id && !this.state.value;
-        let menu = safeMenuMenuItem(this.props, (items) =>
-        {
-            if (secret_enabled && !this.state.is_loading)
-                if (this.isSensitive())
-                    items.push({
-                        title: "Load From Secret",
-                        icon: "https://static.namirasoft.com/image/namirasoft/secret/logo/base.png",
-                        onClick: async () =>
-                        {
-                            this.setState({ is_loading: true });
-                            let res = await this.getSecretValue();
-                            this.setState({ is_loading: false });
-                            if (res)
-                                this.NSBoxSensitive_Main.current?.setValue(res);
-                        }
-                    });
-        });
-
-        return (
-            <NSColumn style={{ width: "auto", gap: "0.5rem" }}>
-                {
-                    this.isSensitive()
-                        ?
-                        <NSBoxSensitive
-                            ref={this.NSBoxSensitive_Main}
-                            {...this.props}
-                            defaultValue={this.state.value ?? ""}
-                            onChanged={this.onChanged}
-                            onClicked={() => this.props.onClicked?.(this)}
-                            placeholder={placeholder}
-                            input={{ style: input_style }}
-                            menu={{
-                                ...menu,
-                                builtin: {
-                                    ...menu.builtin,
-                                    show_hide_password: {
-                                        enabled: !secret_enabled
-                                    }
-                                }
-                            }}
-                        />
-                        :
-                        <NSBoxString
-                            {...this.props}
-                            ref={this.NSBoxString_Main}
-                            defaultValue={this.state.value ?? ""}
-                            onChanged={this.onChanged}
-                        />
-                }
-                <div className="d-flex gap-2">
-                    {
-                        this.state.is_loading &&
-                        <div className="spinner-border spinner-border-sm text-primary"></div>
-                    }
-                    {
-                        this.props.sensitive_enabled &&
-                        <NSBoxBoolean
-                            ref={this.NSBoxBoolean_Sensitive}
-                            title="Sensitive"
-                            required={false}
-                            hideHeader
-                            onChanged={async (box) =>
-                            {
-                                await this.handleSensitiveChange(box.getValue() ?? false);
-                            }}
-                            classList={[Styles.ns_checkbox, this.state.is_loading ? Styles.disabled : ""]}
-                        />
-                    }
-                </div>
-            </NSColumn>
-        );
-    }
+import { BaseUUID, EnvService } from "namirasoft-core";
+import { NamirasoftSecretMetaDatabase, NamirasoftSecretServer } from "namirasoft-secret";
+import { IBaseComponentProps, INSBox, INSBoxBaseLayoutProps, IValidationProps, IValidationStringProps, NSBoxBoolean, NSBoxSensitive, NSBoxString, NSColumn, safeMenuMenuItem } from "namirasoft-site-react";
+import React, { createRef, HTMLInputAutoCompleteAttribute } from "react";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import Styles from "./NSABoxSecret.module.css";
+
+export interface NSABoxSecretProps extends IBaseComponentProps, IValidationProps, IValidationStringProps, NSARouterMakerResult, INSBoxBaseLayoutProps<NSABoxSecret | NSBoxString, string>
+{
+    input?: IBaseComponentProps;
+    auto_complete?: HTMLInputAutoCompleteAttribute | undefined;
+    sensitive_enabled?: boolean;
+    onSensitiveChange?: (sensitive: boolean) => void;
+    encryption?: {
+        encryptor: (value: string) => Promise<string>;
+        decryptor: (value: string) => Promise<string>;
+    }
+}
+interface NSABoxSecretState
+{
+    secret_id: string | null;
+    value: string | null;
+    is_sensitive: boolean;
+    is_loading: boolean;
+}
+
+export class NSABoxSecret extends React.Component<NSABoxSecretProps, NSABoxSecretState> implements INSBox
+{
+    private NSBoxSensitive_Main = createRef<NSBoxSensitive>();
+    private NSBoxString_Main = createRef<NSBoxString>();
+    private NSBoxBoolean_Sensitive = createRef<NSBoxBoolean>();
+
+    constructor(props: NSABoxSecretProps)
+    {
+        super(props);
+        this.state = {
+            secret_id: null,
+            value: null,
+            is_sensitive: true,
+            is_loading: false,
+        };
+        this.isEmpty = this.isEmpty.bind(this);
+        this.getError = this.getError.bind(this);
+        this.isSensitive = this.isSensitive.bind(this);
+        this.setSensitive = this.setSensitive.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.getEncryptedValue = this.getEncryptedValue.bind(this);
+        this.setEncryptedValue = this.setEncryptedValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+    }
+
+    isEmpty(value: string)
+    {
+        return this.getCurrentBox()?.isEmpty(value) ?? true;
+    }
+    getError(): string | null
+    {
+        if (this.isSensitive() && this.state.secret_id && !this.state.value)
+            return null;
+        return this.getCurrentBox()?.getError() ?? null;
+    }
+    isSensitive(): boolean
+    {
+        return this.NSBoxBoolean_Sensitive.current?.getValueNull() ?? this.state.is_sensitive;
+    }
+    async setSensitive(value: boolean, callback?: (() => void))
+    {
+        await this.handleSensitiveChange(value);
+        this.NSBoxBoolean_Sensitive.current?.setValue(value, callback);
+    }
+    private async handleSensitiveChange(enabled: boolean)
+    {
+        if (!enabled && this.state.secret_id && !this.state.value)
+        {
+            this.setState({ is_loading: true });
+            const value = await this.getSecretValue();
+            this.setState(
+                () => ({ value, secret_id: null, is_loading: false, is_sensitive: false }),
+                () =>
+                {
+                    this.NSBoxString_Main.current?.setValue(value);
+                    this.props.onSensitiveChange?.(false);
+                }
+            );
+            return;
+        }
+        this.setState({ is_sensitive: enabled }, () => this.props.onSensitiveChange?.(enabled));
+    }
+    getValue(checkError: boolean = true): string | null
+    {
+        if (this.isSensitive() && this.state.secret_id && !this.state.value)
+            return "";
+        return this.getCurrentBox()?.getValue(checkError) ?? null;
+    }
+    setValue(value: string | null, callback?: () => void): void
+    {
+        if (!this.isSensitive())
+            this.NSBoxString_Main.current?.setValue(value, callback);
+        else
+        {
+            let meta = new NamirasoftSecretMetaDatabase();
+            let short = meta.tables.secret.uuid.short;
+            if (BaseUUID.isValidShort(value ?? "", short))
+                this.setState({ secret_id: value, value: null });
+            else
+            {
+                this.setState({ secret_id: null, value });
+                this.NSBoxSensitive_Main.current?.setValue(value, callback);
+            }
+        }
+    }
+    async getEncryptedValue(checkError: boolean = true): Promise<string | null>
+    {
+        let value = this.getValue(checkError);
+
+        if (!this.isSensitive())
+            return value;
+
+        if (!value)
+            if (this.state.secret_id)
+                return await this.getSecretValue(false);
+            else
+                return value;
+
+        return await this.props.encryption?.encryptor(value) ?? value;
+    }
+    async setEncryptedValue(value: string | null, callback?: () => void)
+    {
+        if (!this.isSensitive())
+            this.setValue(value, callback);
+        else
+        {
+            if (value)
+            {
+                let encrypted_value = await this.props.encryption?.decryptor(value) ?? value;
+                this.setValue(encrypted_value, callback);
+            }
+            else
+            {
+                this.setValue(value, callback);
+            }
+        }
+    }
+    async getSecretValue(decode: boolean = true)
+    {
+        if (!this.state.secret_id)
+            return null;
+
+        let REACT_APP_BASE_URL_SECRET = new EnvService("REACT_APP_BASE_URL_SECRET", true).getString();
+        let server = new NamirasoftSecretServer(REACT_APP_BASE_URL_SECRET, this.props.account.token_manager, this.props.notifier.onError);
+
+        try
+        {
+            let res = await server.secret.GetValue(this.state.secret_id);
+            if (decode)
+                return await this.props.encryption?.decryptor?.(res) ?? res;
+            return res;
+        }
+        catch (error)
+        {
+            return null;
+        }
+    }
+    setDisabled(disabled: boolean): void
+    {
+        this.NSBoxString_Main.current?.setDisabled(disabled);
+    }
+    onChanged(box: NSBoxSensitive | NSBoxString)
+    {
+        let value = box.getValue(false);
+        this.setState({ value });
+        this.props.onChanged?.(this);
+    }
+    getCurrentBox()
+    {
+        if (this.isSensitive())
+            return this.NSBoxSensitive_Main.current
+        return this.NSBoxString_Main.current
+    }
+
+    override render()
+    {
+        let input_style: React.CSSProperties = {};
+        let placeholder = undefined;
+        if (this.state.secret_id && !this.state.value)
+        {
+            input_style.backgroundColor = "#00000030";
+            input_style.textAlign = "center";
+            placeholder = this.state.secret_id;
+        }
+        let secret_enabled = this.state.secret_id && !this.state.value;
+        let menu = safeMenuMenuItem(this.props, (items) =>
+        {
+            if (secret_enabled && !this.state.is_loading)
+                if (this.isSensitive())
+                    items.push({
+                        title: "Load From Secret",
+                        icon: "https://static.namirasoft.com/image/namirasoft/secret/logo/base.png",
+                        onClick: async () =>
+                        {
+                            this.setState({ is_loading: true });
+                            let res = await this.getSecretValue();
+                            this.setState({ is_loading: false });
+                            if (res)
+                                this.NSBoxSensitive_Main.current?.setValue(res);
+                        }
+                    });
+        });
+
+        return (
+            <NSColumn style={{ width: "auto", gap: "0.5rem" }}>
+                {
+                    this.isSensitive()
+                        ?
+                        <NSBoxSensitive
+                            ref={this.NSBoxSensitive_Main}
+                            {...this.props}
+                            defaultValue={this.state.value ?? ""}
+                            onChanged={this.onChanged}
+                            onClicked={() => this.props.onClicked?.(this)}
+                            placeholder={placeholder}
+                            input={{ style: input_style }}
+                            menu={{
+                                ...menu,
+                                builtin: {
+                                    ...menu.builtin,
+                                    show_hide_password: {
+                                        enabled: !secret_enabled
+                                    }
+                                }
+                            }}
+                        />
+                        :
+                        <NSBoxString
+                            {...this.props}
+                            ref={this.NSBoxString_Main}
+                            defaultValue={this.state.value ?? ""}
+                            onChanged={this.onChanged}
+                        />
+                }
+                <div className="d-flex gap-2">
+                    {
+                        this.state.is_loading &&
+                        <div className="spinner-border spinner-border-sm text-primary"></div>
+                    }
+                    {
+                        this.props.sensitive_enabled &&
+                        <NSBoxBoolean
+                            ref={this.NSBoxBoolean_Sensitive}
+                            title="Sensitive"
+                            required={false}
+                            hideHeader
+                            onChanged={async (box) =>
+                            {
+                                await this.handleSensitiveChange(box.getValue() ?? false);
+                            }}
+                            classList={[Styles.ns_checkbox, this.state.is_loading ? Styles.disabled : ""]}
+                        />
+                    }
+                </div>
+            </NSColumn>
+        );
+    }
 }