new login design (#4442)

* new login design

* remove effects file (wrong direction)

* add Known Hosts dropdown component

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/Guard/AuthGuard.tsx

@@ -9,7 +9,7 @@ import { AuthenticationService } from "api";
 
 const AuthGuard = ({ state }: AuthGuardProps) => {
   return !AuthenticationService.isConnected(state)
-    ? <Redirect from="*" to={RouteEnum.SERVER} />
+    ? <Redirect from="*" to={RouteEnum.LOGIN} />
     : <div></div>;
 };
 

webclient/src/components/InputField/InputField.css

@@ -0,0 +1,20 @@
+.inputField {
+  position: relative;
+}
+
+.inputField-validation {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateY(-50%);
+  font-weight: bold;
+}
+
+.inputField-error {
+  display: flex;
+  align-items: center;
+}
+
+.inputField-error svg {
+  margin-left: 4px;
+}

webclient/src/components/InputField/InputField.tsx

@@ -1,17 +1,47 @@
 import React from "react";
+import { styled } from '@material-ui/core/styles';
 import TextField from "@material-ui/core/TextField";
+import ErrorOutlinedIcon from '@material-ui/icons/ErrorOutlined';
 
-const InputField = ({ input, label, name, autoComplete, type }) => (
-  <TextField
-    variant="outlined"
-    margin="dense"
-    fullWidth={true}
-    label={label}
-    name={name}
-    type={type}
-    autoComplete={autoComplete}
-    { ...input }
-  />
+import './InputField.css';
+
+const InputField = ({ input, label, name, autoComplete, type, meta: { touched, error, warning } }) => (
+  <div className="inputField">
+    { touched && (
+      <div className="inputField-validation">
+        {
+          ( error &&
+            <ThemedFieldError className="inputField-error">
+              {error}
+              <ErrorOutlinedIcon style={{ fontSize: 'small', fontWeight: 'bold' }} />
+            </ThemedFieldError>
+          ) ||
+
+          ( warning && <ThemedFieldWarning className="inputField-warning">{warning}</ThemedFieldWarning> )
+        }
+      </div>
+    ) }
+
+    <TextField
+      className="rounded"
+      variant="outlined"
+      margin="dense"
+      fullWidth={true}
+      label={label}
+      name={name}
+      type={type}
+      autoComplete={autoComplete}
+      { ...input }
+    />
+  </div>
 );
 
+const ThemedFieldError = styled('div')(({ theme }) => ({
+  color: theme.palette.error.main
+}));
+
+const ThemedFieldWarning = styled('div')(({ theme }) => ({
+  color: theme.palette.warning.main
+}));
+
 export default InputField;

webclient/src/components/KnownHosts/KnownHosts.css

@@ -0,0 +1,3 @@
+.KnownHosts {
+  width: 100%;
+}

webclient/src/components/KnownHosts/KnownHosts.tsx

@@ -0,0 +1,79 @@
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { Select, MenuItem } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import FormControl from '@material-ui/core/FormControl';
+import IconButton from '@material-ui/core/IconButton';
+import InputLabel from '@material-ui/core/InputLabel';
+import EditRoundedIcon from '@material-ui/icons/Edit';
+
+import { HostDTO } from 'services';
+import { DefaultHosts, getHostPort } from 'types';
+
+import './KnownHosts.css';
+
+const KnownHosts = ({ onChange }) => {
+  const [state, setState] = useState({
+    hosts: [],
+    selectedHost: 0,
+  });
+
+  useEffect(() => {
+    HostDTO.getAll().then(async hosts => {
+      if (hosts?.length) {
+        setState(s => ({ ...s, hosts }));
+      } else {
+        setState(s => ({ ...s, hosts: DefaultHosts }));
+        await HostDTO.bulkAdd(DefaultHosts);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (state.hosts.length) {
+      onChange(getHostPort(state.hosts[state.selectedHost]));
+    }
+  }, [state, onChange]);
+
+  const selectHost = (selectedHost) => {
+    setState(s => ({ ...s, selectedHost }));
+  };
+
+  const addKnownHost = () => {
+    console.log('KnownHosts->addKnownHost');
+  };
+
+  const editKnownHost = (hostIndex) => {
+    console.log('KnownHosts->editKnownHost: ', state.hosts[hostIndex]);
+  };
+
+  return (
+    <FormControl variant='outlined' className='KnownHosts'>
+      <InputLabel id='KnownHosts-select'>Host</InputLabel>
+      <Select
+        id='KnownHosts-select'
+        labelId='KnownHosts-label'
+        label='Host'
+        margin='dense'
+        value={state.selectedHost}
+        fullWidth={true}
+        onChange={e => selectHost(e.target.value)}
+      >
+        <Button value={state.selectedHost} onClick={addKnownHost}>Add</Button>
+
+        {
+          state.hosts.map((host, index) => (
+            <MenuItem className='KnownHosts-item' value={index} key={index}>
+              <span>{host.name} ({ getHostPort(state.hosts[index]).host }:{getHostPort(state.hosts[index]).port})</span>
+              <IconButton size='small' color='primary' disabled={!host.editable} onClick={() => editKnownHost(index)}>
+                <EditRoundedIcon fontSize='small' />
+              </IconButton>
+            </MenuItem>
+          ))
+        }
+      </Select>
+    </FormControl>
+  )
+};
+
+export default KnownHosts;

webclient/src/components/index.ts

@@ -4,6 +4,7 @@ export { default as CardDetails } from './CardDetails/CardDetails';
 export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
+export { default as KnownHosts } from './KnownHosts/KnownHosts';
 export { default as Message } from './Message/Message';
 export { default as VirtualList } from './VirtualList/VirtualList';
 export { default as UserDisplay} from './UserDisplay/UserDisplay';