namirasoft-account-react 1.4.19 → 1.4.21

package/src/components/NSAAccessListDialog.tsx

@@ -1,161 +1,161 @@
-import React, { Component, createRef } from 'react';
-import { EnvService } from 'namirasoft-core'
-import { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
-import { NSLine, NSLoading, NSDialog, NSDialogProps } from 'namirasoft-site-react';
-import { INSARouterProps } from '../INSARouterProps';
-import Styles from './NSAAccessListDialog.module.css';
-
-export interface NSAAccessListDialogProps extends INSARouterProps, NSDialogProps
-{
-	onClose: () => void;
-}
-
-export interface NSAAccessListDialogState
-{
-	permissions: PermissionRow[] | null;
-	copied: boolean;
-}
-
-export class NSAAccessListDialog extends Component<NSAAccessListDialogProps, NSAAccessListDialogState>
-{
-	private toastRef: React.RefObject<HTMLDivElement>;
-
-	constructor(props: NSAAccessListDialogProps)
-	{
-		super(props);
-		this.state = { permissions: null, copied: false };
-		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 });
-		}).catch(() => { });
-	}
-	override componentWillUnmount(): void
-	{
-		document.removeEventListener('mousedown', this.handleClickOutside);
-	}
-	private copyButton(text: string)
-	{
-		this.setState({ copied: true });
-		setTimeout(() =>
-		{
-			this.setState({ copied: false });
-		}, 3000);
-		return navigator.clipboard.writeText(text);
-	}
-	private handleClickOutside(event: MouseEvent)
-	{
-		if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
-			this.props.onClose();
-	}
-	override render()
-	{
-		let profile = null;
-		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 generate = (permission: PermissionRow) =>
-			{
-				return <div
-					className={Styles.ns_access_account_container}
-					onClick={() =>
-					{
-						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(() =>
-							{
-								this.props.onClose();
-							}).catch(() => { });
-						else
-							server.access.SetOwner({ owner_id: null }).then(() =>
-							{
-								this.props.onClose();
-							}).catch(() => { });
-					}}
-				>
-					<div className={Styles.ns_access_account_info}>
-						<img src={"https://static.namirasoft.com/image/concept/no-profile/grey.svg"} alt='User Profile' width={48} height={48} className='rounded-circle' />
-					</div>
-					<div className='d-flex flex-column'>
-						<h4>{`${permission.firstName} ${permission.lastName}`.trim()}</h4>
-						<h5>{permission.user_id}</h5>
-					</div>
-				</div>
-			}
-			let me: PermissionRow = {
-				id: "",
-				user_id,
-				to_user_id: user_id,
-				firstName: first_name,
-				lastName: last_name,
-				email: email,
-				default: this.state.permissions.filter(x => x.default).length === 0,
-				createdAt: new Date(),
-				updatedAt: new Date()
-			};
-			let permissions = [me, ...this.state.permissions];
-			let current = permissions.filter(x => x.default)[0];
-			content = permissions.filter(x => !x.default).map(generate);
-			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={103} height={103} className='rounded-circle' style={{ cursor: "default", pointerEvents: "none" }} />
-					<h6 className="pb-2">Your current user is:</h6>
-					<div className='d-flex flex-row justify-content-center align-items-center'>
-						<h2 className='text-center'
-							onClick={() => { this.copyButton(current.user_id) }}
-							style={{ cursor: "pointer" }}
-						>{current.user_id}
-						</h2>
-						{this.state.copied
-							? <img src={"https://static.namirasoft.com/image/concept/check/on/blue.svg"} alt='Copied' width={23} height={23} />
-							: <img
-								src='https://static.namirasoft.com/image/concept/copy/blue.svg'
-								alt='Copy_Button'
-								width={16} height={16}
-								onClick={() => { this.copyButton(current.user_id) }}
-								style={{
-									cursor: "pointer",
-									marginLeft: "8px"
-								}}
-							/>
-						}
-					</div>
-					<h6>{`${current.firstName} ${current.lastName}`.trim()}</h6>
-				</div >
-			</>;
-		}
-		return (
-			<NSDialog {...this.props}>
-				<a className='text-left w-100 ps-3' href='https://access.namirasoft.com/' target="_blank" rel="noopener noreferrer">
-					<span className='d-flex justify-content-left'>Manage Accesss</span>
-				</a>
-				<section className={Styles.ns_access_container} >
-					{profile}
-					<NSLine  />
-					<h6>Switch user as:</h6>
-					{content !== null &&
-						<p>There is not any other user</p>
-					}
-				</section>
-			</NSDialog >
-		);
-	}
+import React, { Component, createRef } from 'react';
+import { EnvService } from 'namirasoft-core'
+import { NamirasoftAccessServer, PermissionRow } from 'namirasoft-access';
+import { NSLine, NSLoading, NSDialog, NSDialogProps } from 'namirasoft-site-react';
+import { INSARouterProps } from '../INSARouterProps';
+import Styles from './NSAAccessListDialog.module.css';
+
+export interface NSAAccessListDialogProps extends INSARouterProps, NSDialogProps
+{
+	onClose: () => void;
+}
+
+export interface NSAAccessListDialogState
+{
+	permissions: PermissionRow[] | null;
+	copied: boolean;
+}
+
+export class NSAAccessListDialog extends Component<NSAAccessListDialogProps, NSAAccessListDialogState>
+{
+	private toastRef: React.RefObject<HTMLDivElement>;
+
+	constructor(props: NSAAccessListDialogProps)
+	{
+		super(props);
+		this.state = { permissions: null, copied: false };
+		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 });
+		}).catch(() => { });
+	}
+	override componentWillUnmount(): void
+	{
+		document.removeEventListener('mousedown', this.handleClickOutside);
+	}
+	private copyButton(text: string)
+	{
+		this.setState({ copied: true });
+		setTimeout(() =>
+		{
+			this.setState({ copied: false });
+		}, 3000);
+		return navigator.clipboard.writeText(text);
+	}
+	private handleClickOutside(event: MouseEvent)
+	{
+		if (this.toastRef.current && !this.toastRef.current.contains(event.target as Node))
+			this.props.onClose();
+	}
+	override render()
+	{
+		let profile = null;
+		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 generate = (permission: PermissionRow) =>
+			{
+				return <div
+					className={Styles.ns_access_account_container}
+					onClick={() =>
+					{
+						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(() =>
+							{
+								this.props.onClose();
+							}).catch(() => { });
+						else
+							server.access.SetOwner({ owner_id: null }).then(() =>
+							{
+								this.props.onClose();
+							}).catch(() => { });
+					}}
+				>
+					<div className={Styles.ns_access_account_info}>
+						<img src={"https://static.namirasoft.com/image/concept/no-profile/grey.svg"} alt='User Profile' width={48} height={48} className='rounded-circle' />
+					</div>
+					<div className='d-flex flex-column'>
+						<h4>{`${permission.firstName} ${permission.lastName}`.trim()}</h4>
+						<h5>{permission.user_id}</h5>
+					</div>
+				</div>
+			}
+			let me: PermissionRow = {
+				id: "",
+				user_id,
+				to_user_id: user_id,
+				firstName: first_name,
+				lastName: last_name,
+				email: email,
+				default: this.state.permissions.filter(x => x.default).length === 0,
+				createdAt: new Date(),
+				updatedAt: new Date()
+			};
+			let permissions = [me, ...this.state.permissions];
+			let current = permissions.filter(x => x.default)[0];
+			content = permissions.filter(x => !x.default).map(generate);
+			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={103} height={103} className='rounded-circle' style={{ cursor: "default", pointerEvents: "none" }} />
+					<h6 className="pb-2">Your current user is:</h6>
+					<div className='d-flex flex-row justify-content-center align-items-center'>
+						<h2 className='text-center'
+							onClick={() => { this.copyButton(current.user_id) }}
+							style={{ cursor: "pointer" }}
+						>{current.user_id}
+						</h2>
+						{this.state.copied
+							? <img src={"https://static.namirasoft.com/image/concept/check/on/blue.svg"} alt='Copied' width={23} height={23} />
+							: <img
+								src='https://static.namirasoft.com/image/concept/copy/blue.svg'
+								alt='Copy_Button'
+								width={16} height={16}
+								onClick={() => { this.copyButton(current.user_id) }}
+								style={{
+									cursor: "pointer",
+									marginLeft: "8px"
+								}}
+							/>
+						}
+					</div>
+					<h6>{`${current.firstName} ${current.lastName}`.trim()}</h6>
+				</div >
+			</>;
+		}
+		return (
+			<NSDialog {...this.props}>
+				<a className='text-left w-100 ps-3' href='https://access.namirasoft.com/' target="_blank" rel="noopener noreferrer">
+					<span className='d-flex justify-content-left'>Manage Accesss</span>
+				</a>
+				<section className={Styles.ns_access_container} >
+					{profile}
+					<NSLine  />
+					<h6>Switch user as:</h6>
+					{content !== null &&
+						<p>There is not any other user</p>
+					}
+				</section>
+			</NSDialog >
+		);
+	}
 }

