Spaces:

Jack698
/

velo

Sleeping

velo / web /src /components /shared /ThirdPartyAuth.js

Upload folder using huggingface_hub

adc1e1c verified about 1 year ago

5.9 kB

/*
Copyright (c) 2025 Tethys Plex
This file is part of Veloera.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React from 'react';
import { Button, Divider, Icon } from '@douyinfe/semi-ui';
import { IconGithubLogo } from '@douyinfe/semi-icons';
import TelegramLoginButton from 'react-telegram-login';
import {
  onGitHubOAuthClicked,
  onOIDCClicked,
  onLinuxDOOAuthClicked,
  onIDCFlareOAuthClicked,
} from '../utils';
import OIDCIcon from '../OIDCIcon.js';
import WeChatIcon from '../WeChatIcon';
import LinuxDoIcon from '../LinuxDoIcon.js';
import IDCFlareIcon from '../IDCFlareIcon.js';
import { useTranslation } from 'react-i18next';

const ThirdPartyAuth = ({ 
  status, 
  onWeChatLoginClicked, 
  onTelegramLoginClicked 
}) => {
  const { t } = useTranslation();

  const hasThirdPartyAuth = status.github_oauth ||
    status.oidc_enabled ||
    status.wechat_login ||
    status.telegram_oauth ||
    status.linuxdo_oauth ||
    status.idcflare_oauth;

  if (!hasThirdPartyAuth) {
    return null;
  }

  return (
    <>
      <Divider margin='12px' align='center'>
        {t('OR')}
      </Divider>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '12px',
          marginTop: 20,
        }}
      >
        {status.github_oauth && (
          <Button
            type='tertiary'
            theme='borderless'
            size='large'
            style={{
              border: '1px solid var(--semi-color-border)',
              borderRadius: '6px',
              padding: '12px 16px',
              width: '100%',
              justifyContent: 'center',
              position: 'relative',
            }}
            icon={<IconGithubLogo style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
            onClick={() =>
              onGitHubOAuthClicked(status.github_client_id)
            }
          >
            使用 GitHub 继续
          </Button>
        )}
        {status.oidc_enabled && (
          <Button
            type='tertiary'
            theme='borderless'
            size='large'
            style={{
              border: '1px solid var(--semi-color-border)',
              borderRadius: '6px',
              padding: '12px 16px',
              width: '100%',
              justifyContent: 'center',
              position: 'relative',
            }}
            icon={<OIDCIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
            onClick={() =>
              onOIDCClicked(
                status.oidc_authorization_endpoint,
                status.oidc_client_id,
              )
            }
          >
            使用 OIDC 继续
          </Button>
        )}
        {status.linuxdo_oauth && (
          <Button
            type='tertiary'
            theme='borderless'
            size='large'
            style={{
              border: '1px solid var(--semi-color-border)',
              borderRadius: '6px',
              padding: '12px 16px',
              width: '100%',
              justifyContent: 'center',
              position: 'relative',
            }}
            icon={<LinuxDoIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
            onClick={() =>
              onLinuxDOOAuthClicked(status.linuxdo_client_id)
            }
          >
            使用 LINUX DO 继续
          </Button>
        )}
        {status.idcflare_oauth && (
          <Button
            type='tertiary'
            theme='borderless'
            size='large'
            style={{
              border: '1px solid var(--semi-color-border)',
              borderRadius: '6px',
              padding: '12px 16px',
              width: '100%',
              justifyContent: 'center',
              position: 'relative',
            }}
            icon={<IDCFlareIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
            onClick={() =>
              onIDCFlareOAuthClicked(status.idcflare_client_id)
            }
          >
            使用 IDC Flare 继续
          </Button>
        )}
        {status.wechat_login && (
          <Button
            type='tertiary'
            theme='borderless'
            size='large'
            style={{
              border: '1px solid var(--semi-color-border)',
              borderRadius: '6px',
              padding: '12px 16px',
              width: '100%',
              justifyContent: 'center',
              position: 'relative',
              color: 'rgba(var(--semi-green-5), 1)',
            }}
            icon={<Icon svg={<WeChatIcon />} style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
            onClick={onWeChatLoginClicked}
          >
            使用 微信 继续
          </Button>
        )}
      </div>
      {status.telegram_oauth && (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            marginTop: 5,
          }}
        >
          <TelegramLoginButton
            dataOnauth={onTelegramLoginClicked}
            botName={status.telegram_bot_name}
          />
        </div>
      )}
    </>
  );
};

export default ThirdPartyAuth;

	/*
	Copyright (c) 2025 Tethys Plex

	This file is part of Veloera.

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program. If not, see <https://www.gnu.org/licenses/>.
	*/
	import React from 'react';
	import { Button, Divider, Icon } from '@douyinfe/semi-ui';
	import { IconGithubLogo } from '@douyinfe/semi-icons';
	import TelegramLoginButton from 'react-telegram-login';
	import {
	onGitHubOAuthClicked,
	onOIDCClicked,
	onLinuxDOOAuthClicked,
	onIDCFlareOAuthClicked,
	} from '../utils';
	import OIDCIcon from '../OIDCIcon.js';
	import WeChatIcon from '../WeChatIcon';
	import LinuxDoIcon from '../LinuxDoIcon.js';
	import IDCFlareIcon from '../IDCFlareIcon.js';
	import { useTranslation } from 'react-i18next';

	const ThirdPartyAuth = ({
	status,
	onWeChatLoginClicked,
	onTelegramLoginClicked
	}) => {
	const { t } = useTranslation();

	const hasThirdPartyAuth = status.github_oauth \|\|
	status.oidc_enabled \|\|
	status.wechat_login \|\|
	status.telegram_oauth \|\|
	status.linuxdo_oauth \|\|
	status.idcflare_oauth;

	if (!hasThirdPartyAuth) {
	return null;
	}

	return (
	<>
	<Divider margin='12px' align='center'>
	{t('OR')}
	</Divider>
	<div
	style={{
	display: 'flex',
	flexDirection: 'column',
	gap: '12px',
	marginTop: 20,
	}}
	>
	{status.github_oauth && (
	<Button
	type='tertiary'
	theme='borderless'
	size='large'
	style={{
	border: '1px solid var(--semi-color-border)',
	borderRadius: '6px',
	padding: '12px 16px',
	width: '100%',
	justifyContent: 'center',
	position: 'relative',
	}}
	icon={<IconGithubLogo style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
	onClick={() =>
	onGitHubOAuthClicked(status.github_client_id)
	}
	>
	使用 GitHub 继续
	</Button>
	)}
	{status.oidc_enabled && (
	<Button
	type='tertiary'
	theme='borderless'
	size='large'
	style={{
	border: '1px solid var(--semi-color-border)',
	borderRadius: '6px',
	padding: '12px 16px',
	width: '100%',
	justifyContent: 'center',
	position: 'relative',
	}}
	icon={<OIDCIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
	onClick={() =>
	onOIDCClicked(
	status.oidc_authorization_endpoint,
	status.oidc_client_id,
	)
	}
	>
	使用 OIDC 继续
	</Button>
	)}
	{status.linuxdo_oauth && (
	<Button
	type='tertiary'
	theme='borderless'
	size='large'
	style={{
	border: '1px solid var(--semi-color-border)',
	borderRadius: '6px',
	padding: '12px 16px',
	width: '100%',
	justifyContent: 'center',
	position: 'relative',
	}}
	icon={<LinuxDoIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
	onClick={() =>
	onLinuxDOOAuthClicked(status.linuxdo_client_id)
	}
	>
	使用 LINUX DO 继续
	</Button>
	)}
	{status.idcflare_oauth && (
	<Button
	type='tertiary'
	theme='borderless'
	size='large'
	style={{
	border: '1px solid var(--semi-color-border)',
	borderRadius: '6px',
	padding: '12px 16px',
	width: '100%',
	justifyContent: 'center',
	position: 'relative',
	}}
	icon={<IDCFlareIcon style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
	onClick={() =>
	onIDCFlareOAuthClicked(status.idcflare_client_id)
	}
	>
	使用 IDC Flare 继续
	</Button>
	)}
	{status.wechat_login && (
	<Button
	type='tertiary'
	theme='borderless'
	size='large'
	style={{
	border: '1px solid var(--semi-color-border)',
	borderRadius: '6px',
	padding: '12px 16px',
	width: '100%',
	justifyContent: 'center',
	position: 'relative',
	color: 'rgba(var(--semi-green-5), 1)',
	}}
	icon={<Icon svg={<WeChatIcon />} style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)' }} />}
	onClick={onWeChatLoginClicked}
	>
	使用微信继续
	</Button>
	)}
	</div>
	{status.telegram_oauth && (
	<div
	style={{
	display: 'flex',
	justifyContent: 'center',
	marginTop: 5,
	}}
	>
	<TelegramLoginButton
	dataOnauth={onTelegramLoginClicked}
	botName={status.telegram_bot_name}
	/>
	</div>
	)}
	</>
	);
	};

	export default ThirdPartyAuth;