@availity/change-password 1.0.0 → 2.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.
- package/CHANGELOG.md +19 -0
- package/package.json +3 -3
- package/stories/change-password.stories.tsx +113 -113
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [2.0.1](https://github.com/Availity/availity-react/compare/@availity/change-password@2.0.0...@availity/change-password@2.0.1) (2023-10-17)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
# [2.0.0](https://github.com/Availity/availity-react/compare/@availity/change-password@1.0.0...@availity/change-password@2.0.0) (2023-10-16)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* **change-password:** upgrade react query to v4 ([1b635a0](https://github.com/Availity/availity-react/commit/1b635a04a70afa666919578398aa1569641abae7))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### BREAKING CHANGES
|
|
18
|
+
|
|
19
|
+
* **change-password:** react query has been upgraded to v4. you must upgrade
|
|
20
|
+
to @tanstack/react-query@^4.36.1 in order to use this package now
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
5
24
|
# [1.0.0](https://github.com/Availity/availity-react/compare/@availity/change-password@0.2.0...@availity/change-password@1.0.0) (2023-10-09)
|
|
6
25
|
|
|
7
26
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/change-password",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Easy to use change-password components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -25,9 +25,10 @@
|
|
|
25
25
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@availity/block-ui": "^1.1.
|
|
28
|
+
"@availity/block-ui": "^1.1.2",
|
|
29
29
|
"@availity/form": "1.7.5",
|
|
30
30
|
"@availity/icon": "0.11.4",
|
|
31
|
+
"@tanstack/react-query": "^4.36.1",
|
|
31
32
|
"classnames": "^2.3.2",
|
|
32
33
|
"dayjs": "^1.11.9",
|
|
33
34
|
"lodash": "^4.17.21",
|
|
@@ -44,7 +45,6 @@
|
|
|
44
45
|
"@availity/api-axios": "^8.0.0",
|
|
45
46
|
"axios": "^1.0.0",
|
|
46
47
|
"react": ">=16.8.6",
|
|
47
|
-
"react-query": "^3.29.0",
|
|
48
48
|
"reactstrap": "^8.0.0"
|
|
49
49
|
},
|
|
50
50
|
"publishConfig": {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { StoryObj } from '@storybook/react';
|
|
3
3
|
import * as yup from 'yup';
|
|
4
4
|
import AvApi from '@availity/api-axios';
|
|
5
5
|
import ChangePassword, { ChangePasswordForm } from '..';
|
|
@@ -15,7 +15,7 @@ export default {
|
|
|
15
15
|
},
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
|
-
}
|
|
18
|
+
};
|
|
19
19
|
|
|
20
20
|
const me = { userId: 'youguessedme' };
|
|
21
21
|
|
|
@@ -32,132 +32,132 @@ class AvChangePasswordApi extends AvApi {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
export const
|
|
36
|
-
|
|
35
|
+
export const _Default: StoryObj<typeof ChangePassword> = {
|
|
36
|
+
render: () => {
|
|
37
|
+
const resource = new AvChangePasswordApi();
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
39
|
+
const changePasswordSchema = yup.object().shape({
|
|
40
|
+
currentPassword: yup.string().required('Input your current password'),
|
|
41
|
+
newPassword: yup
|
|
42
|
+
.string()
|
|
43
|
+
.min(8, 'Your password must be between 8 and 15 characters')
|
|
44
|
+
.max(15, 'Your password must be between 8 and 15 characters')
|
|
45
|
+
.required('Input your current password')
|
|
46
|
+
.matches(
|
|
47
|
+
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?!.*\s)(?=.*[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-])[\w!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]{8,15}$/,
|
|
48
|
+
'Input your current password'
|
|
49
|
+
)
|
|
50
|
+
.test('passDoesntContainUserId', 'Input your current password', (value) => {
|
|
51
|
+
const passDoesntContainUserId = new RegExp(`^((?!${me.userId}).)*$`).test(value); // true when password doesnt contain userId
|
|
52
|
+
// fail test with false when the userId is blank, since we cant really check if the pass contains it if its not there yet
|
|
53
|
+
return me.userId ? passDoesntContainUserId : false;
|
|
54
|
+
}),
|
|
55
|
+
confirmNewPassword: yup
|
|
56
|
+
.string()
|
|
57
|
+
.test('passMatches', 'Passwords do not match', function (value) {
|
|
58
|
+
const { resolve } = this;
|
|
59
|
+
const password = resolve(yup.ref('newPassword'));
|
|
60
|
+
const passwordsMatch = password === value; // true when confirmNewPassword === password
|
|
61
|
+
return password ? passwordsMatch : false;
|
|
62
|
+
})
|
|
63
|
+
.min(8, 'Input your current password')
|
|
64
|
+
.max(15, 'Input your current password')
|
|
65
|
+
.required('Input your current password')
|
|
66
|
+
.matches(
|
|
67
|
+
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?!.*\s)(?=.*[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-])[\w!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]{8,15}$/,
|
|
68
|
+
'Input your current password'
|
|
69
|
+
)
|
|
70
|
+
.test('passDoesntContainUserId', 'Input your current password', (value) => {
|
|
71
|
+
const passDoesntContainUserId = new RegExp(`^((?!${me.userId}).)*$`).test(value); // true when password doesnt contain userId
|
|
72
|
+
// fail test with false when the userId is blank, since we cant really check if the pass contains it if its not there yet
|
|
73
|
+
return me.userId ? passDoesntContainUserId : false;
|
|
74
|
+
}),
|
|
75
|
+
});
|
|
75
76
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
const conditions = [
|
|
78
|
+
{
|
|
79
|
+
message: 'Have 8 to 15 characters',
|
|
80
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
81
|
+
if (new RegExp(/^.{8,15}$/).test(newPassword)) {
|
|
82
|
+
if (newPasswordTouched) return true;
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
if (submitted) return false;
|
|
82
86
|
return null;
|
|
83
|
-
}
|
|
84
|
-
if (submitted) return false;
|
|
85
|
-
return null;
|
|
87
|
+
},
|
|
86
88
|
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
{
|
|
90
|
+
message: 'Have a number',
|
|
91
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
92
|
+
if (new RegExp(/\d/).test(newPassword)) {
|
|
93
|
+
if (newPasswordTouched) return true;
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
96
|
+
if (submitted) return false;
|
|
93
97
|
return null;
|
|
94
|
-
}
|
|
95
|
-
if (submitted) return false;
|
|
96
|
-
return null;
|
|
98
|
+
},
|
|
97
99
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
100
|
+
{
|
|
101
|
+
message: 'Have an uppercase letter',
|
|
102
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
103
|
+
if (new RegExp('[A-Z]').test(newPassword)) {
|
|
104
|
+
if (newPasswordTouched) return true;
|
|
105
|
+
return null;
|
|
106
|
+
}
|
|
107
|
+
if (submitted) return false;
|
|
104
108
|
return null;
|
|
105
|
-
}
|
|
106
|
-
if (submitted) return false;
|
|
107
|
-
return null;
|
|
109
|
+
},
|
|
108
110
|
},
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
111
|
+
{
|
|
112
|
+
message: 'Have a lowercase letter',
|
|
113
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
114
|
+
if (new RegExp('[a-z]').test(newPassword)) {
|
|
115
|
+
if (newPasswordTouched) return true;
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
if (submitted) return false;
|
|
115
119
|
return null;
|
|
116
|
-
}
|
|
117
|
-
if (submitted) return false;
|
|
118
|
-
return null;
|
|
120
|
+
},
|
|
119
121
|
},
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
122
|
+
{
|
|
123
|
+
message: 'Have a special character',
|
|
124
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
125
|
+
if (new RegExp(/[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~-]/).test(newPassword)) {
|
|
126
|
+
if (newPasswordTouched) return true;
|
|
127
|
+
return null;
|
|
128
|
+
}
|
|
129
|
+
if (submitted) return false;
|
|
126
130
|
return null;
|
|
127
|
-
}
|
|
128
|
-
if (submitted) return false;
|
|
129
|
-
return null;
|
|
131
|
+
},
|
|
130
132
|
},
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
{
|
|
134
|
+
message: 'Not contain your user Id',
|
|
135
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
136
|
+
if (new RegExp(`^((?!${me.userId}).)*$`).test(newPassword)) {
|
|
137
|
+
if (newPasswordTouched) return true;
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
if (submitted) return false;
|
|
137
141
|
return null;
|
|
138
|
-
}
|
|
139
|
-
if (submitted) return false;
|
|
140
|
-
return null;
|
|
142
|
+
},
|
|
141
143
|
},
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
144
|
+
{
|
|
145
|
+
message: 'Not contain spaces',
|
|
146
|
+
passes: ({ newPassword, newPasswordTouched, submitted }) => {
|
|
147
|
+
if (new RegExp('^\\S*$').test(newPassword)) {
|
|
148
|
+
if (newPasswordTouched) return true;
|
|
149
|
+
return null;
|
|
150
|
+
}
|
|
151
|
+
if (submitted) return false;
|
|
148
152
|
return null;
|
|
149
|
-
}
|
|
150
|
-
if (submitted) return false;
|
|
151
|
-
return null;
|
|
153
|
+
},
|
|
152
154
|
},
|
|
153
|
-
|
|
154
|
-
];
|
|
155
|
+
];
|
|
155
156
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
157
|
+
return (
|
|
158
|
+
<ChangePassword resource={resource} schema={changePasswordSchema} conditions={conditions}>
|
|
159
|
+
<ChangePasswordForm />
|
|
160
|
+
</ChangePassword>
|
|
161
|
+
);
|
|
162
|
+
},
|
|
161
163
|
};
|
|
162
|
-
|
|
163
|
-
Default.storyName = 'default';
|