@material-ui/icons#Lock TypeScript Examples

SignUp = () => {
    const { cognitoClientState, setMessage, setStage } = useAppState();
    const [userId, setUserId] = useState(cognitoClientState.userId || "");
    const [password, setPassword] = useState("");

    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onSignUpClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.signUp(userId, password);
            setMessage("Info", "Signup success", [`User created.`, `Verification code is sent to your mail address. Please input into next form.`]);
            setIsLoading(false);
            setStage(STAGE.VERIFY);
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "Signup error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };
    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setUserId(e.target.value)} label="email" secret={false} height={20} fontsize={16} autofocus defaultValue={cognitoClientState.userId || undefined} />
                <CustomTextField onChange={(e) => setPassword(e.target.value)} label="password" secret={true} height={20} fontsize={16} />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onSignUpClicked}>
                        Sign up
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "return to home",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
    ];

    return (
        <>
            <Questionnaire avatorIcon={<Lock />} title="Sign up" forms={forms} links={links} />
        </>
    );
}

Verify = () => {
    const { cognitoClientState, setMessage, setStage } = useAppState();
    const [userId, setUserId] = useState(cognitoClientState.userId || "");
    const [verifyCode, setVerifyCode] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onVerifyCodeClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.verify(userId, verifyCode);
            setMessage("Info", "Verification success ", [`Verification is accepted.`]);
            setIsLoading(false);
            setStage(STAGE.SIGNIN);
        } catch (e: any) {
            console.log(".....", e);
            setMessage("Exception", "Verification error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };

    const onResendVerifyCodeClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.resendVerification(userId);
            console.log("resend");
            setMessage("Info", "Resend Verification ", [`Verification code is resent to your mail address. Please input into next form.`]);
            setIsLoading(false);
        } catch (e: any) {
            console.log("resend fail");
            setMessage("Exception", "Resend Verification error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };
    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setUserId(e.target.value)} label="email" secret={false} height={20} fontsize={16} defaultValue={cognitoClientState.userId || undefined} autofocus />
                <CustomTextField onChange={(e) => setVerifyCode(e.target.value)} label="verifiction code" secret={true} height={20} fontsize={16} />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onVerifyCodeClicked}>
                        Verify code
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "return to home",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
        {
            title: "resend code",
            onClick: () => {
                onResendVerifyCodeClicked();
            },
        },
    ];
    return (
        <>
            <Questionnaire avatorIcon={<Lock />} title="Verify Code" forms={forms} links={links} />
        </>
    );
}

RequestChangePassword = () => {
    const { cognitoClientState, setMessage, setStage } = useAppState();
    const [userId, setUserId] = useState(cognitoClientState.userId || "");
    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onSendVerificationCodeForChangePasswordClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.sendVerificationCodeForChangePassword(userId);
            console.log("send verify code fo changing password");
            setMessage("Info", "Send Verification Code success ", [`verift your code.`]);
            setIsLoading(false);
            setStage(STAGE.NEW_PASSWORD);
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "request change password error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };
    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setUserId(e.target.value)} label="email" secret={false} height={20} fontsize={16} defaultValue={cognitoClientState.userId || undefined} autofocus />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onSendVerificationCodeForChangePasswordClicked}>
                        Send verification code
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "return to home",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
    ];
    return (
        <>
            <Questionnaire avatorIcon={<Lock />} title="Send Verification Code for Change Password" forms={forms} links={links} />
        </>
    );
}

NewPassword = () => {
    const { cognitoClientState, setMessage, setStage } = useAppState();
    const [userId, setUserId] = useState(cognitoClientState.userId || "");
    const [verifyCode, setVerifyCode] = useState("");
    const [password, setPassword] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onChangePasswordClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.changePassword(userId, verifyCode, password);
            setMessage("Info", "password changed ", [`Verification is accepted. New password ready.`]);
            setIsLoading(false);
            setStage(STAGE.SIGNIN);
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "change password error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };
    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setUserId(e.target.value)} label="email" secret={false} height={20} fontsize={16} defaultValue={cognitoClientState.userId || undefined} autofocus />
                <CustomTextField onChange={(e) => setPassword(e.target.value)} label="password" secret={true} height={20} fontsize={16} />
                <CustomTextField onChange={(e) => setVerifyCode(e.target.value)} label="verifiction code" secret={true} height={20} fontsize={16} />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onChangePasswordClicked}>
                        Change Password
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "return to home",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
    ];
    return (
        <>
            <Questionnaire avatorIcon={<Lock />} title="New Password" forms={forms} links={links} />
        </>
    );
}

