Add ability to disable two factor authentication

Author: DaneEveritt

app/Http/Controllers/Api/Client/TwoFactorController.php

@@ -2,6 +2,7 @@
 
 namespace Pterodactyl\Http\Controllers\Api\Client;
 
+use Carbon\Carbon;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 use Illuminate\Http\JsonResponse;
@@ -100,7 +101,29 @@ public function store(Request $request)
         return JsonResponse::create([], Response::HTTP_NO_CONTENT);
     }
 
-    public function delete()
+    /**
+     * Disables two-factor authentication on an account if the password provided
+     * is valid.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function delete(Request $request)
     {
+        if (! password_verify($request->input('password') ?? '', $request->user()->password)) {
+            throw new BadRequestHttpException(
+                'The password provided was not valid.'
+            );
+        }
+
+        /** @var \Pterodactyl\Models\User $user */
+        $user = $request->user();
+
+        $user->update([
+            'totp_authenticated_at' => Carbon::now(),
+            'use_totp' => false,
+        ]);
+
+        return JsonResponse::create([], Response::HTTP_NO_CONTENT);
     }
 }

resources/scripts/api/account/disableAccountTwoFactor.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (password: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.delete('/api/client/account/two-factor', { params: { password } })
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx

@@ -2,18 +2,23 @@ import React, { useState } from 'react';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import SetupTwoFactorModal from '@/components/dashboard/forms/SetupTwoFactorModal';
+import DisableTwoFactorModal from '@/components/dashboard/forms/DisableTwoFactorModal';
 
 export default () => {
     const user = useStoreState((state: ApplicationStore) => state.user.data!);
-    const [visible, setVisible] = useState(false);
+    const [ visible, setVisible ] = useState(false);
 
     return user.useTotp ?
         <div>
+            {visible && <DisableTwoFactorModal visible={visible} onDismissed={() => setVisible(false)}/>}
             <p className={'text-sm'}>
                 Two-factor authentication is currently enabled on your account.
             </p>
             <div className={'mt-6'}>
-                <button className={'btn btn-red btn-secondary btn-sm'}>
+                <button
+                    onClick={() => setVisible(true)}
+                    className={'btn btn-red btn-secondary btn-sm'}
+                >
                     Disable
                 </button>
             </div>

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Formik, FormikActions } from 'formik';
+import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Field from '@/components/elements/Field';
+import { object, string } from 'yup';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
+import { httpErrorToHuman } from '@/api/http';
+
+interface Values {
+    password: string;
+}
+
+export default ({ ...props }: RequiredModalProps) => {
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
+
+    const submit = ({ password }: Values, { setSubmitting }: FormikActions<Values>) => {
+        clearFlashes('account:two-factor');
+        disableAccountTwoFactor(password)
+            .then(() => {
+                updateUserData({ useTotp: false });
+                props.onDismissed();
+            })
+            .catch(error => {
+                console.error(error);
+
+                addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                password: '',
+            }}
+            validationSchema={object().shape({
+                password: string().required('You must provider your current password in order to continue.'),
+            })}
+        >
+            {({ isSubmitting, isValid }) => (
+                <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
+                    <Form className={'mb-0'}>
+                        <FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
+                        <Field
+                            id={'password'}
+                            name={'password'}
+                            type={'password'}
+                            label={'Current Password'}
+                            description={'In order to disable two-factor authentication you will need to provide your account password.'}
+                            autoFocus={true}
+                        />
+                        <div className={'mt-6 text-right'}>
+                            <button className={'btn btn-red btn-sm'} disabled={!isValid}>
+                                Disable Two-Factor
+                            </button>
+                        </div>
+                    </Form>
+                </Modal>
+            )}
+        </Formik>
+    );
+};