OAuthClientForm.tsx 5.01 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
import * as React from 'react';
import { translate } from 'react-i18next';
import { Field, FieldArray, reduxForm } from 'redux-form';
// Constants
import { ADMIN_UPDATE_OAUTH_CLIENT_FORM } from 'user/constants';
// Model
import OAuthClient from 'model/oauth/OAuthClient';
import GrantedAuthority from 'model/oauth/GrantedAuthority';
// Util
import Validators from 'utilities/Validators';
// UI
import { TextField } from 'ui/common/text-field';
import ItemsEditor from 'ui/common/ItemsEditor';
import CheckboxSelection from 'ui/common/forms/CheckboxSelection';
import BooleanRadioGroup from 'ui/common/forms/BooleanRadioGroup';
import Button from '@material-ui/core/Button';

const stringField = (member, index, fields, itemLabel) => (
  <Field required name={ `${member}` } type="text" component={ TextField } label={ itemLabel } validate={ [Validators.required] }/>
);

class UserForm extends React.Component<any, any> {

  public constructor(props: any) {
    super(props);
    this.state = {
      autoApprove: props.initialValues && props.initialValues.autoApprove || false,
    };
  }

  private handleRadioChange = (e, newValue) => {
    this.setState({ autoApprove: newValue === 'true' });
  }

  public render() {
    const { onCancel, t, error, handleSubmit, submitting, invalid } = this.props;

    return (
      <form onSubmit={ handleSubmit }>
        <Field
          name={ `clientId` }
          disabled
          component={ TextField }
          type="text"
          label={ t(`user.common.oAuth.clientId`) }
        />
        <Field
          name={ `title` }
          component={ TextField }
          type="text"
          label={ t(`user.common.oAuth.clientTitle`) }
          validate={ [Validators.required] }
        />
Matija Obreza's avatar
Matija Obreza committed
54 55 56 57 58 59 60
        <Field
          name={ `description` }
          component={ TextField }
          type="text"
          multiline
          label={ t(`user.common.oAuth.description`) }
        />
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
        <Field
          name={ `accessTokenValidity` }
          component={ TextField }
          type="text"
          placeholder={ t('common:label.useDefault') }
          label={ t(`user.common.oAuth.accessTokenValidity`) }
          validate={ [Validators.decimalNumber] }
        />
        <Field
          name={ `refreshTokenValidity` }
          component={ TextField }
          type="text"
          placeholder={ t('common:label.useDefault') }
          label={ t(`user.common.oAuth.refreshTokenValidity`) }
          validate={ [Validators.decimalNumber] }
        />
        <ItemsEditor name="registeredRedirectUri" itemLabel={ t('user.common.oAuth.redirectUris') } addItem={ console.log } removeItem={ console.log } component={ stringField }/>
78
        <ItemsEditor name="allowedOrigins" itemLabel={ t('user.common.oAuth.allowedOrigins') } addItem={ console.log } removeItem={ console.log } component={ stringField }/>
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
        <FieldArray
          name="authorizedGrantTypes"
          options={ OAuthClient.AVAILABLE_GRANT_TYPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (gT) => t(`user.common.oAuth.grantTypes.${gT}`) }
          formLabel={ t(`user.common.oAuth.grantType`) }
          t={ t }
        />
        <FieldArray
          name="roles"
          options={ GrantedAuthority.AVAILABLE_AUTHORITIES }
          component={ CheckboxSelection }
          renderOptionLabel={ (authority) => t(`user.common.oAuth.authorities.${authority}`) }
          formLabel={ t(`user.common.oAuth.authority`) }
          t={ t }
        />
        <FieldArray
          name="clientScopes"
          options={ OAuthClient.AVAILABLE_SCOPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (scope) => t(`user.common.oAuth.clientScopes.${scope}`) }
          formLabel={ t(`user.common.oAuth.clientScope`) }
          t={ t }
        />

        <Field
          name="autoApprove"
          component={ BooleanRadioGroup  }
          onChange={ this.handleRadioChange }
          formLabel={ t(`user.common.oAuth.autoApprove`) }
          labelTrue={ t('user.common.oAuth.autoApproveTrue') }
          labelFalse={ t('user.common.oAuth.autoApproveFalse') }
          t={ t }
        />
        <FieldArray
          name="autoApproveScopes"
          disabled={ !this.state.autoApprove }
          options={ OAuthClient.AVAILABLE_SCOPES }
          component={ CheckboxSelection }
          renderOptionLabel={ (scope) => t(`user.common.oAuth.clientScopes.${scope}`) }
          formLabel={ t(`user.common.oAuth.autoApproveScope`) }
          t={ t }
        />
        { error && <div style={ { color: 'red' } }>{ error }</div> }
        <Button variant="contained" type="submit" style={ { marginRight: '1rem', marginTop: '1rem' } } disabled={ submitting || invalid }>{ t('common:action.save') }</Button>
        <Button variant="contained" type="button" style={ { marginLeft: '1rem', marginTop: '1rem' } } onClick={ onCancel }>{ t('common:action.cancel') }</Button>
      </form>
    );
  }
}

export default translate()(reduxForm({
  form: ADMIN_UPDATE_OAUTH_CLIENT_FORM,
  enableReinitialize: true,
})(UserForm));