SignIn = () => {
    const { cognitoClientState, setMessage, setStage, chimeClientState, deviceState } = useAppState();
    const [userId, setUserId] = useState(cognitoClientState.userId || "");
    const [password, setPassword] = useState(cognitoClientState.password || "");

    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onSignInClicked = async () => {
        setIsLoading(true);
        try {
            await cognitoClientState.signIn(userId, password);
            setIsLoading(false);
            setStage(STAGE.ENTRANCE);
        } catch (e: any) {
            console.log("sign in error:::", e);
            setMessage("Exception", "Signin error", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };

    const forms = (
        <>
            {/* <CustomSelect
                onChange={(e) => console.log("select:::", e)}
                label="email"
                height={16}
                fontsize={12}
                items={[
                    { label: "aaaa", value: "bbbb" },
                    { label: "1111", value: "2222" },
                ]}
                defaultValue="bbbb"
            /> */}
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setUserId(e.target.value)} label="email" secret={false} height={20} fontsize={16} defaultValue={userId} autofocus />
                <CustomTextField onChange={(e) => setPassword(e.target.value)} label="password" secret={true} height={20} fontsize={16} defaultValue={password} />
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button id="submit" variant="contained" color="primary" className={classes.submit} onClick={onSignInClicked}>
                        Sign in
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "Enter as a guest",
            onClick: () => {
                setStage(STAGE.ENTRANCE_AS_GUEST);
            },
        },
        {
            title: "Sign up",
            onClick: () => {
                setStage(STAGE.SIGNUP);
            },
        },
        {
            title: "Forgot or chnage password",
            onClick: () => {
                setStage(STAGE.REQUEST_NEW_PASSWORD);
            },
        },
        {
            title: "Verify code",
            onClick: () => {
                setStage(STAGE.VERIFY);
            },
        },
    ];

    return (
        <>
            <div>
                <Button
                    onClick={(e) => {
                        cognitoClientState.signIn(userId, password).then(async () => {
                            console.log("logined1");
                            chimeClientState.initialize(cognitoClientState.userId!, cognitoClientState.idToken!, cognitoClientState.accessToken!, cognitoClientState.refreshToken!);
                            console.log("logined2");
                            try {
                                await chimeClientState.createMeeting("TEST", DEFAULT_REGION);
                            } catch (e) {
                                console.log("create meeting exception:", e);
                            }
                            console.log("logine3d");
                            await chimeClientState.joinMeeting("TEST", "HOGE" + new Date().getTime());

                            const { defaultAudioInputDeviceId, defaultVideoInputDeviceId, defaultAudioOutputDeviceId } = deviceState.getDefaultDeviceIds();
                            await chimeClientState.setAudioInput(defaultAudioInputDeviceId);
                            await chimeClientState.setAudioInputEnable(true);
                            await chimeClientState.setVideoInput(defaultVideoInputDeviceId);
                            await chimeClientState.setVirtualBackgroundSegmentationType("GoogleMeetTFLite");
                            await chimeClientState.setVideoInputEnable(true);
                            await chimeClientState.setAudioOutput(defaultAudioOutputDeviceId);
                            await chimeClientState.setAudioOutputEnable(true);
                            await chimeClientState.setBackgroundImagePath("/default/bg1.jpg");
                            await chimeClientState.enterMeeting();
                            console.log("logined4");
                            chimeClientState.startLocalVideoTile();
                            setStage(STAGE.MEETING_ROOM);
                        });
                    }}
                >
                    {" "}
                    Bypass{" "}
                </Button>
            </div>
            <Questionnaire avatorIcon={<Lock />} title="Sign in" forms={forms} links={links} />
        </>
    );
}

