namirasoft-site-react 1.3.54 → 1.3.56

package/dist/components/NSInputPassword.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { BaseComponentProps } from "../props/BaseComponentProps";
+export interface NSInputPasswordProps extends BaseComponentProps {
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+export interface NSInputPasswordState {
+    value: string;
+}
+export declare class NSInputPassword extends React.Component<NSInputPasswordProps, NSInputPasswordState> {
+    constructor(props: NSInputPasswordProps);
+    getValue(): string;
+    setValue(value: string): void;
+    private onChanged;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/dist/components/NSInputPassword.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSInputPassword.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+export class NSInputPassword extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.state = {
+            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
+        };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+    }
+    getValue() {
+        return this.state.value;
+    }
+    setValue(value) {
+        this.setState({ value });
+    }
+    onChanged(e) {
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+    }
+    render() {
+        var _a;
+        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputString, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "password", className: Styles.ns_input, placeholder: this.props.placeholder })] }));
+    }
+}
+//# sourceMappingURL=NSInputPassword.js.map

package/dist/components/NSInputPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSInputPassword.js","sourceRoot":"","sources":["../../src/components/NSInputPassword.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAClD,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAgBrE,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAqD;IAE5F,YAAY,KAA2B;;QAEnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACQ,MAAM;;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,QAAQ,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAEvG,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GACrC,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputPassword.module.css

@@ -0,0 +1,27 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/dist/components/NSLinkBlue.module.css

@@ -13,7 +13,7 @@
 	box-shadow: inset 2px 2px 2px 0 #1754F3;
 	color: #fff;
 	font-size: 16px;
-	font-weight: 400;
+	font-weight: 600;
 	line-height: 16px;
 	display: flex;
 	justify-content: center;
@@ -33,4 +33,4 @@
 	top: 0;
 	bottom: 0;
 	cursor: pointer;
-}
+}

package/dist/main.d.ts

@@ -14,6 +14,7 @@ export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";
 export * from "./components/NSInputFloat";
 export * from "./components/NSInputIP";
+export * from "./components/NSInputPassword";
 export * from "./components/NSInputInteger";
 export * from "./components/NSInputPhone";
 export * from "./components/NSInputPrice";

package/dist/main.js

@@ -14,6 +14,7 @@ export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";
 export * from "./components/NSInputFloat";
 export * from "./components/NSInputIP";
+export * from "./components/NSInputPassword";
 export * from "./components/NSInputInteger";
 export * from "./components/NSInputPhone";
 export * from "./components/NSInputPrice";

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/dist/pages/NSLoginPage.js

@@ -1,18 +1,18 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
-import { NSButtonGreen } from "../main";
-import { NSLinkGreen } from "../main";
+import { NSButtonGreen, NSSpace, NSSpaceSizeType } from "../main";
 import Styles from './NSLoginPage.module.css';
