@fortawesome/free-solid-svg-icons#faLock JavaScript Examples

LockIcon = makeFAIcon(faLock)

getGamesForType(gameType, games) {
        let gamesToReturn = [];
        let t = this.props.t;

        for (const game of games) {
            if (this.props.gameFilter.onlyShowNew && game.started) {
                continue;
            }

            let players = this.getPlayers(game);

            let isAdmin = this.props.user && this.props.user.permissions.canManageGames;
            let rowClass = classNames('game-row', {
                [game.node]: game.node && isAdmin,
                ['private-game']: game.gamePrivate && isAdmin
            });

            let timeDifference = moment().diff(moment(game.createdAt));
            if (timeDifference < 0) {
                timeDifference = 0;
            }

            let formattedTime = moment.utc(timeDifference).format('HH:mm');

            gamesToReturn.push(
                <div key={game.id}>
                    <hr />
                    <div className={rowClass}>
                        <div className='game-header-row'>
                            <span className='game-title'>
                                <b>{game.name}</b>
                            </span>
                            <span className='game-time'>{`[${formattedTime}]`}</span>
                            <span className='game-icons'>
                                {game.showHand && (
                                    <img
                                        src={ShowHandIcon}
                                        className='game-list-icon'
                                        alt={t('Show hands to spectators')}
                                        title={t('Show hands to spectators')}
                                    />
                                )}
                                {game.needsPassword && <FontAwesomeIcon icon={faLock} />}
                                {game.useGameTimeLimit && (
                                    <img
                                        src={TimeLimitIcon}
                                        className='game-list-icon'
                                        alt={t('Time limit used')}
                                    />
                                )}
                            </span>
                        </div>
                        <div className='game-middle-row'>{players}</div>
                        <div className='game-row-buttons'>
                            {this.canWatch(game) && (
                                <button
                                    className='btn btn-primary gamelist-button'
                                    onClick={(event) => this.watchGame(event, game)}
                                >
                                    <Trans>Watch</Trans>
                                </button>
                            )}
                            {isAdmin && (
                                <button
                                    className='btn btn-danger gamelist-button'
                                    onClick={(event) => this.removeGame(event, game)}
                                >
                                    <Trans>Remove</Trans>
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            );
        }

        let gameHeaderClass = 'game-header';
        switch (gameType) {
            case 'beginner':
                gameHeaderClass += ' badge-success';
                break;
            case 'casual':
                gameHeaderClass += ' badge-warning';
                break;
            case 'competitive':
                gameHeaderClass += ' badge-danger';
                break;
        }

        return (
            <div key={gameType}>
                <div className={gameHeaderClass} key={gameType + 'header'}>
                    {t(gameType)} ({gamesToReturn.length})
                </div>
                {gamesToReturn}
            </div>
        );
    }

Drawer = ({
    open,
    onClose,
    onConnectWallet,
    selectedWeb3Account,
    onLogin,
    onRegister,
    needsRegistration,
    loadingAuthStatus,
    onLogout,
    loggedIn,
    darkTheme,
    onDarkThemeChange,
    selectedLanguage,
    onSelectedLanguageChange,
}) => {
    const container = useRef(null);

    const [icon, setIcon] = useState(faLock);
    const [iconColor, setIconColor] = useState("");
    const [summaryMessageKey, setSummaryMessageKey] = useState("placeholder");
    const [buttonMessageKey, setButtonMessageKey] = useState("placeholder");

    useLayoutEffect(() => {
        if (needsRegistration) {
            setIcon(faUserPlus);
            setIconColor(selectedTheme.primary);
            setSummaryMessageKey("drawer.wallet.connect.register");
            setButtonMessageKey("drawer.wallet.connect.action.register");
        } else if (loggedIn) {
            setIcon(faLockOpen);
            setIconColor(selectedTheme.success);
            setSummaryMessageKey("drawer.wallet.connect.logout");
            setButtonMessageKey("drawer.wallet.connect.action.logout");
        } else if (selectedWeb3Account) {
            setIcon(faLock);
            setIconColor(selectedTheme.error);
            setSummaryMessageKey("drawer.wallet.connect.login");
            setButtonMessageKey("drawer.wallet.connect.action.login");
        } else {
            setIcon(faPlug);
            setIconColor(selectedTheme.primary);
            setSummaryMessageKey("drawer.wallet.connect.summary");
            setButtonMessageKey("drawer.wallet.connect.action.connect");
        }
    }, [loggedIn, needsRegistration, selectedWeb3Account]);

    const handleButtonClick = useCallback(() => {
        if (needsRegistration) {
            onRegister();
        } else if (loggedIn) {
            onLogout();
        } else if (selectedWeb3Account) {
            onLogin();
        } else {
            onConnectWallet();
        }
    }, [
        loggedIn,
        needsRegistration,
        onConnectWallet,
        onLogin,
        onLogout,
        onRegister,
        selectedWeb3Account,
    ]);

    return (
        <RootFlex
            flexDirection="column"
            alignItems="center"
            open={open}
            ref={container}
        >
            <HeaderFlex mb={3}>
                <EllipsizedBox>
                    {selectedWeb3Account ? (
                        getShortenedEthereumAddress(selectedWeb3Account)
                    ) : (
                        <FormattedMessage id="drawer.wallet.connect.header.connect" />
                    )}
                </EllipsizedBox>
                <Box ml={3} minWidth="auto">
                    <CloseIcon icon={faTimes} onClick={onClose} />
                </Box>
            </HeaderFlex>
            <Box mb={3}>
                <Icon icon={icon} color={iconColor} fontSize="40" />
            </Box>
            <Box px={4} mb={3} fontSize="12px" textAlign="center">
                <SummaryMessage>
                    <FormattedMessage id={summaryMessageKey} />
                </SummaryMessage>
            </Box>
            <Box mb={4}>
                <Button onClick={handleButtonClick} loading={loadingAuthStatus}>
                    <FormattedMessage id={buttonMessageKey} />
                </Button>
            </Box>
            <Box width="100%" mb={2}>
                <Settings
                    darkTheme={darkTheme}
                    onDarkThemeChange={onDarkThemeChange}
                    selectedLanguage={selectedLanguage}
                    onSelectedLanguageChange={onSelectedLanguageChange}
                />
            </Box>
            <Box width="100%" mb={2}>
                <Lrc />
            </Box>
            <Box width="100%" mb={2}>
                <Support />
            </Box>
            <Box width="100%" mb={2}>
                <TechnicalResources />
            </Box>
            <Box width="100%" mb={2}>
                <ExchangeInfo />
            </Box>
        </RootFlex>
    );
}