namirasoft-account-react 1.5.21 → 1.5.23

package/src/components/NSAUserDialog.tsx

@@ -1,123 +1,123 @@
-import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { NSButton, NSCopy, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import { Component } from 'react';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import Styles from "./NSAUserDialog.module.css";
-
-export interface NSAUserDialogProps extends NSARouterMakerResult, NSDialogProps
-{
-    client: NamirasoftAccountClient;
-}
-
-interface NSAUserDialogState
-{
-    imageError: boolean;
-}
-
-export class NSAUserDialog extends Component<NSAUserDialogProps, NSAUserDialogState>
-{
-    constructor(props: NSAUserDialogProps)
-    {
-        super(props);
-        this.state = { imageError: false };
-    }
-
-    override render()
-    {
-        let user = this.props.account?.token_manager?.getUserData((u => u), null);
-        let content = null;
-        if (user == null)
-            content = <NSLoading />;
-        else
-        {
-            content = (
-                <div>
-                    <figure className={Styles.ns_figure}>
-                        {user.picture && !this.state.imageError
-                            ?
-                            <img
-                                src={user.picture}
-                                width={96}
-                                height={96}
-                                alt="User Avatar"
-                                onError={() => this.setState((prev) => ({ ...prev, imageError: true }))}
-                            />
-                            :
-                            <div className={Styles.ns_figure_placeholder}>
-                                <span>
-                                    {((user.first_name?.[0] ?? "") + " " + (user.last_name?.[0] ?? "")).trim()}
-                                </span>
-                            </div>
-                        }
-                        <figcaption>
-                            <span className={Styles.ns_figure_title}>{`Hi ${user.first_name}!`}</span>
-                            <span>{user?.email}</span>
-                            <NSCopy id={user.id}>
-                                <p className={Styles.ns_user_id}>
-                                    {user.id}
-                                </p>
-                            </NSCopy>
-                        </figcaption>
-                    </figure>
-
-                    <NSSpace size={NSSpaceSizeType.MINI} />
-                    <NSLine />
-                    <NSSpace size={NSSpaceSizeType.MICRO} />
-
-                    <div className={Styles.ns_actions_wrapper}>
-                        <NSLink
-                            href="https://account.namirasoft.com/user/profile"
-                            target="_blank"
-                            classList={[Styles.ns_link]}
-                        >
-                            Profile
-                        </NSLink>
-                        <NSLink
-                            href="https://payment.namirasoft.com/payment/list"
-                            target="_blank"
-                            classList={[Styles.ns_link]}
-                        >
-                            Payment and Billing
-                        </NSLink>
-                        <NSLink
-                            href="https://cost.namirasoft.com/cost/explorer"
-                            target="_blank"
-                            classList={[Styles.ns_link]}
-                        >
-                            Cost and Usage
-                        </NSLink>
-                        <NSLink
-                            href="https://account.namirasoft.com/setting/notification"
-                            target="_blank"
-                            classList={[Styles.ns_link]}
-                        >
-                            Notification Settings
-                        </NSLink>
-                        <NSLink
-                            href="https://account.namirasoft.com/password/change"
-                            target="_blank"
-                            classList={[Styles.ns_link]}
-                        >
-                            Change Password
-                        </NSLink>
-                        <NSButton
-                            onClick={{ action: () => this.props.client.logout() }}
-                            title='Log Out'
-                            classList={[Styles.ns_button]}
-                            icon={{
-                                src: "https://static.namirasoft.com/image/concept/logout/blue.svg",
-                                alt: "Logout Icon"
-                            }}
-                        />
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <NSDialog {...this.props}>
-                {content}
-            </NSDialog>
-        );
-    }
+import { NamirasoftAccountClient } from 'namirasoft-account-client';
+import { NSButton, NSCopy, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { Component } from 'react';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import Styles from "./NSAUserDialog.module.css";
+
+export interface NSAUserDialogProps extends NSARouterMakerResult, NSDialogProps
+{
+    client: NamirasoftAccountClient;
+}
+
+interface NSAUserDialogState
+{
+    imageError: boolean;
+}
+
+export class NSAUserDialog extends Component<NSAUserDialogProps, NSAUserDialogState>
+{
+    constructor(props: NSAUserDialogProps)
+    {
+        super(props);
+        this.state = { imageError: false };
+    }
+
+    override render()
+    {
+        let user = this.props.account?.token_manager?.getUserData((u => u), null);
+        let content = null;
+        if (user == null)
+            content = <NSLoading />;
+        else
+        {
+            content = (
+                <div>
+                    <figure className={Styles.ns_figure}>
+                        {user.picture && !this.state.imageError
+                            ?
+                            <img
+                                src={user.picture}
+                                width={96}
+                                height={96}
+                                alt="User Avatar"
+                                onError={() => this.setState((prev) => ({ ...prev, imageError: true }))}
+                            />
+                            :
+                            <div className={Styles.ns_figure_placeholder}>
+                                <span>
+                                    {((user.first_name?.[0] ?? "") + " " + (user.last_name?.[0] ?? "")).trim()}
+                                </span>
+                            </div>
+                        }
+                        <figcaption>
+                            <span className={Styles.ns_figure_title}>{`Hi ${user.first_name}!`}</span>
+                            <span>{user?.email}</span>
+                            <NSCopy id={user.id}>
+                                <p className={Styles.ns_user_id}>
+                                    {user.id}
+                                </p>
+                            </NSCopy>
+                        </figcaption>
+                    </figure>
+
+                    <NSSpace size={NSSpaceSizeType.MINI} />
+                    <NSLine />
+                    <NSSpace size={NSSpaceSizeType.MICRO} />
+
+                    <div className={Styles.ns_actions_wrapper}>
+                        <NSLink
+                            href="https://account.namirasoft.com/user/profile"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Profile
+                        </NSLink>
+                        <NSLink
+                            href="https://payment.namirasoft.com/payment/list"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Payment and Billing
+                        </NSLink>
+                        <NSLink
+                            href="https://cost.namirasoft.com/cost/explorer"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Cost and Usage
+                        </NSLink>
+                        <NSLink
+                            href="https://account.namirasoft.com/setting/notification"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Notification Settings
+                        </NSLink>
+                        <NSLink
+                            href="https://account.namirasoft.com/password/change"
+                            target="_blank"
+                            classList={[Styles.ns_link]}
+                        >
+                            Change Password
+                        </NSLink>
+                        <NSButton
+                            onClick={{ action: () => this.props.client.logout() }}
+                            title='Log Out'
+                            classList={[Styles.ns_button]}
+                            icon={{
+                                src: "https://static.namirasoft.com/image/concept/logout/blue.svg",
+                                alt: "Logout Icon"
+                            }}
+                        />
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <NSDialog {...this.props}>
+                {content}
+            </NSDialog>
+        );
+    }
 }

package/src/components/NSAWorkspaceListDialog.module.css

@@ -1,42 +1,42 @@
-.nsa_workspace_h2 {
-    color: rgba(3, 119, 255, 1);
-    text-align: center;
-    font-weight: 600;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.nsa_workspace_h6 {
-    color: rgba(20, 27, 92, 1);
-    text-align: center;
-    font-weight: 300;
-    font-size: 16px;
-    cursor: pointer;
-    margin: 0;
-}
-
-.nsa_workspace_list {
-    overflow-y: auto;
-    height: 320px;
-    width: 302px;
-}
-
-.nsa_workspace_border {
-    margin-top: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    gap: 8px;
-    border-radius: 8px;
-    border: 1px solid gray;
-    padding: 8px;
-    transition: all .2s ease-in-out;
-    flex-wrap: wrap;
-}
-
-.nsa_workspace_border:hover {
-    background-color: rgba(20, 27, 92, 0.3);
-    color: white;
-    cursor: pointer;
+.nsa_workspace_h2 {
+    color: rgba(3, 119, 255, 1);
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.nsa_workspace_h6 {
+    color: rgba(20, 27, 92, 1);
+    text-align: center;
+    font-weight: 300;
+    font-size: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+.nsa_workspace_list {
+    overflow-y: auto;
+    height: 320px;
+    width: 302px;
+}
+
+.nsa_workspace_border {
+    margin-top: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    border: 1px solid gray;
+    padding: 8px;
+    transition: all .2s ease-in-out;
+    flex-wrap: wrap;
+}
+
+.nsa_workspace_border:hover {
+    background-color: rgba(20, 27, 92, 0.3);
+    color: white;
+    cursor: pointer;
 }

package/src/components/NSAWorkspaceListDialog.tsx

@@ -1,148 +1,148 @@
-import { NSBoxSearch, NSCopy, NSDialog, NSDialogProps, NSLoading } from 'namirasoft-site-react';
-import { Component } from 'react';
-import { NamirasoftWorkspaceServer, WorkspaceRow } from 'namirasoft-workspace';
-import { NSARouterMakerResult } from '../NSARouterMakerResult';
-import { EnvService, SearchOperation } from 'namirasoft-core';
-import Styles from './NSAWorkspaceListDialog.module.css';
-
-export interface NSAWorkspaceListDialogProps extends NSARouterMakerResult, NSDialogProps { }
-
-export interface NSAWorkspaceListDialogState
-{
-	workspaces: WorkspaceRow[] | null;
-	default_id: string | null;
-	current_id: string | null;
-	search: string;
-}
-
-export class NSAWorkspaceListDialog extends Component<NSAWorkspaceListDialogProps, NSAWorkspaceListDialogState>
-{
-	constructor(props: NSAWorkspaceListDialogProps)
-	{
-		super(props);
-		this.state = {
-			workspaces: null, search: "", default_id: null, current_id: null
-		};
-		this.workspaceClickHandler = this.workspaceClickHandler.bind(this);
-	}
-	override componentDidMount(): void
-	{
-		let REACT_APP_BASE_URL_WORKSPACE = new EnvService("REACT_APP_BASE_URL_WORKSPACE", true).getString();
-		let server = new NamirasoftWorkspaceServer(REACT_APP_BASE_URL_WORKSPACE, this.props.account.token_manager, this.props.notifier.onError);
-		server.workspace.GetByProduct(this.props.product_id, [], null, null, [], null).then(res =>
-		{
-			this.setState({ workspaces: res.rows, default_id: res.default_id, current_id: res.current_id });
-		}).catch(() => { });
-	}
-
-	workspaceClickHandler(id: string)
-	{
-		let REACT_APP_BASE_URL_WORKSPACE = new EnvService("REACT_APP_BASE_URL_WORKSPACE", true).getString();
-		let server = new NamirasoftWorkspaceServer(REACT_APP_BASE_URL_WORKSPACE, this.props.account.token_manager, this.props.notifier.onError);
-		server.workspace.SetCurrent(id)
-			.then(() =>
-			{
-				this.props.onClose();
-				this.props.notifier.onSuccess("The Current workspace was switched successfully.");
-				this.props.notifier.onSuccess(`Refreshing the page ...`, 2000);
-				setTimeout(() =>
-				{
-					document.location.reload();
-				}, 2000);
-			})
-			.catch(() => { });
-	}
-
-	override render()
-	{
-		let content = null;
-		let getName = (workspace: WorkspaceRow) =>
-		{
-			let ans = "";
-			if (workspace.id === this.state.default_id && workspace.id === this.state.current_id)
-				ans += "(Default and Current)";
-			else if (workspace.id === this.state.default_id)
-				ans += "(Default)";
-			else if (workspace.id === this.state.current_id)
-				ans += "(Current)";
-			return ans;
-		};
-		let getColor = (workspace: WorkspaceRow) =>
-		{
-			if (workspace.id === this.state.current_id)
-				return "lightgreen";
-			if (workspace.id === this.state.default_id)
-				return "lightblue";
-			return "unset";
-		};
-		if (this.state.workspaces === null)
-		{
-			content = <NSLoading />;
-		} else
-		{
-			let workspaces = SearchOperation.filter(this.state.workspaces, p => p.name, this.state.search);
-			let def = workspaces.find(p => p.id === this.state.default_id);
-			let cur = workspaces.find(p => p.id !== this.state.default_id && p.id === this.state.current_id);
-			let rest = workspaces.filter(p => p.id !== this.state.default_id && p.id !== this.state.current_id);
-			workspaces = [...[cur, def].filter(x => x) as WorkspaceRow[], ...rest];
-			let content_workspaces = (
-				<div className={Styles.nsa_workspace_list}>
-					{
-						workspaces.map((workspace) => (
-							<div
-								key={workspace.id}
-								className={Styles.nsa_workspace_border}
-								onClick={() => this.workspaceClickHandler(workspace.id)}
-								style={{ backgroundColor: getColor(workspace) }}
-							>
-								<img src={"https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png"} alt='No Profile' width={48} height={48} style={{ cursor: "pointer" }} />
-								<div className='d-flex flex-column align-items-start'>
-									<h2 className={Styles.nsa_workspace_h2} style={{ display: "flex", alignItems: "center" }}>
-										{
-											workspace.name
-										}
-										&nbsp;
-										<p style={{
-											margin: "0px",
-											fontSize: "10px"
-										}}
-										>
-											{
-												getName(workspace)
-											}
-										</p>
-									</h2>
-									<NSCopy
-										id={workspace.id}
-									>
-										<h6 className={Styles.nsa_workspace_h6}>{workspace.id}</h6>
-									</NSCopy>
-								</div>
-							</div>
-						))
-					}
-				</div >
-			);
-			content = (
-				<>
-					<NSBoxSearch
-						title=''
-						required={false}
-						placeholder='Search your workspace'
-						style={{ width: "302px" }}
-						onChanged={(e) =>
-						{
-							this.setState({ search: e.getValue() ?? "" });
-						}}
-					/>
-					{content_workspaces}
-				</>
-			);
-		}
-		return (
-			<NSDialog {...this.props} onClose={this.props.onClose} >
-				{content}
-			</NSDialog>
-		);
-	}
+import { NSBoxSearch, NSCopy, NSDialog, NSDialogProps, NSLoading } from 'namirasoft-site-react';
+import { Component } from 'react';
+import { NamirasoftWorkspaceServer, WorkspaceRow } from 'namirasoft-workspace';
+import { NSARouterMakerResult } from '../NSARouterMakerResult';
+import { EnvService, SearchOperation } from 'namirasoft-core';
+import Styles from './NSAWorkspaceListDialog.module.css';
+
+export interface NSAWorkspaceListDialogProps extends NSARouterMakerResult, NSDialogProps { }
+
+export interface NSAWorkspaceListDialogState
+{
+	workspaces: WorkspaceRow[] | null;
+	default_id: string | null;
+	current_id: string | null;
+	search: string;
+}
+
+export class NSAWorkspaceListDialog extends Component<NSAWorkspaceListDialogProps, NSAWorkspaceListDialogState>
+{
+	constructor(props: NSAWorkspaceListDialogProps)
+	{
+		super(props);
+		this.state = {
+			workspaces: null, search: "", default_id: null, current_id: null
+		};
+		this.workspaceClickHandler = this.workspaceClickHandler.bind(this);
+	}
+	override componentDidMount(): void
+	{
+		let REACT_APP_BASE_URL_WORKSPACE = new EnvService("REACT_APP_BASE_URL_WORKSPACE", true).getString();
+		let server = new NamirasoftWorkspaceServer(REACT_APP_BASE_URL_WORKSPACE, this.props.account.token_manager, this.props.notifier.onError);
+		server.workspace.GetByProduct(this.props.product_id, [], null, null, [], null).then(res =>
+		{
+			this.setState({ workspaces: res.rows, default_id: res.default_id, current_id: res.current_id });
+		}).catch(() => { });
+	}
+
+	workspaceClickHandler(id: string)
+	{
+		let REACT_APP_BASE_URL_WORKSPACE = new EnvService("REACT_APP_BASE_URL_WORKSPACE", true).getString();
+		let server = new NamirasoftWorkspaceServer(REACT_APP_BASE_URL_WORKSPACE, this.props.account.token_manager, this.props.notifier.onError);
+		server.workspace.SetCurrent(id)
+			.then(() =>
+			{
+				this.props.onClose();
+				this.props.notifier.onSuccess("The Current workspace was switched successfully.");
+				this.props.notifier.onSuccess(`Refreshing the page ...`, 2000);
+				setTimeout(() =>
+				{
+					document.location.reload();
+				}, 2000);
+			})
+			.catch(() => { });
+	}
+
+	override render()
+	{
+		let content = null;
+		let getName = (workspace: WorkspaceRow) =>
+		{
+			let ans = "";
+			if (workspace.id === this.state.default_id && workspace.id === this.state.current_id)
+				ans += "(Default and Current)";
+			else if (workspace.id === this.state.default_id)
+				ans += "(Default)";
+			else if (workspace.id === this.state.current_id)
+				ans += "(Current)";
+			return ans;
+		};
+		let getColor = (workspace: WorkspaceRow) =>
+		{
+			if (workspace.id === this.state.current_id)
+				return "lightgreen";
+			if (workspace.id === this.state.default_id)
+				return "lightblue";
+			return "unset";
+		};
+		if (this.state.workspaces === null)
+		{
+			content = <NSLoading />;
+		} else
+		{
+			let workspaces = SearchOperation.filter(this.state.workspaces, p => p.name, this.state.search);
+			let def = workspaces.find(p => p.id === this.state.default_id);
+			let cur = workspaces.find(p => p.id !== this.state.default_id && p.id === this.state.current_id);
+			let rest = workspaces.filter(p => p.id !== this.state.default_id && p.id !== this.state.current_id);
+			workspaces = [...[cur, def].filter(x => x) as WorkspaceRow[], ...rest];
+			let content_workspaces = (
+				<div className={Styles.nsa_workspace_list}>
+					{
+						workspaces.map((workspace) => (
+							<div
+								key={workspace.id}
+								className={Styles.nsa_workspace_border}
+								onClick={() => this.workspaceClickHandler(workspace.id)}
+								style={{ backgroundColor: getColor(workspace) }}
+							>
+								<img src={"https://static.namirasoft.com/image/namirasoft/workspace/logo/base.png"} alt='No Profile' width={48} height={48} style={{ cursor: "pointer" }} />
+								<div className='d-flex flex-column align-items-start'>
+									<h2 className={Styles.nsa_workspace_h2} style={{ display: "flex", alignItems: "center" }}>
+										{
+											workspace.name
+										}
+										&nbsp;
+										<p style={{
+											margin: "0px",
+											fontSize: "10px"
+										}}
+										>
+											{
+												getName(workspace)
+											}
+										</p>
+									</h2>
+									<NSCopy
+										id={workspace.id}
+									>
+										<h6 className={Styles.nsa_workspace_h6}>{workspace.id}</h6>
+									</NSCopy>
+								</div>
+							</div>
+						))
+					}
+				</div >
+			);
+			content = (
+				<>
+					<NSBoxSearch
+						title=''
+						required={false}
+						placeholder='Search your workspace'
+						style={{ width: "302px" }}
+						onChanged={(e) =>
+						{
+							this.setState({ search: e.getValue() ?? "" });
+						}}
+					/>
+					{content_workspaces}
+				</>
+			);
+		}
+		return (
+			<NSDialog {...this.props} onClose={this.props.onClose} >
+				{content}
+			</NSDialog>
+		);
+	}
 }