package/src/components/NSABoxOTP.module.css

@@ -1,11 +1,11 @@
-.nsa_otp_input {
-    border: none;
-    background-color: transparent;
-    border-bottom: 2px solid #141B5C;
-}
-
-.nsa_otp_input:focus {
-    border: none;
-    outline: none;
-    border-bottom: 2px solid #141B5C;
+.nsa_otp_input {
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid #141B5C;
+}
+
+.nsa_otp_input:focus {
+    border: none;
+    outline: none;
+    border-bottom: 2px solid #141B5C;
 }

package/src/components/NSABoxOTP.tsx

@@ -1,64 +1,64 @@
-import Styles from './NSABoxOTP.module.css';
-import { IBaseComponentProps } from 'namirasoft-site-react';
-import React, { useState, ChangeEvent, useRef } from 'react';
-
-export interface INSABoxOTPProps extends IBaseComponentProps
-{
-    placeholder?: string;
-    defaultValue?: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export function NSABoxOTP(props: INSABoxOTPProps) 
-{
-    let [state, setState] = useState("");
-
-    const [values, setValues] = useState<string[]>(Array(6).fill(''));
-    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
-
-    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
-    {
-        const newValue = event.target.value;
-        setState(state + newValue)
-        if (/^\d?$/.test(newValue))
-        {
-            const updatedValues = [...values];
-            updatedValues[index] = newValue;
-            setValues(updatedValues);
-            if (newValue && index < 5)
-            {
-                inputsRef.current[index + 1]?.focus();
-            }
-        }
-        if (props.onChanged)
-            props.onChanged(event);
-    };
-
-    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
-    {
-        if (event.key === 'Backspace' && !values[index] && index > 0)
-        {
-            inputsRef.current[index - 1]?.focus();
-        }
-    };
-
-    return (
-        <div id={props.id} className={`${Styles.nsa_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
-            {
-                values.map((value, index) => (
-                    <input
-                        key={index + 10}
-                        ref={el => inputsRef.current[index] = el}
-                        type="text"
-                        value={value}
-                        onChange={handleChange(index)}
-                        onKeyDown={handleKeyDown(index)}
-                        maxLength={1}
-                        style={{ width: '30px', textAlign: 'center' }}
-                        className={Styles.nsa_otp_input}
-                    />
-                ))
-            }
-        </div >
-    );
+import Styles from './NSABoxOTP.module.css';
+import { IBaseComponentProps } from 'namirasoft-site-react';
+import React, { useState, ChangeEvent, useRef } from 'react';
+
+export interface INSABoxOTPProps extends IBaseComponentProps
+{
+    placeholder?: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function NSABoxOTP(props: INSABoxOTPProps) 
+{
+    let [state, setState] = useState("");
+
+    const [values, setValues] = useState<string[]>(Array(6).fill(''));
+    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
+
+    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) =>
+    {
+        const newValue = event.target.value;
+        setState(state + newValue)
+        if (/^\d?$/.test(newValue))
+        {
+            const updatedValues = [...values];
+            updatedValues[index] = newValue;
+            setValues(updatedValues);
+            if (newValue && index < 5)
+            {
+                inputsRef.current[index + 1]?.focus();
+            }
+        }
+        if (props.onChanged)
+            props.onChanged(event);
+    };
+
+    const handleKeyDown = (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) =>
+    {
+        if (event.key === 'Backspace' && !values[index] && index > 0)
+        {
+            inputsRef.current[index - 1]?.focus();
+        }
+    };
+
+    return (
+        <div id={props.id} className={`${Styles.nsa_input_parent} ${props.classList?.join(" ")}`} style={{ ...props.style, display: 'flex', gap: '10px' }}>
+            {
+                values.map((value, index) => (
+                    <input
+                        key={index + 10}
+                        ref={el => inputsRef.current[index] = el}
+                        type="text"
+                        value={value}
+                        onChange={handleChange(index)}
+                        onKeyDown={handleKeyDown(index)}
+                        maxLength={1}
+                        style={{ width: '30px', textAlign: 'center' }}
+                        className={Styles.nsa_otp_input}
+                    />
+                ))
+            }
+        </div >
+    );
 }

package/src/components/NSAMessageListDialog.module.css

@@ -1,98 +1,98 @@
-.nsa_message_icon {
-    cursor: pointer;
-}
-
-.nsa_message_title {
-    color: hsla(212, 100%, 51%, 1)
-}
-
-.nsa_message_item_title {
-    color: hsla(234, 64%, 22%, 1);
-    font-size: 16px;
-    font-weight: 600;
-    text-align: left;
-}
-
-.nsa_message_item_content {
-    color: hsla(234, 64%, 22%, 1);
-    margin: 0;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.nsa_message_item_ul {
-    padding-left: 16px !important;
-    margin-bottom: 8px;
-}
-
-.nsa_message_item_ul li::marker {
-    color: hsla(157, 94%, 42%, 1);
-}
-
-.nsa_message_item_dot_green {
-    width: 8px;
-    height: 8px;
-    background: hsla(157, 94%, 42%, 1);
-    border-radius: 50%;
-}
-
-.nsa_message_item_dot_gray {
-    width: 8px;
-    height: 8px;
-    background: hsla(228, 9%, 66%, 1);
-    border-radius: 50%;
-}
-
-.nsa_body_green {
-    background-color: hsla(157, 94%, 42%, 0.1);
-    padding: 16px;
-    cursor: pointer !important;
-}
-
-.nsa_body_gray {
-    background-color: #fff;
-    padding: 16px;
-    box-shadow: 0px 2px 5px #e6e6e6;
-    cursor: pointer !important;
-}
-
-.nsa_count {
-    position: absolute;
-    background: rgba(3, 119, 255, 1);
-    right: -5px;
-    top: -5px;
-    color: #fff;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.nsa_parent_count {
-    position: relative;
-    width: max-content;
-}
-
-.nsa_toast_body {
-    padding: 0 !important;
-}
-
-.nsa_toast_header {
-    padding: 2px !important;
-    display: flex;
-    justify-content: space-between !important;
-    align-items: center;
-}
-
-
-.nsa_toast div {
-    cursor: auto;
-}
-
-.nsa_close_icon {
-    cursor: pointer;
+.nsa_message_icon {
+    cursor: pointer;
+}
+
+.nsa_message_title {
+    color: hsla(212, 100%, 51%, 1)
+}
+
+.nsa_message_item_title {
+    color: hsla(234, 64%, 22%, 1);
+    font-size: 16px;
+    font-weight: 600;
+    text-align: left;
+}
+
+.nsa_message_item_content {
+    color: hsla(234, 64%, 22%, 1);
+    margin: 0;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nsa_message_item_ul {
+    padding-left: 16px !important;
+    margin-bottom: 8px;
+}
+
+.nsa_message_item_ul li::marker {
+    color: hsla(157, 94%, 42%, 1);
+}
+
+.nsa_message_item_dot_green {
+    width: 8px;
+    height: 8px;
+    background: hsla(157, 94%, 42%, 1);
+    border-radius: 50%;
+}
+
+.nsa_message_item_dot_gray {
+    width: 8px;
+    height: 8px;
+    background: hsla(228, 9%, 66%, 1);
+    border-radius: 50%;
+}
+
+.nsa_body_green {
+    background-color: hsla(157, 94%, 42%, 0.1);
+    padding: 16px;
+    cursor: pointer !important;
+}
+
+.nsa_body_gray {
+    background-color: #fff;
+    padding: 16px;
+    box-shadow: 0px 2px 5px #e6e6e6;
+    cursor: pointer !important;
+}
+
+.nsa_count {
+    position: absolute;
+    background: rgba(3, 119, 255, 1);
+    right: -5px;
+    top: -5px;
+    color: #fff;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nsa_parent_count {
+    position: relative;
+    width: max-content;
+}
+
+.nsa_toast_body {
+    padding: 0 !important;
+}
+
+.nsa_toast_header {
+    padding: 2px !important;
+    display: flex;
+    justify-content: space-between !important;
+    align-items: center;
+}
+
+
+.nsa_toast div {
+    cursor: auto;
+}
+
+.nsa_close_icon {
+    cursor: pointer;
 }