Skip to content

Commit 7f6ea1a

Browse files
kostyshkostysh
authored
Merge pull request #140 from kostysh/develop
version 1.6.5
2 parents cc3f599 + 3e0d444 commit 7f6ea1a

File tree

9 files changed

+281
-36
lines changed

9 files changed

+281
-36
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "arbor-frontend",
3-
"version": "1.6.4",
3+
"version": "1.6.5",
44
"private": true,
55
"dependencies": {
66
"@brainhubeu/react-carousel": "1.19.26",

‎src/assets/SvgComponents/dropFile.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/Dialog.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const DialogContent = withStyles({
1515
'&:first-child': {
1616
paddingTop: '80px'
1717
},
18-
maxWidth: '800px'
18+
maxWidth: '900px'
1919
}
2020
})(MuiDialogContent);
2121

‎src/components/DropTextFile.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { createRef, useRef, useState } from 'react';
2+
import { useDropzone } from 'react-dropzone';
3+
import { Grid, TextField, Button, Typography } from '@material-ui/core';
4+
import dropFileIcon from '../assets/SvgComponents/dropFile.svg';
5+
6+
import { makeStyles } from '@material-ui/core/styles';
7+
8+
const useStyles = makeStyles({
9+
dropArea: {
10+
display: 'flex',
11+
alignItems: 'center',
12+
justifyContent: 'stretch',
13+
flexDirection: 'column',
14+
background: '#FAFAFA',
15+
border: '1px dashed #D9D9D9',
16+
boxSizing: 'border-box',
17+
borderRadius: '8px',
18+
padding: '22px',
19+
textAlign: 'center'
20+
},
21+
isDrag: {
22+
background: 'rgba(250,250,250,0.5)',
23+
border: '1px dashed #949494'
24+
},
25+
dropAreaTitle: {
26+
fontWeight: 500,
27+
fontSize: '14px',
28+
lineHeight: '16px',
29+
color: '#8F999F'
30+
},
31+
dropBottomText: {
32+
fontWeight: 500,
33+
fontSize: '14px',
34+
lineHeight: '16px',
35+
color: '#3E9693'
36+
},
37+
dropAreaIcon: {
38+
width: '25px',
39+
height: '25px',
40+
margin: '20px',
41+
backgroundImage: `url(${dropFileIcon})`,
42+
backgroundPosition: 'center',
43+
backgroundRepeat: 'no-repeat',
44+
backgroundSize: 'contain'
45+
},
46+
textTitle: {
47+
fontWeight: 'bold',
48+
fontSize: '16px',
49+
lineHeight: '20px',
50+
color: '#8F999F',
51+
margin: '26px 0 12px 0'
52+
}
53+
});
54+
55+
const DropTextFile = props => {
56+
const inputRef = useRef();
57+
const classes = useStyles();
58+
const {
59+
label,
60+
name,
61+
value = '',
62+
helperText,
63+
error,
64+
onChange = () => {},
65+
onBlur = () => {},
66+
onError = () => {}
67+
} = props;
68+
69+
const { getRootProps, getInputProps, isDragActive } = useDropzone({
70+
accept: 'application/json',
71+
multiple: false,
72+
onDrop: async acceptedFiles => {
73+
try {
74+
window['file_0'] = acceptedFiles[0];
75+
if (!acceptedFiles[0]) {
76+
throw new Error('Unable to get the file');
77+
}
78+
const file = acceptedFiles[0];
79+
const reader = new FileReader();
80+
reader.onload = () => {
81+
console.log(reader.result);
82+
const nativeTextareaSetter = Object
83+
.getOwnPropertyDescriptor(
84+
window.HTMLTextAreaElement.prototype,
85+
'value'
86+
).set;
87+
nativeTextareaSetter.call(inputRef.current, reader.result);
88+
const inputEvent = new Event('input', { bubbles: true});
89+
console.log({inputRef});
90+
inputRef.current.dispatchEvent(inputEvent);
91+
};
92+
reader.onerror = () => {
93+
onError(reader.error);
94+
};
95+
reader.readAsText(file);
96+
} catch (error) {
97+
onError(error);
98+
}
99+
}
100+
});
101+
102+
return (
103+
<div {...getRootProps({
104+
onClick: event => {
105+
if (event.target.nodeName === 'TEXTAREA') {
106+
event.stopPropagation();
107+
}
108+
}
109+
})}>
110+
<input {...getInputProps()} />
111+
<Grid
112+
container
113+
alignItems='stretch'
114+
justify='center'
115+
direction='column'
116+
>
117+
<Grid item>
118+
<div className={`${classes.dropArea} ${isDragActive ? classes.isDrag : ''}`}>
119+
<Typography className={classes.dropAreaTitle}>
120+
Drag a file here
121+
</Typography>
122+
<div className={classes.dropAreaIcon} />
123+
<Typography className={classes.dropBottomText}>
124+
or select a file from your computer
125+
</Typography>
126+
</div>
127+
</Grid>
128+
<Grid item>
129+
<Typography className={classes.textTitle}>
130+
or manually copypaste .json content here
131+
</Typography>
132+
</Grid>
133+
<Grid item xs>
134+
<TextField
135+
inputRef={inputRef}
136+
label={label}
137+
name={name}
138+
value={value}
139+
helperText={helperText}
140+
error={error}
141+
onChange={onChange}
142+
onBlur={onBlur}
143+
rows={3}
144+
variant='filled'
145+
required
146+
multiline
147+
fullWidth
148+
/>
149+
</Grid>
150+
</Grid>
151+
152+
</div>
153+
);
154+
};
155+
156+
export default DropTextFile;

