From b4a0b98f3449f4b2464be3e6c14c44555d71388d Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Thu, 9 Jan 2025 11:45:24 +0100
Subject: [PATCH] refactor credentials dialog

---
 src/gmp/models/credential.js          |   2 +-
 src/web/pages/credentials/details.jsx |   6 +-
 src/web/pages/credentials/dialog.jsx  | 708 ++++++++++++--------------
 3 files changed, 341 insertions(+), 375 deletions(-)

diff --git a/src/gmp/models/credential.js b/src/gmp/models/credential.js
index bbc9c70eb3..99b132c13a 100644
--- a/src/gmp/models/credential.js
+++ b/src/gmp/models/credential.js
@@ -71,7 +71,7 @@ export const vFire_credential_filter = credential =>
 export const SNMP_AUTH_ALGORITHM_MD5 = 'md5';
 export const SNMP_AUTH_ALGORITHM_SHA1 = 'sha1';
 
-export const SNMP_PRIVACY_ALOGRITHM_NONE = '';
+export const SNMP_PRIVACY_ALGORITHM_NONE = '';
 export const SNMP_PRIVACY_ALGORITHM_AES = 'aes';
 export const SNMP_PRIVACY_ALGORITHM_DES = 'des';
 
diff --git a/src/web/pages/credentials/details.jsx b/src/web/pages/credentials/details.jsx
index 4ae0e8bdba..ca99870c9a 100644
--- a/src/web/pages/credentials/details.jsx
+++ b/src/web/pages/credentials/details.jsx
@@ -6,7 +6,7 @@
 import _ from 'gmp/locale';
 import {
   SNMP_CREDENTIAL_TYPE,
-  SNMP_PRIVACY_ALOGRITHM_NONE,
+  SNMP_PRIVACY_ALGORITHM_NONE,
   getCredentialTypeName,
 } from 'gmp/models/credential';
 import React from 'react';
