namirasoft-account-react 1.5.37 → 1.5.39

package/src/pages/NSAHomePage.tsx

@@ -1,114 +1,114 @@
-import { ProductFullRow } from 'namirasoft-api-product';
-import { SetTimeouService } from 'namirasoft-core';
-import { IBaseComponentProps, NSBox, NSBoxSearch, NSLine, NSListProduct, NSListProductCardProps, NSLoading, NSSpace, NSSpaceSizeType, NSTitle, ProductCacheService } from 'namirasoft-site-react';
-import { ReactNode, useEffect, useState } from 'react';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import Styles from './NSAHomePage.module.css';
-
-export interface NSAHomePageProps extends IBaseComponentProps, NSARouterMakerResult
-{
-    custom?: {
-        scope?: string;
-        headline?: string;
-        logo?: string;
-        description?: string;
-    };
-    show_image?: boolean;
-    getChildren?: {
-        getChildrenBeforeTitle?: () => ReactNode;
-        getChildrenAfterTitle?: () => ReactNode;
-    };
-    product?: {
-        search?: boolean;
-        getChildrenBefore?: () => NSListProductCardProps[];
-        getChildrenAfter?: () => NSListProductCardProps[];
-    }
-}
-
-export interface NSAHomePageState
-{
-    product: ProductFullRow | null;
-    search_text?: string;
-}
-
-export function NSAHomePage(props: NSAHomePageProps)
-{
-    let cache = ProductCacheService.get(props.product_id, props.notifier.onError);
-    let [state, setState] = useState<NSAHomePageState>({ product: null });
-
-    useEffect(() =>
-    {
-        cache.get().then(product =>
-        {
-            setState({ product });
-        });
-        // eslint-disable-next-line
-    }, []);
-
-    if (!state.product)
-        return <NSLoading title="Loading Namirasoft Product ..." />;
-
-    let scope = props.custom?.scope ?? `${state.product.name} Console`;
-    let headline = props.custom?.headline ?? state.product.headline ?? "";
-    let logo = props.custom?.logo ?? state.product.logo ?? "";
-    let description = props.custom?.description ?? state.product.description ?? "";
-
-    return (
-        <div className={Styles.nsa_home_container}>
-            {
-                props.show_image &&
-                <img
-                    src={logo}
-                    alt={state.product.name}
-                    width={256}
-                    height={256}
-                />
-            }
-
-            {props.getChildren?.getChildrenBeforeTitle?.()}
-
-            <NSSpace size={NSSpaceSizeType.MICRO} />
-            <h2>{headline}</h2>
-            <NSSpace size={NSSpaceSizeType.MICRO} />
-            <p>{description}</p>
-            <NSSpace size={NSSpaceSizeType.SMALL} />
-
-            {props.getChildren?.getChildrenAfterTitle?.()}
-
-            <NSSpace size={NSSpaceSizeType.NORMAL} />
-            <NSLine />
-            <NSSpace size={NSSpaceSizeType.SMALL} />
-
-            <NSTitle title="Related Products" style={{ fontSize: 32, marginBottom: props.product?.search ? 16 : 32 }} />
-            {
-                props.product?.search &&
-                <>
-                    <NSBoxSearch
-                        title=""
-                        required={false}
-                        hideHeader
-                        placeholder="Search products . . ."
-                        classList={[Styles.nsa_home_search_wrapper]}
-                        style={{ width: NSBox.width.double }}
-                        input={{ classList: [Styles.nsa_home_search_box] }}
-                        onChanged={(box) =>
-                        {
-                            new SetTimeouService().setTimeoutIfNotCalledAgain(() =>
-                            {
-                                setState((prev) => ({ ...prev, search_text: box.getValue() ?? "" }));
-                            }, 1500);
-                        }}
-                    />
-                    <NSSpace size={NSSpaceSizeType.SMALL} />
-                </>
-            }
-            <NSListProduct
-                scope={scope}
-                name="Home"
-                search={state.search_text}
-                getChildrenBefore={props.product?.getChildrenBefore}
-                getChildrenAfter={props.product?.getChildrenAfter}
-            />
-        </div>
-    );
+import { ProductFullRow } from 'namirasoft-api-product';
+import { SetTimeouService } from 'namirasoft-core';
+import { IBaseComponentProps, NSBox, NSBoxSearch, NSLine, NSListProduct, NSListProductCardProps, NSLoading, NSSpace, NSSpaceSizeType, NSTitle, ProductCacheService } from 'namirasoft-site-react';
+import { ReactNode, useEffect, useState } from 'react';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import Styles from './NSAHomePage.module.css';
+
+export interface NSAHomePageProps extends IBaseComponentProps, NSARouterMakerResult
+{
+    custom?: {
+        scope?: string;
+        headline?: string;
+        logo?: string;
+        description?: string;
+    };
+    show_image?: boolean;
+    getChildren?: {
+        getChildrenBeforeTitle?: () => ReactNode;
+        getChildrenAfterTitle?: () => ReactNode;
+    };
+    product?: {
+        search?: boolean;
+        getChildrenBefore?: () => NSListProductCardProps[];
+        getChildrenAfter?: () => NSListProductCardProps[];
+    }
+}
+
+export interface NSAHomePageState
+{
+    product: ProductFullRow | null;
+    search_text?: string;
+}
+
+export function NSAHomePage(props: NSAHomePageProps)
+{
+    let cache = ProductCacheService.get(props.product_id, props.notifier.onError);
+    let [state, setState] = useState<NSAHomePageState>({ product: null });
+
+    useEffect(() =>
+    {
+        cache.get().then(product =>
+        {
+            setState({ product });
+        });
+        // eslint-disable-next-line
+    }, []);
+
+    if (!state.product)
+        return <NSLoading title="Loading Namirasoft Product ..." />;
+
+    let scope = props.custom?.scope ?? `${state.product.name} Console`;
+    let headline = props.custom?.headline ?? state.product.headline ?? "";
+    let logo = props.custom?.logo ?? state.product.logo ?? "";
+    let description = props.custom?.description ?? state.product.description ?? "";
+
+    return (
+        <div className={Styles.nsa_home_container}>
+            {
+                props.show_image &&
+                <img
+                    src={logo}
+                    alt={state.product.name}
+                    width={256}
+                    height={256}
+                />
+            }
+
+            {props.getChildren?.getChildrenBeforeTitle?.()}
+
+            <NSSpace size={NSSpaceSizeType.MICRO} />
+            <h2>{headline}</h2>
+            <NSSpace size={NSSpaceSizeType.MICRO} />
+            <p>{description}</p>
+            <NSSpace size={NSSpaceSizeType.SMALL} />
+
+            {props.getChildren?.getChildrenAfterTitle?.()}
+
+            <NSSpace size={NSSpaceSizeType.NORMAL} />
+            <NSLine />
+            <NSSpace size={NSSpaceSizeType.SMALL} />
+
+            <NSTitle title="Related Products" style={{ fontSize: 32, marginBottom: props.product?.search ? 16 : 32 }} />
+            {
+                props.product?.search &&
+                <>
+                    <NSBoxSearch
+                        title=""
+                        required={false}
+                        hideHeader
+                        placeholder="Search products . . ."
+                        classList={[Styles.nsa_home_search_wrapper]}
+                        style={{ width: NSBox.width.double }}
+                        input={{ classList: [Styles.nsa_home_search_box] }}
+                        onChanged={(box) =>
+                        {
+                            new SetTimeouService().setTimeoutIfNotCalledAgain(() =>
+                            {
+                                setState((prev) => ({ ...prev, search_text: box.getValue() ?? "" }));
+                            }, 1500);
+                        }}
+                    />
+                    <NSSpace size={NSSpaceSizeType.SMALL} />
+                </>
+            }
+            <NSListProduct
+                scope={scope}
+                name="Home"
+                search={state.search_text}
+                getChildrenBefore={props.product?.getChildrenBefore}
+                getChildrenAfter={props.product?.getChildrenAfter}
+            />
+        </div>
+    );
 }

package/src/pages/NSALoginPage.module.css

@@ -1,27 +1,27 @@
-.nsa_login_page_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-}
-
-.nsa_login_page_logo {
-	text-align: center;
-}
-
-.nsa_login_page_title {
-	font-size: 32px;
-	font-weight: 700;
-	text-align: center;
-}
-
-.nsa_login_page_button {
-	text-align: center;
-}
-
-.nsa_login_page_version {
-	position: fixed;
-	left: 16px;
-	bottom: 16px;
+.nsa_login_page_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+}
+
+.nsa_login_page_logo {
+	text-align: center;
+}
+
+.nsa_login_page_title {
+	font-size: 32px;
+	font-weight: 700;
+	text-align: center;
+}
+
+.nsa_login_page_button {
+	text-align: center;
+}
+
+.nsa_login_page_version {
+	position: fixed;
+	left: 16px;
+	bottom: 16px;
 }