‎src/components/ProofsList.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const proofsTemplate = [
9494
{
9595
id: 'd1',
9696
type: 'domain',
97-
title: 'Verify website',
97+
title: 'Verify your website',
9898
pubTitle: 'Not verified',
9999
notes: [
100100
'1. Put evidence to your website using one of these methods',
@@ -123,22 +123,26 @@ const proofsTemplate = [
123123
id: 's2',
124124
type: 'social',
125125
subtype: 'twitter',
126-
title: 'Prove your Twitter account',
126+
title: 'Verify your Twitter account',
127127
pubTitle: 'Twitter account proof not submitted yet',
128128
notes: [
129-
'!To prove that a Twitter account is yours copy this exactrly as it appears and create a post in your Twitter',
130-
'>Verifying my ORG.ID identifier: [ORGID]'
129+
'1. Post a tweet containing your ORGiD in the Twitter account that you want to verify',
130+
'>Verifying my ORG.ID identifier: [ORGID]',
131+
'2. Once you have the tweet, provide direct link to it here'
131132
],
132133
icon: 'twitter'
133134
},
134135
{
135136
id: 't1',
136137
type: 'social',
137138
subtype: 't.me',
138-
title: 'Prove your Telegram group',
139+
title: 'Verify your Telegram Group',
139140
pubTitle: 'Telegram group account proof not submitted yet',
140141
notes: [
141-
'!To prove that a Telegram group account is yours copy the content of proof generated by the ORGiD bot to the following form'
142+
'1. Add ORGiD Bot (@ogrid_bot) to the Telegram Group you wan’t to verify',
143+
'2. Once you have ORGiD Bot as a member of your Group send this command to the your group',
144+
'>/proof [ORGID]',
145+
'3. ORGiD Bot will do his magic with the command and create .json file that you need to upload here'
142146
],
143147
icon: 'telegram',
144148
proofType: 'vc'

‎src/components/ProofsWizard.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,19 @@ import SaveButton from './buttons/Save';
1414
import CopyIdComponent from '../components/CopyIdComponent';
1515

1616
const useStyles = makeStyles({
17-
root: {
18-
17+
root: {},
18+
formTitle: {
19+
fontSize: '20px',
20+
lineHeight: '20px',
21+
color: '#3E9693',
22+
marginBottom: '40px'
1923
},
2024
noteTitleNum: {
2125
fontWeight: 600,
2226
fontSize: '16px',
2327
color: '#42424F',
2428
marginBottom: '20px',
25-
margin: '10px 0 0 -16px'
29+
margin: '10px 0 0 0'
2630
},
2731
noteTitle: {
2832
fontWeight: 600,
@@ -120,6 +124,11 @@ const ProofForm = props => {
120124
isSubmitting
121125
}) => (
122126
<form onSubmit={handleSubmit}>
127+
<div>
128+
<Typography className={classes.formTitle}>
129+
{proof.title}
130+
</Typography>
131+
</div>
123132
<div>
124133
{proof.notes.map((n, i) => {
125134

@@ -170,10 +179,11 @@ const ProofForm = props => {
170179
<div>
171180
<TextField
172181
type='input'
173-
label='https://...'
182+
variant='filled'
183+
label='Link to evidence'
174184
name='proofUri'
175185
value={values['proofUri']}
176-
helperText={errors['proofUri'] && touched['proofUri'] ? errors['proofUri'] : undefined}
186+
helperText={errors['proofUri'] && touched['proofUri'] ? errors['proofUri'] : values['proofUri'] === '' ? 'Put direct link to the evidence here' : undefined}
177187
required={true}
178188
error={errors['proofUri'] && touched['proofUri']}
179189
onChange={handleChange}

‎src/components/VcProofsWizard.js

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,30 @@ import React from 'react';
22
import { connect } from 'react-redux';
33
import DialogComponent from './Dialog';
44
import { Formik } from 'formik';
5-
import {
6-
TextField,
7-
TextareaAutosize,
8-
Typography
9-
} from "@material-ui/core";
5+
import { Typography } from "@material-ui/core";
106
import { makeStyles } from '@material-ui/core/styles';
117
import {
128
addAssertion
139
} from '../ducks/wizard';
10+
import DropTextFile from '../components/DropTextFile';
1411
import SaveButton from './buttons/Save';
1512
import CopyIdComponent from '../components/CopyIdComponent';
1613

1714
const useStyles = makeStyles({
18-
root: {
19-
maxWidth: '700px'
15+
root: {},
16+
formTitle: {
17+
fontSize: '20px',
18+
lineHeight: '20px',
19+
color: '#3E9693',
20+
marginBottom: '40px'
2021
},
2122
noteTitleNum: {
2223
fontWeight: 600,
2324
fontSize: '16px',
25+
lineHeight: '18px',
2426
color: '#42424F',
2527
marginBottom: '20px',
26-
margin: '10px 0 0 -16px'
28+
margin: '10px 0 0 0'
2729
},
2830
noteTitle: {
2931
fontWeight: 600,
@@ -66,6 +68,9 @@ const useStyles = makeStyles({
6668
margin: '20px 0 0 0',
6769
display: 'block',
6870
overflow: 'hidden'
71+
},
72+
dropTextWrapper: {
73+
marginTop: '26px'
6974
}
7075
});
7176

@@ -129,6 +134,11 @@ const ProofForm = props => {
129134
isSubmitting
130135
}) => (
131136
<form onSubmit={handleSubmit}>
137+
<div>
138+
<Typography className={classes.formTitle}>
139+
{proof.title}
140+
</Typography>
141+
</div>
132142
<div>
133143
{proof.notes.map((n, i) => {
134144

@@ -176,30 +186,23 @@ const ProofForm = props => {
176186
);
177187
})}
178188
</div>
179-
<div>
180-
<TextField
181-
className={classes.vcContentField}
182-
label='VC content'
189+
<div className={classes.dropTextWrapper}>
190+
<DropTextFile
191+
label='Verifiable Credential content'
183192
name='vc'
184-
multiline
185-
filled
186-
rows={5}
187193
value={values['vc']}
188-
helperText={errors['vc'] && touched['vc'] ? errors['vc'] : undefined}
189-
required={true}
194+
helperText={errors['vc'] && touched['vc'] ? errors['vc'] : values['vc'] === '' ? 'Put your credential content here' : undefined}
190195
error={errors['vc'] && touched['vc']}
191196
onChange={handleChange}
192197
onBlur={handleBlur}
193-
fullWidth
194-
autoFocus
195198
/>
196199
</div>
197200
<div className={classes.save}>
198201
<SaveButton
199202
type='submit'
200203
disabled={isSubmitting}
201204
>
202-
Save
205+
Done
203206
</SaveButton>
204207
</div>
205208
</form>

‎src/components/buttons/Save.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import Button from '@material-ui/core/Button';
44

55
const useStyles = makeStyles({
66
root: {
7-
background: 'linear-gradient(180deg, #FFB36B -140%, #F58F7F 100%)',
8-
border: '1px solid #F58F7F',
7+
background: 'linear-gradient(180deg, #99D7C5 -25%, #3A9492 103.57%)',
8+
border: '1px solid #99D7C5',
99
boxShadow: '0px 2px 12px rgba(12, 64, 78, 0.1)',
1010
boxSizing: 'border-box',
11-
borderRadius: 8,
11+
borderRadius: '6px',
1212
color: 'white',
1313
width: 'auto',
1414
height: 40,

0 commit comments

Comments
 (0)