npm - namirasoft-account-react - Versions diffs - 1.4.352 → 1.4.353 - Mend

namirasoft-account-react 1.4.352 → 1.4.353

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/NSAUserDialog.d.ts +1 -13
package/dist/components/NSAUserDialog.js +9 -13
package/dist/components/NSAUserDialog.js.map +1 -1
package/dist/components/NSAUserDialog.module.css +37 -7
package/package.json +5 -5
package/src/components/NSAUserDialog.module.css +37 -7
package/src/components/NSAUserDialog.tsx +41 -48

package/dist/components/NSAUserDialog.d.ts CHANGED Viewed

@@ -5,18 +5,6 @@ import { NSARouterMakerProps } from '../NSARouterMakerProps';
 export interface NSAUserDialogProps extends NSARouterMakerProps, NSDialogProps {
     client: NamirasoftAccountClient;
 }
-interface IUserInfo {
-    first_name: string;
-    last_name: string;
-    email: string;
-    picture: string | null;
-}
-interface NSAUserState {
-    user: IUserInfo | null;
-}
-export declare class NSAUserDialog extends Component<NSAUserDialogProps, NSAUserState> {
-    constructor(props: NSAUserDialogProps);
-    componentDidMount(): void;
+export declare class NSAUserDialog extends Component<NSAUserDialogProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export {};

package/dist/components/NSAUserDialog.js CHANGED Viewed

@@ -1,24 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NSButton, NSDialog, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { NSButton, NSCopy, NSDialog, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
 import { Component } from 'react';
 import Styles from "./NSAUserDialog.module.css";
 export class NSAUserDialog extends Component {
-    constructor(props) {
-        super(props);
-        this.state = { user: null };
-    }
-    componentDidMount() {
-        var _a, _b;
-        let user = (_b = (_a = this.props.account) === null || _a === void 0 ? void 0 : _a.token_manager) === null || _b === void 0 ? void 0 : _b.getUserData(({ first_name, last_name, email, picture }) => ({ first_name, last_name, email, picture }), null);
-        this.setState({ user });
-    }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
+        let user = (_b = (_a = this.props.account) === null || _a === void 0 ? void 0 : _a.token_manager) === null || _b === void 0 ? void 0 : _b.getUserData((u => u), null);
         let content = null;
-        if (this.state.user == null)
+        if (user == null)
             content = _jsx(NSLoading, {});
         else {
-            content = (_jsxs("div", { children: [_jsxs("figure", { className: Styles.ns_figure, children: [_jsx("img", { src: (_a = this.state.user.picture) !== null && _a !== void 0 ? _a : "https://static.namirasoft.com/image/concept/user/blue.svg", width: 96, height: 96, alt: "User Avatar" }), _jsxs("figcaption", { children: [_jsx("span", { className: Styles.ns_figure_title, children: `Hi ${this.state.user.first_name}!` }), _jsx("span", { children: (_b = this.state.user) === null || _b === void 0 ? void 0 : _b.email })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsx(NSLine, {}), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsxs("div", { className: Styles.ns_buttons_wrapper, children: [_jsx(NSLink, { href: "https://account.namirasoft.com/user/profile", target: "_blank", title: 'Profile', classList: [Styles.ns_button], style: { backgroundColor: "#B2BBD9" } }), _jsx(NSLink, { href: "https://account.namirasoft.com/setting/notification", target: "_blank", title: 'Notificaton Setting', classList: [Styles.ns_button] }), _jsx(NSLink, { href: "https://account.namirasoft.com/password/change", target: "_blank", title: 'Change Password', classList: [Styles.ns_button] }), _jsx(NSButton, { onClick: { action: () => this.props.client.logout() }, title: 'Log Out', icon: {
+            content = (_jsxs("div", { children: [_jsxs("figure", { className: Styles.ns_figure, children: [user.picture
+                                ?
+                                    _jsx("img", { src: user.picture, width: 96, height: 96, alt: "User Avatar" })
+                                :
+                                    _jsx("div", { className: Styles.ns_figure_placeholder, children: _jsx("span", { children: (((_d = (_c = user.first_name) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "") + " " + ((_f = (_e = user.last_name) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : "")).trim() }) }), _jsxs("figcaption", { children: [_jsx("span", { className: Styles.ns_figure_title, children: `Hi ${user.first_name}!` }), _jsx("span", { children: user === null || user === void 0 ? void 0 : user.email }), _jsx(NSCopy, { id: user.id, children: _jsx("p", { className: Styles.ns_user_id, children: user.id }) })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MINI }), _jsx(NSLine, {}), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("div", { className: Styles.ns_actions_wrapper, children: [_jsx(NSLink, { href: "https://account.namirasoft.com/user/profile", target: "_blank", title: 'Profile', classList: [Styles.ns_link] }), _jsx(NSLink, { href: "https://cost.namirasoft.com/", target: "_blank", title: 'Billing and Cost', classList: [Styles.ns_link] }), _jsx(NSLink, { href: "https://account.namirasoft.com/setting/notification", target: "_blank", title: 'Notificaton Setting', classList: [Styles.ns_link] }), _jsx(NSLink, { href: "https://account.namirasoft.com/password/change", target: "_blank", title: 'Change Password', classList: [Styles.ns_link] }), _jsx(NSButton, { onClick: { action: () => this.props.client.logout() }, title: 'Log Out', classList: [Styles.ns_button], icon: {
                                     src: "https://static.namirasoft.com/image/concept/logout/base.svg",
                                     alt: "Logout Icon"
                                 } })] })] }));

package/dist/components/NSAUserDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NSAUserDialog.js","sourceRoot":"","sources":["../../src/components/NSAUserDialog.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;~~AAC/H~~,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,MAAM,MAAM,4BAA4B,CAAC;~~AAoBhD~~,MAAM,OAAO,aAAc,SAAQ,~~SAA2C~~;~~IAE1E~~,~~YAAY,KAAyB;QAEjC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;IAC/B,CAAC;IAEQ,iBAAiB~~;;~~QAEtB~~,IAAI,IAAI,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,aAAa,0CAAE,WAAW,~~CACrD,~~CAAC,~~EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,~~CAAC,CAAC,~~EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,~~CAAC,EAAE,~~IAAI,CACnG,~~CAAC~~;QAEF~~,~~IAAI,~~CAAC,~~QAAQ,~~CAAC,EAAE,IAAI,~~EAAE,~~CAAC,CAAC;~~IAC5B~~,~~CAAC;IAEQ,MAAM;;QAEX,~~IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,IAAI,~~CAAC,KAAK,CAAC,~~IAAI,IAAI~~,IAAI~~;~~YACvB~~,OAAO,GAAG,KAAC,SAAS,KAAG,CAAC;aAE5B,CAAC;YACG,OAAO,GAAG,CACN,0BACI,kBAAQ,SAAS,EAAE,MAAM,CAAC,SAAS,~~aAC/B~~,~~cACI~~,~~GAAG~~,~~EAAE~~,~~MAAA~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,~~CAAC,~~IAAI,CAAC,OAAO,~~mCAAI~~,~~2DAA2D,EAC3F,~~KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,GAAG,EAAC,aAAa,GACnB,~~EACF~~,iCACI,eAAM,SAAS,EAAE,MAAM,CAAC,eAAe,YAAG,MAAM,IAAI,CAAC,~~KAAK~~,~~CAAC~~,IAAI,~~CAAC~~,~~UAAU~~,~~GAAG~~,GAAQ,~~EACrF~~,~~yBAAO~~,~~MAAA~~,IAAI,CAAC,~~KAAK~~,CAAC,IAAI,~~0CAAE~~,~~KAAK~~,~~GAAQ~~,~~IAC5B~~,IACR,EAET,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,IAAI,GAAI,EACvC,KAAC,MAAM,KAAG,EACV,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,~~IAAI~~,GAAI,~~EAEvC~~,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACrC,KAAC,MAAM,IACH,IAAI,EAAC,6CAA6C,~~EACvE~~,MAAM,EAAC,QAAQ,~~EACM~~,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,CAAC,MAAM,CAAC,~~SAAS~~,CAAC,~~EAC7B~~,KAAK,~~EAAE~~,~~EAAE~~,~~eAAe~~,~~EAAE,~~SAAS,EAAE,~~GACvC~~,EACF,KAAC,MAAM,IACH,IAAI,EAAC,qDAAqD,~~EAC/E~~,MAAM,EAAC,QAAQ,~~EACM~~,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,CAAC,MAAM,CAAC,~~SAAS~~,CAAC,~~GAC/B~~,EACF,KAAC,MAAM,IACH,IAAI,EAAC,gDAAgD,~~EAC1E~~,MAAM,EAAC,QAAQ,~~EACM~~,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAE,CAAC,MAAM,CAAC,~~SAAS~~,CAAC,~~GAC/B~~,EACF,KAAC,QAAQ,IACL,OAAO,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,EACrD,KAAK,EAAC,SAAS,EACf,IAAI,EAAE;oCACF,GAAG,EAAE,6DAA6D;oCAClE,GAAG,EAAE,aAAa;iCACrB,GACH,IACA,IACJ,CACT,CAAC;QACN,CAAC;QAED,OAAO,CACH,KAAC,QAAQ,oBAAK,IAAI,CAAC,KAAK,cACnB,OAAO,IACD,CACd,CAAC;IACN,CAAC;CACJ"}
1	+ {"version":3,"file":"NSAUserDialog.js","sourceRoot":"","sources":["../../src/components/NSAUserDialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/NSAUserDialog.module.css CHANGED Viewed

@@ -14,19 +14,49 @@
     }
 }
+.ns_figure_placeholder {
+    width: 6rem;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #141b5c;
+    span {
+        font-size: 1.75rem;
+        font-weight: 500;
+        word-spacing: -0.5rem;
+        color: #fff;
+    }
+}
 .ns_figure_title {
     font-size: 1.5rem;
     font-weight: 600;
     line-height: 1.75rem;
 }
-.ns_buttons_wrapper {
+.ns_actions_wrapper {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    .ns_button > a {
-        box-shadow: none;
-        color: #141b5c !important;
-    }
+}
+.ns_actions_wrapper .ns_link > a,
+.ns_actions_wrapper .ns_button {
+    box-shadow: none;
+    color: #141b5c !important;
+}
+.ns_actions_wrapper .ns_link > a:hover,
+.ns_actions_wrapper .ns_button:hover {
+    background-color: #b2bbd9;
+}
+.ns_user_id {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: right;
+    color: rgba(3, 119, 255);
+    cursor: pointer;
 }

package/package.json CHANGED Viewed

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.4.352",
+    "version": "1.4.353",
     "author": "Amir Abolhasani",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -28,17 +28,17 @@
         "namirasoft-access": "^1.4.70",
         "namirasoft-account": "^1.4.85",
         "namirasoft-account-client": "^1.4.6",
-        "namirasoft-api-product": "^1.4.36",
+        "namirasoft-api-product": "^1.4.37",
         "namirasoft-core": "^1.4.80",
         "namirasoft-field": "^1.4.25",
         "namirasoft-history": "^1.4.17",
         "namirasoft-message": "^1.4.20",
-        "namirasoft-payment": "^1.4.98",
+        "namirasoft-payment": "^1.4.104",
         "namirasoft-schema": "^1.4.25",
-        "namirasoft-secret": "^1.4.36",
+        "namirasoft-secret": "^1.4.38",
         "namirasoft-site": "^1.4.39",
         "namirasoft-site-map": "^1.4.31",
-        "namirasoft-site-react": "^1.4.436",
+        "namirasoft-site-react": "^1.4.438",
         "namirasoft-workspace": "^1.4.23",
         "os-browserify": "^0.3.0",
         "path-browserify": "^1.0.1",

package/src/components/NSAUserDialog.module.css CHANGED Viewed

@@ -14,19 +14,49 @@
     }
 }
+.ns_figure_placeholder {
+    width: 6rem;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: #141b5c;
+    span {
+        font-size: 1.75rem;
+        font-weight: 500;
+        word-spacing: -0.5rem;
+        color: #fff;
+    }
+}
 .ns_figure_title {
     font-size: 1.5rem;
     font-weight: 600;
     line-height: 1.75rem;
 }
-.ns_buttons_wrapper {
+.ns_actions_wrapper {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    .ns_button > a {
-        box-shadow: none;
-        color: #141b5c !important;
-    }
+}
+.ns_actions_wrapper .ns_link > a,
+.ns_actions_wrapper .ns_button {
+    box-shadow: none;
+    color: #141b5c !important;
+}
+.ns_actions_wrapper .ns_link > a:hover,
+.ns_actions_wrapper .ns_button:hover {
+    background-color: #b2bbd9;
+}
+.ns_user_id {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    text-align: right;
+    color: rgba(3, 119, 255);
+    cursor: pointer;
 }

package/src/components/NSAUserDialog.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { NamirasoftAccountClient } from 'namirasoft-account-client';
-import { NSButton, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
+import { NSButton, NSCopy, NSDialog, NSDialogProps, NSLine, NSLink, NSLoading, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
 import { Component } from 'react';
 import { NSARouterMakerProps } from '../NSARouterMakerProps';
 import Styles from "./NSAUserDialog.module.css";
@@ -9,85 +9,78 @@ export interface NSAUserDialogProps extends NSARouterMakerProps, NSDialogProps
     client: NamirasoftAccountClient
 }
-interface IUserInfo
+export class NSAUserDialog extends Component<NSAUserDialogProps>
 {
-    first_name: string;
-    last_name: string;
-    email: string;
-    picture: string | null;
-}
-interface NSAUserState
-{
-    user: IUserInfo | null;
-}
-export class NSAUserDialog extends Component<NSAUserDialogProps, NSAUserState>
-{
-    constructor(props: NSAUserDialogProps)
-    {
-        super(props);
-        this.state = { user: null }
-    }
-    override componentDidMount(): void
-    {
-        let user = this.props.account?.token_manager?.getUserData<IUserInfo | null>(
-            ({ first_name, last_name, email, picture }) => ({ first_name, last_name, email, picture }), null
-        );
-        this.setState({ user });
-    }
     override render()
     {
+        let user = this.props.account?.token_manager?.getUserData((u => u), null);
         let content = null;
-        if (this.state.user == null)
+        if (user == null)
             content = <NSLoading />;
         else
         {
             content = (
                 <div>
                     <figure className={Styles.ns_figure}>
-                        <img
-                            src={this.state.user.picture ?? "https://static.namirasoft.com/image/concept/user/blue.svg"}
-                            width={96}
-                            height={96}
-                            alt="User Avatar"
-                        />
+                        {user.picture
+                            ?
+                            <img
+                                src={user.picture}
+                                width={96}
+                                height={96}
+                                alt="User Avatar"
+                            />
+                            :
+                            <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 ${this.state.user.first_name}!`}</span>
-                            <span>{this.state.user?.email}</span>
+                            <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.MINI} />
+                    <NSSpace size={NSSpaceSizeType.MICRO} />
-                    <div className={Styles.ns_buttons_wrapper}>
+                    <div className={Styles.ns_actions_wrapper}>
                         <NSLink
                             href="https://account.namirasoft.com/user/profile"
-							target="_blank"
+                            target="_blank"
                             title='Profile'
-                            classList={[Styles.ns_button]}
-                            style={{ backgroundColor: "#B2BBD9" }}
+                            classList={[Styles.ns_link]}
+                        />
+                        <NSLink
+                            href="https://cost.namirasoft.com/"
+                            target="_blank"
+                            title='Billing and Cost'
+                            classList={[Styles.ns_link]}
                         />
                         <NSLink
                             href="https://account.namirasoft.com/setting/notification"
-							target="_blank"
+                            target="_blank"
                             title='Notificaton Setting'
-                            classList={[Styles.ns_button]}
+                            classList={[Styles.ns_link]}
                         />
                         <NSLink
                             href="https://account.namirasoft.com/password/change"
-							target="_blank"
+                            target="_blank"
                             title='Change Password'
-                            classList={[Styles.ns_button]}
+                            classList={[Styles.ns_link]}
                         />
                         <NSButton
                             onClick={{ action: () => this.props.client.logout() }}
                             title='Log Out'
+                            classList={[Styles.ns_button]}
                             icon={{
                                 src: "https://static.namirasoft.com/image/concept/logout/base.svg",
                                 alt: "Logout Icon"