fix: webhook process (#45385)

* fix: token rework functional

fix: clean up

fix: more clean up

fix: more clean up

fix: add widget back to settings

fix:

fix:

fix: cypress

Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

fix: use flash enum

* chore: rename webhookToken -> userToken

fix: add translations I forgot to save

* fix: add missing tones for flash messages

* fix: node test

client/src/components/settings/user-token.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { Button, Panel } from '@freecodecamp/react-bootstrap';
+import React, { Component } from 'react';
+import { TFunction, withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { deleteUserToken } from '../../redux';
+import { ButtonSpacer, FullWidthRow, Spacer } from '../helpers';
+
+import './user-token.css';
+
+type UserTokenProps = {
+  deleteUserToken: () => void;
+  t: TFunction;
+};
+
+const mapDispatchToProps = {
+  deleteUserToken
+};
+
+class UserToken extends Component<UserTokenProps> {
+  static displayName: string;
+
+  deleteToken = () => {
+    this.props.deleteUserToken();
+  };
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className='user-token text-center'>
+        <FullWidthRow>
+          <Panel className='user-panel'>
+            <Panel.Heading>{t('user-token.title')}</Panel.Heading>
+            <Spacer />
+            <p>{t('user-token.delete-p1')}</p>
+            <FullWidthRow>
+              <ButtonSpacer />
+              <Button
+                block={true}
+                bsSize='lg'
+                bsStyle='danger'
+                className='btn-info'
+                onClick={this.deleteToken}
+                type='button'
+              >
+                {t('user-token.delete')}
+              </Button>
+              <Spacer />
+            </FullWidthRow>
+          </Panel>
+        </FullWidthRow>
+      </div>
+    );
+  }
+}
+
+UserToken.displayName = 'UserToken';
+
+export default connect(null, mapDispatchToProps)(withTranslation()(UserToken));