Merge pull request #238 from kbase/UFI-60

validate email, improve org messaging, add required field indicator [UFI-60]
kbaseattic · Jul 21, 2023 · e9e2d0b · e9e2d0b
2 parents 303d04d + 5984813
commit e9e2d0b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/src/plugin/iframe_root/modules/reactComponents/SignUpForm.js b/src/plugin/iframe_root/modules/reactComponents/SignUpForm.js
@@ -21,6 +21,8 @@ define([
     const {Component} = preact;
     const html = htm.bind(preact.h);
 
+    const EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
     class FieldEvaluator {
         constructor({process, updater}) {
             this.process = process;
@@ -179,14 +181,16 @@ define([
             const fieldState = this.state.form.fields[fieldName];
             const classes = (() => {
                 switch (fieldState.status) {
+                case 'REQUIRED_MISSING':
+                    return 'glyphicon-asterisk text-danger';
                 case 'VALID':
                     return  'glyphicon-ok text-success';
                 case 'LOCAL_VALID':
-                    return 'glyphicon-asterisk text-danger';
+                    return 'glyphicon-asterisk text-warning';
                 case 'REMOTE_VALIDATING':
-                    return 'glyphicon-asterisk text-danger';
+                    return 'glyphicon-asterisk text-warning';
                 case 'INVALID':
-                    return 'glyphicon-asterisk text-danger';
+                    return 'glyphicon-remove text-danger';
                 }
             })();
 
@@ -289,7 +293,19 @@ define([
                     isRequired: true,
                     minLength: 2,
                     maxLength: 100,
-                    rules: []
+                    rules: [{
+                        validate: async (value) => {
+                            if (EMAIL_REGEXP.test(value)) {
+                                return {
+                                    isValid: true
+                                };
+                            }
+                            return {
+                                isValid: false,
+                                message: 'Not a valid email address'
+                            };
+                        }
+                    }]
                 },
                 username: {
                     label: 'KBase Username',
@@ -428,7 +444,6 @@ define([
             // Apply rules.
             // Realname is required, has no character limit afaik, but let us impose
             // a default of 100 characters.
-
             const fieldState = this.getFieldState(fieldName);
             const fieldDefinition = this.getFieldDefinition(fieldName);
 

diff --git a/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.js b/src/plugin/iframe_root/modules/reactComponents/TypeaheadInput.js
@@ -116,9 +116,9 @@ define([
         onInput(e) {
             const value = e.target.value;
             const result = this.inputUpdated(value);
-            if (result.status === 'ERROR') {
-                return;
-            }
+            // if (result.status === 'ERROR') {
+            //     return;
+            // }
             this.props.onSelect(value);
         }
 
@@ -209,6 +209,12 @@ define([
             this.props.onSelect(value);
         }
 
+        leaveAsIs(ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.closeDropdown();
+        }
+
         renderDropdownItems() {
             if (this.state.value.tooManyResults) {
                 return html`
@@ -235,7 +241,7 @@ define([
                 return html`
                     <div className="text-info -message">
                         Nothing matched your search.<br />
-                        You may leave it as is to use this value in your profile,
+                        You may <button className="btn btn-default btn-xs" onClick=${this.leaveAsIs.bind(this)}>leave it as is</button> to use this value in your profile,
                         or try different text to match your organization.
                     </div>
                 `;
@@ -263,16 +269,26 @@ define([
             }
             if (this.state.status === 'ERROR') {
                 return html`
-                    <div className="text-error -message" >
+                    <div className="-dropdown-wrapper">
+                        <div className="-dropdown text-danger">
                         ${this.state.message}
+                        </div>
+                        <div className="-dropdown-items">
+                            
+                        </div>
                     </div>
                 `;
             } else if (this.state.status === 'WARNING') {
                 return html`
-                    <div className="text-warning -message" >
+                <div className="-dropdown-wrapper">
+                    <div className="-dropdown text-warning">
                         ${this.state.message}
                     </div>
-                `;
+                    <div className="-dropdown-items">
+                       
+                    </div>
+                </div>
+            `;
             }
             const foundMessage = (() => {
                 if (!this.state.inputValue) {