263 lines
8.7 KiB
TypeScript
263 lines
8.7 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 16:37:12
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-02-04 10:05:39
|
|
*/
|
|
/**
|
|
* Invite Register Page
|
|
* Handles user registration via workspace invitation link
|
|
* Validates invite token and allows new users to set up their account
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { Button, Input, Form, Progress, App } from 'antd';
|
|
import { ExclamationCircleFilled } from '@ant-design/icons';
|
|
import type { FormProps } from 'antd';
|
|
|
|
import { useUser, type LoginInfo } from '@/store/user';
|
|
import { login } from '@/api/user'
|
|
import inviteBg from '@/assets/images/login/inviteBg.png'
|
|
import checkBg from '@/assets/images/login/checkBg.png'
|
|
import type { LoginForm, ValidateToken } from './types';
|
|
import { validateInviteToken } from '@/api/member'
|
|
import RbAlert from '@/components/RbAlert'
|
|
import styles from './index.module.css'
|
|
|
|
/**
|
|
* Alert extra content wrapper
|
|
*/
|
|
const Extra = ({ children }: { children: React.ReactNode }) => (
|
|
<div className="rb:flex rb:items-start">
|
|
<ExclamationCircleFilled className="rb:mr-1 rb:mt-0.75" />
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
/**
|
|
* Invite registration component
|
|
*/
|
|
const InviteRegister: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
const { token } = useParams();
|
|
const { clearUserInfo, updateLoginInfo } = useUser();
|
|
const [loading, setLoading] = useState(false);
|
|
const [form] = Form.useForm<LoginForm>();
|
|
const { message } = App.useApp();
|
|
const [passwordStrength, setPasswordStrength] = useState<'weak' | 'medium' | 'strong' | null>(null);
|
|
const values = Form.useWatch<LoginForm>([], form);
|
|
|
|
useEffect(() => {
|
|
clearUserInfo();
|
|
getInitalData()
|
|
}, []);
|
|
|
|
/** Fetch and validate invite token */
|
|
const getInitalData = () => {
|
|
if (!token) {
|
|
message.warning(t('user.inviteLinkInvalid'))
|
|
return
|
|
}
|
|
validateInviteToken(token).then((res) => {
|
|
const response = res as ValidateToken
|
|
form.setFieldsValue({
|
|
email: response.email,
|
|
})
|
|
})
|
|
}
|
|
|
|
/** Validate password strength and return score */
|
|
const validatePasswordStrength = (password: string): { strength: 'weak' | 'medium' | 'strong', error: string } => {
|
|
let strength: 'weak' | 'medium' | 'strong' = 'weak';
|
|
let score = 0;
|
|
let error = '';
|
|
|
|
// Password length check
|
|
if (password.length < 8) {
|
|
error = t('login.lengthDesc');
|
|
return { strength, error };
|
|
}
|
|
score += 1;
|
|
|
|
// Contains number
|
|
if (/\d/.test(password)) score += 1;
|
|
|
|
// Contains lowercase letter
|
|
if (/[a-z]/.test(password)) score += 1;
|
|
|
|
// Contains uppercase letter
|
|
if (/[A-Z]/.test(password)) score += 1;
|
|
|
|
// Contains special character
|
|
if (/[^A-Za-z0-9]/.test(password)) score += 1;
|
|
|
|
// Determine strength
|
|
if (score >= 4) {
|
|
strength = 'strong';
|
|
} else if (score >= 3) {
|
|
strength = 'medium';
|
|
}
|
|
|
|
// Return message based on strength
|
|
if (strength === 'weak' && score >= 1) {
|
|
error = t('login.weakDesc');
|
|
} else if (strength === 'medium') {
|
|
error = t('login.mediumDesc');
|
|
}
|
|
|
|
return { strength, error };
|
|
};
|
|
|
|
/** Update password strength indicator on change */
|
|
const handlePasswordChange = (value: string) => {
|
|
if (!value) {
|
|
setPasswordStrength(null);
|
|
return;
|
|
}
|
|
const { strength } = validatePasswordStrength(value);
|
|
setPasswordStrength(strength);
|
|
};
|
|
|
|
/** Validate password confirmation matches */
|
|
const validateConfirmPassword = (_: unknown, value: string) => {
|
|
const password = values.password;
|
|
if (!value) {
|
|
return Promise.reject(new Error('Please confirm password'));
|
|
}
|
|
if (value !== password) {
|
|
return Promise.reject(new Error('Passwords do not match'));
|
|
}
|
|
return Promise.resolve();
|
|
};
|
|
|
|
/** Handle registration form submission */
|
|
const handleRegister: FormProps<LoginForm>['onFinish'] = async (values) => {
|
|
setLoading(true);
|
|
login({
|
|
username: values.username,
|
|
email: values.email,
|
|
password: values.password,
|
|
invite: token
|
|
}).then((res) => {
|
|
const response = res as LoginInfo;
|
|
updateLoginInfo(response);
|
|
navigate('/');
|
|
}).finally(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="rb:w-screen rb:h-screen rb:flex rb:items-center rb:justify-center">
|
|
<img src={inviteBg} className="rb:w-screen rb:h-screen rb:fixed rb:top-0 rb:left-0 rb:z-0" />
|
|
|
|
<div className="rb:relative rb:z-1 rb:w-120 rb:max-h-full rb:overflow-y-auto rb:bg-[#FFFFFF] rb:rounded-xl rb:shadow-[0px_2px_10px_0px_rgba(11,49,124,0.2)]">
|
|
<div className="rb:bg-[url('@/assets/images/login/inviteForm.png')] rb:bg-cover rb:bg-no-repeat rb:text-[24px] rb:font-bold rb:leading-8 rb:p-[28px_24px]">
|
|
{t('login.welcomeTeam')}
|
|
<div className="rb:text-[#5B6167] rb:text-[12px] rb:font-regular rb:leading-4 rb:mt-2.5">{t('login.welcomeTeamSubTitle')}</div>
|
|
</div>
|
|
<Form
|
|
form={form}
|
|
onFinish={handleRegister}
|
|
layout="vertical"
|
|
className={styles.form}
|
|
>
|
|
<RbAlert icon={<img src={checkBg} className="rb:w-6 rb:h-6" />} className="rb:mb-6">
|
|
<div className="rb:text-[14px] rb:font-medium rb:leading-5">
|
|
{t('login.invitationVerified')}
|
|
<div className="rb:text-[12px] rb:font-regular rb:leading-4 rb:mt-1">{t('login.account')}: {values?.email || '-'}</div>
|
|
</div>
|
|
</RbAlert>
|
|
<Form.Item
|
|
name="email"
|
|
label={t('login.emailAccount')}
|
|
extra={<Extra>{t('login.emailAccountDesc')}</Extra>}
|
|
>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
label={t('login.setPassword')}
|
|
extra={
|
|
<div>
|
|
<div className="rb:mb-3">
|
|
<Progress
|
|
percent={passwordStrength === 'weak' ? 33 : passwordStrength === 'medium' ? 66 : passwordStrength === 'strong' ? 100 : 0}
|
|
steps={3}
|
|
showInfo={false}
|
|
style={{width: '100%'}}
|
|
/>
|
|
<div className="rb:font-medium rb:mt-2">
|
|
{t('login.passwordStrength')}:
|
|
{passwordStrength
|
|
? <span className="rb:text-[#155EEF]">{t(`login.${passwordStrength}`)}</span>
|
|
: <span className="rb:font-regular">{t('login.noSet')}</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
<Extra>{t('login.setPasswordDesc')}</Extra>
|
|
</div>
|
|
}
|
|
rules={[
|
|
{ required: true, message: t('login.setPasswordPlaceholder') },
|
|
{
|
|
validator: (_, value) => {
|
|
if (!value) {
|
|
return Promise.reject(new Error(t('login.lengthDesc')));
|
|
}
|
|
const { error } = validatePasswordStrength(value);
|
|
if (error && value.length >= 8) {
|
|
return Promise.resolve();
|
|
} else if (error) {
|
|
return Promise.reject(new Error(error));
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
validateTrigger: ['blur']
|
|
}
|
|
]}
|
|
>
|
|
<Input.Password
|
|
placeholder={t('login.setPasswordPlaceholder')}
|
|
onChange={(e) => handlePasswordChange(e.target.value)}
|
|
onBlur={(e) => handlePasswordChange(e.target.value)}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="confirmPassword"
|
|
label={t('login.confirmPassword')}
|
|
rules={[
|
|
{ required: true, message: t('login.confirmPasswordPlaceholder') },
|
|
{ validator: validateConfirmPassword }
|
|
]}
|
|
>
|
|
<Input.Password
|
|
placeholder={t('login.confirmPasswordPlaceholder')}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="username"
|
|
label={<>{t('login.name')}<span className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-5"> {t('login.nameSubTitle')}</span></>}
|
|
>
|
|
<Input placeholder={t('login.namePlaceholder')} />
|
|
</Form.Item>
|
|
<Button
|
|
type="primary"
|
|
block
|
|
loading={loading}
|
|
htmlType="submit"
|
|
className="rb:h-10! rb:rounded-lg!"
|
|
>
|
|
{t('login.register')}
|
|
</Button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InviteRegister; |