feat(auth): implement new authentication pages and refactor routes
- Added new authentication pages: LoginPage, SignupPage, ForgotPasswordPage, AuthenticatingPage, LoggingOutPage, and VerifyResetEmailPage. - Refactored auth routes to use updated component names for better consistency and clarity. - Enhanced user experience with improved loading states and error handling across authentication processes.
This commit is contained in:
chamikaJ
497
worklenz-frontend/src/pages/auth/SignupPage.tsx
Normal file
497
worklenz-frontend/src/pages/auth/SignupPage.tsx
Normal file
@@ -0,0 +1,497 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Form, Card, Input, Flex, Button, Typography, Space, message } from 'antd/es';
|
||||
import { Rule } from 'antd/es/form';
|
||||
import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
|
||||
import googleIcon from '@/assets/images/google-icon.png';
|
||||
import PageHeader from '@components/AuthPageHeader';
|
||||
|
||||
import { authApiService } from '@/api/auth/auth.api.service';
|
||||
import { IUserSignUpRequest } from '@/types/auth/signup.types';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { signUp } from '@/features/auth/authSlice';
|
||||
import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
|
||||
import {
|
||||
evt_signup_page_visit,
|
||||
evt_signup_with_email_click,
|
||||
evt_signup_with_google_click,
|
||||
} from '@/shared/worklenz-analytics-events';
|
||||
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
||||
import logger from '@/utils/errorLogger';
|
||||
import alertService from '@/services/alerts/alertService';
|
||||
import { WORKLENZ_REDIRECT_PROJ_KEY } from '@/shared/constants';
|
||||
|
||||
// Define the global grecaptcha type
|
||||
declare global {
|
||||
interface Window {
|
||||
grecaptcha?: {
|
||||
ready: (callback: () => void) => void;
|
||||
execute: (siteKey: string, options: { action: string }) => Promise<string>;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const SignupPage = () => {
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useAppDispatch();
|
||||
const { trackMixpanelEvent } = useMixpanelTracking();
|
||||
|
||||
const { t } = useTranslation('auth/signup');
|
||||
const isMobile = useMediaQuery({ query: '(max-width: 576px)' });
|
||||
|
||||
useDocumentTitle('Signup');
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [validating, setValidating] = useState(false);
|
||||
const [urlParams, setUrlParams] = useState({
|
||||
email: '',
|
||||
name: '',
|
||||
teamId: '',
|
||||
teamMemberId: '',
|
||||
projectId: '',
|
||||
});
|
||||
|
||||
const setProjectId = (projectId: string) => {
|
||||
if (!projectId) {
|
||||
localStorage.removeItem(WORKLENZ_REDIRECT_PROJ_KEY);
|
||||
return;
|
||||
}
|
||||
localStorage.setItem(WORKLENZ_REDIRECT_PROJ_KEY, projectId);
|
||||
};
|
||||
|
||||
const getProjectId = () => {
|
||||
return localStorage.getItem(WORKLENZ_REDIRECT_PROJ_KEY);
|
||||
};
|
||||
|
||||
const enableGoogleLogin = import.meta.env.VITE_ENABLE_GOOGLE_LOGIN === 'true' || false;
|
||||
const enableRecaptcha =
|
||||
import.meta.env.VITE_ENABLE_RECAPTCHA === 'true' &&
|
||||
import.meta.env.VITE_RECAPTCHA_SITE_KEY &&
|
||||
import.meta.env.VITE_RECAPTCHA_SITE_KEY !== 'recaptcha-site-key';
|
||||
|
||||
useEffect(() => {
|
||||
trackMixpanelEvent(evt_signup_page_visit);
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
setUrlParams({
|
||||
email: searchParams.get('email') || '',
|
||||
name: searchParams.get('name') || '',
|
||||
teamId: searchParams.get('team') || '',
|
||||
teamMemberId: searchParams.get('user') || '',
|
||||
projectId: searchParams.get('project') || '',
|
||||
});
|
||||
|
||||
setProjectId(searchParams.get('project') || '');
|
||||
|
||||
form.setFieldsValue({
|
||||
email: searchParams.get('email') || '',
|
||||
name: searchParams.get('name') || '',
|
||||
});
|
||||
}, [trackMixpanelEvent]);
|
||||
|
||||
useEffect(() => {
|
||||
// Only load recaptcha script if recaptcha is enabled and site key is valid
|
||||
if (enableRecaptcha && import.meta.env.VITE_RECAPTCHA_SITE_KEY) {
|
||||
// Check if site key is not the placeholder value
|
||||
if (import.meta.env.VITE_RECAPTCHA_SITE_KEY === 'recaptcha-site-key') {
|
||||
console.warn(
|
||||
'Using placeholder reCAPTCHA site key. Please set a valid key in your environment variables.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://www.google.com/recaptcha/api.js?render=${import.meta.env.VITE_RECAPTCHA_SITE_KEY}`;
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
return () => {
|
||||
if (script && script.parentNode) {
|
||||
script.parentNode.removeChild(script);
|
||||
}
|
||||
|
||||
const recaptchaElements = document.getElementsByClassName('grecaptcha-badge');
|
||||
while (recaptchaElements.length > 0) {
|
||||
const element = recaptchaElements[0];
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}, [enableRecaptcha]);
|
||||
|
||||
const getInvitationQueryParams = () => {
|
||||
const params = [`team=${urlParams.teamId}`, `teamMember=${urlParams.teamMemberId}`];
|
||||
if (getProjectId()) {
|
||||
params.push(`project=${getProjectId()}`);
|
||||
}
|
||||
return urlParams.teamId && urlParams.teamMemberId ? `?${params.join('&')}` : '';
|
||||
};
|
||||
|
||||
const getRecaptchaToken = async () => {
|
||||
if (!enableRecaptcha) return '';
|
||||
|
||||
// Check if site key is valid
|
||||
if (
|
||||
!import.meta.env.VITE_RECAPTCHA_SITE_KEY ||
|
||||
import.meta.env.VITE_RECAPTCHA_SITE_KEY === 'recaptcha-site-key'
|
||||
) {
|
||||
console.warn('Invalid reCAPTCHA site key. Skipping reCAPTCHA verification.');
|
||||
return 'skip-verification';
|
||||
}
|
||||
|
||||
try {
|
||||
return new Promise<string>((resolve, reject) => {
|
||||
if (!window.grecaptcha) {
|
||||
reject('reCAPTCHA not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
window.grecaptcha.ready(() => {
|
||||
window
|
||||
.grecaptcha!.execute(import.meta.env.VITE_RECAPTCHA_SITE_KEY, { action: 'signup' })
|
||||
.then((token: string) => {
|
||||
resolve(token);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('reCAPTCHA execution error:', error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error getting reCAPTCHA token:', error);
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const onFinish = async (values: IUserSignUpRequest) => {
|
||||
try {
|
||||
setValidating(true);
|
||||
|
||||
if (enableRecaptcha) {
|
||||
try {
|
||||
const token = await getRecaptchaToken();
|
||||
|
||||
if (!token) {
|
||||
logger.error('Failed to get reCAPTCHA token');
|
||||
alertService.error(
|
||||
t('reCAPTCHAVerificationError'),
|
||||
t('reCAPTCHAVerificationErrorMessage')
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip verification if we're using the special token due to invalid site key
|
||||
if (token !== 'skip-verification') {
|
||||
const verifyToken = await authApiService.verifyRecaptchaToken(token);
|
||||
|
||||
if (!verifyToken.done) {
|
||||
logger.error('Failed to verify reCAPTCHA token');
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('reCAPTCHA error:', error);
|
||||
// Continue with sign up even if reCAPTCHA fails in development
|
||||
if (import.meta.env.DEV) {
|
||||
console.warn('Continuing signup despite reCAPTCHA error in development mode');
|
||||
} else {
|
||||
alertService.error(
|
||||
t('reCAPTCHAVerificationError'),
|
||||
t('reCAPTCHAVerificationErrorMessage')
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const body = {
|
||||
name: values.name,
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
};
|
||||
|
||||
const res = await authApiService.signUpCheck(body);
|
||||
if (res.done) {
|
||||
await signUpWithEmail(body);
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error?.response?.data?.message || 'Failed to validate signup details');
|
||||
} finally {
|
||||
setValidating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const signUpWithEmail = async (body: IUserSignUpRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
trackMixpanelEvent(evt_signup_with_email_click, {
|
||||
email: body.email,
|
||||
name: body.name,
|
||||
});
|
||||
if (urlParams.teamId) {
|
||||
body.team_id = urlParams.teamId;
|
||||
}
|
||||
if (urlParams.teamMemberId) {
|
||||
body.team_member_id = urlParams.teamMemberId;
|
||||
}
|
||||
if (urlParams.projectId) {
|
||||
body.project_id = urlParams.projectId;
|
||||
}
|
||||
const result = await dispatch(signUp(body)).unwrap();
|
||||
if (result?.authenticated) {
|
||||
message.success('Successfully signed up!');
|
||||
setTimeout(() => {
|
||||
navigate('/auth/authenticating');
|
||||
}, 1000);
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error?.response?.data?.message || 'Failed to sign up');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onGoogleSignUpClick = () => {
|
||||
try {
|
||||
trackMixpanelEvent(evt_signup_with_google_click);
|
||||
const queryParams = getInvitationQueryParams();
|
||||
const url = `${import.meta.env.VITE_API_URL}/secure/google${queryParams ? `?${queryParams}` : ''}`;
|
||||
window.location.href = url;
|
||||
} catch (error) {
|
||||
message.error('Failed to redirect to Google sign up');
|
||||
}
|
||||
};
|
||||
|
||||
const formRules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('nameRequired'),
|
||||
whitespace: true,
|
||||
},
|
||||
{
|
||||
min: 4,
|
||||
message: t('nameMinCharacterRequired'),
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
required: true,
|
||||
type: 'email',
|
||||
message: t('emailRequired'),
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: null,
|
||||
},
|
||||
{
|
||||
min: 8,
|
||||
message: null,
|
||||
},
|
||||
{
|
||||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])/,
|
||||
message: null,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const passwordChecklistItems = [
|
||||
{
|
||||
key: 'minLength',
|
||||
test: (v: string) => v.length >= 8,
|
||||
label: t('passwordChecklist.minLength', { defaultValue: 'At least 8 characters' }),
|
||||
},
|
||||
{
|
||||
key: 'uppercase',
|
||||
test: (v: string) => /[A-Z]/.test(v),
|
||||
label: t('passwordChecklist.uppercase', { defaultValue: 'One uppercase letter' }),
|
||||
},
|
||||
{
|
||||
key: 'lowercase',
|
||||
test: (v: string) => /[a-z]/.test(v),
|
||||
label: t('passwordChecklist.lowercase', { defaultValue: 'One lowercase letter' }),
|
||||
},
|
||||
{
|
||||
key: 'number',
|
||||
test: (v: string) => /\d/.test(v),
|
||||
label: t('passwordChecklist.number', { defaultValue: 'One number' }),
|
||||
},
|
||||
{
|
||||
key: 'special',
|
||||
test: (v: string) => /[@$!%*?&#]/.test(v),
|
||||
label: t('passwordChecklist.special', { defaultValue: 'One special character' }),
|
||||
},
|
||||
];
|
||||
|
||||
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
||||
const [passwordValue, setPasswordValue] = useState('');
|
||||
const [passwordTouched, setPasswordTouched] = useState(false);
|
||||
|
||||
return (
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
styles={{
|
||||
body: {
|
||||
paddingInline: isMobile ? 24 : 48,
|
||||
},
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
<PageHeader description={t('headerDescription', {defaultValue: 'Sign up to get started'})} />
|
||||
<Form
|
||||
form={form}
|
||||
name="signup"
|
||||
layout="vertical"
|
||||
autoComplete="off"
|
||||
requiredMark="optional"
|
||||
onFinish={onFinish}
|
||||
style={{ width: '100%' }}
|
||||
initialValues={{
|
||||
email: urlParams.email,
|
||||
name: urlParams.name,
|
||||
}}
|
||||
>
|
||||
<Form.Item name="name" label={t('nameLabel', {defaultValue: 'Full Name'})} rules={formRules.name}>
|
||||
<Input
|
||||
prefix={<UserOutlined />}
|
||||
placeholder={t('namePlaceholder', {defaultValue: 'Enter your full name'})}
|
||||
size="large"
|
||||
style={{ borderRadius: 4 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="email" label={t('emailLabel', {defaultValue: 'Email'})} rules={formRules.email as Rule[]}>
|
||||
<Input
|
||||
prefix={<MailOutlined />}
|
||||
placeholder={t('emailPlaceholder', {defaultValue: 'Enter your email'})}
|
||||
size="large"
|
||||
style={{ borderRadius: 4 }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="password"
|
||||
label={t('passwordLabel', {defaultValue: 'Password'})}
|
||||
rules={formRules.password}
|
||||
validateTrigger={['onBlur', 'onSubmit']}
|
||||
>
|
||||
<div>
|
||||
<Input.Password
|
||||
prefix={<LockOutlined />}
|
||||
placeholder={t('strongPasswordPlaceholder', {defaultValue: 'Enter a strong password'})}
|
||||
size="large"
|
||||
style={{ borderRadius: 4 }}
|
||||
value={passwordValue}
|
||||
onChange={e => {
|
||||
setPasswordValue(e.target.value);
|
||||
if (!passwordTouched) setPasswordTouched(true);
|
||||
}}
|
||||
onBlur={() => setPasswordTouched(true)}
|
||||
/>
|
||||
<div style={{ marginTop: 8, marginBottom: 4 }}>
|
||||
{passwordChecklistItems.map(item => {
|
||||
const passed = item.test(passwordValue);
|
||||
// Only green if passed, otherwise neutral (never red)
|
||||
let color = passed
|
||||
? (themeMode === 'dark' ? '#52c41a' : '#389e0d')
|
||||
: (themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf');
|
||||
return (
|
||||
<Flex key={item.key} align="center" gap={8} style={{ color, fontSize: 13 }}>
|
||||
{passed ? (
|
||||
<CheckCircleTwoTone twoToneColor={themeMode === 'dark' ? '#52c41a' : '#52c41a'} />
|
||||
) : (
|
||||
<CloseCircleTwoTone twoToneColor={themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf'} />
|
||||
)}
|
||||
<span>{item.label}</span>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Typography.Paragraph style={{ fontSize: 14 }}>
|
||||
{t('bySigningUpText')}{' '}
|
||||
<a href="https://worklenz.com/privacy/" target="_blank" rel="noopener noreferrer">
|
||||
{t('privacyPolicyLink')}
|
||||
</a>{' '}
|
||||
{t('andText')}{' '}
|
||||
<a href="https://worklenz.com/terms/" target="_blank" rel="noopener noreferrer">
|
||||
{t('termsOfUseLink')}
|
||||
</a>
|
||||
.
|
||||
</Typography.Paragraph>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Flex vertical gap={8}>
|
||||
<Button
|
||||
block
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
loading={loading || validating}
|
||||
style={{ borderRadius: 4 }}
|
||||
>
|
||||
{t('signupButton')}
|
||||
</Button>
|
||||
|
||||
{enableGoogleLogin && (
|
||||
<>
|
||||
<Typography.Text style={{ textAlign: 'center' }}>{t('orText')}</Typography.Text>
|
||||
|
||||
<Button
|
||||
block
|
||||
type="default"
|
||||
size="large"
|
||||
onClick={onGoogleSignUpClick}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
<img src={googleIcon} alt="google icon" style={{ maxWidth: 20, width: '100%' }} />
|
||||
{t('signInWithGoogleButton')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Typography.Text style={{ fontSize: 14 }}>
|
||||
{t('alreadyHaveAccountText', {defaultValue: 'Already have an account?'})}
|
||||
</Typography.Text>
|
||||
|
||||
<Link
|
||||
to="/auth/login"
|
||||
className="ant-typography ant-typography-link blue-link"
|
||||
style={{ fontSize: 14 }}
|
||||
>
|
||||
{t('loginButton')}
|
||||
</Link>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignupPage;
|
||||
Reference in New Issue
Block a user