aio-login 7.1.0 → 8.0.1

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 (5) hide show
  1. package/index.css +91 -166
  2. package/index.d.ts +102 -0
  3. package/index.js +1 -54
  4. package/package.json +31 -26
  5. package/README.md +0 -1
package/index.css CHANGED
@@ -1,187 +1,112 @@
1
-
2
- .aio-login{
3
- font-size:14px;
4
- font-family:IRANSans-Light;
5
- direction:rtl;
6
- width:100%;
7
- min-height:fit-content;
8
- min-width: 160px;
9
- }
10
- .aio-login-reload{
11
- width:100%;
12
- height:60px;
1
+ .ai-login {
2
+ background: #fff;
3
+ color: #fff;
4
+ gap: 12px;
5
+ position: fixed;
6
+ width: 100%;
7
+ height: 100%;
8
+ left: 0;
9
+ top: 0;
13
10
  display: flex;
14
11
  align-items: center;
15
- justify-content: center;
16
- margin:24px;
17
- }
18
- .aio-login-reload button{
19
- font-size:14px;
20
- background:dodgerblue;
21
- color:#fff;
22
- border:none;
23
- padding:12px 36px;
24
- border-radius:6px;
12
+ overflow-y: auto;
25
13
  }
26
- .aio-login .aio-form{
27
- background: none;
28
- }
29
- .aio-login .aio-input-form-body{
30
- padding:12px;
31
- background: none;
32
- overflow:visible;
33
- }
34
- .aio-login .aio-input-before{
35
- background:#f6f7f9;
36
- color:#9ba9c3;
37
- }
38
- .aio-login .aio-input-after{
39
- background:#f6f7f9;
40
- color:#9ba9c3;
41
- }
42
- .aio-login-or{
43
- font-size:14px;
44
- color:#aaa;
14
+
15
+ .ai-login .aio-input {
16
+ height: 36px;
17
+ width: 100%;
18
+ border-radius: 6px;
19
+ border: none;
20
+ background: #ddd;
21
+ color: #333;
22
+ padding: 0 6px;
23
+ outline: none;
24
+ flex-shrink: 0;
25
+ margin-top: 30px;
45
26
  }
46
- .aio-login-splitter{
47
- height:1px;
48
- background:#aaa;
49
- width:100%;
27
+
28
+ .ai-login-form {
29
+ width: 100%;
30
+ background: #8b808829;
31
+ border-radius: 12px;
32
+ padding: 12px 24px;
33
+ max-width: 300px;
34
+ display: flex;
35
+ flex-direction: column;
36
+ flex-shrink: 0;
50
37
  }
51
- .aio-login-title{
52
- font-size:18px;
53
- color:#445778;
38
+
39
+ .ai-login-title {
40
+ font-size: 20px;
41
+ color: #0069ff;
54
42
  font-weight: bold;
55
- padding:0 12px;
56
- margin-bottom:12px;
57
- }
58
- .aio-login-subtitle{
59
- font-size:12px;
60
- color:#445778;
61
- padding:0 12px;
62
- margin-bottom:6px;
63
- text-align: right;
64
- }
65
- .aio-login-text{
66
- padding:0 12px;
67
- font-size:12px;
68
- font-weight:bold;
69
- color:darkblue;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ margin-bottom: 12px;
70
47
  }
71
- .aio-login-other-method{
72
- border: 0;
73
- color: rgb(23, 123, 223);
74
- background:#f1f6f7;
75
- width:100%;
76
- height:36px;
77
- border-radius:6px;
78
- cursor: pointer;
48
+
49
+ .ai-login-submit {
50
+ border: none;
51
+ height: 36px;
52
+ border-radius: 6px;
53
+ background: #0069ff;
54
+ color: #fff;
79
55
  font-family: inherit;
80
- text-align:right;
81
- padding:0 8px;
82
- user-select: none;
83
- -webkit-user-select: none;
84
- font-size: 12px;
85
- font-weight: bold;
86
- margin-bottom:12px;
87
- }
88
- .aio-login-Gmail{
89
- background:#387bdc;
90
- color:#fff;
91
- }
92
- .aio-login-other-method svg{
93
- background:#fff;
94
- border-radius:100%;
95
- padding:3px;
96
- }
97
- .aio-login-form{
98
- background:#fff;
99
- margin:12px;
100
- width:100%;
101
- padding:12px;
102
- border-radius:12px;
103
56
  }
104
- .aio-login .aio-input{
105
- border:1px solid #ced9e0;
106
- min-height:36px;
107
- outline:none;
108
- border-radius:6px;
109
- font-size:inherit;
110
- }
111
- .aio-login .aio-input input{
112
- font-size:inherit;
113
- }
114
- .aio-login .aio-input-form{
115
- overflow:visible;
57
+
58
+ .ai-login-mode {
59
+ border: none;
60
+ color: #0069ff;
61
+ background: none;
62
+ padding: 3px 12px;
63
+ text-decoration: underline;
64
+ border-radius: 4px;
65
+ height: 48px;
116
66
  }
117
67
 
68
+ .ai-login-errors {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 6px;
72
+ padding: 12px;
73
+ box-sizing: border-box;
74
+ }
118
75
 
119
- .aio-login-submit{
120
- height:40px;
121
- width:100%;
122
- border-radius:6px;
123
- border:1px solid #1265db;
124
- background:#1265db;
125
- color:#fff;
126
- display:flex;
76
+ .ai-login-error {
77
+ color: red;
78
+ display: flex;
127
79
  align-items: center;
128
80
  justify-content: center;
129
- cursor:pointer;
130
- font-family:inherit;
131
- }
132
- .aio-login-submit-outline{
133
- background:none;
134
- color:#1265db;
81
+ font-size: 12px;
135
82
  }
136
- .aio-login-button{
137
- height:40px;
138
- width:100%;
139
- border-radius:6px;
140
- border:1px solid #1265db;
141
- background:#fff;
142
- border:none;
143
- color:#1265db;
144
- display:flex;
83
+
84
+ .ai-login-before {
85
+ flex: 1;
86
+ display: flex;
145
87
  align-items: center;
146
88
  justify-content: center;
147
- cursor:pointer;
148
- }
149
- .aio-login-submit:disabled{
150
- cursor:not-allowed;
151
- background:#aaa;
152
- border:1px solid #aaa;
89
+ flex-shrink: 0;
153
90
  }
154
- .aio-login .aio-form-row{
155
- margin-bottom:12px;
156
- }
157
- .aio-login .aio-input.aio-login-otp-code input{
158
- font-size: 200%;
159
- letter-spacing: 24px;
160
- text-align: center;
161
- direction:ltr;
162
- }
163
- .aio-login-register-button{
164
- color:#1265db;
165
- background:none;
166
- border:none;
167
- font-family:inherit;
168
- cursor:pointer;
169
- }
170
- .aio-login .aio-login-register-tabs{
171
- margin-bottom:24px;
172
- font-family: inherit;
173
- border:none;
91
+
92
+ .ai-login-after {
93
+ flex: 1;
94
+ align-items: center;
95
+ justify-content: center;
96
+ display: flex;
97
+ flex-shrink: 0;
174
98
  }
175
- .aio-login-register-tabs .aio-input-tabs-option{
176
- flex:1;
99
+
100
+ .ai-login .aio-input-label {
101
+ transform: translateY(-12px);
102
+ background: none !important;
103
+ left: 0 !important;
104
+ font-size: 14px;
105
+ font-weight: bold;
106
+ justify-content: flex-start !important;
107
+ color: #2939518a;
177
108
  }
178
- .aio-login-register-tabs .aio-input-tabs-option-value{
179
- text-align:center;
180
- align-items: center;
109
+
110
+ .ai-login button:disabled {
111
+ opacity: 0.3;
181
112
  }
182
- .aio-login-forget{
183
- padding:0 12px;
184
- font-size:80%;
185
- margin-top:12px;
186
- margin-bottom:24px;
187
- }
package/index.d.ts ADDED
@@ -0,0 +1,102 @@
1
+ import { FC, ReactNode } from "react";
2
+ import { AITYPE } from "aio-input";
3
+ import './index.css';
4
+ type I_loginMode = 'userpass' | 'register' | 'otpcode' | 'otpnumber';
5
+ type I_login_field = string;
6
+ export type I_login_key = 'registerButton' | 'userpassButton' | 'otpnumberButton' | 'otpcodeButton' | 'registerTitle' | 'userpassTitle' | 'otpcodeTitle' | 'otpnumberTitle' | 'switchuserpass' | 'switchregister' | 'switchotp' | 'repasswordMatch' | 'usernameRequired' | 'passwordRequired' | 'repasswordRequired' | 'otpnumberRequired' | 'otpcodeLength' | 'registerError' | 'userpassError' | 'otpcodeError' | 'otpnumberError';
7
+ type I_login_model = {
8
+ username: string;
9
+ password: string;
10
+ otpnumber: string;
11
+ otpcode: string;
12
+ register: any;
13
+ };
14
+ type I_AILogin = {
15
+ checkToken: (token: string) => Promise<{
16
+ method: 'post' | 'get';
17
+ url: string;
18
+ body?: any;
19
+ onSuccess: (response: any) => string | boolean;
20
+ onCatch: (response: any) => string | false;
21
+ }>;
22
+ before?: (mode: I_loginMode) => ReactNode;
23
+ after?: (mode: I_loginMode) => ReactNode;
24
+ renderApp: (p: {
25
+ user: any;
26
+ token: string;
27
+ logout: () => void;
28
+ }) => ReactNode;
29
+ translate?: (key: I_login_key) => string | undefined;
30
+ fa?: boolean;
31
+ rememberTime: number;
32
+ id: string;
33
+ splash?: {
34
+ html: ReactNode;
35
+ time: number;
36
+ };
37
+ label: (field: I_login_field) => string;
38
+ validation?: (model: I_login_model, mode: I_loginMode) => string | undefined;
39
+ otpLength?: number;
40
+ otp?: {
41
+ numberApi: (model: I_login_model, mode: I_loginMode) => Promise<{
42
+ method: 'post' | 'get';
43
+ url: string;
44
+ body?: any;
45
+ onSuccess: (response: any) => Promise<{
46
+ message?: string;
47
+ }>;
48
+ onCatch: (response: any) => string;
49
+ }>;
50
+ codeApi: (model: I_login_model, mode: I_loginMode) => Promise<{
51
+ method: 'post' | 'get';
52
+ url: string;
53
+ body?: any;
54
+ onSuccess: (response: any) => Promise<{
55
+ user: any;
56
+ token: string;
57
+ message?: string;
58
+ }>;
59
+ onCatch: (response: any) => string;
60
+ }>;
61
+ };
62
+ userpass?: {
63
+ api: (model: I_login_model, mode: I_loginMode) => Promise<{
64
+ method: 'post' | 'get';
65
+ url: string;
66
+ body?: any;
67
+ onSuccess: (response: any) => Promise<{
68
+ user: any;
69
+ token: string;
70
+ message?: string;
71
+ }>;
72
+ onCatch: (response: any) => string;
73
+ }>;
74
+ };
75
+ register?: {
76
+ defaultValue?: {
77
+ [field: string]: any;
78
+ };
79
+ inputs?: (model: I_login_model) => (AITYPE & {
80
+ field: string;
81
+ })[];
82
+ api: (model: I_login_model, mode: I_loginMode) => Promise<{
83
+ method: 'post' | 'get';
84
+ url: string;
85
+ body?: any;
86
+ onSuccess: (response: any) => Promise<{
87
+ message?: string;
88
+ }>;
89
+ onCatch: (response: any) => string;
90
+ }>;
91
+ };
92
+ mode?: I_loginMode;
93
+ attrs?: any;
94
+ setAttrs?: (key: I_login_key) => any;
95
+ mock?: {
96
+ user: any;
97
+ token: string;
98
+ };
99
+ };
100
+ export declare function AIOLogin_updateCatchedUser(loginId: string, newUser: any): any;
101
+ declare const AILogin: FC<I_AILogin>;
102
+ export default AILogin;
package/index.js CHANGED
@@ -1,54 +1 @@
1
- function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:String(t)}function _toPrimitive(e,t){if("object"!=typeof e||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,t||"default");if("object"!=typeof r)return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}import e,{Component as t,createRef as i}from"react";import r from"react-virtual-dom";import o from"aio-storage";import s,{getFormInputs as n}from"aio-input";import{Icon as l}from"@mdi/react";import{mdiCellphone as a,mdiLock as u,mdiLoading as d,mdiAccount as p,mdiAccountBoxOutline as g,mdiEmail as m,mdiChevronRight as h}from"@mdi/js";import f from"aio-popup";import"./index.css";import{jsx as b}from"react/jsx-runtime";import{jsxs as c}from"react/jsx-runtime";export default class y{constructor(e){_defineProperty(this,"render",(e={})=>{let{attrs:t=this.props.attrs,profile:i,appState:r}=e;if(i&&("object"!=typeof i||!Array.isArray(i.fields)||!i.fields.length||"function"!=typeof i.onSubmit)){let o=`
2
- aio-login-error => profile props should be an object contain :
3
- submitText : string | undefined,
4
- title : string | undefined,
5
- subtitle : string | undefined,
6
- fields : ( <default field> | string )[],
7
- model : { [ field : <default field>] : any },
8
- onClose : (() => void) | undefined,
9
- onSubmit : ( model : { [ field : <default field> ] : any } ) => void,
10
- <default field> : (
11
- "fullname" | "firstname" | "lastname" | "username" | "address" | "email" | "fathername" | "phone" | "mobile" | "postalcode",
12
- "nationalcode" | "idcode" | "cardbank" | "state" | "city" | "gender" | "married" | "militaryservice" | "location"
13
- )`;return alert(o),console.log(o),null}return b(AIOLOGIN,{...this.props,getActions:({setMode:e})=>this.setMode=e,profile:i,attrs:t,appState:r})});let{id:t,onSubmit:i,modes:r,timer:s,checkToken:n,register:l,userId:a,attrs:u,forget:d,otpLength:p,renderApp:g,renderSplash:m,splashTime:h,renderLogin:f}=e;AIOLoginValidator(e);let c=o(`-AIOLogin-${t}`);this.setStorage=(e,t)=>{if("object"==typeof e)for(let i in e)c.save({name:i,value:e[i]});else c.save({name:e,value:t})},this.getStorage=e=>{let t=c.load({name:"token",def:!1}),i=c.load({name:"userId",def:""}),r=c.load({name:"userInfo"}),o={token:t,userId:i,userInfo:r};return e?o[e]:o},this.removeStorage=e=>c.remove({name:e}),this.logout=()=>{this.removeStorage("token"),window.location.reload()},this.props={id:t,checkToken:n,onSubmit:i,modes:r,register:l,userId:a,attrs:u,timer:s,forget:d,otpLength:p,renderApp:g,renderSplash:m,splashTime:h,renderLogin:f,getStorage:this.getStorage.bind(this),setStorage:this.setStorage.bind(this),removeStorage:this.removeStorage.bind(this),logout:this.logout}}};class AIOLOGIN extends t{constructor(e){super(e);let{splashTime:t=0}=e;this.state={isTokenChecked:!1,showReload:!1,mode:e.mode||e.modes[0],loading:!1,showSplash:!0},e.getActions({setMode:this.setMode.bind(this)}),setTimeout(()=>this.setState({showSplash:!1}),t)}async checkToken(){let{getStorage:e,checkToken:t,removeStorage:i}=this.props,{token:r,userId:o,userInfo:s}=e(),n;try{n=await t(r,{userId:o,userInfo:s})}catch(l){new f().addAlert({type:"error",text:"بررسی توکن با خطا روبرو شد",subtext:this.getError(l)})}!0===n?this.setMode("auth"):!1===n?i("token"):("string"==typeof n&&new f().addAlert({type:"error",text:"بررسی توکن با خطا روبرو شد",subtext:n}),this.setState({showReload:!0})),this.setState({isTokenChecked:!0})}getError(e){if("string"==typeof e)return e;if("object"==typeof e){if("object"!=typeof e.response)return e.message||e.Message;if("object"==typeof e.response.data){let{message:t,Message:i}=e.response.data;return i||t}return"string"==typeof e.response.data?e.response.data:"error"}}async componentDidMount(){let{profile:e}=this.props;!e&&this.checkToken()}setLoading(e){this.setState({loading:e})}async onSubmit(e){let{onSubmit:t}=this.props,{mode:i}=this.state,r;this.setLoading(!0);try{r=await t(e,i)}catch{this.setLoading(!1);return}if(this.setLoading(!1),"string"==typeof r){let o={OTPNumber:"ارسال شماره همراه",OTPCode:"ارسال کد یکبار مصرف",userName:"ارسال نام کاربری و رمز عبور",phoneNumber:"ارسال شماره همراه و رمز عبور",email:"ارسال آدرس ایمیل و رمز عبور",register:"عملیات ثبت نام"}[i];o=`${o} با خطا روبرو شد`;let s=r;new f().addAlert({type:"error",text:o,subtext:s})}}async onSubmitProfile(e){let{profile:t}=this.props,i;this.setLoading(!0);try{i=await t.onSubmit(e)}catch{this.setLoading(!1);return}this.setLoading(!1),"string"==typeof i&&new f().addAlert({type:"error",text:"ویرایش پروفایل با خطا روبرو شد",subtext:i})}setMode(e){this.setState({mode:e})}render(){let{otpLength:e,id:t,timer:i,modes:r,userId:o,register:s={},profile:n,attrs:l={},forget:a,getStorage:u,logout:d,renderSplash:p=()=>null,renderApp:g,renderLogin:m,appState:h}=this.props,{isTokenChecked:f,showReload:c,mode:y,loading:$,showSplash:_}=this.state;if(n){let N={timer:i,id:t,attrs:l,userId:o,loading:$,profile:n,onSubmitProfile:this.onSubmitProfile.bind(this)};return b(LoginForm,{...N})}if(c)return b("div",{className:"aio-login-reload",children:b("button",{onClick:()=>window.location.reload(),children:"بارگذاری مجدد"})});if(!f||_)return p();if("auth"===y){let{token:v,userId:I,userInfo:T}=u();return g({token:v,userId:I,userInfo:T,logout:d,appState:h})}let x=b(LoginForm,{forget:a,timer:i,otpLength:e,id:t,modes:r,attrs:l,userId:o,register:s,loading:$,mode:y,onSubmit:this.onSubmit.bind(this),onChangeMode:this.setMode.bind(this)});return m?m(x):x}}class LoginForm extends t{constructor(e){super(e),this.storage=o(`-AIOLogin-${e.id}`);let{timer:t=30}=e;this.state={timer:t,recode:!1,tab:"login",model:this.getInitialModel(e.mode),error:!e.userId}}getLabels(e){let{model:t,tab:i}=this.state,{register:r,profile:o,forget:s}=this.props;if(o){let{title:n,onClose:l,submitText:a="ویرایش اطلاعات کاربری",subtitle:u=!1}=o;return n||l?{inputLabel:!1,title:n||"ویرایش اطلاعات کاربری",submitText:a,subtitle:u,backButton:!!l}:{inputLabel:!1,title:!1,subtitle:!1,submitText:a,backButton:!1}}if("OTPNumber"===e)return{inputLabel:"شماره همراه",title:"ورود با کد یکبار مصرف",submitText:"ورود",subtitle:"شماره همراه خود را وارد کنید . پیامکی حاوی کد برای شما ارسال خواهد شد"};if("OTPCode"===e)return{inputLabel:"کد پیامک شده",title:!1,submitText:"ورود",subtitle:`کد پیامک شده به شماره ی ${t.login.userId} را وارد کنید`};if("register"===e){let{title:d,submitText:p="ثبت نام",subtitle:g=!1}=r;return{inputLabel:!1,title:d,submitText:p,subtitle:g,backButton:"register"!==i}}if("forgetUserId"===e){let m=`${"phoneNumber"===s.mode?"شماره همراه":"ایمیل"} خود را وارد کنید . کد باز یابی رمز عبور برای شما ارسال خواهد شد`;return{inputLabel:"email"===s.mode?"ایمیل":"شماره همراه",backButton:!0,title:"بازیابی رمز عبور",submitText:"دریافت کد بازیابی رمز",subtitle:m}}if("forgetPassword"===e){let{mode:h}=s,f=`کد ${"phoneNumber"===h?"پیامک":"ایمیل"} شده به ${"phoneNumber"===h?"شماره ی":"آدرس"} ${t.forget.userId} را وارد کنید`;return{inputLabel:`کد ${"email"===h?"ایمیل":"پیامک"} شده`,backButton:!0,title:"بازیابی رمز عبور",submitText:"تایید",subtitle:f}}return"userName"===e?{inputLabel:"نام کاربری",title:"ورود با نام کاربری",submitText:"ورود",subtitle:!1}:"email"===e?{inputLabel:"ایمیل",title:"ورود با ایمیل",submitText:"ورود",subtitle:!1}:"phoneNumber"===e?{inputLabel:"شماره همراه",title:"ورود با شماره همراه",submitText:"ورود",subtitle:!1}:void 0}changeMode(e){let{onChangeMode:t}=this.props;t(e),this.setState({model:this.getInitialModel(e)})}getInitialModel(e){e||(e=this.props.mode);let{userId:t,profile:i={}}=this.props;return{forget:{},register:{},profile:i.model,login:{userId:t}}}title_layout({title:e,backButton:t}){if(!e)return!1;let{modes:i,profile:r}=this.props;return{className:"aio-login-title",align:"v",row:[{show:!!t,html:b(l,{path:h,size:1}),size:48,align:"vh",onClick:()=>r?r.onClose():this.changeMode(i[0])},{html:e}]}}subtitle_layout({subtitle:e}){return!!e&&{html:e,className:"aio-login-subtitle"}}getInput_phoneNumber(e,t){return{field:e,label:"شماره همراه",input:{type:"text",justNumber:!0,before:b(l,{path:a,size:.8}),placeholder:"09...",maxLength:11,attrs:{style:{direction:"ltr"}}},validations:[["function",()=>{let e=t();return e?0!==e.indexOf("09")?"شماره همراه باید با 09 شروع شود":11!==e.length&&"شماره همراه باید 11 رقم باشد":"شماره همراه خود را وارد کنید"}]]}}getInput_userName(e){let{userId:t}=this.props;return{field:e,label:"نام کاربری",validations:[["required"]],style:{direction:"ltr"},input:{type:"text",disabled:!!t,before:b(l,{path:p,size:.8})}}}getInput_email(e,t){let{userId:i}=this.props;return{field:e,label:"ایمیل",style:{direction:"ltr"},input:{type:"text",disabled:!!i,before:b(l,{path:m,size:.8})},validations:[["function",()=>{let e=t();return e?!!(1>e.indexOf("@")||-1===e.indexOf(".")||e.lastIndexOf(".")>e.length-3)&&"ایمیل خود را به درستی وارد کنید":"ایمیل خود را وارد کنید"}]]}}getInput_otp(e,t){let{otpLength:i}=this.props;return{field:e,label:"رمز یکبار مصرف",input:{maxLength:i,justNumber:!0,type:"text",placeholder:Array(i).fill("-").join(""),className:"aio-login-otp-code"},validations:[["function",()=>{let{otpLength:e}=this.props,i=t();return i?i.length!==e&&`رمز یکبار مصرف باید شامل ${e} کاراکتر باشد`:"رمز یکبار مصرف را وارد کنید"}]]}}getInput_password(e,t){let i;return i=2===t?[["function",()=>{let{model:e}=this.state,t=e.forget.reNewPassword;return t?t.length<1?"رمز عبور را وارد کنید":t!==e.forget.newPassword&&"رمز با تکرار آن مطابقت ندارد":"تکرار رمز عبور جدید را وارد کنید"}]]:[["required"]],{field:e,label:["رمز عبور","رمز عبور جدید","تکرار رمز عبور جدید"][t],validations:i,input:{type:"password",before:b(l,{path:u,size:.8}),style:{direction:"ltr"},visible:!0}}}getInputs(){let{forget:e,mode:t,profile:i,register:r}=this.props;return i?n(i.fields,"profile"):"register"===t?n(r.fields,"register"):"forgetUserId"===t?[this["getInput_"+e.mode]("value.forget.userId",()=>this.state.model.forget.userId)]:"forgetPassword"===t?[this.getInput_otp("value.forget.password",()=>this.state.model.forget.password),this.getInput_password("value.forget.newPassword",1),this.getInput_password("value.forget.reNewPassword",2)]:"OTPNumber"===t?[this.getInput_phoneNumber("value.login.userId",()=>this.state.model.login.userId)]:"OTPCode"===t?[this.getInput_otp("value.login.password",()=>this.state.model.login.password)]:[this["getInput_"+t]("value.login.userId",()=>this.state.model.login.userId),this.getInput_password("value.login.password",0)]}form_layout(e){let{model:t}=this.state,{mode:i,userId:r}=this.props;return{className:"ofy-auto",html:b(s,{type:"form",lang:"fa",value:t,rtl:!0,initialDisabled:!r,onChange:(e,t)=>{this.setState({model:e,error:!!t.length})},inputs:{props:{gap:12},column:this.getInputs(e)},footer:({disabled:t})=>this.submit_layout({submitText:e.submitText,disabled:t})},i)}}submit_layout({submitText:e,disabled:t}){let{loading:i,timer:o,mode:s}=this.props,n={style:{padding:"0 12px"},html:b(SubmitButton,{mode:s,timer:o,text:e,loading:i,disabled:()=>!!t,onClick:()=>this.onSubmit()})};return b(r,{layout:n})}async onSubmit(){let{onSubmit:e,profile:t,onSubmitProfile:i}=this.props,{model:r,error:o}=this.state;!o&&(t?i(r):e(r))}changeUserId_layout(){let{mode:e}=this.props;return"OTPCode"===e&&{onClick:()=>this.changeMode("OTPNumber"),className:"aio-login-text m-b-12",align:"vh",html:"تغییر شماره همراه"}}recode_layout(){let{model:e}=this.state,{mode:t,onChangeMode:i}=this.props;return"OTPCode"===t&&{className:"aio-login-text m-b-12",html:`ارسال مجدد کد`,align:"vh",onClick:()=>{i("OTPNumber"),this.setState({model:{...e,login:{...e.login,password:""}}})}}}changeMode_layout(){let{mode:e,modes:t,profile:i}=this.props;if("register"===e||i||"forgetUserId"===e||"forgetPassword"===e)return!1;let r=[];for(let o=0;o<t.length;o++){let s=t[o];if(e===s||"OTPCode"===e&&"OTPNumber"===s)continue;let n={OTPNumber:"رمز یکبار مصرف",userName:"نام کاربری و رمز عبور",email:"آدرس ایمیل و رمز عبور",phoneNumber:"شماره همراه و رمز عبور"}[s],u={OTPNumber:p,phoneNumber:a,userName:g,email:m}[s];r.push({flex:1,className:`of-visible aio-login-other-method aio-login-${s}`,onClick:()=>this.changeMode(s),row:[{html:b(l,{path:u,size:.7}),align:"vh"},{size:6},{align:"v",html:n}]})}return!!r.length&&{className:"p-h-12",column:[{gap:6,row:[{flex:1,html:b("div",{className:"aio-login-splitter"}),align:"v"},{html:"یا ورود با",align:"v",className:"aio-login-or bold"},{flex:1,html:b("div",{className:"aio-login-splitter"}),align:"v"}]},{size:12},{grid:r,gridCols:1,gridRow:{gap:12}}]}}registerButton_layout(){let{register:e,mode:t}=this.props;return"register"===t||e.type,!1}registerTab_layout(){let{register:e,modes:t,mode:i,profile:r}=this.props;if(!e||"tab"!==e.type||r||"forgetUserId"===i||"forgetPassword"===i)return!1;let{tabText:o="ثبت نام"}=e;return{html:b(s,{className:"aio-login-register-tabs",type:"tabs",value:"register"===i?"register":"login",options:[{text:"ورود",value:"login"},{text:o,value:"register"}],onChange:e=>{"login"===e?this.changeMode(t[0]):"register"===e&&this.changeMode("register")}})}}forget_layout(){let{forget:e,mode:t,profile:i}=this.props;if(i||!e||"register"===t||"OTPCode"===t||"OTPNumber"===t||"forgetUserId"===t||"forgetPassword"===t)return!1;let{text:r=[]}=e;return{className:"aio-login-forget",html:r[0]||"رمز عبور خود را فراموش کرده اید؟ اینجا کلیک کنید",onClick:()=>this.changeMode("forgetUserId")}}render(){let{attrs:e,mode:t,profile:i}=this.props,o=this.getLabels(t),s;s=i?[{column:[this.title_layout(o),this.subtitle_layout(o)]},this.form_layout(o)]:[this.registerTab_layout(),{column:[this.title_layout(o),this.subtitle_layout(o)]},this.form_layout(o),this.forget_layout(),{gap:12,align:"h",row:[this.recode_layout(),this.changeUserId_layout()]},this.changeMode_layout(),this.registerButton_layout()];let n="aio-login"+(e.className?" "+e.className:""),l=e.style;return b(r,{layout:{className:n,style:l,column:s,attrs:{onKeyDown:e=>{13===e.keyCode&&this.onSubmit()}}}})}}class SubmitButton extends t{constructor(...e){super(...e),_defineProperty(this,"state",{time:this.getDelta()})}async onClick(){let{onClick:e,loading:t}=this.props;!t&&(this.setLastTry(),await e())}setLastTry(){let{mode:e}=this.props;o("aiologinlasttrypermode").save({name:"dic",value:{...this.getLastTry(),[e]:new Date().getTime()}});let t=this.getDelta();this.setState({time:t})}getLastTry(){return o("aiologinlasttrypermode").load({name:"dic",def:{}})}getDelta(){let{mode:e,timer:t}=this.props;if(!t)return 0;let i=this.getLastTry()[e];if(!i)return 0;let r=new Date().getTime()-i;return r/=1e3,(r=Math.round(r=t-r))<0&&(r=0),r}render(){let{disabled:e,loading:t,text:i,outline:r}=this.props,o=e(),{time:s}=this.state;return s>0?setTimeout(()=>this.setState({time:this.state.time-1}),1e3):s<0&&setTimeout(()=>this.setState({time:0}),0),s&&(o=!0,t||(i=`لطفا ${s} ثانیه صبر کنید`)),c("button",{className:"aio-login-submit"+(r?" aio-login-submit-outline":""),disabled:o,onClick:()=>this.onClick(),children:[!t&&i,!!t&&b(l,{path:d,size:1,spin:.2,style:{margin:"0 6px"}}),!!t&&"در حال ارسال"]})}}function AIOLoginValidator(e){let{id:t,onSubmit:i,modes:r,timer:o,checkToken:s,register:n,userId:l="",renderApp:a,forget:u,otpLength:d,renderLogin:p}=e;for(let g in e)if(-1===["id","renderApp","renderLogin","onSubmit","modes","timer","checkToken","register","userId","attrs","forget","otpLength","renderSplash","splashTime"].indexOf(g)){let m=`
14
- aio-login error => invalid props
15
- ${g} is not one of AIOLogin props,
16
- valid props are 'id' | 'renderApp' | 'renderLogin','onSubmit' | 'modes' | 'timer' | 'checkToken' | 'register' | 'userId' | 'attrs' | 'forget' | 'otpLength' | 'renderSplash' | 'splashTime'
17
- `;alert(m),console.log(m);return}if(t||alert("aio-login error=> missing id props, id props should be an string"),!a){let h=`
18
- aio-login error => missing renderApp props
19
- renderApp type is => ({token:string,userId:string,userInfo?:any,logout:function})=>React.ReactNode
20
- `;alert(h),console.log(h);return}if("string"!=typeof l){let f="aio-login error=> userId props should be an string";alert(f),console.log(f);return}if(!s){let b=`
21
- aio-login error=> missing checkToken props
22
- checkToken type is => (token:string)=>boolean
23
- for prevent it set checkToken : ()=>true
24
- `;alert(b),console.log(b);return}if(!i){let c=`
25
- aio-login error=> missing onSubmit props,
26
- onSubmit type is =>
27
- (model:<model type>,mode:<mode type>)=>string|undefined
28
- <model type> is {
29
- login:{userId:string,password:string | number},
30
- forget:{userId:string,password:string | number},
31
- register:{[field:string]:any},
32
- }
33
- <mode type> is 'OTPNumber' | 'OTPCode' | 'userName' | 'email' | 'phoneNumber' | 'forgetUserId' | 'forgetPassword' | 'register' | 'auth'
34
- `;alert(c),console.log(c);return}if(p&&"function"!=typeof p){let y=`
35
- aio-login error=> renderLogin props is not a function,
36
- renderLogin type is =>
37
- ( loginForm : React.ReactNode ) => React.ReactNode
38
- `;alert(y),console.log(y);return}if("number"!=typeof o){let $="aio-login error=> timer props should be an number";alert($),console.log($);return}if(!Array.isArray(r)||!r.filter(e=>-1!==["OTPNumber","userName","email","phoneNumber"].indexOf(e)).length){let _=`
39
- aio-login error=> modes props should be an array contain composite of 'OTPNumber' | 'userName' | 'email' | 'phoneNumber'
40
- `;alert(_),console.log(_);return}if(-1!==r.indexOf("OTPNumber")&&!d){let N="aio-login error => otpLength props is not an number (for define length of otp code)";alert(N),console.log(N);return}if(n&&("object"!=typeof n||-1===["mode","tab","button"].indexOf(n.type)||!Array.isArray(n.fields)||!n.fields.length)){let v=`
41
- aio-login-error => register props should be an object contain :
42
- type : "mode" | "tab" | "button"
43
- tabText : string | undefined
44
- buttonText : string | undefined
45
- submitText : string | undefined
46
- title : string | undefined
47
- subtitle : string | undefined
48
- fields:(<default field> | object)[]
49
-
50
- <default field>:(
51
- "fullname" | "firstname" | "lastname" | "username" | "address" | "email" | "fathername" | "phone" | "mobile" | "postalcode",
52
- "nationalcode" | "idcode" | "cardbank" | "state" | "city" | "gender" | "married" | "militaryservice" | "location"
53
- )
54
- `;alert(v),console.log(v);return}if(u){let I="aio-login error=> forget props should be an object contain mode:'phoneNumber | email'";if("object"!=typeof u&&alert(I),-1===["phoneNumber","email"].indexOf(u.mode)){alert(I),console.log(I);return}}}
1
+ import{useEffect as e,useRef as r,useState as t}from"react";import s from"aio-input";import{AddToAttrs as o,Storage as i}from"aio-utils";import{Loading as n,Alert as a}from"aio-popup";import u from"axios";import"./index.css";import{Fragment as l}from"react/jsx-runtime";import{jsxs as d}from"react/jsx-runtime";import{jsx as p}from"react/jsx-runtime";import{createElement as c}from"react";export function AIOLogin_updateCatchedUser(e,r){let t=new i("ai-login"+e),s=t.load("data");if(!s)return r;let o={...s,user:r};return t.save("data",o)}let AILogin=f=>{let{translate:m=()=>{},otpLength:g=4}=f,{validation:h=()=>{}}=f,[y,k]=t(),[b]=t(new i("ai-login"+f.id)),[w,x]=t(L),[$]=t(new n),[T,v]=t(!1),R=r(w);R.current=w,console.log(R.current);let[q,N]=t(A());function _(){return f.mode?f.mode:f.userpass?"userpass":f.otp?"otpnumber":"userpass"}function A(e){let r={inputs:()=>null,key:e||_(),title:null,submitText:"",shouldReturnsUserAndToken:!1};if("userpass"===r.key)r.inputs=()=>d(l,{children:[E({mode:r.key,field:"username",type:"text"}),E({mode:r.key,field:"password",type:"text"})]}),r.shouldReturnsUserAndToken=!0;else if("register"===r.key){if(f.register){let t=(f.register.inputs||(()=>[]))(R.current)||[];r.inputs=()=>d(l,{children:[E({mode:r.key,field:"username",type:"text"}),E({mode:r.key,field:"password",type:"password"}),E({mode:r.key,field:"repassword",type:"password"}),t.map(e=>E({mode:r.key,field:e.field,type:e.type,inputProps:e}))]})}}else"otpnumber"===r.key?r.inputs=()=>E({mode:r.key,field:"otpnumber",type:"text"}):"otpcode"===r.key&&(r.inputs=()=>E({mode:r.key,field:"otpcode",type:"text"}),r.shouldReturnsUserAndToken=!0);return r.submitText=U(r.key+"Button"),r.title=p("div",{className:"ai-login-title",children:U(r.key+"Title")}),r}function E(e){let r=e.inputProps||{},t=R.current;"register"===e.mode&&(t=t.register);let{maxLength:o=({otpnumber:11,otpcode:g})[e.mode],filter:i="otpnumber"===e.mode||"otpcode"===e.mode?["number"]:void 0,preview:n="password"===e.field,rtl:a=!!f.fa,label:u=f.label(e.field)}=r,l={...r,"aria-label":`aio-login-${e.field}`},d=r=>{let t=R.current;"register"===e.mode?x({...t,register:{...t.register,[e.field]:r}}):x({...t,[e.field]:r})};return c(s,{...r,maxLength:o,filter:i,preview:n,rtl:a,label:u,onChange:d,inputAttrs:l,key:`${e.mode}-${e.field}`,value:t[e.field],type:e.type})}function L(){var e;let r={username:"",password:"",otpnumber:"",otpcode:"",register:{username:"",password:"",repassword:""}};if(!f.register)return r;if(null!==(e=f.register)&&void 0!==e&&e.defaultValue){let t={};for(let s in f.register.defaultValue)t[s]=f.register.defaultValue[s];r.register=t}return r}let[P,j]=t(!0),[B,C]=t(!!f.splash);function U(e){let r={registerButton:{en:"Register",fa:"ثبت نام"},userpassButton:{en:"Login",fa:"ورود"},otpnumberButton:{en:"Send Number",fa:"ارسال شماره همراه"},otpcodeButton:{en:"Login",fa:"ورود"},registerTitle:{en:"Register",fa:"ثبت نام"},userpassTitle:{en:"Login",fa:"ورود"},otpcodeTitle:{en:"OTP Code",fa:"کد یکبار مصرف"},otpnumberTitle:{en:"Phone Number",fa:"شماره همراه"},switchuserpass:{en:"login by user name",fa:"ورود با نام کاربری"},switchregister:{en:"Go To Register",fa:"ثبت نام"},switchotp:{en:"login by otp",fa:"ورود با رمز یکبار مصرف"},repasswordMatch:{en:"Password is not match with Re password",fa:"رمز عبور با تکرار آن مطابقت ندارد"},usernameRequired:{en:"User Name is required",fa:"نام کاربری ضروری است"},passwordRequired:{en:"password is required",fa:"رمز عبور ضروری است"},repasswordRequired:{en:"Re Password is required",fa:"تکرار رمز عبور ضروری است"},otpnumberRequired:{en:"Phone Number is required",fa:"شماره همراه ضروری است"},otpcodeLength:{en:`otp code should be ${g} digit`,fa:`کد یکبار مصرف باید ${g} رقم باشد`},registerError:{en:"Registeration failed",fa:"ثبت نام با خطا روبرو شد"},userpassError:{en:"login by username failed",fa:"ورود با نام کاربری با خطا روبرو شد"},otpcodeError:{en:"login by otp failed",fa:"ورود با کد یکبار مصرف با خطا روبرو شد"},otpnumberError:{en:"send otp number for receive otp code failed",fa:"ارسال شماره همراه برای دریافت کد یکبار مصرف با خطا روبرو شد"}};return f.fa?r[e].fa:m(e)||r[e].en}async function I(e,r){if(!f.userpass)return;let{onSuccess:t}=await f.userpass.api(R.current,"userpass");$.show("login0");let s=await t(e);if($.hide("login0"),"object"==typeof s&&s.user&&"string"==typeof s.token){s.message&&W({type:"success",text:s.message});let{user:o,token:i}=s;b.save("data",{user:o,token:i}),k({user:o,token:i})}else{let n=`onSuccess of props.${r}.${"userpass"===r?"api":"codeApi"} should returns {user:any,token:string}`;W({type:"error",text:U(`${r}Error`),subtext:n})}}async function V(e,r){if(!f.userpass)return;let{onSuccess:t}=await f.userpass.api(R.current,"userpass");$.show("login0");let s=await t(e);$.hide("login0"),s.message&&W({type:"success",text:s.message}),"otpnumber"===r?N(A("otpcode")):setTimeout(()=>window.location.reload(),1e3)}async function M(e){"userpass"===q.key||"otpcode"===q.key?I(e,q.key):V(e,q.key)}async function O(){$.show("login0");let{url:e,method:r,body:t,onCatch:s}=await f[q.key].api(R.current,q.key);$.hide("login0"),u[r](e,t).then(M).catch(e=>{s?W({type:"error",text:"Error",subtext:s(e)}):e.message&&W({type:"error",text:"Error",subtext:e.message})})}function S(e){x(L()),N(A(e))}function z(e){return{className:"ai-login-mode",onClick:()=>S(e)}}function F(){return d("div",{className:"ai-login-modes",children:[f.userpass&&"userpass"!==q.key&&p("button",{...z("userpass"),children:U("switchuserpass")}),f.register&&"register"!==q.key&&p("button",{...z("register"),children:U("switchregister")}),f.otp&&"otpnumber"!==q.key&&p("button",{...z("otpnumber"),children:U("switchotp")})]})}function G(){let e=R.current;if("otpcode"===q.key&&(e.otpcode||"").length!==g)return U("otpcodeLength");if("otpnumber"===q.key&&!e.otpnumber)return U("otpnumberRequired");if("userpass"===q.key&&!e.username)return U("usernameRequired");if("register"===q.key){if(!e.register.username)return U("usernameRequired");if(!e.register.password)return U("passwordRequired");if(!e.register.repassword)return U("repasswordRequired");if(e.register.password!==e.register.repassword)return U("repasswordMatch")}return h(e,q.key)}function D(){let e=G();return d(l,{children:[p("div",{className:"ai-login-errors",children:!!e&&p("div",{className:"ai-login-error",children:e})}),p("button",{className:"ai-login-submit",disabled:!!e||!!T,onClick(){v(!0),setTimeout(()=>v(!1),3e3),O()},children:q.submitText})]})}function H(){let{title:e,inputs:r}=q;return d("div",{className:"ai-login-form",children:[e,r(),D(),F()]})}let J=e=>{let r=f[e],t=null;return r&&(t=r(q.key)),p("div",{className:`ai-login-${e}`,children:t})};function K(){b.remove("data"),window.location.reload()}async function Q(){if(f.splash&&setTimeout(()=>{C(!1)},f.splash.time),f.mock){k({user:f.mock.user,token:f.mock.token});return}let e=b.load("data",{},f.rememberTime),{user:r,token:t}=e;$.show("login0");let{url:s,method:o,onSuccess:i,onCatch:n}=await f.checkToken(t||"");$.hide("login0"),r&&t&&u[o](s,{headers:{authorization:`Bearer ${t}`}}).then(e=>{let s;try{s=i(e)}catch(o){W({type:"error",text:"checkToken failed",subtext:o.message});return}!0===s?k({user:r,token:t}):!1===s?K():W({type:"error",text:"checkToken failed",subtext:"checkToken props should return string as error or true as token is valid and false as token is invalid"})}).catch(e=>{let r,t="";try{r=n(e)}catch(s){t=s.message}"string"==typeof r?t=r:!1===r?K():t="AILogin checkToken onCatch props should returns string as error or false as invalid token",t?W({type:"error",text:"checkToken failed",subtext:t}):e.message&&W({type:"error",text:"Error",subtext:e.message})}),j(!1)}function W(e){a(e)}function X(){if(P||B)return f.splash?f.splash.html:null;if(!y){let e=o(f.attrs,{className:"ai-login",style:{direction:f.fa?"rtl":void 0}});return d("div",{...e,children:[J("before")," ",H()," ",J("after")]})}return f.renderApp({token:y.token,user:y.user,logout:K})}return e(()=>{Q()},[]),p(l,{children:X()})};export default AILogin;
package/package.json CHANGED
@@ -1,27 +1,32 @@
1
1
  {
2
- "name": "aio-login",
3
- "version": "7.1.0",
4
- "description": "",
5
- "main": "index.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
- "dependencies": {
10
- "@mdi/js": "^7.0.96",
11
- "@mdi/react": "^1.6.1",
12
- "react-virtual-dom": "latest",
13
- "aio-popup": "latest",
14
- "aio-storage": "latest",
15
- "aio-input": "latest"
16
- },
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/mohammadFeiz/aio-login.git"
20
- },
21
- "author": "mohammad sharif feiz feiz.ms@gmail.com",
22
- "license": "ISC",
23
- "bugs": {
24
- "url": "https://github.com/mohammadFeiz/aio-login/issues"
25
- },
26
- "homepage": "https://github.com/mohammadFeiz/aio-login#readme"
27
- }
2
+ "name": "aio-login",
3
+ "version": "8.0.1",
4
+ "description": "handle all types of popup and modals in react",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "types":"index.d.ts",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/mohammadFeiz/aio-login.git"
13
+ },
14
+ "dependencies": {
15
+ "axios": "^1.7.7",
16
+ "aio-input":"latest",
17
+ "aio-utils":"latest",
18
+ "aio-popup":"latest"
19
+ },
20
+ "keywords": [
21
+ "login",
22
+ "otp",
23
+ "jwt"
24
+ ],
25
+ "author": "mohammad sharif feiz feiz.ms@gmail.com",
26
+ "license": "ISC",
27
+ "bugs": {
28
+ "url": "https://github.com/mohammadFeiz/aio-login/issues"
29
+ },
30
+ "homepage": "https://github.com/mohammadFeiz/aio-login#readme"
31
+ }
32
+
package/README.md DELETED
@@ -1 +0,0 @@
1
- # aio-login