oak-general-business/es/components/user/login/web.js

// @ts-nocheck
// Segmented这个对象在antd里的声明是错误的
import React, { useEffect, useState } from 'react';
import { Button, Segmented, Divider, Space, Tooltip, Image } from 'antd';
import { MobileOutlined, QrcodeOutlined, DesktopOutlined, MailOutlined, ExclamationCircleOutlined, LinkOutlined, } from '@ant-design/icons';
import classNames from 'classnames';
import Style from './web.module.less';
import WeChatLoginQrCode from '../../common/weChatLoginQrCode';
import WechatLoginQrCodeForPublic from '../../wechatLogin/qrCode';
import WeChatLoginGrant from '../../common/weChatLoginGrant';
import SmsLogin from './sms';
import PasswordLogin from './password';
import EmailLogin from './email';
export default function Render(props) {
    const { data, methods } = props;
    const { width, loading, loginMode, appId, domain, isSupportWechatGrant, disabled, redirectUri, url, passportTypes, callback, inputOptions, scanOptions, smsDigit, emailDigit, pwdAllowMobile, pwdAllowEmail, pwdAllowLoginName, pwdMode, allowRegister, oauthOptions, goRegister, goOauthLogin, } = data;
    const { t, setLoginMode, } = methods;
    let redirectUri2 = redirectUri;
    if (!(redirectUri.startsWith('https') || redirectUri.startsWith('http'))) {
        const hostname = domain || window.location.hostname;
        const port = window.location.port ? `:${window.location.port}` : '';
        const path = redirectUri.startsWith('/') ? redirectUri : `/${redirectUri}`;
        redirectUri2 = encodeURIComponent(`${window.location.protocol}//${hostname}${port}${path}`);
    }
    // 构建微信扫码所需state参数，url存在扫码后重定向url，否则返回上一页
    let state = '';
    if (url) {
        state = encodeURIComponent(decodeURIComponent(url));
    }
    const [showInput, setShowInput] = useState(true);
    useEffect(() => {
        if (loginMode === 'sms' || loginMode === 'email' || loginMode === 'password') {
            setShowInput(true);
        }
        else {
            setShowInput(false);
        }
    }, [loginMode]);
    const InputMethods = inputOptions && inputOptions.length > 0 ? (
    // <div className={Style['loginbox-methods']}>
    //     <Divider plain style={{ fontSize: 13, color: '#808080', }}>{t('otherMethods')}</Divider>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
            {inputOptions.map((ele) => {
            let icon = <></>;
            if (ele.value === 'sms') {
                icon = <MobileOutlined />;
            }
            else if (ele.value === 'password') {
                icon = <DesktopOutlined />;
            }
            else if (ele.value === 'email') {
                icon = <MailOutlined />;
            }
            return (<Space key={ele.value} size={4} style={{ cursor: 'pointer' }} onClick={() => {
                    setLoginMode(ele.value);
                }}>
                        {icon}
                        <div>{ele.label}</div>
                    </Space>);
        })}
        </div>
    // </div>
    ) : <></>;
    const ScanMethods = scanOptions && scanOptions.length > 0 ? (
    // <div className={Style['loginbox-methods']}>
    //     <Divider plain style={{ fontSize: 13, color: '#808080', }}>{t('otherMethods')}</Divider>
    <Space style={{ cursor: 'pointer' }} onClick={() => {
            setLoginMode(scanOptions[0].value);
        }}>
            <QrcodeOutlined />
            <div>{t('scanLogin')}</div>
        </Space>
    // </div>
    ) : <></>;
    const OauthMethods = oauthOptions && oauthOptions.length > 0 ? (
    // <div className={Style['loginbox-methods']}>
    //     <Divider plain style={{ fontSize: 13, color: '#808080', }}>{t('otherMethods')}</Divider>
    <Space style={{ cursor: 'pointer' }}>
            {oauthOptions?.map((ele) => (<Tooltip title={ele.name}>
                    <Image preview={false} width={20} height={20} src={ele.logo} onClick={() => {
                goOauthLogin(ele.value);
            }} placeholder={<LinkOutlined />}/>
                </Tooltip>))}
        </Space>
    // </div>
    ) : <></>;
    const Tip = <div className={Style['loginbox-tip']}>
        <Space>
            <ExclamationCircleOutlined />
            <div>{t('tip')}</div>
        </Space>
    </div>;
    return (<div className={classNames(Style['loginbox-wrap'], {
            [Style['loginbox-wrap__mobile']]: width === 'xs',
        })}>
            <div className={Style['loginbox-hd']}>
                <Segmented className={Style.segmented} value={loginMode} block onChange={setLoginMode} options={showInput ? inputOptions.map((ele) => ({
            label: ele.label,
            value: ele.value,
        })) : scanOptions.map((ele) => ({
            label: ele.label,
            value: ele.value,
        }))}></Segmented>
            </div>

            <div className={classNames(Style['loginbox-bd'], {
            [Style['loginbox-bd__grant']]: isSupportWechatGrant,
        })}>
                {isSupportWechatGrant ? (<div className={Style['loginbox-grant']}>
                        <WeChatLoginGrant disabled={!!disabled} disableText={disabled} appId={appId} scope="snsapi_userinfo" redirectUri={redirectUri2} state={state}/>
                    </div>) : (<>
                        {showInput ? (<>
                                <div className={Style['loginbox-password']} style={{
                    display: loginMode === 'password' ? 'block' : 'none',
                }}>
                                    <PasswordLogin disabled={disabled} url={url} callback={callback} pwdAllowMobile={pwdAllowMobile} pwdAllowEmail={pwdAllowEmail} pwdAllowLoginName={pwdAllowLoginName} pwdMode={pwdMode}/>
                                    {allowRegister && (<div className={Style['loginbox-register']}>
                                            {/* <Button type='link' iconPosition='end' icon={<RightOutlined />}>去注册</Button> */}
                                            <Button type='link' onClick={() => {
                        goRegister && goRegister();
                    }}>{`${t('goRegister')} >`}</Button>
                                        </div>)}
                                </div>
                                <div className={Style['loginbox-mobile']} style={{
                    display: loginMode === 'sms' ? 'block' : 'none',
                }}>
                                    <SmsLogin disabled={disabled} url={url} callback={callback} digit={smsDigit}/>
                                    {Tip}
                                </div>
                                <div className={Style['loginbox-email']} style={{
                    display: loginMode === 'email' ? 'block' : 'none',
                }}>
                                    <EmailLogin disabled={disabled} url={url} callback={callback} digit={emailDigit}/>
                                    {Tip}
                                </div>
                                {(scanOptions?.length > 0 || oauthOptions?.length > 0) ? (<div className={Style['loginbox-methods']}>
                                        <Divider plain style={{ fontSize: 13, color: '#808080', }}>{t('otherMethods')}</Divider>
                                        <Space split={<Divider type="vertical"/>}>
                                            {ScanMethods}
                                            {OauthMethods}
                                        </Space>
                                    </div>) : (<></>)}
                            </>) : (<>
                                {loginMode === 'wechatWeb' &&
                    <div className={Style['loginbox-qrcode']}>
                                        <WeChatLoginQrCode disabled={!!disabled} disableText={disabled} appId={appId} scope="snsapi_login" redirectUri={redirectUri2} state={state}/>
                                        {Tip}
                                    </div>}
                                {loginMode === 'wechatPublicForWeb' && <div className={Style['loginbox-qrcode']}>
                                    <WechatLoginQrCodeForPublic type="login" oakPath="$login-wechatLogin/qrCode" oakAutoUnmount={true} url={state} size={180}/>
                                    {Tip}
                                </div>}
                                {loginMode === 'wechatMpForWeb' && <div className={Style['loginbox-qrcode']}>
                                    <WechatLoginQrCodeForPublic type="login" oakPath="$login-wechatLogin/qrCode" oakAutoUnmount={true} url={state} size={180} qrCodeType={'wechatMpDomainUrl'}/>
                                    {Tip}
                                </div>}
                                {(inputOptions?.length > 0 || oauthOptions?.length > 0) ? (<div className={Style['loginbox-methods']}>
                                        <Divider plain style={{ fontSize: 13, color: '#808080', }}>{t('otherMethods')}</Divider>
                                        <Space split={<Divider type="vertical"/>}>
                                            {InputMethods}
                                            {OauthMethods}
                                        </Space>
                                    </div>) : (<></>)}
                            </>)}
                    </>)}
            </div>
        </div>);
}