SigninFromSlack = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [autoSigninState, setAutoSigninState] = useState<AutoSigninState>({ state: AutoSigninProcessState.INIT, deviceListRetry: 0 });
    const [fail, setFail] = useState(false);
    const { setMessage, setStage, chimeClientState, deviceState, slackToken } = useAppState();

    const generateContext = () => {
        return {
            token: slackToken || "",
        };
    };

    const ckeckUser = async () => {
        console.log(`user checking....`);
        getUserInformation(generateContext()).then(async (result) => {
            if (result.isFailure()) {
                setMessage("Exception", "user check failed", [`The link may be too old. (Expire is 1 hour.)`, `Please click join button again to generate new dialog`]);
                return;
            } else {
                setAutoSigninState({
                    ...autoSigninState,
                    state: AutoSigninProcessState.USER_CHECK_COMPLETED,
                    meetingName: result.value.roomName,
                    attendeeName: result.value.chimeInfo.attendeeName,
                    useDefault: result.value.chimeInfo.useDefault,
                });
            }
        });
    };
    const checkDevice = async () => {
        navigator.mediaDevices.getUserMedia({ video: true, audio: true });
        console.log(`device checking... [${autoSigninState.deviceListRetry}/10] ${deviceState.mediaDeviceList.audioinput.length}`);
        console.log(deviceState);
        // If there are no devices whose Id is empty string, check ok.
        if (
            deviceState.mediaDeviceList.audioinput.length > 0 &&
            !deviceState.mediaDeviceList.audioinput.find((x) => {
                return x.deviceId === "";
            })
        ) {
            setAutoSigninState({ ...autoSigninState, state: AutoSigninProcessState.DEVICE_CHECK_COMPLETED });
            return;
        }

        deviceState.reloadDevices();
        await new Promise((resolve, reject) => {
            setTimeout(resolve, 1000 * 1);
        });
        setAutoSigninState({ ...autoSigninState, deviceListRetry: autoSigninState.deviceListRetry + 1 });
    };

    const createMeeting = async () => {
        console.log("createMeeting....");
        try {
            await chimeClientState.createMeeting(autoSigninState.meetingName!, DEFAULT_REGION);
        } catch (e) {
            console.log("create meeting exception:", e);
        }
        setAutoSigninState({ ...autoSigninState, state: AutoSigninProcessState.CREATE_MEETING_COMPLETED });
    };

    const joinMeeting = async () => {
        console.log("joinMeeting....");
        await chimeClientState.joinMeeting(autoSigninState.meetingName!, autoSigninState.attendeeName!);
        setAutoSigninState({ ...autoSigninState, state: AutoSigninProcessState.JOIN_MEETING_COMPLETED });
    };

    const setDevices = async () => {
        console.log("setDevices....");
        try {
            const { defaultAudioInputDeviceId, defaultVideoInputDeviceId, defaultAudioOutputDeviceId } = deviceState.getDefaultDeviceIds();
            console.log("setDevices....1");
            await chimeClientState.setAudioInput(defaultAudioInputDeviceId);
            console.log("setDevices....2");
            await chimeClientState.setAudioInputEnable(true);
            console.log("setDevices....3");
            try {
                await chimeClientState.setVideoInput(defaultVideoInputDeviceId);
            } catch (e) {
                setMessage("Exception", "Device Setting Exception", [`${e}`, `This may occur when other application use the device.`, `Video device is set to None.`]);
                await chimeClientState.setVideoInput(null);
            }
            console.log("setDevices....4");
            await chimeClientState.setVirtualBackgroundSegmentationType("GoogleMeetTFLite");
            console.log("setDevices....5");
            await chimeClientState.setVideoInputEnable(true);
            console.log("setDevices....6");
            await chimeClientState.setAudioOutput(defaultAudioOutputDeviceId);
            console.log("setDevices....7");
            await chimeClientState.setAudioOutputEnable(true);
            console.log("setDevices....8");
            await chimeClientState.setBackgroundImagePath("/default/bg1.jpg");
            console.log("setDevices....9");
            setAutoSigninState({ ...autoSigninState, state: AutoSigninProcessState.SET_DEVICES_COMPLETED });
        } catch (e) {
            setMessage("Exception", "Device Setting Exception", [`${e}`, `relaod maybe help you`]);
            setFail(true);
        }
    };

    const enterMeeting = async () => {
        console.log("enterMeeting....");
        await chimeClientState.enterMeeting();
        chimeClientState.startLocalVideoTile();
        setAutoSigninState({ ...autoSigninState, state: AutoSigninProcessState.ENTER_MEETING_COMPLETED });
    };

    useEffect(() => {
        console.log("REST ENDPOINT:", RestAPIEndpoint);
        console.log("SLACK TOKEN:", slackToken);
        console.log("Device:::", deviceState);
        switch (autoSigninState.state) {
            case AutoSigninProcessState.INIT:
                ckeckUser();
                break;
            case AutoSigninProcessState.USER_CHECK_COMPLETED:
                checkDevice();
                break;
            case AutoSigninProcessState.DEVICE_CHECK_COMPLETED:
                createMeeting();
                break;
            case AutoSigninProcessState.CREATE_MEETING_COMPLETED:
                joinMeeting();
                break;
            case AutoSigninProcessState.JOIN_MEETING_COMPLETED:
                setDevices();
                break;
            case AutoSigninProcessState.SET_DEVICES_COMPLETED:
                enterMeeting();
                break;
            case AutoSigninProcessState.ENTER_MEETING_COMPLETED:
                setStage(STAGE.MEETING_ROOM);
                break;
            default:
        }
    }, [autoSigninState]);

    // const forms = (
    //     AccountBox
    //     Mic
    //     VideoCameraFront
    //     Living
    //     MeetingRoom

    //     <>
    //         <div>processing....</div>
    //         <div style={{ display: "flex", justifyContent: "center", marginRight: 0 }}>{isLoading ? <CircularProgress /> : fail ? <>access failed</> : <></>}</div>
    //     </>
    // );
    const processBar = useMemo(() => {
        switch (autoSigninState.state) {
            case AutoSigninProcessState.INIT:
                return generateLinearProgressWithLabel(0);
            case AutoSigninProcessState.USER_CHECK_COMPLETED:
                return generateLinearProgressWithLabel(10);
            case AutoSigninProcessState.DEVICE_CHECK_COMPLETED:
                return generateLinearProgressWithLabel(30);
            case AutoSigninProcessState.CREATE_MEETING_COMPLETED:
                return generateLinearProgressWithLabel(50);
            case AutoSigninProcessState.JOIN_MEETING_COMPLETED:
                return generateLinearProgressWithLabel(70);
            case AutoSigninProcessState.SET_DEVICES_COMPLETED:
                return generateLinearProgressWithLabel(90);
            case AutoSigninProcessState.ENTER_MEETING_COMPLETED:
                return generateLinearProgressWithLabel(100);
            default:
                return <></>;
        }
    }, [autoSigninState]);

    // const forms = useMemo(() => {
    //     return (
    //         <>
    //             <div>processing....</div>
    //             <div style={{ display: "flex", justifyContent: "center", marginRight: 0 }}>{isLoading ? <CircularProgress /> : fail ? <>access failed</> : <></>}</div>
    //             <div>{processBar}</div>
    //         </>
    //     );
    // }, [isLoading, autoSigninState]);

    const forms = useMemo(() => {
        const loadingView = <CircularProgress />;
        const notLoadingView = fail ? (
            <>
                exception occured. please reload.
                <Button onClick={location.reload}>reload</Button>
            </>
        ) : (
            <></>
        );
        return (
            <>
                <div>processing....</div>
                <div style={{ display: "flex", justifyContent: "center", marginRight: 0 }}>{isLoading ? loadingView : notLoadingView}</div>
                <div>{processBar}</div>
            </>
        );
    }, [isLoading, autoSigninState]);

    return (
        <>
            <Questionnaire avatorIcon={<Lock />} title="Sign in" forms={forms} links={[]} />
        </>
    );
}