@mui/icons-material#Phone TypeScript Examples

The following examples show how to use @mui/icons-material#Phone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FirebaseLoginView.tsx    From firecms with MIT License 4 votes vote down vote up 
/**
 * Use this component to render a login view, that updates
 * the state of the {@link AuthController} based on the result
 * @constructor
 * @category Firebase
 */
export function FirebaseLoginView({
                                      allowSkipLogin,
                                      logo,
                                      signInOptions,
                                      firebaseApp,
                                      authDelegate,
                                      NoUserComponent,
                                      disableSignupScreen = false
                                  }: FirebaseLoginViewProps) {
    const classes = useStyles();
    const authController = useAuthController();
    const modeState = useModeState();

    const [passwordLoginSelected, setPasswordLoginSelected] = useState(false);

    const [phoneLoginSelected, setPhoneLoginSelected] = useState(false);

    const resolvedSignInOptions: FirebaseSignInProvider[] = signInOptions.map((o) => {
        if (typeof o === "object") {
            return o.provider;
        } else return o as FirebaseSignInProvider;
    })

    function buildErrorView() {
        let errorView: any;
        const ignoredCodes = ["auth/popup-closed-by-user", "auth/cancelled-popup-request"];
        if (authDelegate.authError) {
            if (authDelegate.authError.code === "auth/operation-not-allowed") {
                errorView =
                    <>
                        <Box p={1}>
                            <ErrorView
                                error={"You need to enable the corresponding login provider in your Firebase project"}/>
                        </Box>

                        {firebaseApp &&
                        <Box p={1}>
                            <a href={`https://console.firebase.google.com/project/${firebaseApp.options.projectId}/authentication/providers`}
                               rel="noopener noreferrer"
                               target="_blank">
                                <Button variant="text"
                                        color="primary">
                                    Open Firebase configuration
                                </Button>
                            </a>
                        </Box>}
                    </>;
            } else if (!ignoredCodes.includes(authDelegate.authError.code)) {
                console.error(authDelegate.authError);
                errorView =
                    <Box p={1}>
                        <ErrorView error={authDelegate.authError.message}/>
                    </Box>;
            }
        }
        return errorView;
    }

    let logoComponent;
    if (logo) {
        logoComponent = <img className={classes.logo}
                             src={logo}
                             alt={"Logo"}/>;
    } else {
        logoComponent = <div className={classes.logo}>
            <FireCMSLogo/>
        </div>;
    }

    let notAllowedMessage: string | undefined;
    if (authController.notAllowedError) {
        if (typeof authController.notAllowedError === "string") {
            notAllowedMessage = authController.notAllowedError;
        } else if (authController.notAllowedError instanceof Error) {
            notAllowedMessage = authController.notAllowedError.message;
        } else {
            notAllowedMessage = "It looks like you don't have access to the CMS, based on the specified Authenticator configuration";
        }
    }


    return (
        <Fade
            in={true}
            timeout={500}
            mountOnEnter
            unmountOnExit>
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "100vh",
                p: 2
            }}>
                <Box sx={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    width: "100%",
                    maxWidth: 340
                }}>

                    <Box m={1}>
                        {logoComponent}
                    </Box>

                    {notAllowedMessage &&
                    <Box p={2}>
                        <ErrorView
                            error={notAllowedMessage}/>
                    </Box>}

                    {buildErrorView()}

                    {(!passwordLoginSelected && !phoneLoginSelected) && <>

                        {buildOauthLoginButtons(authDelegate, resolvedSignInOptions, modeState.mode)}

                        {resolvedSignInOptions.includes("password") &&
                        <LoginButton
                            text={"Email/password"}
                            icon={<EmailIcon fontSize={"large"}/>}
                            onClick={() => setPasswordLoginSelected(true)}/>}

                        {resolvedSignInOptions.includes("phone") &&
                        <LoginButton
                            text={"Phone number"}
                            icon={<Phone fontSize={"large"}/>}
                            onClick={() => setPhoneLoginSelected(true) }/>}

                        {resolvedSignInOptions.includes("anonymous") &&
                        <LoginButton
                            text={"Log in anonymously"}
                            icon={<PersonOutlineIcon fontSize={"large"}/>}
                            onClick={authDelegate.anonymousLogin}/>}

                        {allowSkipLogin &&
                        <Box m={1}>
                            <Button onClick={authDelegate.skipLogin}>
                                Skip login
                            </Button>
                        </Box>
                        }

                    </>}

                    {passwordLoginSelected && <LoginForm
                        authDelegate={authDelegate}
                        onClose={() => setPasswordLoginSelected(false)}
                        mode={modeState.mode}
                        NoUserComponent={NoUserComponent}
                        disableSignupScreen={disableSignupScreen}
                    />}

                    {phoneLoginSelected && <PhoneLoginForm
                        authDelegate={authDelegate}
                        onClose={() => setPhoneLoginSelected(false)}
                    />}

                </Box>
            </Box>
        </Fade>
    );
}