aws-amplify-react/src/Widget/SelectMFAType.jsx

AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled applications.

/*
 * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
 * the License. A copy of the License is located at
 *
 *     http://aws.amazon.com/apache2.0/
 *
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
 * and limitations under the License.
 */

import * as React from 'react';
import { Component } from 'react';
import { I18n, ConsoleLogger as Logger } from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';

import AmplifyTheme from '../Amplify-UI/Amplify-UI-Theme';
import {
    FormSection,
    SectionHeader,
    SectionBody,
    SectionFooter,
    RadioRow,
    Button,
    Toast,
} from '../Amplify-UI/Amplify-UI-Components-React';

import TOTPSetupComp from './TOTPSetupComp';

const logger = new Logger('SelectMFAType');

export default class SelectMFAType extends Component {
    constructor(props) {
        super(props);

        this.verify = this.verify.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);

        this.state = {
            TOTPSetup: false,
            selectMessage: null
        };
    }

    handleInputChange(evt) {
        // clear current state
        this.setState({
            TOTPSetup: false,
            selectMessage: null
        });
        this.inputs = {};
        const { name, value, type, checked } = evt.target;
        const check_type = ['radio', 'checkbox'].includes(type);
        this.inputs[value] = check_type? checked : value;
    }

    verify() {
        logger.debug('mfatypes inputs', this.inputs);
        if (!this.inputs) {
            logger.debug('No mfa type selected');
            return;
        }
        const { TOTP, SMS, NOMFA } = this.inputs;
        let mfaMethod = null;
        if (TOTP) {
            mfaMethod = 'TOTP';
        } else if (SMS) {
            mfaMethod = 'SMS';
        } else if (NOMFA) {
            mfaMethod = 'NOMFA';
        }

        const user = this.props.authData;

        if (!Auth || typeof Auth.setPreferredMFA !== 'function') {
            throw new Error('No Auth module found, please ensure @aws-amplify/auth is imported');
        }

        Auth.setPreferredMFA(user, mfaMethod).then((data) => {
            logger.debug('set preferred mfa success', data);
            this.setState({
                selectMessage: 'Success! Your MFA Type is now: ' + mfaMethod,
                showToast: true
            });
            
        }).catch(err => {
            const { message } = err;
            if (message === 'User has not set up software token mfa'
                || message === 'User has not verified software token mfa') {
                this.setState({
                    TOTPSetup: true,
                    selectMessage: 'You need to setup TOTP',
                    showToast: true
                });
            }
            else {
                logger.debug('set preferred mfa failed', err);
                this.setState({
                    selectMessage: 'Failed! You cannot select MFA Type for now!',
                    showToast: true
                });
            }
        });
    }

    selectView(theme) {
        const { MFATypes } = this.props;
        if (!MFATypes || Object.keys(MFATypes).length < 2) {
            logger.debug('less than 2 mfa types available');
            return(
                <div>
                    <a>less than 2 mfa types available</a>
                </div>
            );
        }
        const { SMS, TOTP, Optional } = MFATypes;
        return (
            <FormSection theme={theme}>
                {this.state.showToast && this.state.selectMessage &&
                    <Toast theme={theme} onClose={() => this.setState({showToast: false})}>
                        { I18n.get(this.state.selectMessage) }
                    </Toast>
                }
                <SectionHeader theme={theme}>{I18n.get('Select MFA Type')}</SectionHeader>
                <SectionBody theme={theme}>
                    <div>
                        { SMS? <RadioRow
                                    placeholder={I18n.get('SMS')}
                                    theme={theme}
                                    key="sms"
                                    name="MFAType"
                                    value="SMS"
                                    onChange={this.handleInputChange}
                                /> : null
                        }
                        { TOTP? <RadioRow
                                    placeholder={I18n.get('TOTP')}
                                    theme={theme}
                                    key="totp"
                                    name="MFAType"
                                    value="TOTP"
                                    onChange={this.handleInputChange}
                                /> : null
                        }
                        { Optional? <RadioRow
                                    placeholder={I18n.get('No MFA')}
                                    theme={theme}
                                    key="noMFA"
                                    name="MFAType"
                                    value="NOMFA"
                                    onChange={this.handleInputChange}
                                /> : null
                        }

                    </div>
                </SectionBody>
                <SectionFooter theme={theme}>
                    <Button theme={theme} onClick={this.verify}>{I18n.get('Verify')}</Button>
                </SectionFooter>
            </FormSection>
        );
    }



    render() {  
        const theme = this.props.theme ? theme: AmplifyTheme;
        return (
            <div>
            {this.selectView(theme)}
            { this.state.TOTPSetup ?
                <TOTPSetupComp {...this.props}/> : null
            }</div>
        );
    }
}