Skip to content

Commit b896a6b

Browse files
GilbertCherrieGilbertCherrie
committed
Final form
1 parent 54d4c39 commit b896a6b

File tree

2 files changed

+93
-69
lines changed

2 files changed

+93
-69
lines changed

‎app/javascript/components/user-form/index.jsx‎

Lines changed: 78 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const UserForm = ({ id, data }) => {
2121
const [disableButton, setDisableButton] = useState(true);
2222
const [buttonProps, setButtonProps] = useState({});
2323

24-
useEffect(() => {
25-
console.log(password);
26-
console.log(confirmPassword);
27-
if (password === confirmPassword) {
28-
setShowPasswordError(false);
29-
} else if (password === '' || confirmPassword === '') {
30-
setShowPasswordError(false);
31-
} else {
32-
setShowPasswordError(true);
33-
}
34-
}, [password, confirmPassword]);
24+
// useEffect(() => {
25+
// console.log(password);
26+
// console.log(confirmPassword);
27+
// if (password === confirmPassword) {
28+
// setShowPasswordError(false);
29+
// } else if (password === '' || confirmPassword === '') {
30+
// setShowPasswordError(false);
31+
// } else {
32+
// setShowPasswordError(true);
33+
// }
34+
// }, [password, confirmPassword]);
3535

3636
// useEffect(() => {
3737
// console.log(editMode);
@@ -90,8 +90,21 @@ const UserForm = ({ id, data }) => {
9090
});
9191
setGroups(temp);
9292
});
93+
const values = {};
94+
if (data.name) {
95+
values.name = data.name;
96+
}
97+
if (data.userid) {
98+
values.userid = data.userid;
99+
}
100+
if (data.email) {
101+
values.email = data.email;
102+
}
103+
if (data.current_group_id) {
104+
values.groups = [values.current_group_id];
105+
}
93106
setState({
94-
initialValues,
107+
initialValues: values,
95108
isLoading: false,
96109
});
97110
}
@@ -104,12 +117,22 @@ const UserForm = ({ id, data }) => {
104117
setShowPasswordError(true);
105118
miqSparkleOff();
106119
} else if (id) {
107-
let groupIds = {};
120+
const groupIds = new Set();
121+
const groupIdObjects = [];
108122
values.groups.forEach((group) => {
109-
// groupIds.push({ id: group.value });
110-
groupIds = { id: group.value };
123+
if (group.value) {
124+
groupIds.add(group.value);
125+
} else {
126+
groupIds.add(group);
127+
}
128+
});
129+
initialValues.groups.forEach((group) => {
130+
groupIds.add(group);
131+
});
132+
groupIds.forEach((group) => {
133+
groupIdObjects.push({ id: group });
111134
});
112-
console.log(values);
135+
console.log(groupIdObjects);
113136
if (values.confirmPassword && values.confirmPassword === password) {
114137
API.post(`/api/users/${id}`,
115138
{
@@ -119,7 +142,7 @@ const UserForm = ({ id, data }) => {
119142
userid: values.userid,
120143
password: values.password,
121144
email: values.email,
122-
group: groupIds,
145+
group: groupIdObjects[0],
123146
},
124147
}).then(() => {
125148
miqRedirectBack('edited', 'success', '/ops/');
@@ -132,7 +155,7 @@ const UserForm = ({ id, data }) => {
132155
name: values.name,
133156
userid: values.userid,
134157
email: values.email,
135-
group: groupIds,
158+
group: groupIdObjects[0],
136159
},
137160
}).then(() => {
138161
miqRedirectBack('edited', 'success', '/ops/');
@@ -166,30 +189,59 @@ const UserForm = ({ id, data }) => {
166189
miqRedirectBack(message, 'success', url);
167190
};
168191

192+
const areGroupsEqual = (selectedGroups = []) => {
193+
selectedGroups.sort();
194+
initialValues.groups.sort();
195+
if (selectedGroups.length !== initialValues.groups.length) {
196+
return false;
197+
}
198+
return selectedGroups.every((group, index) => group === initialValues.groups[index]);
199+
};
200+
169201
const passwordValidation = (values) => {
170202
const errors = {};
203+
const groupIds = [];
204+
if (values.groups) {
205+
values.groups.forEach((group) => {
206+
if (group.value) {
207+
groupIds.push(group.value);
208+
} else {
209+
groupIds.push(group);
210+
}
211+
});
212+
}
213+
if (!editMode && !!id) {
214+
values.password = undefined;
215+
values.confirmPassword = undefined;
216+
if (values.name === initialValues.name
217+
&& values.userid === initialValues.userid
218+
&& values.email === initialValues.email
219+
&& areGroupsEqual(groupIds)) {
220+
errors.confirmPassword = '';
221+
}
222+
}
171223

172-
if (!values.password) {
173-
if (id && editMode) {
174-
errors.password = 'Required';
175-
} else if (id === undefined) {
224+
if (values.password === undefined) {
225+
if (!!id && editMode) {
176226
errors.password = 'Required';
177227
}
178228
}
179229

180-
console.log(values);
181-
if (values.password !== values.confirmPassword) {
230+
if (editMode && values.password !== values.confirmPassword) {
182231
errors.confirmPassword = 'Password/Verify Password do not match';
183232
}
184-
233+
if (!!id === false && values.password !== values.confirmPassword) {
234+
errors.confirmPassword = 'Password/Verify Password do not match';
235+
}
236+
console.log(errors);
185237
return errors;
186238
};
187239

188240
if (isLoading) return <Loading className="export-spinner" withOverlay={false} small />;
189241
return !isLoading && (
190242
<div className="col-md-12 user-form">
191243
<MiqFormRenderer
192-
schema={createSchema(id, editMode, setEditMode, groups, password, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups)}
244+
schema={createSchema(id, editMode, setEditMode, groups, password, setState, initialValues, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups)}
193245
// FormTemplate={(props) => <FormTemplate {...props} />}
194246
initialValues={initialValues}
195247
validate={passwordValidation}

‎app/javascript/components/user-form/user-form.schema.js‎

Lines changed: 15 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { componentTypes, validatorTypes } from '@@ddf';
22

3-
const getGroups = () => API.get('/api/groups?&expand=resources').then(({ resources }) =>
4-
resources.map(({ id, description }) => ({
5-
label: description,
6-
value: id,
7-
})));
8-
9-
function createSchema(id, editMode, setEditMode, groups, password, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups) {
3+
function createSchema(id, editMode, setEditMode, groups, password, setState, initialValues, setName, setUserid, showPasswordError, setPassword, setConfirmPassword, setEmail, setGroups) {
104
const fields = [
115
{
126
component: componentTypes.TEXT_FIELD,
@@ -48,26 +42,22 @@ function createSchema(id, editMode, setEditMode, groups, password, setName, setU
4842
disabled: !editMode,
4943
value: password,
5044
setEditMode: (value) => {
51-
// if (!editMode) {
52-
// setPassword('●●●●●●●●');
53-
// }
45+
console.log(editMode);
46+
if (editMode) {
47+
// document.getElementById('password').value = '';
48+
// setPassword(undefined);
49+
// console.log(document.getElementById('confirmPassword'));
50+
// document.getElementById('confirmPassword').value = '';
51+
}
5452
setEditMode(!editMode);
5553
},
5654
placeholder: '●●●●●●●●',
5755
buttonLabel: editMode ? __('Cancel') : __('Change'),
58-
// validate: [(value) => {
59-
// console.log(value);
60-
// console.log(editMode);
61-
// if (!editMode && value === undefined) {
62-
// return 'Required';
63-
// }
64-
// return undefined;
65-
// }],
6656
// resolveProps: (props, { meta, input }, formOptions) => {
6757
// if (!editMode) {
68-
// input.value = undefined;
69-
// setPassword(undefined);
70-
// document.getElementById('password').value = '';
58+
// // input.value = undefined;
59+
// setPassword(input.value);
60+
// // document.getElementById('password').value = '';
7161
// }
7262
// },
7363
},
@@ -80,18 +70,9 @@ function createSchema(id, editMode, setEditMode, groups, password, setName, setU
8070
name: 'confirmPassword',
8171
initialValue: '',
8272
isRequired: true,
83-
// validate: [(value, allValues) => {
84-
// if (value === undefined || value === '') {
85-
// return 'Required';
86-
// }
87-
// if (value !== allValues.password) {
88-
// return 'Password/Verify Password do not match';
89-
// }
90-
// return undefined;
91-
// }],
92-
resolveProps: (props, { meta, input }, formOptions) => {
93-
setConfirmPassword(input.value);
94-
},
73+
// resolveProps: (props, { meta, input }, formOptions) => {
74+
// setConfirmPassword(input.value);
75+
// },
9576
},
9677
] : []),
9778
] : [
@@ -124,15 +105,6 @@ function createSchema(id, editMode, setEditMode, groups, password, setName, setU
124105
type: validatorTypes.REQUIRED,
125106
message: __('Required'),
126107
}],
127-
// validate: [(value, allValues) => {
128-
// if (value === undefined || value === '') {
129-
// return 'Required';
130-
// }
131-
// if (value !== allValues.password) {
132-
// return 'Password/Verify Password do not match';
133-
// }
134-
// return undefined;
135-
// }],
136108
resolveProps: (props, { meta, input }, formOptions) => {
137109
setConfirmPassword(input.value);
138110
},
@@ -154,7 +126,7 @@ function createSchema(id, editMode, setEditMode, groups, password, setName, setU
154126
name: 'email',
155127
validate: [{
156128
type: validatorTypes.PATTERN,
157-
pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
129+
pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$',
158130
message: __('Email must be a valid email address'),
159131
}],
160132
resolveProps: (props, { meta, input }, formOptions) => {

0 commit comments

Comments
 (0)