diff --git a/package.json b/package.json index b5c8796c..1f4bc3e5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "arbor-frontend", - "version": "1.6.4", + "version": "1.6.5", "private": true, "dependencies": { "@brainhubeu/react-carousel": "1.19.26", diff --git a/src/assets/SvgComponents/dropFile.svg b/src/assets/SvgComponents/dropFile.svg new file mode 100644 index 00000000..cadc010f --- /dev/null +++ b/src/assets/SvgComponents/dropFile.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Dialog.js b/src/components/Dialog.js index a71536e4..e3190ac1 100644 --- a/src/components/Dialog.js +++ b/src/components/Dialog.js @@ -15,7 +15,7 @@ const DialogContent = withStyles({ '&:first-child': { paddingTop: '80px' }, - maxWidth: '800px' + maxWidth: '900px' } })(MuiDialogContent); diff --git a/src/components/DropTextFile.js b/src/components/DropTextFile.js new file mode 100644 index 00000000..31c52a7e --- /dev/null +++ b/src/components/DropTextFile.js @@ -0,0 +1,156 @@ +import React, { createRef, useRef, useState } from 'react'; +import { useDropzone } from 'react-dropzone'; +import { Grid, TextField, Button, Typography } from '@material-ui/core'; +import dropFileIcon from '../assets/SvgComponents/dropFile.svg'; + +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles({ + dropArea: { + display: 'flex', + alignItems: 'center', + justifyContent: 'stretch', + flexDirection: 'column', + background: '#FAFAFA', + border: '1px dashed #D9D9D9', + boxSizing: 'border-box', + borderRadius: '8px', + padding: '22px', + textAlign: 'center' + }, + isDrag: { + background: 'rgba(250,250,250,0.5)', + border: '1px dashed #949494' + }, + dropAreaTitle: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '16px', + color: '#8F999F' + }, + dropBottomText: { + fontWeight: 500, + fontSize: '14px', + lineHeight: '16px', + color: '#3E9693' + }, + dropAreaIcon: { + width: '25px', + height: '25px', + margin: '20px', + backgroundImage: `url(${dropFileIcon})`, + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + backgroundSize: 'contain' + }, + textTitle: { + fontWeight: 'bold', + fontSize: '16px', + lineHeight: '20px', + color: '#8F999F', + margin: '26px 0 12px 0' + } +}); + +const DropTextFile = props => { + const inputRef = useRef(); + const classes = useStyles(); + const { + label, + name, + value = '', + helperText, + error, + onChange = () => {}, + onBlur = () => {}, + onError = () => {} + } = props; + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + accept: 'application/json', + multiple: false, + onDrop: async acceptedFiles => { + try { + window['file_0'] = acceptedFiles[0]; + if (!acceptedFiles[0]) { + throw new Error('Unable to get the file'); + } + const file = acceptedFiles[0]; + const reader = new FileReader(); + reader.onload = () => { + console.log(reader.result); + const nativeTextareaSetter = Object + .getOwnPropertyDescriptor( + window.HTMLTextAreaElement.prototype, + 'value' + ).set; + nativeTextareaSetter.call(inputRef.current, reader.result); + const inputEvent = new Event('input', { bubbles: true}); + console.log({inputRef}); + inputRef.current.dispatchEvent(inputEvent); + }; + reader.onerror = () => { + onError(reader.error); + }; + reader.readAsText(file); + } catch (error) { + onError(error); + } + } + }); + + return ( +
{ + if (event.target.nodeName === 'TEXTAREA') { + event.stopPropagation(); + } + } + })}> + + + +
+ + Drag a file here + +
+ + or select a file from your computer + +
+ + + + or manually copypaste .json content here + + + + + + + +
+ ); +}; + +export default DropTextFile; diff --git a/src/components/ProofsList.js b/src/components/ProofsList.js index 89b07d6d..04df4784 100644 --- a/src/components/ProofsList.js +++ b/src/components/ProofsList.js @@ -94,7 +94,7 @@ const proofsTemplate = [ { id: 'd1', type: 'domain', - title: 'Verify website', + title: 'Verify your website', pubTitle: 'Not verified', notes: [ '1. Put evidence to your website using one of these methods', @@ -123,11 +123,12 @@ const proofsTemplate = [ id: 's2', type: 'social', subtype: 'twitter', - title: 'Prove your Twitter account', + title: 'Verify your Twitter account', pubTitle: 'Twitter account proof not submitted yet', notes: [ - '!To prove that a Twitter account is yours copy this exactrly as it appears and create a post in your Twitter', - '>Verifying my ORG.ID identifier: [ORGID]' + '1. Post a tweet containing your ORGiD in the Twitter account that you want to verify', + '>Verifying my ORG.ID identifier: [ORGID]', + '2. Once you have the tweet, provide direct link to it here' ], icon: 'twitter' }, @@ -135,10 +136,13 @@ const proofsTemplate = [ id: 't1', type: 'social', subtype: 't.me', - title: 'Prove your Telegram group', + title: 'Verify your Telegram Group', pubTitle: 'Telegram group account proof not submitted yet', notes: [ - '!To prove that a Telegram group account is yours copy the content of proof generated by the ORGiD bot to the following form' + '1. Add ORGiD Bot (@ogrid_bot) to the Telegram Group you wan’t to verify', + '2. Once you have ORGiD Bot as a member of your Group send this command to the your group', + '>/proof [ORGID]', + '3. ORGiD Bot will do his magic with the command and create .json file that you need to upload here' ], icon: 'telegram', proofType: 'vc' diff --git a/src/components/ProofsWizard.js b/src/components/ProofsWizard.js index 91119393..6ca5dbd4 100644 --- a/src/components/ProofsWizard.js +++ b/src/components/ProofsWizard.js @@ -14,15 +14,19 @@ import SaveButton from './buttons/Save'; import CopyIdComponent from '../components/CopyIdComponent'; const useStyles = makeStyles({ - root: { - + root: {}, + formTitle: { + fontSize: '20px', + lineHeight: '20px', + color: '#3E9693', + marginBottom: '40px' }, noteTitleNum: { fontWeight: 600, fontSize: '16px', color: '#42424F', marginBottom: '20px', - margin: '10px 0 0 -16px' + margin: '10px 0 0 0' }, noteTitle: { fontWeight: 600, @@ -120,6 +124,11 @@ const ProofForm = props => { isSubmitting }) => (
+
+ + {proof.title} + +
{proof.notes.map((n, i) => { @@ -170,10 +179,11 @@ const ProofForm = props => {
{ isSubmitting }) => ( +
+ + {proof.title} + +
{proof.notes.map((n, i) => { @@ -176,22 +186,15 @@ const ProofForm = props => { ); })}
-
- +
@@ -199,7 +202,7 @@ const ProofForm = props => { type='submit' disabled={isSubmitting} > - Save + Done
diff --git a/src/components/buttons/Save.js b/src/components/buttons/Save.js index ca78e89e..22f4801d 100644 --- a/src/components/buttons/Save.js +++ b/src/components/buttons/Save.js @@ -4,11 +4,11 @@ import Button from '@material-ui/core/Button'; const useStyles = makeStyles({ root: { - background: 'linear-gradient(180deg, #FFB36B -140%, #F58F7F 100%)', - border: '1px solid #F58F7F', + background: 'linear-gradient(180deg, #99D7C5 -25%, #3A9492 103.57%)', + border: '1px solid #99D7C5', boxShadow: '0px 2px 12px rgba(12, 64, 78, 0.1)', boxSizing: 'border-box', - borderRadius: 8, + borderRadius: '6px', color: 'white', width: 'auto', height: 40, diff --git a/src/stories/components/DropTextFile.stories.js b/src/stories/components/DropTextFile.stories.js new file mode 100644 index 00000000..f8dc0991 --- /dev/null +++ b/src/stories/components/DropTextFile.stories.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { Container } from '@material-ui/core'; +import { storiesOf } from '@storybook/react'; +import { Formik } from 'formik'; +import DropTextFile from '../../components/DropTextFile'; + +storiesOf('ORG ID/Components/DropTextFile', module) + .add('Drag-n-Drop Text File', () => { + return ( + + { + const errors = {}; + + try { + if (!values.vc || values.vc.trim() === '') { + throw new Error('content is empty'); + } + const vc = JSON.parse(values.vc); + if (!vc.proof || + !vc.proof.verificationMethod) { + throw new Error('proof not defined'); + } + if (!vc.credentialSubject || + !vc.credentialSubject.claim) { + throw new Error('credential subject not defined'); + } + } catch (error) { + errors.vc = `Incorrect VC: ${error.message}`; + } + + return errors; + }} + onSubmit={(values, { setSubmitting }) => { + const vc = JSON.parse(values.vc); + console.log(vc); + }} + > + {({ + values, + errors, + touched, + handleChange, + handleBlur, + handleSubmit, + isSubmitting + }) => ( +
+
+ +
+
+ )} + + + ) +}); \ No newline at end of file