@selfcommunity/react-ui/lib/esm/components/AccountReset/AccountReset.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { useSCUser } from '@selfcommunity/react-core';
import { Alert, Box, Button, CircularProgress } from '@mui/material';
import classNames from 'classnames';
import { FormattedMessage, useIntl } from 'react-intl';
import { useThemeProps } from '@mui/system';
import { AccountService, formatHttpErrorCode } from '@selfcommunity/api-services';
import PasswordTextField from '../../shared/PasswordTextField';
const PREFIX = 'SCAccountReset';
const classes = {
    root: `${PREFIX}-root`,
    form: `${PREFIX}-form`,
    password: `${PREFIX}-password`,
    success: `${PREFIX}-success`,
    error: `${PREFIX}-error`,
    validating: `${PREFIX}-validating`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
    [`& .${classes.form} .MuiTextField-root, &.${classes.root} .MuiButton-root`]: {
        margin: theme.spacing(1, 0, 1, 0)
    },
    [`& .${classes.form} .MuiTypography-root`]: {
        margin: theme.spacing(1, 0, 1, 0)
    },
    [`& .${classes.validating}`]: {
        [`& span`]: {
            marginRight: 12,
            float: 'left'
        },
        [`& p`]: {
            paddingTop: 12
        }
    }
}));
/**
 * > API documentation for the Community-JS Account Reset component. Learn about the available props and the CSS API.
 *
 *
 * This component allows users to log in to the application with their usernames and passwords.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/AccountReset)

 #### Import

 ```jsx
 import {AccountReset} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCAccountReset` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCAccountReset-root|Styles applied to the root element.|
 |form|.SCAccountReset-form|Styles applied to the form element.|
 |email|.SCAccountReset-password|Styles applied to the password TextField.|
 |success|.SCAccountRecover-success|Styles applied to the success Alert.|
 |error|.SCAccountRecover-error|Styles applied to the error Alert.|

 *
 * @param inProps
 */
export default function AccountReset(inProps) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    // PROPS
    const { className, onSuccess, onError, TextFieldProps = { variant: 'outlined', fullWidth: true }, ButtonProps = { variant: 'contained' }, validationCode, successAction = null, errorAction = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "TextFieldProps", "ButtonProps", "validationCode", "successAction", "errorAction"]);
    // STATE
    const [isLoading, setIsLoading] = useState(true);
    const [password, setPassword] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [validationCodeError, setValidationCodeError] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSucceed, setIsSucceed] = useState(false);
    // CONTEXT
    const scUserContext = useSCUser();
    const intl = useIntl();
    /**
     * Verify the validation code before enable the form
     */
    useEffect(() => {
        if (!scUserContext.user) {
            if (validationCode) {
                AccountService.verifyValidationCode({ validation_code: validationCode })
                    .then((res) => {
                    if (res.status >= 300 || (res && !res.is_valid)) {
                        setValidationCodeError(intl.formatMessage({ id: 'ui.accountReset.code.error', defaultMessage: 'ui.accountReset.code.error' }));
                    }
                    setIsLoading(false);
                })
                    .catch((error) => {
                    const _error = formatHttpErrorCode(error);
                    if (_error.validationCodeError) {
                        setValidationCodeError(_error.validationCodeError.error);
                    }
                    setIsLoading(false);
                });
            }
        }
    }, [validationCode]);
    // HANDLERS
    const handleChange = (event) => {
        setPassword(event.target.value);
    };
    const handleSubmit = (event) => {
        event.preventDefault();
        event.stopPropagation();
        setIsSubmitting(true);
        AccountService.reset({ validation_code: validationCode, password })
            .then((res) => {
            setIsSucceed(true);
            onSuccess && onSuccess(res);
        })
            .catch((error) => {
            const _error = formatHttpErrorCode(error);
            if (_error.passwordError) {
                setPasswordError(_error.passwordError.error);
            }
            if (_error.validationCodeError) {
                setValidationCodeError(_error.validationCodeError.error);
            }
            onError && onError(error);
        })
            .then(() => setIsSubmitting(false));
        return false;
    };
    if (scUserContext.user !== null) {
        // User already logged in
        return null;
    }
    // RENDER
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: isSucceed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [intl.formatMessage({ id: 'ui.accountReset.success', defaultMessage: 'ui.accountReset.success' }), successAction] }))) : validationCodeError ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountReset.code.error", defaultMessage: "ui.accountReset.code.error" }), errorAction] }))) : isLoading ? (_jsxs(Box, Object.assign({ className: classes.validating }, { children: [_jsx(CircularProgress, {}), _jsx("p", { children: _jsx(FormattedMessage, { id: "ui.accountReset.code.validatingToken", defaultMessage: "ui.accountReset.code.validatingToken" }) })] }))) : (_jsxs("form", Object.assign({ className: classes.form, onSubmit: handleSubmit }, { children: [_jsx(PasswordTextField, Object.assign({ className: classes.password, disabled: isSubmitting, label: _jsx(FormattedMessage, { id: "ui.accountReset.password.label", defaultMessage: "ui.accountReset.password.label" }) }, TextFieldProps, { value: password, onChange: handleChange, error: Boolean(passwordError), helperText: passwordError && (_jsx(FormattedMessage, { id: `ui.accountReset.password.error.${passwordError}`, defaultMessage: `ui.accountReset.password.error.${passwordError}` })) })), _jsx(Button, Object.assign({ type: "submit" }, ButtonProps, { disabled: !password || isSubmitting }, { children: _jsx(FormattedMessage, { id: "ui.accountReset.submit", defaultMessage: "ui.accountReset.submit" }) }))] }))) })));
}