feat(fbcnms-ui): Add Organization create

Author: HannaFar

fbcnms-packages/fbcnms-ui/components/FormField.js

@@ -0,0 +1,204 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import Box from '@material-ui/core/Box';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+import HelpIcon from '@material-ui/icons/Help';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import ListItem from '@material-ui/core/ListItem';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import React from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import grey from '@material-ui/core/colors/grey';
+
+import {makeStyles} from '@material-ui/styles';
+import {useState} from 'react';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    marginBottom: '5px',
+    alignItems: 'center',
+  },
+  heading: {
+    flexBasis: '33.33%',
+    marginRight: '15px',
+    textAlign: 'right',
+  },
+  subheading: {
+    fontWeight: '400',
+  },
+  optionalLabel: {
+    color: grey.A700,
+    fontStyle: 'italic',
+    fontWeight: '400',
+    marginLeft: '8px',
+  },
+  secondaryHeading: {
+    flexBasis: '66.66%',
+  },
+  icon: {
+    marginLeft: '5px',
+    paddingTop: '4px',
+    verticalAlign: 'bottom',
+    width: '15px',
+  },
+  formDivider: {
+    margin: `${theme.spacing(3)}px 0 ${theme.spacing(2)}px`,
+    backgroundColor: '#9DA7BB',
+    opacity: 0.4,
+    height: '1px',
+  },
+}));
+
+type Props = {
+  label: string,
+  children?: any,
+  dense?: boolean,
+  tooltip?: string,
+  subLabel?: string,
+  isOptional?: boolean,
+  disableGutters?: boolean,
+};
+
+export default function FormField(props: Props) {
+  const classes = useStyles();
+  const {tooltip} = props;
+  return (
+    <div className={classes.root}>
+      <Typography className={classes.heading} variant="body2">
+        {props.label}
+        {tooltip && (
+          <Tooltip title={tooltip} placement="bottom-start">
+            <HelpIcon className={classes.icon} />
+          </Tooltip>
+        )}
+      </Typography>
+      <Typography
+        className={classes.secondaryHeading}
+        component="div"
+        variant="body2">
+        {props.children}
+      </Typography>
+    </div>
+  );
+}
+
+export function AltFormField(props: Props) {
+  const classes = useStyles();
+  return (
+    <ListItem dense={props.dense} disableGutters={props.disableGutters}>
+      <Grid container>
+        <Grid item xs={12}>
+          {props.label}
+          {props.isOptional && (
+            <Typography
+              className={classes.optionalLabel}
+              variant="caption"
+              gutterBottom>
+              {'optional'}
+            </Typography>
+          )}
+        </Grid>
+        {props.subLabel && (
+          <Grid item xs={12}>
+            <Typography
+              className={classes.subheading}
+              variant="caption"
+              display="block"
+              gutterBottom>
+              {props.subLabel}
+            </Typography>
+          </Grid>
+        )}
+        <Grid item xs={12}>
+          {props.children}
+        </Grid>
+      </Grid>
+    </ListItem>
+  );
+}
+
+export function AltFormFieldSubheading(props: Props) {
+  const classes = useStyles();
+  return (
+    <Grid container>
+      <Grid item xs={12}>
+        <Typography
+          className={classes.subheading}
+          variant="caption"
+          display="block"
+          gutterBottom>
+          {props.label}
+        </Typography>
+      </Grid>
+      <Grid item xs={12}>
+        {props.children}
+      </Grid>
+    </Grid>
+  );
+}
+
+type PasswordProps = {
+  value: string,
+  onChange: string => void,
+};
+
+export function FormDivider() {
+  const classes = useStyles();
+  return <Divider className={classes.formDivider} />;
+}
+
+export function PasswordInput(props: PasswordProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  return (
+    <OutlinedInput
+      {...props}
+      type={showPassword ? 'text' : 'password'}
+      value={props.value}
+      onChange={e => props.onChange(e.target.value)}
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton
+            aria-label="toggle password visibility"
+            onClick={() => setShowPassword(true)}
+            onMouseDown={() => setShowPassword(false)}
+            edge="end">
+            {showPassword ? <Visibility /> : <VisibilityOff />}
+          </IconButton>
+        </InputAdornment>
+      }
+    />
+  );
+}
+
+type ProgressProps = {
+  value: number,
+  text?: string,
+};
+
+export function LinearProgressWithLabel(props: ProgressProps) {
+  return (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" value={props.value} />
+      </Box>
+      <Box minWidth={35}>
+        <Typography>{props.text ?? `${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}

fbcnms-packages/fbcnms-ui/components/auth/EditUserDialog.js

@@ -37,7 +37,7 @@ export type EditUser = {
   organization?: string,
 };
 
-type SaveUserData = {
+export type SaveUserData = {
   email: string,
   password?: string,
   role: number,