105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Tabs } from 'antd-mobile';
|
|
import Style from './mobile.module.less';
|
|
import ByMobile from './byMobile/index';
|
|
import ByUserEntityGrant from './byUserEntityGrant';
|
|
import { WebComponentProps } from 'oak-frontend-base';
|
|
import { EntityDict } from '../../../oak-app-domain';
|
|
import { QrCodeType } from '../../../types/Config';
|
|
|
|
export default function Render(
|
|
props: WebComponentProps<
|
|
EntityDict,
|
|
'user',
|
|
false,
|
|
{
|
|
redirectToAfterConfirm: EntityDict['userEntityGrant']['Schema']['redirectTo'];
|
|
claimUrl: string;
|
|
entity: keyof EntityDict;
|
|
entityId: string;
|
|
relations: EntityDict['relation']['OpSchema'][];
|
|
qrCodeType?: QrCodeType;
|
|
rule: EntityDict['userEntityGrant']['OpSchema']['rule'];
|
|
passwordRequired: boolean;
|
|
enabled: Array<'email' | 'mobile' | 'userEntityGrant'>;
|
|
onUserEntityGrantCreated?: (id: string) => undefined,
|
|
},
|
|
{}
|
|
>
|
|
) {
|
|
const {
|
|
entity,
|
|
entityId,
|
|
relations,
|
|
redirectToAfterConfirm,
|
|
qrCodeType,
|
|
claimUrl,
|
|
rule,
|
|
passwordRequired,
|
|
enabled,
|
|
onUserEntityGrantCreated,
|
|
} = props.data;
|
|
const { t } = props.methods;
|
|
|
|
if (enabled.length === 0) {
|
|
return (
|
|
<div className={Style.container}>
|
|
{t('noMethods')}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const SubParts = enabled.map(
|
|
(ele) => {
|
|
switch (ele) {
|
|
case 'email': {
|
|
return <div key={ele} className={Style.container}>{t('not-implemented')}</div>;
|
|
}
|
|
case 'mobile': {
|
|
return (
|
|
<ByMobile
|
|
key={ele}
|
|
passwordRequired={passwordRequired}
|
|
entity={entity}
|
|
entityId={entityId}
|
|
relations={relations}
|
|
oakPath="$userRelation-upsert-by-mobile"
|
|
oakAutoUnmount={true}
|
|
/>
|
|
);
|
|
}
|
|
case 'userEntityGrant': {
|
|
return (
|
|
<ByUserEntityGrant
|
|
key={ele}
|
|
qrCodeType={qrCodeType}
|
|
entity={entity}
|
|
entityId={entityId}
|
|
relations={relations}
|
|
claimUrl={claimUrl}
|
|
rule={rule}
|
|
oakPath="$userRelation-upsert-by-userEntityGrant"
|
|
oakAutoUnmount={true}
|
|
redirectToAfterConfirm={redirectToAfterConfirm}
|
|
onUserEntityGrantCreated={onUserEntityGrantCreated}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
if (SubParts.length === 1) {
|
|
return SubParts[0];
|
|
}
|
|
return (
|
|
<Tabs className={Style.tab}>
|
|
{enabled.map((ele, idx) => (
|
|
<Tabs.Tab title={t(`methods.${ele}`)} key={`item-${idx}`}>
|
|
{SubParts[idx]}
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs>
|
|
);
|
|
}
|