From 451de52a5968195c4f6e93a85ef7fcb69fc0eff9 Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Mon, 28 Mar 2022 20:49:57 -0700 Subject: [PATCH] Use informed lib for create profile (#2051) * Got create signing profile form working with tesla informed * Got create contact profile form working with tesla informed * Got add twitter account form working with tesla informed * Update frontend build --- frontend/src/components/Profiles/index.js | 372 +++++++++--------- frontend/src/components/Twitter/index.js | 84 ++-- .../webapp/static/build/asset-manifest.json | 34 +- .../admin/webapp/static/build/index.html | 2 +- ...nifest.9b60bd08b1a0f3eb52c0fe9e27db5b68.js | 54 +++ ...nifest.d397b1778f1037e414481d8861fd54b9.js | 54 --- .../webapp/static/build/service-worker.js | 2 +- .../build/static/js/2.3fe7af41.chunk.js | 3 - .../build/static/js/2.3fe7af41.chunk.js.map | 1 - .../build/static/js/2.5e6a1b19.chunk.js | 3 + ...SE.txt => 2.5e6a1b19.chunk.js.LICENSE.txt} | 0 .../build/static/js/2.5e6a1b19.chunk.js.map | 1 + ....7c4e27fb.chunk.js => 3.1fd37384.chunk.js} | 4 +- ...b.chunk.js.map => 3.1fd37384.chunk.js.map} | 2 +- ....977be235.chunk.js => 4.dabb8d93.chunk.js} | 4 +- ...5.chunk.js.map => 4.dabb8d93.chunk.js.map} | 2 +- ....93ab39d9.chunk.js => 5.3ee02b27.chunk.js} | 4 +- ...9.chunk.js.map => 5.3ee02b27.chunk.js.map} | 2 +- .../build/static/js/main.4a1d67f6.chunk.js | 2 + .../static/js/main.4a1d67f6.chunk.js.map | 1 + .../build/static/js/main.7d973489.chunk.js | 2 - .../static/js/main.7d973489.chunk.js.map | 1 - ...n.11ce1da2.js => runtime-main.f68d91c9.js} | 4 +- ...a2.js.map => runtime-main.f68d91c9.js.map} | 2 +- 24 files changed, 315 insertions(+), 325 deletions(-) create mode 100644 squeaknode/admin/webapp/static/build/precache-manifest.9b60bd08b1a0f3eb52c0fe9e27db5b68.js delete mode 100644 squeaknode/admin/webapp/static/build/precache-manifest.d397b1778f1037e414481d8861fd54b9.js delete mode 100644 squeaknode/admin/webapp/static/build/static/js/2.3fe7af41.chunk.js delete mode 100644 squeaknode/admin/webapp/static/build/static/js/2.3fe7af41.chunk.js.map create mode 100644 squeaknode/admin/webapp/static/build/static/js/2.5e6a1b19.chunk.js rename squeaknode/admin/webapp/static/build/static/js/{2.3fe7af41.chunk.js.LICENSE.txt => 2.5e6a1b19.chunk.js.LICENSE.txt} (100%) create mode 100644 squeaknode/admin/webapp/static/build/static/js/2.5e6a1b19.chunk.js.map rename squeaknode/admin/webapp/static/build/static/js/{3.7c4e27fb.chunk.js => 3.1fd37384.chunk.js} (91%) rename squeaknode/admin/webapp/static/build/static/js/{3.7c4e27fb.chunk.js.map => 3.1fd37384.chunk.js.map} (97%) rename squeaknode/admin/webapp/static/build/static/js/{4.977be235.chunk.js => 4.dabb8d93.chunk.js} (97%) rename squeaknode/admin/webapp/static/build/static/js/{4.977be235.chunk.js.map => 4.dabb8d93.chunk.js.map} (99%) rename squeaknode/admin/webapp/static/build/static/js/{5.93ab39d9.chunk.js => 5.3ee02b27.chunk.js} (98%) rename squeaknode/admin/webapp/static/build/static/js/{5.93ab39d9.chunk.js.map => 5.3ee02b27.chunk.js.map} (99%) create mode 100644 squeaknode/admin/webapp/static/build/static/js/main.4a1d67f6.chunk.js create mode 100644 squeaknode/admin/webapp/static/build/static/js/main.4a1d67f6.chunk.js.map delete mode 100644 squeaknode/admin/webapp/static/build/static/js/main.7d973489.chunk.js delete mode 100644 squeaknode/admin/webapp/static/build/static/js/main.7d973489.chunk.js.map rename squeaknode/admin/webapp/static/build/static/js/{runtime-main.11ce1da2.js => runtime-main.f68d91c9.js} (79%) rename squeaknode/admin/webapp/static/build/static/js/{runtime-main.11ce1da2.js.map => runtime-main.f68d91c9.js.map} (98%) diff --git a/frontend/src/components/Profiles/index.js b/frontend/src/components/Profiles/index.js index 304d9e66..45e300ab 100644 --- a/frontend/src/components/Profiles/index.js +++ b/frontend/src/components/Profiles/index.js @@ -6,6 +6,9 @@ import { getProfileImageSrcString } from '../../squeakimages/images'; import Loader from '../Loader' import SqueakCard from '../SqueakCard' +import { Form, Input, Select, Checkbox, Relevant, Debug, TextArea, Option } from 'informed'; + + import { unwrapResult } from '@reduxjs/toolkit' import { useDispatch } from 'react-redux' @@ -19,225 +22,216 @@ import { const Profiles = (props) => { - const [tab, setTab] = useState('Signing Profiles') - const [signingProfileModalOpen, setSigningProfileModalOpen] = useState(false) - const [contactProfileModalOpen, setContactProfileModalOpen] = useState(false) - const [styleBody, setStyleBody] = useState(false) - const [newProfileName, setNewProfileName] = useState('') - const [newProfilePubkey, setNewProfilePubkey] = useState('') - const [usePrivKey, setUsePrivKey] = useState(false) - const [newProfilePrivkey, setNewProfilePrivkey] = useState('') + const [tab, setTab] = useState('Signing Profiles') + const [signingProfileModalOpen, setSigningProfileModalOpen] = useState(false) + const [contactProfileModalOpen, setContactProfileModalOpen] = useState(false) + const [styleBody, setStyleBody] = useState(false) + const dispatch = useDispatch() - const dispatch = useDispatch() - - const searchOnChange = (param) => { - if(tab !== 'Search'){setTab('Search')} - if(param.length>0){ - // TODO: search for a profile by name. - } + const searchOnChange = (param) => { + if(tab !== 'Search'){setTab('Search')} + if(param.length>0){ + // TODO: search for a profile by name. } + } - const toggleSigningProfileModal = (param, type) => { - setStyleBody(!styleBody) - setTimeout(()=>{ setSigningProfileModalOpen(!signingProfileModalOpen) },20) + const toggleSigningProfileModal = (param, type) => { + setStyleBody(!styleBody) + setTimeout(()=>{ setSigningProfileModalOpen(!signingProfileModalOpen) },20) + } + + const toggleContactProfileModal = (param, type) => { + setStyleBody(!styleBody) + setTimeout(()=>{ setContactProfileModalOpen(!contactProfileModalOpen) },20) + } + + const createSigningProfile = ({values}) => { + console.log(values); + if (values.importExisting) { + console.log('Import signing profile with name:', values.name); + dispatch(setImportSigningProfile({profileName: values.name, privateKey: values.privateKey})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); + } else { + console.log('Create signing profile with name:', values.name); + dispatch(setCreateSigningProfile({profileName: values.name})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); } + toggleSigningProfileModal(); + } - const toggleContactProfileModal = (param, type) => { - setStyleBody(!styleBody) - setTimeout(()=>{ setContactProfileModalOpen(!contactProfileModalOpen) },20) - } + const createContactProfile = ({values}) => { + dispatch(setCreateContactProfile({profileName: values.name, pubkey: values.pubkey})) + .then(unwrapResult) + .then((pubkey) => { + console.log('Created profile with pubkey', pubkey); + props.history.push(`/app/profile/${pubkey}`); + }) + .catch((err) => { + alert(err.message); + }); + toggleContactProfileModal(); + } - const createSigningProfile = () => { - if (usePrivKey) { - console.log('Import signing profile with name:', newProfileName); - dispatch(setImportSigningProfile({profileName: newProfileName, privateKey: newProfilePrivkey})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - } else { - console.log('Create signing profile with name:', newProfileName); - dispatch(setCreateSigningProfile({profileName: newProfileName})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - } - toggleSigningProfileModal(); - } + const handleModalClick = (e) => { + e.stopPropagation() + } - const createContactProfile = () => { - dispatch(setCreateContactProfile({profileName: newProfileName, pubkey: newProfilePubkey})) - .then(unwrapResult) - .then((pubkey) => { - console.log('Created profile with pubkey', pubkey); - props.history.push(`/app/profile/${pubkey}`); - }) - .catch((err) => { - alert(err.message); - }); - toggleContactProfileModal(); - } + const CreateSigningProfileForm = () => ( +
+
+ +
+
+ +
+ formState.values.importExisting}> +
+ +
+ - const handleModalClick = (e) => { - e.stopPropagation() - } +
+
+
+
+
+
+ +
+
+
+ ); - const handleChangeUsePrivKey = () => { - setUsePrivKey(!usePrivKey); - }; + const CreateContactProfileForm = () => ( +
+
+ +
+
+ +
+ +
+
+
+
+
+
+ +
+
+
+ ); - return( -
+ return( +
-
-
-
-
- -
-
- searchOnChange(e.target.value)} placeholder="Search for people" type="text" name="search"/> -
-
+
+
+
+
+
-
-
+
+ searchOnChange(e.target.value)} placeholder="Search for people" type="text" name="search"/> +
+
+
+
+
toggleSigningProfileModal('edit')} - className='profiles-create-button'> - Add Signing Profile + className='profiles-create-button'> + Add Signing Profile
toggleContactProfileModal('edit')} - className='profiles-create-button'> - Add Contact Profile + className='profiles-create-button'> + Add Contact Profile
+
+
+
+
+
setTab('Signing Profiles')} className={tab === 'Signing Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> + Signing Profiles
+
setTab('Contact Profiles')} className={tab === 'Contact Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> + Contact Profiles
-
-
-
setTab('Signing Profiles')} className={tab === 'Signing Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> - Signing Profiles -
-
setTab('Contact Profiles')} className={tab === 'Contact Profiles' ? `explore-nav-item activeTab` : `explore-nav-item`}> - Contact Profiles -
-
- {tab === 'Signing Profiles' ? - - : - tab === 'Contact Profiles' ? - - :
- Nothing to see here .. -
- Try searching for people, usernames, or keywords +
+ {tab === 'Signing Profiles' ? + + : + tab === 'Contact Profiles' ? + + :
+ Nothing to see here .. +
+ Try searching for people, usernames, or keywords -
- } +
+ } +
+
+ + + {/* Modal for create signing profile */} +
toggleSigningProfileModal()} style={{display: signingProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> +
handleModalClick(e)} className="modal-content"> +
+
+
toggleSigningProfileModal()} className="modal-closeIcon-wrap"> +
+
+

