49 lines
2.9 KiB
JavaScript
49 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import Styles from './styles.module.less';
|
|
const Oauth = (props) => {
|
|
const { loading, hasError, errorMessage } = props.data;
|
|
const { t, retry, returnToIndex } = props.methods;
|
|
const tErrMsg = t(errorMessage);
|
|
return (<div className={Styles.oauthContainer}>
|
|
<div className={Styles.oauthCard}>
|
|
{loading ? (<>
|
|
<div className={Styles.iconWrapper}>
|
|
<svg className={Styles.loadingIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeOpacity="0.2"/>
|
|
<path d="M12 2C6.477 2 2 6.477 2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h2 className={Styles.title}>{t('oauth.loading.title')}</h2>
|
|
<p className={Styles.description}>
|
|
{t('oauth.loadingMessage')}
|
|
</p>
|
|
</>) : hasError ? (<>
|
|
<div className={Styles.iconWrapper}>
|
|
<svg className={Styles.errorIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
|
|
<path d="M15 9L9 15M9 9L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h2 className={Styles.title}>{t('oauth.error.title')}</h2>
|
|
<p className={Styles.errorMessage}>{tErrMsg}</p>
|
|
<button className={`${Styles.button} ${Styles.errorButton}`} onClick={() => retry()}>
|
|
{t('oauth.close')}
|
|
</button>
|
|
</>) : (<>
|
|
<div className={Styles.iconWrapper}>
|
|
<svg className={Styles.successIcon} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
|
|
<path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h2 className={Styles.title}>{t('oauth.success.title')}</h2>
|
|
<p className={Styles.successMessage}>{t('oauth.successMessage')}</p>
|
|
<button className={`${Styles.button} ${Styles.successButton}`} onClick={() => returnToIndex()}>
|
|
{t('oauth.return')}
|
|
</button>
|
|
</>)}
|
|
</div>
|
|
</div>);
|
|
};
|
|
export default Oauth;
|