validation handling ux for join project secret

Author: pegahvaezi

web/src/components/JoinProjectModal/JoinProjectModal.tsx

@@ -19,13 +19,13 @@ function JoinProjectForm({
   projectSecret,
   onSecretChange,
   invalidText,
-  validatingSecret,
-  onValidate,
+  pendingJoiningProject,
+  onClickDone,
 }) {
   const validateButtonContent = (
     <ButtonWithPendingState
-      pending={validatingSecret}
-      pendingText="Searching..."
+      pending={pendingJoiningProject}
+      pendingText="joining..."
       actionText="Join Project"
     />
   )
@@ -51,7 +51,13 @@ function JoinProjectForm({
           />
         </ProjectModalContent>
       </ProjectModalContentSpacer>
-      <ProjectModalButton text={validateButtonContent} onClick={onValidate} />
+      <ProjectModalButton
+        text={validateButtonContent}
+        onClick={onClickDone}
+        // show the button as disabled if there is a text about invalid secret input
+        // or if there is no input
+        disabled={invalidText !== '' || projectSecret === ''} 
+      />
     </div>
   )
 }
@@ -74,7 +80,11 @@ function ProjectJoinFollowUp({ onDone, checkDone }) {
           required before you can access it.
         </div>
       </ProjectModalContent>
-      <ProjectModalButton text="I understand" onClick={onDone} />
+      <ProjectModalButton
+        text="I understand"
+        onClick={onDone}
+        disabled={false}
+      />
     </div>
   )
 }
@@ -87,26 +97,22 @@ export default function JoinProjectModal({
 }) {
   const reset = () => {
     setProjectSecret('')
-    setValidatingSecret(false)
+    setPendingJoiningProject(false)
     setInvalidText('')
     setCheckDone(false)
   }
-  const onValidate = async () => {
-    // check if the sectrest is five words or not
-    if (invalidText || projectSecret.length === 0) {
-      setInvalidText('Secret must be 5 words.')
-      return
-    }
-    // Check if the secret is already joined
-    if (joinedProjectsSecrets.includes(projectSecret)) {
-      setInvalidText("You've already joined this project!")
-      return
-    }
-    setValidatingSecret(true)
+
+  const [checkDone, setCheckDone] = useState(false)
+  const [projectSecret, setProjectSecret] = useState('')
+  const [invalidText, setInvalidText] = useState('')
+  const [pendingJoiningProject, setPendingJoiningProject] = useState(false)
+
+  const onClickDone = async () => {
+    setPendingJoiningProject(true)
     try {
       await onJoinProject(projectSecret)
       setCheckDone(true)
-      setValidatingSecret(false)
+      setPendingJoiningProject(false)
     } catch (e) {
       console.log(e)
       // TODO: add better detail here
@@ -118,21 +124,17 @@ export default function JoinProjectModal({
     onClose()
   }
 
-  const [checkDone, setCheckDone] = useState(false)
-  const [projectSecret, setProjectSecret] = useState('')
-  const [invalidText, setInvalidText] = useState('')
-
-  const [validatingSecret, setValidatingSecret] = useState(false)
-
-  const onSecretChange = (val) => {
+  const onSecretChange = (userInputText: string) => {
     setInvalidText('')
-    setValidatingSecret(false)
-    setProjectSecret(val)
-    if (!val) {
+    setPendingJoiningProject(false)
+    setProjectSecret(userInputText)
+    if (!userInputText) {
       setInvalidText('')
+    } else if (joinedProjectsSecrets.includes(userInputText)) {
+      setInvalidText("You've already joined this project!")
     } else if (
-      val.split(' ').length !== 5 ||
-      !val.split(' ').every((word) => word.length)
+      userInputText.split(' ').length !== 5 ||
+      !userInputText.split(' ').every((word) => word.length)
     ) {
       setInvalidText('Secret must be 5 words.')
     }
@@ -151,8 +153,8 @@ export default function JoinProjectModal({
         projectSecret={projectSecret}
         onSecretChange={onSecretChange}
         invalidText={invalidText}
-        validatingSecret={validatingSecret}
-        onValidate={onValidate}
+        pendingJoiningProject={pendingJoiningProject}
+        onClickDone={onClickDone}
       />
     </Modal>
   )

web/src/components/ProjectModal/ProjectModal.js

@@ -24,10 +24,10 @@ function ProjectModalContent({ children }) {
   return <div className="project-modal-content">{children}</div>
 }
 
-function ProjectModalButton({ text, onClick }) {
+function ProjectModalButton({ text, onClick, disabled }) {
   return (
     <div className="project-modal-button">
-      <Button text={text} onClick={onClick} />
+      <Button text={text} onClick={onClick} disabled={disabled} />
     </div>
   )
 }

web/src/components/ProjectSecret/ProjectSecret.js

@@ -23,6 +23,7 @@ export default function ProjectSecret({ passphrase }) {
           label="Project Invitation Secret"
           helpText="Share this secret phrase with people you want to invite to this project."
         />
+        {/* copy to clipboard button */}
         <div
           onClick={copySecretToClipboard}
           className="project-secret-copy-secret"
@@ -34,10 +35,10 @@ export default function ProjectSecret({ passphrase }) {
             name="file-copy.svg"
           />
         </div>
+        {showCopyMessage && (
+          <div className="secret-copy-message">{copyMessage}</div>
+        )}
       </div>
-      {showCopyMessage && (
-        <div className="secret-copy-message">{copyMessage}</div>
-      )}
     </div>
   )
 }

web/src/components/ProjectSecret/ProjectSecret.scss

@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-end;
+  position: relative;
 }
 
 .project-secret-row .validating-form-input {
@@ -41,9 +42,9 @@
 }
 
 .secret-copy-message {
-  position: absolute;
-  top: 118px;
   color: #00a599;
-  margin-left: 10px;
   font-size: 14px;
+  position: absolute;
+  bottom: -1.375rem;
+  left: 0.25rem;
 }

web/src/components/ValidatingFormInput/ValidatingFormInput.scss

@@ -75,7 +75,7 @@
     color: #ff5d36;
     font-size: 0.75rem;
     position: absolute;
-    top: 3.125rem;
+    top: 3.25rem;
     left: 0.25rem;
   }