Add external flag to user config

scm-ui/ui-webapp/src/users/components/UserForm.tsx

@@ -60,6 +60,7 @@ class UserForm extends React.Component<Props, State> {
         mail: "",
         password: "",
         active: true,
+        external: false,
         _links: {}
       },
       mailValidationError: false,
@@ -80,14 +81,10 @@ class UserForm extends React.Component<Props, State> {
     }
   }
 
-  isFalsy(value) {
-    return !value;
-  }
-
   createUserComponentsAreInvalid = () => {
     const user = this.state.user;
     if (!this.props.user) {
-      return this.state.nameValidationError || this.isFalsy(user.name) || !this.state.passwordValid;
+      return this.state.nameValidationError || !user.name || !this.state.passwordValid;
     } else {
       return false;
     }
@@ -99,7 +96,8 @@ class UserForm extends React.Component<Props, State> {
       return (
         this.props.user.displayName === user.displayName &&
         this.props.user.mail === user.mail &&
-        this.props.user.active === user.active
+        this.props.user.active === user.active &&
+          this.props.user.external === user.external
       );
     } else {
       return false;
@@ -113,8 +111,8 @@ class UserForm extends React.Component<Props, State> {
       this.editUserComponentsAreUnchanged() ||
       this.state.mailValidationError ||
       this.state.displayNameValidationError ||
-      this.isFalsy(user.displayName) ||
-      this.isFalsy(user.mail)
+      !user.displayName ||
+      !user.mail
     );
   };
 
@@ -181,7 +179,7 @@ class UserForm extends React.Component<Props, State> {
           </div>
           {passwordChangeField}
           <div className="columns">
-            <div className="column">
+            <div className="column is-half">
               <Checkbox
                 label={t("user.active")}
                 onChange={this.handleActiveChange}
@@ -189,6 +187,14 @@ class UserForm extends React.Component<Props, State> {
                 helpText={t("help.activeHelpText")}
               />
             </div>
+            <div className="column is-half">
+              <Checkbox
+                label={t("user.externalFlag")}
+                onChange={this.handleExternalFlagChange}
+                checked={!!user?.external && user.external}
+                helpText={t("help.externalFlagHelpText")}
+              />
+            </div>
           </div>
           <Level right={<SubmitButton disabled={!this.isValid()} loading={loading} label={t("userForm.button")} />} />
         </form>
@@ -232,7 +238,7 @@ class UserForm extends React.Component<Props, State> {
         ...this.state.user,
         password
       },
-      passwordValid: !this.isFalsy(password) && passwordValid
+      passwordValid: !!password && passwordValid
     });
   };
 
@@ -244,6 +250,15 @@ class UserForm extends React.Component<Props, State> {
       }
     });
   };
+
+  handleExternalFlagChange = (external: boolean) => {
+    this.setState({
+      user: {
+        ...this.state.user,
+        external
+      }
+    });
+  };
 }
 
 export default withTranslation("users")(UserForm);

scm-ui/ui-webapp/src/users/components/table/Details.tsx

@@ -61,6 +61,12 @@ class Details extends React.Component<Props> {
               <Checkbox checked={user.active} />
             </td>
           </tr>
+          <tr>
+            <th>{t("user.externalFlag")}</th>
+            <td>
+              <Checkbox checked={!!user?.external && user.external} />
+            </td>
+          </tr>
           <tr>
             <th>{t("user.type")}</th>
             <td>{user.type}</td>