package/src/pages/NSALoginPage.tsx

@@ -1,88 +1,88 @@
-import { useEffect, useState } from 'react';
-import { EnvService, PackageService } from 'namirasoft-core';
-import { NSSpace, NSSpaceSizeType, NSButtonBlue, IBackgroundProps, NSLoading, ProductCacheService } from 'namirasoft-site-react';
-import Styles from './NSALoginPage.module.css';
-import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { ProductFullRow } from 'namirasoft-api-product';
-
-export interface NSALoginPageProps
-{
-	product_id: string;
-	custom?: {
-		name?: string;
-		logo?: string;
-		background?: IBackgroundProps;
-	};
-	children?: React.JSX.Element;
-}
-export interface NSALoginPageState
-{
-	product: ProductFullRow | null;
-}
-
-let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
-let client = new NamirasoftAccountClient(REACT_APP_BASE_URL_ACCOUNT_CONSOLE);
-
-export function NSALoginPage(props: NSALoginPageProps) 
-{
-	let cache = ProductCacheService.get(props.product_id, console.error);
-	let [state, setState] = useState<NSALoginPageState>({ product: null });
-
-	useEffect(() =>
-	{
-		cache.get().then(product =>
-		{
-			setState({ product });
-		})
-
-		client.onLoggedin = () => { window.location.reload(); };
-		client.onLoggedout = () => { window.location.reload(); };
-
-		client.start();
-
-		return () => { client.stop(); };
-
-		// eslint-disable-next-line 
-	}, []);
-
-	if (!state.product)
-		return <NSLoading title="Loading Namirasoft Product ..." />;
-
-	let name = props.custom?.name ?? state.product.name ?? "";
-	let logo = props.custom?.logo ?? state.product.logo ?? "";
-	let background = props.custom?.background ?? state.product.background;
-
-	return (
-		<div
-			style={{
-				width: '100%',
-				background: background ? `url(${background})` : "",
-				backgroundSize: props.custom?.background?.size ?? "cover",
-				backgroundAttachment: props.custom?.background?.attachment ?? "fixed"
-			}}
-		>
-			<div className={`container ${Styles.nsa_login_page_container}`}>
-				<div className={Styles.nsa_login_page_logo}>
-					<img width={256} height={256} src={logo} alt={`${name} Logo`} />
-				</div>
-				<NSSpace size={NSSpaceSizeType.SMALL} />
-				<div>
-					<h1 className={Styles.nsa_login_page_title}>{name}</h1>
-				</div>
-				<NSSpace size={NSSpaceSizeType.LARGE} />
-				<NSButtonBlue
-					title="Login"
-					onClick={{
-						action: () =>
-						{
-							client.login();
-						},
-						showLoading: false
-					}}
-				/>
-				{props.children}
-			</div>
-			<span className={Styles.nsa_login_page_version}>Version: {PackageService.MainJson?.version}</span>
-		</div>
-	);
+import { useEffect, useState } from 'react';
+import { EnvService, PackageService } from 'namirasoft-core';
+import { NSSpace, NSSpaceSizeType, NSButtonBlue, IBackgroundProps, NSLoading, ProductCacheService } from 'namirasoft-site-react';
+import Styles from './NSALoginPage.module.css';
+import { NamirasoftAccountClient } from 'namirasoft-account-client';
+import { ProductFullRow } from 'namirasoft-api-product';
+
+export interface NSALoginPageProps
+{
+	product_id: string;
+	custom?: {
+		name?: string;
+		logo?: string;
+		background?: IBackgroundProps;
+	};
+	children?: React.JSX.Element;
+}
+export interface NSALoginPageState
+{
+	product: ProductFullRow | null;
+}
+
+let REACT_APP_BASE_URL_ACCOUNT_CONSOLE = new EnvService("REACT_APP_BASE_URL_ACCOUNT_CONSOLE").getString();
+let client = new NamirasoftAccountClient(REACT_APP_BASE_URL_ACCOUNT_CONSOLE);
+
+export function NSALoginPage(props: NSALoginPageProps) 
+{
+	let cache = ProductCacheService.get(props.product_id, console.error);
+	let [state, setState] = useState<NSALoginPageState>({ product: null });
+
+	useEffect(() =>
+	{
+		cache.get().then(product =>
+		{
+			setState({ product });
+		})
+
+		client.onLoggedin = () => { window.location.reload(); };
+		client.onLoggedout = () => { window.location.reload(); };
+
+		client.start();
+
+		return () => { client.stop(); };
+
+		// eslint-disable-next-line 
+	}, []);
+
+	if (!state.product)
+		return <NSLoading title="Loading Namirasoft Product ..." />;
+
+	let name = props.custom?.name ?? state.product.name ?? "";
+	let logo = props.custom?.logo ?? state.product.logo ?? "";
+	let background = props.custom?.background ?? state.product.background;
+
+	return (
+		<div
+			style={{
+				width: '100%',
+				background: background ? `url(${background})` : "",
+				backgroundSize: props.custom?.background?.size ?? "cover",
+				backgroundAttachment: props.custom?.background?.attachment ?? "fixed"
+			}}
+		>
+			<div className={`container ${Styles.nsa_login_page_container}`}>
+				<div className={Styles.nsa_login_page_logo}>
+					<img width={256} height={256} src={logo} alt={`${name} Logo`} />
+				</div>
+				<NSSpace size={NSSpaceSizeType.SMALL} />
+				<div>
+					<h1 className={Styles.nsa_login_page_title}>{name}</h1>
+				</div>
+				<NSSpace size={NSSpaceSizeType.LARGE} />
+				<NSButtonBlue
+					title="Login"
+					onClick={{
+						action: () =>
+						{
+							client.login();
+						},
+						showLoading: false
+					}}
+				/>
+				{props.children}
+			</div>
+			<span className={Styles.nsa_login_page_version}>Version: {PackageService.MainJson?.version}</span>
+		</div>
+	);
 }

package/src/pages/NSAPhoneVerificationPage.tsx

@@ -1,95 +1,107 @@
-import { NSDialogBoxPhone } from "namirasoft-site-react";
-import { useEffect, useState } from "react";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-import { NSAVerificationPage } from "./NSAVerificationPage";
-
-interface NSAPhoneVerificationPageProps extends NSARouterMakerResult
-{
-    callback: string;
-}
-
-interface NSAPhoneVerificationPageState
-{
-    show_dialog: boolean;
-}
-
-export function NSAPhoneVerificationPage(props: NSAPhoneVerificationPageProps) 
-{
-    const [state, setState] = useState<NSAPhoneVerificationPageState>({ show_dialog: false });
-
-    let is_phone_exist = !!props.account.token_manager.get()?.user?.phone;
-
-    useEffect(() =>
-    {
-        if (is_phone_exist)
-            return;
-
-        props.notifier.onWarning("Please enter your phone number before verifying.");
-        let timer = setTimeout(() => setDialog(true), 2500);
-
-        return () =>
-        {
-            clearTimeout(timer);
-        };
-        // eslint-disable-next-line
-    }, []);
-
-    const setDialog = (show: boolean) => 
-    {
-        setState((prev) => ({ ...prev, show_dialog: show }));
-    };
-
-    return (
-        <>
-            <NSAVerificationPage
-                {...props}
-                contact_type="SMS"
-                contact_value_name="Phone Number"
-                getContactValue={() => props.account.token_manager.get()?.user?.phone || ""}
-                onRequest={async () =>
-                {
-                    await props.account.server.phone.Request();
-                }}
-                onVerify={async (code) =>
-                {
-                    await props.account.server.phone.Verify({ code });
-                }}
-                onChange={() => setDialog(true)}
-                onFinished={() => props.url.redirect(props.callback, {})}
-            />
-            {
-                state.show_dialog &&
-                <NSDialogBoxPhone
-                    box={{
-                        required: true,
-                        title: "Phone Number",
-                        defaultValue: props.account.token_manager.get()?.user?.phone ?? ""
-                    }}
-                    closeButton={{ show: is_phone_exist }}
-                    onClose={() => is_phone_exist ? setDialog(false) : undefined}
-                    button={{
-                        title: "Apply",
-                        onClick: {
-                            action: async (onFinished, box) =>
-                            {
-                                try
-                                {
-                                    await props.account.server.phone.Set({ phone: box?.getValue() ?? "" });
-                                    props.notifier.onSuccess("Your phone number has been added successfully.");
-                                    setDialog(false);
-                                } catch (error)
-                                {
-                                    props.notifier.onError(error as Error);
-                                    onFinished();
-                                }
-                            }
-                        }
-                    }}
-
-                >
-                    <></>
-                </NSDialogBoxPhone >
-            }
-        </>
-    );
+import { NSDialogBoxPhone } from "namirasoft-site-react";
+import { useEffect, useState } from "react";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+import { NSAVerificationPage } from "./NSAVerificationPage";
+
+interface NSAPhoneVerificationPageProps extends NSARouterMakerResult
+{
+    callback: string;
+}
+
+interface NSAPhoneVerificationPageState
+{
+    show_dialog: boolean;
+}
+
+export function NSAPhoneVerificationPage(props: NSAPhoneVerificationPageProps) 
+{
+    const [state, setState] = useState<NSAPhoneVerificationPageState>({ show_dialog: false });
+
+    let is_phone_exist = !!props.account.token_manager.get()?.user?.phone;
+
+    useEffect(() =>
+    {
+        if (is_phone_exist)
+            return;
+
+        props.notifier.onWarning("Please enter your phone number before verifying.");
+        let timer = setTimeout(() => setDialog(true), 2500);
+
+        return () =>
+        {
+            clearTimeout(timer);
+        };
+        // eslint-disable-next-line
+    }, []);
+
+    const setDialog = (show: boolean) => 
+    {
+        setState((prev) => ({ ...prev, show_dialog: show }));
+    };
+
+    return (
+        <>
+            <NSAVerificationPage
+                {...props}
+                contact_type="SMS"
+                contact_value_name="Phone Number"
+                getContactValue={() => props.account.token_manager.get()?.user?.phone || ""}
+                onRequest={async () =>
+                {
+                    await props.account.server.phone.Request();
+                }}
+                onVerify={async (code) =>
+                {
+                    await props.account.server.phone.Verify({ code });
+                }}
+                onChange={() => setDialog(true)}
+                onFinished={() => props.url.redirect(props.callback, {})}
+            />
+            {
+                state.show_dialog &&
+                <NSDialogBoxPhone
+                    box={{
+                        required: true,
+                        title: "Phone Number",
+                        defaultValue: props.account.token_manager.get()?.user?.phone ?? ""
+                    }}
+                    closeButton={{ show: is_phone_exist }}
+                    onClose={() => is_phone_exist ? setDialog(false) : undefined}
+                    button={{
+                        title: "Apply",
+                        onClick: {
+                            action: async (onFinished, box) =>
+                            {
+                                let phone: string;
+                                try
+                                {
+                                    phone = box?.getValue() ?? "";
+                                } catch (error)
+                                {
+                                    // Input validation errors are not reported by the server, so notify here.
+                                    props.notifier.onError(error as Error);
+                                    onFinished();
+                                    return;
+                                }
+
+                                try
+                                {
+                                    await props.account.server.phone.Set({ phone });
+                                    props.notifier.onSuccess("Your phone number has been added successfully.");
+                                    setDialog(false);
+                                } catch
+                                {
+                                    // The server already reported the error through the notifier.
+                                    onFinished();
+                                }
+                            }
+                        }
+                    }}
+
+                >
+                    <></>
+                </NSDialogBoxPhone >
+            }
+        </>
+    );
 };