initial commit

interface/src/security/SecuritySettingsForm.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ValidatorForm } from 'react-material-ui-form-validator';
+
+import { Box, Typography } from '@material-ui/core';
+import SaveIcon from '@material-ui/icons/Save';
+
+import { withAuthenticatedContext, AuthenticatedContextProps } from '../authentication';
+import { RestFormProps, PasswordValidator, FormActions, FormButton } from '../components';
+
+import { SecuritySettings } from './types';
+
+type SecuritySettingsFormProps = RestFormProps<SecuritySettings> & AuthenticatedContextProps;
+
+class SecuritySettingsForm extends React.Component<SecuritySettingsFormProps> {
+
+  onSubmit = () => {
+    this.props.saveData();
+    this.props.authenticatedContext.refresh();
+  }
+
+  render() {
+    const { data, handleValueChange, loadData } = this.props;
+    return (
+      <ValidatorForm onSubmit={this.onSubmit}>
+        <PasswordValidator
+          validators={['required', 'matchRegexp:^.{1,64}$']}
+          errorMessages={['JWT Secret Required', 'JWT Secret must be 64 characters or less']}
+          name="jwt_secret"
+          label="JWT Secret"
+          fullWidth
+          variant="outlined"
+          value={data.jwt_secret}
+          onChange={handleValueChange('jwt_secret')}
+          margin="normal"
+        />
+        <Box bgcolor="primary.main" color="primary.contrastText" p={2} mt={2} mb={2}>
+          <Typography variant="body1">
+            If you modify the JWT Secret, all users will be logged out.
+          </Typography>
+        </Box>
+        <FormActions>
+          <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
+            Save
+          </FormButton>
+          <FormButton variant="contained" color="secondary" onClick={loadData}>
+            Reset
+          </FormButton>
+        </FormActions>
+      </ValidatorForm>
+    );
+  }
+
+}
+
+export default withAuthenticatedContext(SecuritySettingsForm);