@@ -29,7 +29,7 @@ const CredentialDetails = ({entity}) => {
     login,
     auth_algorithm,
     privacy = {
-      algorithm: SNMP_PRIVACY_ALOGRITHM_NONE,
+      algorithm: SNMP_PRIVACY_ALGORITHM_NONE,
     },
     targets = [],
     scanners = [],
@@ -78,7 +78,7 @@ const CredentialDetails = ({entity}) => {
             <TableRow>
               <TableData>{_('Privacy Algorithm')}</TableData>
               <TableData>
-                {privacy.algorithm === SNMP_PRIVACY_ALOGRITHM_NONE
+                {privacy.algorithm === SNMP_PRIVACY_ALGORITHM_NONE
                   ? _('None')
                   : privacy.algorithm}
               </TableData>
diff --git a/src/web/pages/credentials/dialog.jsx b/src/web/pages/credentials/dialog.jsx
index bc1f311afa..e6f3e75a04 100644
--- a/src/web/pages/credentials/dialog.jsx
+++ b/src/web/pages/credentials/dialog.jsx
@@ -3,27 +3,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {_} from 'gmp/locale/lang';
 import {
-  SNMP_CREDENTIAL_TYPE,
-  USERNAME_PASSWORD_CREDENTIAL_TYPE,
-  USERNAME_SSH_KEY_CREDENTIAL_TYPE,
+  ALL_CREDENTIAL_TYPES,
+  getCredentialTypeName,
+  PASSWORD_ONLY_CREDENTIAL_TYPE,
+  PGP_CREDENTIAL_TYPE,
+  SMIME_CREDENTIAL_TYPE,
   SNMP_AUTH_ALGORITHM_MD5,
   SNMP_AUTH_ALGORITHM_SHA1,
-  SNMP_PRIVACY_ALOGRITHM_NONE,
+  SNMP_CREDENTIAL_TYPE,
   SNMP_PRIVACY_ALGORITHM_AES,
   SNMP_PRIVACY_ALGORITHM_DES,
-  PASSWORD_ONLY_CREDENTIAL_TYPE,
-  PGP_CREDENTIAL_TYPE,
-  SMIME_CREDENTIAL_TYPE,
+  SNMP_PRIVACY_ALGORITHM_NONE,
+  USERNAME_PASSWORD_CREDENTIAL_TYPE,
+  USERNAME_SSH_KEY_CREDENTIAL_TYPE,
   VFIRE_CREDENTIAL_TYPES,
-  ALL_CREDENTIAL_TYPES,
-  getCredentialTypeName,
 } from 'gmp/models/credential';
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 import {first, map} from 'gmp/utils/array';
 import {isDefined} from 'gmp/utils/identity';
-import React from 'react';
+import {useEffect, useState} from 'react';
 import SaveDialog from 'web/components/dialog/savedialog';
 import Checkbox from 'web/components/form/checkbox';
 import FileField from 'web/components/form/filefield';
@@ -33,410 +32,379 @@ import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 import TextField from 'web/components/form/textfield';
 import YesNoRadio from 'web/components/form/yesnoradio';
+import useTranslation from 'web/hooks/useTranslation';
 import PropTypes from 'web/utils/proptypes';
-import withCapabilities from 'web/utils/withCapabilities';
 
 const PGP_PUBLIC_KEY_LINE = '-----BEGIN PGP PUBLIC KEY BLOCK-----';
 
-class CredentialsDialog extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.state = {};
-
-    this.handleCredentialTypeChange =
-      this.handleCredentialTypeChange.bind(this);
-    this.handlePublicKeyChange = this.handlePublicKeyChange.bind(this);
-    this.handleErrorClose = this.handleErrorClose.bind(this);
-    this.handleError = this.handleError.bind(this);
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const {error} = props;
-    if (isDefined(error)) {
-      return {
-        error: error,
-      };
-    }
-    return null;
-  }
-
-  componentDidMount() {
-    const {autogenerate, credential_type} = this.props;
-
-    this.setCredentialTypeAndAutoGenerate(credential_type, autogenerate);
-  }
-
-  setCredentialTypeAndAutoGenerate(credential_type, autogenerate = NO_VALUE) {
+const CredentialsDialog = props => {
+  const [_] = useTranslation();
+
+  const [credentialType, setCredentialType] = useState();
+  const [autogenerate, setAutogenerate] = useState();
+  const [publicKey, setPublicKey] = useState();
+  const [error, setError] = useState();
+
+  const {
+    credential,
+    title = _('New Credential'),
+    types = [],
+    allow_insecure,
+    auth_algorithm = SNMP_AUTH_ALGORITHM_SHA1,
+    change_community,
+    change_passphrase,
+    change_password,
+    change_privacy_password,
+    comment = '',
+    community = '',
+    credential_login = '',
+    name = _('Unnamed'),
+    passphrase = '',
+    password = '',
+    privacy_algorithm = SNMP_PRIVACY_ALGORITHM_AES,
+    privacy_password = '',
+    onClose,
+    onSave,
+  } = props;
+
+  const isEdit = isDefined(credential);
+
+  useEffect(() => {
+    const {autogenerate: pAutogen, credential_type} = props;
+    setCredentialTypeAndAutoGenerate(credential_type, pAutogen);
+  }, [props]);
+
+  const setCredentialTypeAndAutoGenerate = (type, autogenerate) => {
     if (
-      credential_type !== USERNAME_PASSWORD_CREDENTIAL_TYPE &&
-      credential_type !== USERNAME_SSH_KEY_CREDENTIAL_TYPE
+      type !== USERNAME_PASSWORD_CREDENTIAL_TYPE &&
+      type !== USERNAME_SSH_KEY_CREDENTIAL_TYPE
     ) {
       // autogenerate is only possible with username+password and username+ssh
       autogenerate = NO_VALUE;
     }
+    setCredentialType(type);
+    setAutogenerate(autogenerate);
+  };
 
-    this.setState({
-      autogenerate,
-      credential_type,
-    });
-  }
-
-  handleCredentialTypeChange(credential_type, autogenerate) {
-    this.setCredentialTypeAndAutoGenerate(credential_type, autogenerate);
-  }
+  const handleCredentialTypeChange = (type, autogenerate) => {
+    setCredentialTypeAndAutoGenerate(type, autogenerate);
+  };
 
-  handlePublicKeyChange(file) {
+  const handlePublicKeyChange = file => {
     const reader = new FileReader();
     reader.onload = e => {
       const {result} = e.target;
       if (result.startsWith(PGP_PUBLIC_KEY_LINE)) {
-        this.setState({public_key: result});
+        setPublicKey(result);
       } else {
-        this.setState({error: _('Not a valid PGP file')});
+        setError(_('Not a valid PGP file'));
       }
     };
     reader.readAsText(file);
-  }
-
-  handleErrorClose() {
-    const {onErrorClose} = this.props;
+  };
 
+  const handleErrorClose = () => {
+    const {onErrorClose} = props;
     if (isDefined(onErrorClose)) {
       onErrorClose();
     }
+    setError(undefined);
+  };
 
-    this.setState({error: undefined});
-  }
+  const handleError = e => {
+    setError(e.message);
+  };
 
-  handleError(error) {
-    this.setState({error: error.message});
-  }
+  let cType = credentialType;
 
-  render() {
-    let {credential_type} = this.state;
-
-    const {autogenerate, public_key, error} = this.state;
-
-    const {
-      credential,
-      title = _('New Credential'),
-      types = [],
-      allow_insecure,
-      auth_algorithm = SNMP_AUTH_ALGORITHM_SHA1,
-      change_community,
-      change_passphrase,
-      change_password,
-      change_privacy_password,
-      comment = '',
-      community = '',
-      credential_login = '',
-      name = _('Unnamed'),
-      passphrase = '',
-      password = '',
-      privacy_algorithm = SNMP_PRIVACY_ALGORITHM_AES,
-      privacy_password = '',
-      onClose,
-      onSave,
-    } = this.props;
-
-    const typeOptions = map(types, type => ({
-      label: getCredentialTypeName(type),
-      value: type,
-    }));
-
-    const is_edit = isDefined(credential);
-
-    if (!isDefined(credential_type)) {
-      if (types.includes(USERNAME_PASSWORD_CREDENTIAL_TYPE)) {
-        credential_type = USERNAME_PASSWORD_CREDENTIAL_TYPE;
-      } else {
-        credential_type = first(types);
-      }
-    }
+  const typeOptions = map(types, type => ({
+    label: getCredentialTypeName(type),
+    value: type,
+  }));
 
-    const data = {
-      allow_insecure,
-      auth_algorithm,
-      change_community,
-      change_passphrase,
-      change_password,
-      change_privacy_password,
-      comment,
-      community,
-      credential_login,
-      name,
-      passphrase,
-      password,
-      privacy_algorithm,
-      privacy_password,
-      id: isDefined(credential) ? credential.id : undefined,
-    };
+  if (!isDefined(cType)) {
+    if (types.includes(USERNAME_PASSWORD_CREDENTIAL_TYPE)) {
+      cType = USERNAME_PASSWORD_CREDENTIAL_TYPE;
+    } else {
+      cType = first(types);
+    }
+  }
 
-    const values = {
-      autogenerate,
-      credential_type,
-      public_key,
-    };
+  const data = {
+    allow_insecure,
+    auth_algorithm,
+    change_community,
+    change_passphrase,
+    change_password,
+    change_privacy_password,
+    comment,
+    community,
+    credential_login,
+    name,
+    passphrase,
+    password,
+    privacy_algorithm,
+    privacy_password,
+    id: isDefined(credential) ? credential.id : undefined,
+  };
+
+  const values = {
+    autogenerate,
+    credential_type: cType,
+    public_key: publicKey,
+  };
+
+  return (
+    <SaveDialog
+      defaultValues={data}
+      error={error}
+      title={title}
+      values={values}
+      onClose={onClose}
+      onError={handleError}
+      onErrorClose={handleErrorClose}
+      onSave={onSave}
+    >
+      {({values: state, onValueChange}) => {
+        return (
+          <>
+            <FormGroup title={_('Name')}>
+              <TextField
+                name="name"
+                value={state.name}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+
+            <FormGroup title={_('Comment')}>
+              <TextField
+                name="comment"
+                value={state.comment}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+
+            <FormGroup title={_('Type')}>
+              <Select
+                disabled={isEdit}
+                items={typeOptions}
+                value={state.credential_type}
+                onChange={value =>
+                  handleCredentialTypeChange(value, state.autogenerate)
+                }
+              />
+            </FormGroup>
+
+            <FormGroup title={_('Allow insecure use')}>
+              <YesNoRadio
+                name="allow_insecure"
+                value={state.allow_insecure}
+                onChange={onValueChange}
+              />
+            </FormGroup>
+
+            {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
+              state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE) &&
+              !isEdit && (
+                <FormGroup title={_('Auto-generate')}>
+                  <YesNoRadio
+                    name="autogenerate"
+                    value={state.autogenerate}
+                    onChange={value =>
+                      handleCredentialTypeChange(state.credential_type, value)
+                    }
+                  />
+                </FormGroup>
+              )}
 
-    return (
-      <SaveDialog
-        defaultValues={data}
-        error={error}
-        title={title}
-        values={values}
-        onClose={onClose}
-        onError={this.handleError}
-        onErrorClose={this.handleErrorClose}
-        onSave={onSave}
-      >
-        {({values: state, onValueChange}) => {
-          return (
-            <>
-              <FormGroup title={_('Name')}>
-                <TextField
-                  name="name"
-                  value={state.name}
+            {state.credential_type === SNMP_CREDENTIAL_TYPE && (
+              <FormGroup direction="row" title={_('SNMP Community')}>
+                {isEdit && (
+                  <Checkbox
+                    checked={state.change_community === YES_VALUE}
+                    checkedValue={YES_VALUE}
+                    name="change_community"
+                    title={_('Replace existing SNMP community with')}
+                    unCheckedValue={NO_VALUE}
+                    onChange={onValueChange}
+                  />
+                )}
+                <PasswordField
+                  disabled={state.change_community === NO_VALUE}
+                  grow="1"
+                  name="community"
+                  value={state.community}
                   onChange={onValueChange}
                 />
               </FormGroup>
+            )}
 
-              <FormGroup title={_('Comment')}>
+            {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
+              state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE ||
+              state.credential_type === SNMP_CREDENTIAL_TYPE) && (
+              <FormGroup title={_('Username')}>
                 <TextField
-                  name="comment"
-                  value={state.comment}
+                  name="credential_login"
+                  value={state.credential_login}
                   onChange={onValueChange}
                 />
               </FormGroup>
-
-              <FormGroup title={_('Type')}>
-                <Select
-                  disabled={is_edit}
-                  items={typeOptions}
-                  value={state.credential_type}
-                  onChange={value =>
-                    this.handleCredentialTypeChange(value, state.autogenerate)
+            )}
+
+            {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
+              state.credential_type === SNMP_CREDENTIAL_TYPE ||
+              state.credential_type === VFIRE_CREDENTIAL_TYPES ||
+              state.credential_type === PASSWORD_ONLY_CREDENTIAL_TYPE) && (
+              <FormGroup direction="row" title={_('Password')}>
+                {isEdit && (
+                  <Checkbox
+                    checked={state.change_password === YES_VALUE}
+                    checkedValue={YES_VALUE}
+                    name="change_password"
+                    title={_('Replace existing password with')}
+                    unCheckedValue={NO_VALUE}
+                    onChange={onValueChange}
+                  />
+                )}
+                <PasswordField
+                  autoComplete="new-password"
+                  disabled={
+                    state.autogenerate === YES_VALUE ||
+                    state.change_password === NO_VALUE
                   }
-                />
-              </FormGroup>
-
-              <FormGroup title={_('Allow insecure use')}>
-                <YesNoRadio
-                  name="allow_insecure"
-                  value={state.allow_insecure}
+                  grow="1"
+                  name="password"
+                  value={state.password}
                   onChange={onValueChange}
                 />
               </FormGroup>
-
-              {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
-                state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE) &&
-                !is_edit && (
-                  <FormGroup title={_('Auto-generate')}>
-                    <YesNoRadio
-                      name="autogenerate"
-                      value={state.autogenerate}
-                      onChange={value =>
-                        this.handleCredentialTypeChange(
-                          state.credential_type,
-                          value,
-                        )
-                      }
-                    />
-                  </FormGroup>
-                )}
-
-              {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup direction="row" title={_('SNMP Community')}>
-                  {is_edit && (
-                    <Checkbox
-                      checked={state.change_community === YES_VALUE}
-                      checkedValue={YES_VALUE}
-                      name="change_community"
-                      title={_('Replace existing SNMP community with')}
-                      unCheckedValue={NO_VALUE}
-                      onChange={onValueChange}
-                    />
-                  )}
-                  <PasswordField
-                    disabled={state.change_community === NO_VALUE}
-                    grow="1"
-                    name="community"
-                    value={state.community}
-                    onChange={onValueChange}
-                  />
-                </FormGroup>
-              )}
-
-              {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
-                state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE ||
-                state.credential_type === SNMP_CREDENTIAL_TYPE) && (
-                <FormGroup title={_('Username')}>
-                  <TextField
-                    name="credential_login"
-                    value={state.credential_login}
-                    onChange={onValueChange}
-                  />
-                </FormGroup>
-              )}
-
-              {(state.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE ||
-                state.credential_type === SNMP_CREDENTIAL_TYPE ||
-                state.credential_type === VFIRE_CREDENTIAL_TYPES ||
-                state.credential_type === PASSWORD_ONLY_CREDENTIAL_TYPE) && (
-                <FormGroup direction="row" title={_('Password')}>
-                  {is_edit && (
-                    <Checkbox
-                      checked={state.change_password === YES_VALUE}
-                      checkedValue={YES_VALUE}
-                      name="change_password"
-                      title={_('Replace existing password with')}
-                      unCheckedValue={NO_VALUE}
-                      onChange={onValueChange}
-                    />
-                  )}
-                  <PasswordField
-                    autoComplete="new-password"
-                    disabled={
-                      state.autogenerate === YES_VALUE ||
-                      state.change_password === NO_VALUE
-                    }
-                    grow="1"
-                    name="password"
-                    value={state.password}
+            )}
+
+            {state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE && (
+              <FormGroup direction="row" title={_('Passphrase')}>
+                {isEdit && (
+                  <Checkbox
+                    checked={state.change_passphrase === YES_VALUE}
+                    checkedValue={YES_VALUE}
+                    name="change_passphrase"
+                    title={_('Replace existing passphrase with')}
+                    unCheckedValue={NO_VALUE}
                     onChange={onValueChange}
                   />
-                </FormGroup>
-              )}
-
-              {state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE && (
-                <FormGroup direction="row" title={_('Passphrase')}>
-                  {is_edit && (
-                    <Checkbox
-                      checked={state.change_passphrase === YES_VALUE}
-                      checkedValue={YES_VALUE}
-                      name="change_passphrase"
-                      title={_('Replace existing passphrase with')}
-                      unCheckedValue={NO_VALUE}
-                      onChange={onValueChange}
-                    />
-                  )}
-                  <PasswordField
-                    autoComplete="new-password"
-                    disabled={
-                      state.autogenerate === YES_VALUE ||
-                      state.change_passphrase === NO_VALUE
-                    }
-                    grow="1"
-                    name="passphrase"
-                    value={state.passphrase}
-                    onChange={onValueChange}
-                  />
-                </FormGroup>
-              )}
-
-              {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup direction="row" title={_('Privacy Password')}>
-                  {is_edit && (
-                    <Checkbox
-                      checked={state.change_privacy_password === YES_VALUE}
-                      checkedValue={YES_VALUE}
-                      name="change_privacy_password"
-                      title={_('Replace existing privacy password with')}
-                      unCheckedValue={NO_VALUE}
-                      onChange={onValueChange}
-                    />
-                  )}
-                  <PasswordField
-                    autoComplete="new-password"
-                    disabled={state.change_privacy_password === NO_VALUE}
-                    grow="1"
-                    name="privacy_password"
-                    value={state.privacy_password}
+                )}
+                <PasswordField
+                  autoComplete="new-password"
+                  disabled={
+                    state.autogenerate === YES_VALUE ||
+                    state.change_passphrase === NO_VALUE
+                  }
+                  grow="1"
+                  name="passphrase"
+                  value={state.passphrase}
+                  onChange={onValueChange}
+                />
+              </FormGroup>
+            )}
+
+            {state.credential_type === SNMP_CREDENTIAL_TYPE && (
+              <FormGroup direction="row" title={_('Privacy Password')}>
+                {isEdit && (
+                  <Checkbox
+                    checked={state.change_privacy_password === YES_VALUE}
+                    checkedValue={YES_VALUE}
+                    name="change_privacy_password"
+                    title={_('Replace existing privacy password with')}
+                    unCheckedValue={NO_VALUE}
                     onChange={onValueChange}
                   />
-                </FormGroup>
-              )}
-
-              {state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE && (
-                <FormGroup title={_('Private Key')}>
-                  <FileField name="private_key" onChange={onValueChange} />
-                </FormGroup>
-              )}
+                )}
+                <PasswordField
+                  autoComplete="new-password"
+                  disabled={state.change_privacy_password === NO_VALUE}
+                  grow="1"
+                  name="privacy_password"
+                  value={state.privacy_password}
+                  onChange={onValueChange}
+                />
+              </FormGroup>
+            )}
 
-              {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup direction="row" title={_('Auth Algorithm')}>
-                  <Radio
-                    checked={state.auth_algorithm === SNMP_AUTH_ALGORITHM_MD5}
-                    name="auth_algorithm"
-                    title="MD5"
-                    value={SNMP_AUTH_ALGORITHM_MD5}
-                    onChange={onValueChange}
-                  />
-                  <Radio
-                    checked={state.auth_algorithm === SNMP_AUTH_ALGORITHM_SHA1}
-                    name="auth_algorithm"
-                    title="SHA1"
-                    value={SNMP_AUTH_ALGORITHM_SHA1}
-                    onChange={onValueChange}
-                  />
-                </FormGroup>
-              )}
+            {state.credential_type === USERNAME_SSH_KEY_CREDENTIAL_TYPE && (
+              <FormGroup title={_('Private Key')}>
+                <FileField name="private_key" onChange={onValueChange} />
+              </FormGroup>
+            )}
+
+            {state.credential_type === SNMP_CREDENTIAL_TYPE && (
+              <FormGroup direction="row" title={_('Auth Algorithm')}>
+                <Radio
+                  checked={state.auth_algorithm === SNMP_AUTH_ALGORITHM_MD5}
+                  name="auth_algorithm"
+                  title="MD5"
+                  value={SNMP_AUTH_ALGORITHM_MD5}
+                  onChange={onValueChange}
+                />
+                <Radio
+                  checked={state.auth_algorithm === SNMP_AUTH_ALGORITHM_SHA1}
+                  name="auth_algorithm"
+                  title="SHA1"
+                  value={SNMP_AUTH_ALGORITHM_SHA1}
+                  onChange={onValueChange}
+                />
+              </FormGroup>
+            )}
 
-              {state.credential_type === SNMP_CREDENTIAL_TYPE && (
-                <FormGroup direction="row" title={_('Privacy Algorithm')}>
-                  <Radio
-                    checked={
-                      state.privacy_algorithm === SNMP_PRIVACY_ALGORITHM_AES
-                    }
-                    name="privacy_algorithm"
-                    title="AES"
-                    value={SNMP_PRIVACY_ALGORITHM_AES}
-                    onChange={onValueChange}
-                  />
-                  <Radio
-                    checked={
-                      state.privacy_algorithm === SNMP_PRIVACY_ALGORITHM_DES
-                    }
-                    name="privacy_algorithm"
-                    title="DES"
-                    value={SNMP_PRIVACY_ALGORITHM_DES}
-                    onChange={onValueChange}
-                  />
-                  <Radio
-                    checked={
-                      state.privacy_algorithm === SNMP_PRIVACY_ALOGRITHM_NONE
-                    }
-                    name="privacy_algorithm"
-                    title={_('None')}
-                    value={SNMP_PRIVACY_ALOGRITHM_NONE}
-                    onChange={onValueChange}
-                  />
-                </FormGroup>
-              )}
+            {state.credential_type === SNMP_CREDENTIAL_TYPE && (
+              <FormGroup direction="row" title={_('Privacy Algorithm')}>
+                <Radio
+                  checked={
+                    state.privacy_algorithm === SNMP_PRIVACY_ALGORITHM_AES
+                  }
+                  name="privacy_algorithm"
+                  title="AES"
+                  value={SNMP_PRIVACY_ALGORITHM_AES}
+                  onChange={onValueChange}
+                />
+                <Radio
+                  checked={
+                    state.privacy_algorithm === SNMP_PRIVACY_ALGORITHM_DES
+                  }
+                  name="privacy_algorithm"
+                  title="DES"
+                  value={SNMP_PRIVACY_ALGORITHM_DES}
+                  onChange={onValueChange}
+                />
+                <Radio
+                  checked={
+                    state.privacy_algorithm === SNMP_PRIVACY_ALGORITHM_NONE
+                  }
+                  name="privacy_algorithm"
+                  title={_('None')}
+                  value={SNMP_PRIVACY_ALGORITHM_NONE}
+                  onChange={onValueChange}
+                />
+              </FormGroup>
+            )}
 
-              {state.credential_type === PGP_CREDENTIAL_TYPE && (
-                <FormGroup title={_('PGP Public Key')}>
-                  <FileField
-                    name="public_key"
-                    onChange={this.handlePublicKeyChange}
-                  />
-                </FormGroup>
-              )}
+            {state.credential_type === PGP_CREDENTIAL_TYPE && (
+              <FormGroup title={_('PGP Public Key')}>
+                <FileField name="public_key" onChange={handlePublicKeyChange} />
+              </FormGroup>
+            )}
 
-              {state.credential_type === SMIME_CREDENTIAL_TYPE && (
-                <FormGroup title={_('S/MIME Certificate')}>
-                  <FileField name="certificate" onChange={onValueChange} />
-                </FormGroup>
-              )}
-            </>
-          );
-        }}
-      </SaveDialog>
-    );
-  }
-}
+            {state.credential_type === SMIME_CREDENTIAL_TYPE && (
+              <FormGroup title={_('S/MIME Certificate')}>
+                <FileField name="certificate" onChange={onValueChange} />
+              </FormGroup>
+            )}
+          </>
+        );
+      }}
+    </SaveDialog>
+  );
+};
 