+import { NSLinkBlue } from 'namirasoft-site-react';
 export class NSLoginPage extends Component {
     render() {
         var _a;
         let button = _jsx(_Fragment, {});
         if (this.props.href)
-            button = _jsx(NSLinkGreen, { title: "Login", href: (_a = this.props.href) !== null && _a !== void 0 ? _a : "" });
+            button = _jsx(NSLinkBlue, { title: "Login", href: (_a = this.props.href) !== null && _a !== void 0 ? _a : "" });
         else if (this.props.onClick)
             button = _jsx(NSButtonGreen, { title: "Login", onClick: this.props.onClick });
-        return (_jsx("div", { style: { backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }, children: _jsxs("div", { className: `${Styles.login_container}`, style: { marginTop: "100px" }, children: [_jsx("div", { className: "m-auto", children: _jsx("img", { width: 256, height: 256, src: this.props.logo, alt: "logo" }) }), _jsx("div", { children: _jsx("h1", { className: "text-center mb-3", children: this.props.title }) }), _jsx("div", { className: "m-auto", children: button })] }) }));
+        return (_jsx("div", { style: { backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }, children: _jsxs("div", { className: `${Styles.ns_login_container}`, style: { marginTop: "100px" }, children: [_jsx("div", { className: `${Styles.ns_logo}`, children: _jsx("img", { width: 256, height: 256, src: this.props.logo, alt: "logo" }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { children: _jsx("h1", { className: `${Styles.ns_title}`, children: this.props.title }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { className: `${Styles.ns_button}`, children: button })] }) }));
     }
 }
 //# sourceMappingURL=NSLoginPage.js.map

package/dist/pages/NSLoginPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAU7C,MAAM,OAAO,WAAY,SAAQ,SAAiB;IAErC,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,WAAW,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aACnE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,YAC1F,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACtE,cAAK,SAAS,EAAC,QAAQ,YACnB,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAO,GACnE,EACN,wBAAK,aAAI,SAAS,EAAC,kBAAkB,YAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,GAAM,EACnE,cAAK,SAAS,EAAC,QAAQ,YAClB,MAAM,GACL,IACJ,GACJ,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAUnD,MAAM,OAAO,WAAY,SAAQ,SAAiB;IAErC,MAAM;;QAEX,IAAI,MAAM,GAAG,mBAAK,CAAC;QACnB,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,MAAM,GAAG,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;aAClE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;YACvB,MAAM,GAAG,KAAC,aAAa,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAI,CAAC;QAC1E,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,YAC1F,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACzE,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,YAC/B,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAC,MAAM,GAAO,GACnE,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,wBAAK,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAM,GAAM,EACvE,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,YAChC,MAAM,GACL,IACJ,GACJ,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/pages/NSLoginPage.module.css

@@ -1,6 +1,23 @@
-.login_container { 
+.ns_login_container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+}
+
+.ns_logo {
+	text-align: center;
+	margin: auto;
+}
+
+.ns_title {
+	font-size: 32px;
+	font-weight: 700;
+	margin: auto;
+	text-align: center;
+}
+
+.ns_button {
+	margin: auto;
+	text-align: center;
 }

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.54",
+    "version": "1.3.56",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -30,7 +30,7 @@
         "link-react": "^3.0.0",
         "namirasoft-api-link": "^1.3.1",
         "namirasoft-core": "^1.3.18",
-        "namirasoft-site-react": "^1.3.53",
+        "namirasoft-site-react": "^1.3.55",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
         "react-app-rewired": "^2.2.1",

package/src/components/NSInputPassword.module.css

@@ -0,0 +1,27 @@
+.ns_input_parent {
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+
+.ns_input {
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.ns_input_icon {
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/src/components/NSInputPassword.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSInputPassword.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSInputPasswordProps extends BaseComponentProps
+{
+    title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+}
+
+export interface NSInputPasswordState 
+{
+    value: string;
+}
+
+export class NSInputPassword extends React.Component<NSInputPasswordProps, NSInputPasswordState>
+{
+    constructor(props: NSInputPasswordProps)
+    {
+        super(props);
+        this.state = {
+            value: props.defaultValue ?? "",
+        };
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    setValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+
+                <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <img
+                    className={Styles.ns_input_icon}
+                    src={IconInputString}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.onChanged}
+                    type="password"
+                    className={Styles.ns_input}
+                    placeholder={this.props.placeholder}
+                />
+            </div>
+        );
+    }
+}

package/src/components/NSLinkBlue.module.css

@@ -13,7 +13,7 @@
 	box-shadow: inset 2px 2px 2px 0 #1754F3;
 	color: #fff;
 	font-size: 16px;
-	font-weight: 400;
+	font-weight: 600;
 	line-height: 16px;
 	display: flex;
 	justify-content: center;
@@ -33,4 +33,4 @@
 	top: 0;
 	bottom: 0;
 	cursor: pointer;
-}
+}

package/src/main.ts

@@ -14,6 +14,7 @@ export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";
 export * from "./components/NSInputFloat";
 export * from "./components/NSInputIP";
+export * from "./components/NSInputPassword";
 export * from "./components/NSInputInteger";
 export * from "./components/NSInputPhone";
 export * from "./components/NSInputPrice";

package/src/pages/NSLoginPage.module.css

@@ -1,6 +1,23 @@
-.login_container { 
+.ns_login_container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
+}
+
+.ns_logo {
+	text-align: center;
+	margin: auto;
+}
+
+.ns_title {
+	font-size: 32px;
+	font-weight: 700;
+	margin: auto;
+	text-align: center;
+}
+
+.ns_button {
+	margin: auto;
+	text-align: center;
 }

package/src/pages/NSLoginPage.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { Component } from 'react';
-import { NSButtonGreen } from "../main";
-import { NSLinkGreen } from "../main";
+import { NSButtonGreen, NSSpace, NSSpaceSizeType } from "../main";
 import Styles from './NSLoginPage.module.css'
+import { NSLinkBlue } from 'namirasoft-site-react';
 interface IProps
 {
     title: string;
@@ -18,17 +18,19 @@ export class NSLoginPage extends Component<IProps>
     {
         let button = <></>;
         if (this.props.href)
-            button = <NSLinkGreen title="Login" href={this.props.href ?? ""} />;
+            button = <NSLinkBlue title="Login" href={this.props.href ?? ""} />;
         else if (this.props.onClick)
             button = <NSButtonGreen title="Login" onClick={this.props.onClick} />;
         return (
             <div style={{ backgroundImage: this.props.background, width: "100%", backgroundSize: "cover" }}>
-                <div className={`${Styles.login_container}`} style={{ marginTop: "100px" }}>
-                    <div className="m-auto">
+                <div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
+                    <div className={`${Styles.ns_logo}`}>
                         <img width={256} height={256} src={this.props.logo} alt="logo"></img>
                     </div>
-                    <div><h1 className="text-center mb-3">{this.props.title}</h1></div>
-                    <div className="m-auto">
+                    <NSSpace size={NSSpaceSizeType.SMALL} />
+                    <div><h1 className={`${Styles.ns_title}`}>{this.props.title}</h1></div>
+                    <NSSpace size={NSSpaceSizeType.SMALL} />
+                    <div className={`${Styles.ns_button}`}>
                         {button}
                     </div>
                 </div>