namirasoft-account-react 1.4.433 → 1.4.435

package/src/Router.tsx

@@ -1,46 +1,46 @@
-import { NSARouterMaker } from './NSARouterMaker';
-import { NSARouterMakerProps } from './NSARouterMakerProps';
-import { Routes, Route, useNavigate } from 'react-router-dom';
-import { NSNotFoundPage } from 'namirasoft-site-react';
-import { App } from './App';
-import { IStorageSession } from 'namirasoft-core';
-import { useState } from 'react';
-import { ProductUUID } from 'namirasoft-api-product';
-
-export default function Router()
-{
-    let [state, setState] = useState<number>(Math.random());
-
-    let navigate = useNavigate();
-
-    let maker = new NSARouterMaker(ProductUUID.NAMIRASOFT_INFRA, new IStorageSession(), () => { setState(state + Math.random()); }, {
-        onRenderOnLogin: (props: NSARouterMakerProps) =>
-        {
-            return (
-                <Routes>
-                    <Route path="/:id/view" element={<App {...props}></App>} />
-                    <Route path="*" element={<App {...props}></App>} />
-                </Routes>
-            );
-        },
-        onRenderOnLogout: (_: NSARouterMakerProps, __: boolean) =>
-        {
-            return (
-                <Routes>
-                    <Route path="*" element={<NSNotFoundPage></NSNotFoundPage>} />
-                </Routes>
-            );
-        },
-        renderOnNSALayout: (_, children) =>
-        {
-            return children;
-        },
-        requirement: {
-            verification: {
-                email: true,
-                phone: true
-            }
-        }
-    }, navigate);
-    return maker.onRender();
+import { NSARouterMaker } from './NSARouterMaker';
+import { NSARouterMakerProps } from './NSARouterMakerProps';
+import { Routes, Route, useNavigate } from 'react-router-dom';
+import { NSNotFoundPage } from 'namirasoft-site-react';
+import { App } from './App';
+import { IStorageSession } from 'namirasoft-core';
+import { useState } from 'react';
+import { ProductUUID } from 'namirasoft-api-product';
+
+export default function Router()
+{
+    let [state, setState] = useState<number>(Math.random());
+
+    let navigate = useNavigate();
+
+    let maker = new NSARouterMaker(ProductUUID.NAMIRASOFT_INFRA, new IStorageSession(), () => { setState(state + Math.random()); }, {
+        onRenderOnLogin: (props: NSARouterMakerProps) =>
+        {
+            return (
+                <Routes>
+                    <Route path="/:id/view" element={<App {...props}></App>} />
+                    <Route path="*" element={<App {...props}></App>} />
+                </Routes>
+            );
+        },
+        onRenderOnLogout: (_: NSARouterMakerProps, __: boolean) =>
+        {
+            return (
+                <Routes>
+                    <Route path="*" element={<NSNotFoundPage></NSNotFoundPage>} />
+                </Routes>
+            );
+        },
+        renderOnNSALayout: (_, children) =>
+        {
+            return children;
+        },
+        requirement: {
+            verification: {
+                email: true,
+                phone: true
+            }
+        }
+    }, navigate);
+    return maker.onRender();
 }

package/src/UseParams.tsx

@@ -1,19 +1,19 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-
-export interface UseParamsProps
-{
-    onLoaded: (p: any) => void
-}
-
-export function UseParams(props: UseParamsProps) 
-{
-    let p = useParams();
-
-    useEffect(() =>
-    {
-        props.onLoaded(p);
-        // eslint-disable-next-line
-    }, [p]);
-    return <></>;
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+export interface UseParamsProps
+{
+    onLoaded: (p: any) => void
+}
+
+export function UseParams(props: UseParamsProps) 
+{
+    let p = useParams();
+
+    useEffect(() =>
+    {
+        props.onLoaded(p);
+        // eslint-disable-next-line
+    }, [p]);
+    return <></>;
 }

package/src/components/NSAAccessListDialog.module.css

@@ -1,72 +1,72 @@
-.nsa_access_list_dialog_container {
-	width: 302px;
-}
-
-.nsa_access_list_dialog_container p {
-	padding: 0;
-	margin: 0;
-}
-
-.nsa_access_list_dialog_item_id {
-	color: rgba(3, 119, 255, 1);
-	text-align: right;
-	font-weight: 600;
-	font-size: 16px;
-	cursor: pointer;
-	margin: 0;
-}
-
-.nsa_access_list_dialog_item_name {
-	color: rgba(20, 27, 92, 1);
-	font-weight: 600;
-	font-size: 16px;
-	text-align: left;
-	cursor: pointer;
-	margin: 0px;
-}
-
-.nsa_access_list_dialog_item_email {
-	color: rgba(20, 27, 92, 1);
-}
-
-.nsa_access_list_dialog_main_name {
-	color: rgba(20, 27, 92, 1);
-	font-weight: 600;
-	font-size: 24px;
-	text-align: center;
-	cursor: pointer;
-	margin: 0px;
-}
-
-.nsa_access_list_dialog_main_email {
-	color: rgba(20, 27, 92, 1);
-}
-
-.nsa_access_list_dialog_main_id {
-	color: rgba(3, 119, 255, 1);
-	text-align: center;
-	font-weight: 600;
-	font-size: 16px;
-	cursor: pointer;
-	margin: 0;
-}
-
-.nsa_access_list_dialog_users_container {
-	padding: 0px 16px 0px 16px;
-	display: flex;
-	cursor: pointer;
-	border: none;
-	background-color: rgba(224, 226, 235, 1);
-	border-radius: 8px;
-	align-items: center;
-	max-width: 100%;
-}
-
-.nsa_access_list_dialog_users_container:hover {
-	background-color: rgba(178, 187, 217, 1);
-	transition: all 0.3s ease-in-out;
-}
-
-.nsa_access_list_dialog_users_container img {
-	cursor: pointer;
+.nsa_access_list_dialog_container {
+	width: 302px;
+}
+
+.nsa_access_list_dialog_container p {
+	padding: 0;
+	margin: 0;
+}
+
+.nsa_access_list_dialog_item_id {
+	color: rgba(3, 119, 255, 1);
+	text-align: right;
+	font-weight: 600;
+	font-size: 16px;
+	cursor: pointer;
+	margin: 0;
+}
+
+.nsa_access_list_dialog_item_name {
+	color: rgba(20, 27, 92, 1);
+	font-weight: 600;
+	font-size: 16px;
+	text-align: left;
+	cursor: pointer;
+	margin: 0px;
+}
+
+.nsa_access_list_dialog_item_email {
+	color: rgba(20, 27, 92, 1);
+}
+
+.nsa_access_list_dialog_main_name {
+	color: rgba(20, 27, 92, 1);
+	font-weight: 600;
+	font-size: 24px;
+	text-align: center;
+	cursor: pointer;
+	margin: 0px;
+}
+
+.nsa_access_list_dialog_main_email {
+	color: rgba(20, 27, 92, 1);
+}
+
+.nsa_access_list_dialog_main_id {
+	color: rgba(3, 119, 255, 1);
+	text-align: center;
+	font-weight: 600;
+	font-size: 16px;
+	cursor: pointer;
+	margin: 0;
+}
+
+.nsa_access_list_dialog_users_container {
+	padding: 0px 16px 0px 16px;
+	display: flex;
+	cursor: pointer;
+	border: none;
+	background-color: rgba(224, 226, 235, 1);
+	border-radius: 8px;
+	align-items: center;
+	max-width: 100%;
+}
+
+.nsa_access_list_dialog_users_container:hover {
+	background-color: rgba(178, 187, 217, 1);
+	transition: all 0.3s ease-in-out;
+}
+
+.nsa_access_list_dialog_users_container img {
+	cursor: pointer;
 }

package/src/components/NSAAccessListDialog.tsx

@@ -1,179 +1,179 @@
-import React, { Component, createRef } from 'react';
-import { EnvService } from 'namirasoft-core'
-import { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
-import { NSLine, NSLoading, NSDialog, NSDialogProps, NSCopy, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import { NSARouterMakerProps } from '../NSARouterMakerProps';
-import Styles from './NSAAccessListDialog.module.css';
-
-export interface NSAAccessListDialogProps extends NSARouterMakerProps, NSDialogProps
-{
-	onClose: () => void;
-}
-
-export interface NSAAccessListDialogState
-{
-	permissions: PermissionRow[] | null;
-	current_id: string;
-}
-
-export class NSAAccessListDialog extends Component<NSAAccessListDialogProps, NSAAccessListDialogState>
-{
-	private toastRef: React.RefObject<HTMLDivElement>;
-
-	constructor(props: NSAAccessListDialogProps)
-	{
-		super(props);
-		this.state = { permissions: null, current_id: "" };
-		this.toastRef = createRef();
-		this.handleClickOutside = this.handleClickOutside.bind(this);
-	}
-	override componentDidMount(): void
-	{
-		document.addEventListener('mousedown', this.handleClickOutside);
-		let REACT_APP_BASE_URL_ACCESS = new EnvService("REACT_APP_BASE_URL_ACCESS", true).getString();
-		let server = new NamirasoftAccessServer(REACT_APP_BASE_URL_ACCESS, this.props.account.token_manager, this.props.notifier.onError);
-		server.permission.ListIncoming([], null, null, []).then(res =>
-		{
-			this.setState({ permissions: res.rows, current_id: res.current_id });
-		}).catch(() => { });
-	}
-	override componentWillUnmount(): void
-	{
-		document.removeEventListener('mousedown', this.handleClickOutside);
-	}
-	private handleClickOutside(event: MouseEvent)
-	{
-		if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
-			this.props.onClose();
-	}
-	override render()
-	{
-		let content = null;
-		if (this.state.permissions === null)
-			content = (
-				<NSLoading />
-			);
-		else
-		{
-			let user_id = this.props.account.token_manager.getUserData(u => u.id, "");
-			let first_name = this.props.account.token_manager.getUserData(u => u.first_name, "");
-			let last_name = this.props.account.token_manager.getUserData(u => u.last_name, "");
-			let email = this.props.account.token_manager.getUserData(u => u.email, "");
-			let me: PermissionRow = {
-				id: "",
-				user_id,
-				to_user_id: user_id,
-				from_first_name: first_name,
-				from_last_name: last_name,
-				from_email: email,
-				to_first_name: first_name,
-				to_last_name: last_name,
-				to_email: email,
-				created_at: new Date(),
-				updated_at: new Date()
-			};
-
-			let generate = (permission: PermissionRow, add_space: boolean = true) =>
-			{
-				return (
-					<>
-						<div
-							key={permission.id}
-							className={Styles.nsa_access_list_dialog_users_container}
-							onClick={() =>
-							{
-								let onChnaged = () =>
-								{
-									this.props.onClose();
-									this.props.notifier.onSuccess(`You have successfully switched to user '${(permission.from_first_name + " " + permission.from_last_name).trim()}'.`);
-									this.props.notifier.onSuccess(`Refreshing the page ...`, 2000);
-									setTimeout(() =>
-									{
-										window.location.reload();
-									}, 2000);
-								};
-								let REACT_APP_BASE_URL_ACCESS = new EnvService("REACT_APP_BASE_URL_ACCESS", true).getString();
-								let server = new NamirasoftAccessServer(REACT_APP_BASE_URL_ACCESS, this.props.account.token_manager, this.props.notifier.onError);
-								if (permission.id)
-									server.access.SetOwner({ owner_id: permission.user_id }).then(onChnaged).catch(() => { });
-								else
-									server.access.SetOwner({ owner_id: null }).then(onChnaged).catch(() => { });
-							}}
-						>
-							<div className='d-flex flex-column' style={{ padding: "8px 0px", width: "100%" }}>
-								<p className={Styles.nsa_access_list_dialog_item_name}>{`${permission.from_first_name} ${permission.from_last_name}`.trim()}</p>
-								<p className={Styles.nsa_access_list_dialog_item_email}>{permission.from_email}</p>
-								<div style={{ width: "100%", display: "flex", justifyContent: "left" }}>
-									<NSCopy id={current.user_id}
-										classList={["justify-content-center", "flex-row"]}
-									>
-										<p className={`text-center ${Styles.nsa_access_list_dialog_item_id}`} style={{ cursor: "pointer" }} >
-											{permission.user_id}
-										</p>
-									</NSCopy>
-								</div>
-							</div>
-						</div>
-						{add_space && <NSSpace size={NSSpaceSizeType.MINI} />}
-					</>
-				);
-			}
-
-			let permissions = [me, ...this.state.permissions];
-			let current = permissions.filter(p => p.id === this.state.current_id)[0] ?? me;
-			permissions = permissions.filter(p => p.id !== current.id);
-			let content_permission = permissions.map((item, index) => generate(item, index !== permissions.length - 1));
-			let content_profile = <>
-				<div
-					className=
-					'text-center d-flex flex-column justify-content-center align-items-center pb-2'
-				>
-					<img src={"https://static.namirasoft.com/image/namirasoft/access/logo/circle.png"} alt='No Profile' width={96} height={96} className='rounded-circle' style={{ cursor: "default", pointerEvents: "none" }} />
-					<p className="pb-2">You are working as:</p>
-					<div className='d-flex flex-column'>
-						<p className={Styles.nsa_access_list_dialog_main_name}>{`${current.from_first_name} ${current.from_last_name}`.trim()}</p>
-						<p className={Styles.nsa_access_list_dialog_main_email}>{current.from_email}</p>
-						<NSCopy
-							id={current.user_id}
-							classList={["justify-content-center", "flex-row"]}
-						>
-							<p className={`text-center ${Styles.nsa_access_list_dialog_main_id}`} style={{ cursor: "pointer" }} >
-								{current.user_id}
-							</p>
-						</NSCopy>
-					</div>
-				</div >
-			</>;
-			content = (
-				<>
-					<a className='text-left w-100' href='https://access.namirasoft.com/permission/incoming/list/' target="_blank" rel="noopener noreferrer">
-						<span className='d-flex justify-content-left'>Manage Accesss</span>
-					</a>
-					<section className={Styles.nsa_access_list_dialog_container} >
-						{content_profile}
-						<NSSpace size={NSSpaceSizeType.SMALL} />
-						<NSLine />
-						<NSSpace size={NSSpaceSizeType.SMALL} />
-						{
-							content_permission.length === 0 &&
-							<p>There is no <strong>Incoming Permission</strong>.<br />If you would like to get access to other user's account and act on their behalf, you must request them to grant you <strong>Outgoing Permission</strong> using <a href='https://access.namirasoft.com/permission/outgoing/list' target='_blank' rel="noreferrer">Namirasoft Access</a> from their account.</p>
-						}
-						{
-							content_permission.length > 0 &&
-							<>
-								<p>Switch user as:</p>
-								<NSSpace size={NSSpaceSizeType.MINI}></NSSpace>
-								{content_permission}
-							</>
-						}
-					</section>
-				</>
-			);
-		}
-		return (
-			<NSDialog {...this.props}>
-				{content}
-			</NSDialog>
-		);
-	}
+import React, { Component, createRef } from 'react';
+import { EnvService } from 'namirasoft-core'
+import { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
+import { NSLine, NSLoading, NSDialog, NSDialogProps, NSCopy, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { NSARouterMakerProps } from '../NSARouterMakerProps';
+import Styles from './NSAAccessListDialog.module.css';
+
+export interface NSAAccessListDialogProps extends NSARouterMakerProps, NSDialogProps
+{
+	onClose: () => void;
+}
+
+export interface NSAAccessListDialogState
+{
+	permissions: PermissionRow[] | null;
+	current_id: string;
+}
+
+export class NSAAccessListDialog extends Component<NSAAccessListDialogProps, NSAAccessListDialogState>
+{
+	private toastRef: React.RefObject<HTMLDivElement>;
+
+	constructor(props: NSAAccessListDialogProps)
+	{
+		super(props);
+		this.state = { permissions: null, current_id: "" };
+		this.toastRef = createRef();
+		this.handleClickOutside = this.handleClickOutside.bind(this);
+	}
+	override componentDidMount(): void
+	{
+		document.addEventListener('mousedown', this.handleClickOutside);
+		let REACT_APP_BASE_URL_ACCESS = new EnvService("REACT_APP_BASE_URL_ACCESS", true).getString();
+		let server = new NamirasoftAccessServer(REACT_APP_BASE_URL_ACCESS, this.props.account.token_manager, this.props.notifier.onError);
+		server.permission.ListIncoming([], null, null, []).then(res =>
+		{
+			this.setState({ permissions: res.rows, current_id: res.current_id });
+		}).catch(() => { });
+	}
+	override componentWillUnmount(): void
+	{
+		document.removeEventListener('mousedown', this.handleClickOutside);
+	}
+	private handleClickOutside(event: MouseEvent)
+	{
+		if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+			this.props.onClose();
+	}
+	override render()
+	{
+		let content = null;
+		if (this.state.permissions === null)
+			content = (
+				<NSLoading />
+			);
+		else
+		{
+			let user_id = this.props.account.token_manager.getUserData(u => u.id, "");
+			let first_name = this.props.account.token_manager.getUserData(u => u.first_name, "");
+			let last_name = this.props.account.token_manager.getUserData(u => u.last_name, "");
+			let email = this.props.account.token_manager.getUserData(u => u.email, "");
+			let me: PermissionRow = {
+				id: "",
+				user_id,
+				to_user_id: user_id,
+				from_first_name: first_name,
+				from_last_name: last_name,
+				from_email: email,
+				to_first_name: first_name,
+				to_last_name: last_name,
+				to_email: email,
+				created_at: new Date(),
+				updated_at: new Date()
+			};
+
+			let generate = (permission: PermissionRow, add_space: boolean = true) =>
+			{
+				return (
+					<>
+						<div
+							key={permission.id}
+							className={Styles.nsa_access_list_dialog_users_container}
+							onClick={() =>
+							{
+								let onChnaged = () =>
+								{
+									this.props.onClose();
+									this.props.notifier.onSuccess(`You have successfully switched to user '${(permission.from_first_name + " " + permission.from_last_name).trim()}'.`);
+									this.props.notifier.onSuccess(`Refreshing the page ...`, 2000);
+									setTimeout(() =>
+									{
+										window.location.reload();
+									}, 2000);
+								};
+								let REACT_APP_BASE_URL_ACCESS = new EnvService("REACT_APP_BASE_URL_ACCESS", true).getString();
+								let server = new NamirasoftAccessServer(REACT_APP_BASE_URL_ACCESS, this.props.account.token_manager, this.props.notifier.onError);
+								if (permission.id)
+									server.access.SetOwner({ owner_id: permission.user_id }).then(onChnaged).catch(() => { });
+								else
+									server.access.SetOwner({ owner_id: null }).then(onChnaged).catch(() => { });
+							}}
+						>
+							<div className='d-flex flex-column' style={{ padding: "8px 0px", width: "100%" }}>
+								<p className={Styles.nsa_access_list_dialog_item_name}>{`${permission.from_first_name} ${permission.from_last_name}`.trim()}</p>
+								<p className={Styles.nsa_access_list_dialog_item_email}>{permission.from_email}</p>
+								<div style={{ width: "100%", display: "flex", justifyContent: "left" }}>
+									<NSCopy id={current.user_id}
+										classList={["justify-content-center", "flex-row"]}
+									>
+										<p className={`text-center ${Styles.nsa_access_list_dialog_item_id}`} style={{ cursor: "pointer" }} >
+											{permission.user_id}
+										</p>
+									</NSCopy>
+								</div>
+							</div>
+						</div>
+						{add_space && <NSSpace size={NSSpaceSizeType.MINI} />}
+					</>
+				);
+			}
+
+			let permissions = [me, ...this.state.permissions];
+			let current = permissions.filter(p => p.id === this.state.current_id)[0] ?? me;
+			permissions = permissions.filter(p => p.id !== current.id);
+			let content_permission = permissions.map((item, index) => generate(item, index !== permissions.length - 1));
+			let content_profile = <>
+				<div
+					className=
+					'text-center d-flex flex-column justify-content-center align-items-center pb-2'
+				>
+					<img src={"https://static.namirasoft.com/image/namirasoft/access/logo/circle.png"} alt='No Profile' width={96} height={96} className='rounded-circle' style={{ cursor: "default", pointerEvents: "none" }} />
+					<p className="pb-2">You are working as:</p>
+					<div className='d-flex flex-column'>
+						<p className={Styles.nsa_access_list_dialog_main_name}>{`${current.from_first_name} ${current.from_last_name}`.trim()}</p>
+						<p className={Styles.nsa_access_list_dialog_main_email}>{current.from_email}</p>
+						<NSCopy
+							id={current.user_id}
+							classList={["justify-content-center", "flex-row"]}
+						>
+							<p className={`text-center ${Styles.nsa_access_list_dialog_main_id}`} style={{ cursor: "pointer" }} >
+								{current.user_id}
+							</p>
+						</NSCopy>
+					</div>
+				</div >
+			</>;
+			content = (
+				<>
+					<a className='text-left w-100' href='https://access.namirasoft.com/permission/incoming/list/' target="_blank" rel="noopener noreferrer">
+						<span className='d-flex justify-content-left'>Manage Accesss</span>
+					</a>
+					<section className={Styles.nsa_access_list_dialog_container} >
+						{content_profile}
+						<NSSpace size={NSSpaceSizeType.SMALL} />
+						<NSLine />
+						<NSSpace size={NSSpaceSizeType.SMALL} />
+						{
+							content_permission.length === 0 &&
+							<p>There is no <strong>Incoming Permission</strong>.<br />If you would like to get access to other user's account and act on their behalf, you must request them to grant you <strong>Outgoing Permission</strong> using <a href='https://access.namirasoft.com/permission/outgoing/list' target='_blank' rel="noreferrer">Namirasoft Access</a> from their account.</p>
+						}
+						{
+							content_permission.length > 0 &&
+							<>
+								<p>Switch user as:</p>
+								<NSSpace size={NSSpaceSizeType.MINI}></NSSpace>
+								{content_permission}
+							</>
+						}
+					</section>
+				</>
+			);
+		}
+		return (
+			<NSDialog {...this.props}>
+				{content}
+			</NSDialog>
+		);
+	}
 }