#

vincentlu

2025-02-07 dcfeeb0c8674275a8bac14ab8e69ba87d3b903f3

#

 rsf-admin/src/i18n/en.js

@@ -221,7 +221,7 @@
    },
    page: {
        login: {
            tenant: 'Tenant',
            tenant: 'Company',
            button: {
                login: 'LOG IN',
                register: 'REGISTER',

 rsf-admin/src/i18n/zh.js

@@ -221,7 +221,7 @@
    },
    page: {
        login: {
            tenant: '租户',
            tenant: '公司',
            button: {
                login: 'LOG IN',
                register: 'REGISTER',

 rsf-admin/src/page/login/Login.jsx

@@ -15,6 +15,7 @@
    useNotify,
} from 'react-admin';
import { useForm, Controller } from 'react-hook-form';
import ProviderChoices from "./ProviderChoices";

const Login = (props) => {
    const translate = useTranslate();
@@ -158,6 +159,8 @@

                </Stack>
                <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box>

                <ProviderChoices type="LOG IN" />
            </Box >
        </>
    )

 rsf-admin/src/page/login/ProviderChoices.jsx

New file
@@ -0,0 +1,45 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    Box,
    Button,
} from '@mui/material';
import { darken } from '@mui/system';
import FacebookIcon from '@mui/icons-material/Facebook';
import GoogleIcon from '@mui/icons-material/Google';
import EmailIcon from '@mui/icons-material/Email';
import GitHubIcon from '@mui/icons-material/GitHub';

const ProviderButton = (props) => {
    const { name, color, type, icon } = props;

    return (
        <>
            <Button startIcon={icon} sx={{
                backgroundColor: color,
                color: '#FFFFFF',
                mb: 1,
                boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
                '&:hover': {
                    backgroundColor: darken(color, 0.2),
                }
            }}>
                {type} WITH {name}
            </Button>
        </>
    )
}

const ProviderChoices = (props) => {
    const { type = "LOG IN" } = props;

    return (
        <>
            <ProviderButton type={type} name='EMAIL' color="#1da1f2" icon={<EmailIcon />} />
            <ProviderButton type={type} name='GITHUB' color="#24292e" icon={<GitHubIcon />} />
            <ProviderButton type={type} name='FACEBOOK' color="#3b5998" icon={<FacebookIcon />} />
            <ProviderButton type={type} name='GOOGLE' color="#4285F4" icon={<GoogleIcon />} />
        </>
    )
}

export default ProviderChoices;

 rsf-admin/src/page/login/Register.jsx

@@ -15,6 +15,7 @@
    useNotify,
} from 'react-admin';
import { useForm, Controller } from 'react-hook-form';
import ProviderChoices from "./ProviderChoices";

const Register = (props) => {
    const translate = useTranslate();
@@ -38,7 +39,6 @@
    }, [tenantList, setValue]);

    const onSubmit = (data) => {
        console.log(data);
        setLoading(true);
        // js native confirm && root
        login(
@@ -153,6 +153,8 @@

                </Stack>
                <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>or</Box>

                <ProviderChoices type="REGISTER" />
            </Box >
        </>
    )