-const pwtypes = PropTypes.oneOf(ALL_CREDENTIAL_TYPES);
+const pwTypes = PropTypes.oneOf(ALL_CREDENTIAL_TYPES);
 
 CredentialsDialog.propTypes = {
   allow_insecure: PropTypes.yesno,
@@ -445,7 +413,6 @@ CredentialsDialog.propTypes = {
     SNMP_AUTH_ALGORITHM_MD5,
   ]),
   autogenerate: PropTypes.yesno,
-  capabilities: PropTypes.capabilities.isRequired,
   change_community: PropTypes.yesno,
   change_passphrase: PropTypes.yesno,
   change_password: PropTypes.yesno,
@@ -454,22 +421,21 @@ CredentialsDialog.propTypes = {
   community: PropTypes.string,
   credential: PropTypes.model,
   credential_login: PropTypes.string,
-  credential_type: pwtypes,
-  error: PropTypes.string,
+  credential_type: pwTypes,
   name: PropTypes.string,
   passphrase: PropTypes.string,
   password: PropTypes.string,
   privacy_algorithm: PropTypes.oneOf([
     SNMP_PRIVACY_ALGORITHM_AES,
     SNMP_PRIVACY_ALGORITHM_DES,
-    SNMP_PRIVACY_ALOGRITHM_NONE,
+    SNMP_PRIVACY_ALGORITHM_NONE,
   ]),
   privacy_password: PropTypes.string,
   title: PropTypes.string,
-  types: PropTypes.arrayOf(pwtypes),
+  types: PropTypes.arrayOf(pwTypes),
   onClose: PropTypes.func.isRequired,
   onErrorClose: PropTypes.func,
   onSave: PropTypes.func.isRequired,
 };
 
-export default withCapabilities(CredentialsDialog);
+export default CredentialsDialog;