74 lines
3.4 KiB
JavaScript
74 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import Styles from './styles.module.less';
|
|
import { Avatar } from 'antd';
|
|
const Authorize = (props) => {
|
|
const { oakFullpath, loading, hasError, errorMsg, userInfo, response_type, client_id, redirect_uri, scope, state, clientInfo, name, nickname, mobile, avatarUrl } = props.data;
|
|
const { t, handleGrant, handleDeny } = props.methods;
|
|
// Loading state
|
|
if (loading) {
|
|
return (<div className={Styles.container}>
|
|
<div className={Styles.loadingBox}>
|
|
<div className={Styles.spinner}></div>
|
|
<div className={Styles.loadingText}>{t('oauth.authorize.loading')}</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
// Error state
|
|
if (hasError) {
|
|
return (<div className={Styles.container}>
|
|
<div className={Styles.errorBox}>
|
|
<div className={Styles.errorTitle}>{t('oauth.authorize.error.title')}</div>
|
|
<div className={Styles.errorMessage}>{t(errorMsg)}</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
// Logged in - show authorization confirmation
|
|
return (<div className={Styles.container}>
|
|
<div className={Styles.authorizeBox}>
|
|
<div className={Styles.title}>{t('oauth.authorize.title')}</div>
|
|
<div className={Styles.description}>
|
|
{t('oauth.authorize.description')}
|
|
</div>
|
|
|
|
<div className={Styles.appInfo}>
|
|
<div className={Styles.infoLabel}>{t('oauth.authorize.clientName')}:</div>
|
|
<div className={Styles.infoValue}>{clientInfo?.name || client_id}</div>
|
|
{clientInfo?.description && (<>
|
|
<div className={Styles.infoLabel}>{t('oauth.authorize.clientDescription')}:</div>
|
|
<div className={Styles.descValue}>{clientInfo.description}</div>
|
|
</>)}
|
|
</div>
|
|
|
|
<div className={Styles.scopeSection}>
|
|
<div className={Styles.scopeTitle}>{t('oauth.authorize.scope')}</div>
|
|
<div className={Styles.scopeItem}>
|
|
<span className={Styles.scopeIcon}>✓</span>
|
|
<span>{t('oauth.authorize.allPermissions')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={Styles.userInfo}>
|
|
{avatarUrl ? (<Avatar className={Styles.avatar} src={avatarUrl}></Avatar>) : (<Avatar className={Styles.avatar}>
|
|
<span className={Styles.text}>
|
|
{nickname?.[0]}
|
|
</span>
|
|
</Avatar>)}
|
|
<div className={Styles.userDetails}>
|
|
<div className={Styles.userName}>{name || nickname}</div>
|
|
{mobile && <div className={Styles.userMobile}>{mobile}</div>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={Styles.actions}>
|
|
<button className={Styles.denyButton} onClick={handleDeny}>
|
|
{t('oauth.authorize.deny')}
|
|
</button>
|
|
<button className={Styles.grantButton} onClick={handleGrant}>
|
|
{t('oauth.authorize.confirm')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
};
|
|
export default Authorize;
|