Skip to content

Commit 1d5d530

Browse files
danialraza03danialraza03
authored
Merge pull request #220 from zenml-io/personal_details_settings
Personal details settings
2 parents 5412b00 + 52634f8 commit 1d5d530

File tree

27 files changed

+1147
-505
lines changed

27 files changed

+1147
-505
lines changed

‎global.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ interface TUser {
4141
userName: string;
4242
email_opted_in: any;
4343
emailOptedIn: any;
44+
roles?: any;
45+
created?: any
4446
}
4547

4648
interface TOrganization {

‎src/redux/reducers/rolesReducer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const newState = (roles: Roles[]): State => ({
2323
const rolesReducer = (state: State = initialState, action: Action): State => {
2424
switch (action.type) {
2525
case rolesActionTypes.getRoles.success: {
26-
const roles: Roles[] = camelCaseArray(action.payload as RolesPayload);
26+
const roles: Roles[] = camelCaseArray(action.payload?.items as RolesPayload);
2727

2828
return { ...newState(roles) };
2929
}

‎src/services/locales/zu.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,11 +217,11 @@
217217
"text": "Change the username, role and password of",
218218
"form": {
219219
"username": {
220-
"label": "username",
220+
"label": "Username",
221221
"placeholder": "username"
222222
},
223223
"password": {
224-
"label": "password",
224+
"label": "Password",
225225
"placeholder": "password"
226226
}
227227
},

‎src/ui/assets/successTick.png‎

5.87 KB
Loading

‎src/ui/assets/userImage.png‎

1.01 KB
Loading

‎src/ui/components/forms/index.tsx‎

Lines changed: 92 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
Box,
1111
LinkBox,
1212
icons,
13-
DropdownInput,
13+
DropdownInput
1414
} from '..';
1515
import { handleUpdateNumericInput } from '../../../utils/input';
1616
import { iconColors } from '../../../constants/icons';
@@ -118,8 +118,9 @@ export const CopyField = (
118118
labelColor: any;
119119
placeholder: any;
120120
value: string;
121+
showTokField: any;
121122
} & any,
122-
): JSX.Element => {
123+
): any => {
123124
const [copied, setCopied] = useState(false);
124125
const handleClick = () => {
125126
navigator.clipboard.writeText(props.value);
@@ -130,26 +131,38 @@ export const CopyField = (
130131
};
131132

132133
return (
133-
<FlexBox.Column fullWidth style={{ height: '100px' }}>
134+
<FlexBox.Column fullWidth>
134135
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
135136
<InputWithLabel
136137
name={props.name}
137138
label={props.label}
138139
labelColor={props.labelColor}
139140
InputComponent={
140-
<TextInput
141-
{...props}
142-
value={`${props.value.slice(0, 60)}...`}
143-
placeholder={props.placeholder}
144-
/>
145-
}
141+
props.showTokField ?
142+
<TextInput
143+
{...props}
144+
style={{ background: 'rgba(168, 168, 168, 0.2)', border: '1px solid #C9CBD0' }}
145+
value={`${props.value.slice(0, 30)}...`}
146+
placeholder={props.placeholder}
147+
/>
148+
:
149+
<TextInput
150+
{...props}
151+
style={{ background: 'rgba(168, 168, 168, 0.2)', border: '1px solid #C9CBD0' }}
152+
value='Token'
153+
placeholder={props.placeholder}
154+
/>
155+
}
146156
/>
147-
<LinkBox
148-
style={{ position: 'absolute', right: '10px', top: '30px' }}
149-
onClick={handleClick}
150-
>
151-
<icons.copy color={iconColors.grey} />
152-
</LinkBox>
157+
158+
{props.showTokField && (
159+
<LinkBox
160+
style={{ position: 'absolute', right: '10px', top: '40px' }}
161+
onClick={handleClick}
162+
>
163+
<icons.copy color={iconColors.grey} />
164+
</LinkBox>
165+
)}
153166
</FlexBox>
154167
{copied && (
155168
<div style={{ marginTop: '20px', textAlign: 'right' }}>
@@ -169,6 +182,70 @@ export const CopyField = (
169182
);
170183
};
171184

185+
186+
export const GenerateTokenField = (
187+
props: {
188+
label: string;
189+
labelColor: any;
190+
placeholder: any;
191+
value: string;
192+
handleClick: any;
193+
loading: boolean;
194+
hideButton: boolean;
195+
} & any,
196+
): any => {
197+
return (
198+
<FlexBox.Column fullWidth>
199+
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
200+
<InputWithLabel
201+
optional={props.required}
202+
name={props.name}
203+
label={props.label}
204+
labelColor={props.labelColor}
205+
InputComponent={
206+
<TextInput
207+
{...props}
208+
style={props.style}
209+
placeholder={props.placeholder}
210+
hasError={props.error?.hasError}
211+
value={props.value}
212+
onChangeText={props.onChange}
213+
/>
214+
}
215+
/>
216+
{!props.hideButton && (
217+
<Box
218+
style={{
219+
position: 'absolute',
220+
right: '0',
221+
top: '38px',
222+
display: 'flex',
223+
justifyContent: 'center',
224+
textAlign: 'center',
225+
}} >
226+
<Box style={{ width: '120px', borderLeft: '1px solid #C9CBD0' }}>
227+
<div style={{
228+
fontFamily: 'Rubik',
229+
fontSize: '16px',
230+
color: '#443E99',
231+
marginTop: '3px',
232+
cursor: 'pointer'
233+
}}
234+
onClick={props.handleClick}
235+
>
236+
{props.loading ? <>Submitting...</> : <>Generate</>}
237+
</div>
238+
</Box>
239+
</Box>
240+
)}
241+
</FlexBox>
242+
</FlexBox.Column>
243+
);
244+
};
245+
246+
247+
248+
172249
export const EditField = (
173250
props: {
174251
label: string;

‎src/ui/components/icons/assets/Share.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/ui/components/icons/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
6363
import { ReactComponent as Run } from './assets/Run.svg';
6464
import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
6565
import { ReactComponent as Pen } from './assets/Pen.svg';
66+
import { ReactComponent as Share } from './assets/Share.svg';
6667
// import { ReactComponent as Inprogress } from './assets/InProgress.svg';
6768
// import { ReactComponent as Cached } from './assets/Cached.svg';
6869
// import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -200,6 +201,7 @@ const icons = {
200201
useStroke: true,
201202
}),
202203
pen: createIcon({ Component: Pen, useStroke: true }),
204+
share: createIcon({ Component: Share, useStroke: true }),
203205

204206
// paginations
205207
paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

‎src/ui/layouts/common/PopupSmall/index.module.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import '../../../globalStyles.scss';
2+
3+
.dimmer {
4+
position: fixed;
5+
// background: #424240;
6+
// opacity: 0.5;
7+
background: rgba(217, 217, 217, 0.2);
8+
backdrop-filter: blur(4px);
9+
height: 100vh;
10+
width: 100vw;
11+
top: 0;
12+
left: 0;
13+
z-index: 9999;
14+
}
15+
16+
.popup {
17+
background: #ffffff;
18+
border-radius: 4px;
19+
position: fixed;
20+
max-height: 70vh;
21+
min-height: 200px;
22+
// min-width: 528px;
23+
overflow-x: auto;
24+
}
25+
26+
@media (max-width: $md-breakpoint) {
27+
.popup {
28+
max-width: 80vw;
29+
min-width: 0;
30+
}
31+
}
32+
33+
.popupContainer {
34+
position: fixed;
35+
height: 100vh;
36+
width: 100vw;
37+
top: 0;
38+
left: 0;
39+
z-index: 99999;
40+
}
41+
42+
.popupClose {
43+
position: absolute;
44+
top: 1.5em;
45+
right: 1.5rem;
46+
}

‎src/ui/layouts/common/PopupSmall/index.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import OutsideClickHandler from 'react-outside-click-handler';
3+
4+
import { Box, FlexBox, icons, LinkBox } from '../../../components';
5+
6+
import styles from './index.module.scss';
7+
8+
const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
9+
10+
export const PopupSmall: React.FC<{ width?: string, showCloseIcon?: any, onClose: any }> = ({
11+
children,
12+
width,
13+
showCloseIcon,
14+
onClose,
15+
}) => (
16+
<>
17+
<Dimmer />
18+
<FlexBox
19+
alignItems="center"
20+
justifyContent="center"
21+
className={styles.popupContainer}
22+
>
23+
<Box className={styles.popup} style={{ width }}>
24+
<OutsideClickHandler onOutsideClick={onClose}>
25+
{showCloseIcon && (
26+
<Box className={styles.popupClose}>
27+
<LinkBox onClick={onClose}>
28+
<icons.closeWithBorder />
29+
</LinkBox>
30+
</Box>
31+
)}
32+
<Box paddingVertical="lg" paddingHorizontal="lg">
33+
{children}
34+
</Box>
35+
</OutsideClickHandler>
36+
</Box>
37+
</FlexBox>
38+
</>
39+
);

0 commit comments

Comments
 (0)