Add Signing Profile

+
+ +
+
+
- {/* Modal for create signing profile */} -
toggleSigningProfileModal()} style={{display: signingProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> -
handleModalClick(e)} className="modal-content"> -
-
-
toggleSigningProfileModal()} className="modal-closeIcon-wrap"> - -
-
-

Add Signing Profile

- -
-
- Submit -
-
-
- -
-
-
-
- - setNewProfileName(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- -
-
- {usePrivKey && -
-
- - setNewProfilePrivkey(e.target.value)} type="text" name="name" className="edit-input"/> -
-
- } -
-
+ {/* Modal for create contact profile */} +
toggleContactProfileModal()} style={{display: contactProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> +
handleModalClick(e)} className="modal-content"> +
+
+
toggleContactProfileModal()} className="modal-closeIcon-wrap"> +
+
+

Add Contact Profile

- {/* Modal for create contact profile */} -
toggleContactProfileModal()} style={{display: contactProfileModalOpen ? 'block' : 'none'}} className="modal-edit"> -
handleModalClick(e)} className="modal-content"> -
-
-
toggleContactProfileModal()} className="modal-closeIcon-wrap"> - -
-
-

Add Contact Profile

- -
-
- Submit -
-
-
- -
-
-
-
- - setNewProfileName(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- - setNewProfilePubkey(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
-
+
+
+
+
-
- ) +
+) } export default withRouter(Profiles) diff --git a/frontend/src/components/Twitter/index.js b/frontend/src/components/Twitter/index.js index 43d11e74..425628bb 100644 --- a/frontend/src/components/Twitter/index.js +++ b/frontend/src/components/Twitter/index.js @@ -5,8 +5,8 @@ import { ICON_SEARCH, ICON_ARROWBACK, ICON_CLOSE } from '../../Icons' import { getProfileImageSrcString } from '../../squeakimages/images'; import Loader from '../Loader' import SqueakCard from '../SqueakCard' -import Select from 'react-select' +import { Form, Input, Checkbox, Select, Relevant, Debug, TextArea, Option } from 'informed'; import { unwrapResult } from '@reduxjs/toolkit' import { useDispatch } from 'react-redux' @@ -31,10 +31,6 @@ const Twitter = (props) => { const [tab, setTab] = useState('Signing Profiles') const [twitterAccountModalOpen, setTwitterAccountModalOpen] = useState(false) const [styleBody, setStyleBody] = useState(false) - const [twitterHandle, setTwitterHandle] = useState('') - const [newProfilePubkey, setNewProfilePubkey] = useState('') - const [bearerToken, setBearerToken] = useState('') - const [signingProfile, setSigningProfile] = useState(null) const signingProfiles = useSelector(selectSigningProfiles); @@ -59,20 +55,20 @@ const Twitter = (props) => { setTimeout(()=>{ setTwitterAccountModalOpen(!twitterAccountModalOpen) },20) } - const createTwitterAccount = () => { - console.log('Create twitter account with handle:', twitterHandle); - if (!signingProfile) { + const createTwitterAccount = ({values}) => { + console.log('Create twitter account with handle:', values.twitterHandle); + if (!values.signingProfileId) { alert('Signing profile must be set.'); return; } dispatch(setCreateTwitterAccount({ - twitterHandle: twitterHandle, - profileId: signingProfile.getProfileId(), - bearerToken: bearerToken, + twitterHandle: values.twitterHandle, + profileId: values.signingProfileId, + bearerToken: values.twitterBearerToken, })) .then(unwrapResult) .then((pubkey) => { - console.log('Created twitter account with handle', twitterHandle); + console.log('Created twitter account with handle', values.twitterHandle); }) .catch((err) => { alert(err.message); @@ -84,10 +80,37 @@ const Twitter = (props) => { e.stopPropagation() } - const handleChangeSigningProfile = (e) => { - setSigningProfile(e.value); - } - + const AddTwitterAccountForm = () => ( +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ ); return(
@@ -129,37 +152,10 @@ const Twitter = (props) => {

Add Twitter Account

- -
-
- Submit -
-
-
-
-
- - setTwitterHandle(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- - setBearerToken(e.target.value)} type="text" name="name" className="edit-input"/> -
-
-
-
- -
-