namirasoft-account-react 1.5.20 → 1.5.21

package/src/components/NSAAccessListDialog.tsx

@@ -1,179 +1,179 @@
-import { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
-import { EnvService } from 'namirasoft-core';
-import { NSCopy, NSDialog, NSDialogProps, NSLine, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import React, { Component, createRef } from 'react';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import Styles from './NSAAccessListDialog.module.css';
-
-export interface NSAAccessListDialogProps extends NSARouterMakerResult, 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, [], 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 { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
+import { EnvService } from 'namirasoft-core';
+import { NSCopy, NSDialog, NSDialogProps, NSLine, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import React, { Component, createRef } from 'react';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import Styles from './NSAAccessListDialog.module.css';
+
+export interface NSAAccessListDialogProps extends NSARouterMakerResult, 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, [], 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>
+		);
+	}
 }

package/src/components/NSABoxSecret.module.css

@@ -1,24 +1,24 @@
-.ns_checkbox {
-    width: auto;
-    max-width: fit-content;
-    padding: 0;
-}
-
-.ns_checkbox.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-}
-
-.ns_checkbox label {
-    height: auto;
-    border: none !important;
-    padding: 0;
-    background-color: transparent;
-    font-size: 0.875rem;
-    line-height: 1rem;
-}
-
-.ns_checkbox label input {
-    width: 1rem;
-    height: 1rem;
+.ns_checkbox {
+    width: auto;
+    max-width: fit-content;
+    padding: 0;
+}
+
+.ns_checkbox.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.ns_checkbox label {
+    height: auto;
+    border: none !important;
+    padding: 0;
+    background-color: transparent;
+    font-size: 0.875rem;
+    line-height: 1rem;
+}
+
+.ns_checkbox label input {
+    width: 1rem;
+    height: 1rem;
 }