mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
257 lines
9.2 KiB
TypeScript
257 lines
9.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
|
import { springAuth } from '@app/auth/springAuthClient';
|
|
import { useAuth } from '@app/auth/UseSession';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useDocumentMeta } from '@app/hooks/useDocumentMeta';
|
|
import AuthLayout from '@app/routes/authShared/AuthLayout';
|
|
|
|
// Import login components
|
|
import LoginHeader from '@app/routes/login/LoginHeader';
|
|
import ErrorMessage from '@app/routes/login/ErrorMessage';
|
|
import EmailPasswordForm from '@app/routes/login/EmailPasswordForm';
|
|
import OAuthButtons, { DEBUG_SHOW_ALL_PROVIDERS, oauthProviderConfig } from '@app/routes/login/OAuthButtons';
|
|
import DividerWithText from '@app/components/shared/DividerWithText';
|
|
import LoggedInState from '@app/routes/login/LoggedInState';
|
|
import { BASE_PATH } from '@app/constants/app';
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const { session, loading } = useAuth();
|
|
const { t } = useTranslation();
|
|
const [isSigningIn, setIsSigningIn] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
|
const [showEmailForm, setShowEmailForm] = useState(false);
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [enabledProviders, setEnabledProviders] = useState<string[]>([]);
|
|
const [hasSSOProviders, setHasSSOProviders] = useState(false);
|
|
const [_enableLogin, setEnableLogin] = useState<boolean | null>(null);
|
|
|
|
// Fetch enabled SSO providers and login config from backend
|
|
useEffect(() => {
|
|
const fetchProviders = async () => {
|
|
try {
|
|
const response = await fetch(`${BASE_PATH}/api/v1/proprietary/ui-data/login`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
// Check if login is disabled - if so, redirect to home
|
|
if (data.enableLogin === false) {
|
|
console.debug('[Login] Login disabled, redirecting to home');
|
|
navigate('/');
|
|
return;
|
|
}
|
|
|
|
setEnableLogin(data.enableLogin ?? true);
|
|
|
|
// Extract provider IDs from the providerList map
|
|
// The keys are like "/oauth2/authorization/google" - extract the last part
|
|
const providerIds = Object.keys(data.providerList || {})
|
|
.map(key => key.split('/').pop())
|
|
.filter((id): id is string => id !== undefined);
|
|
setEnabledProviders(providerIds);
|
|
}
|
|
} catch (err) {
|
|
console.error('[Login] Failed to fetch enabled providers:', err);
|
|
}
|
|
};
|
|
fetchProviders();
|
|
}, [navigate]);
|
|
|
|
// Update hasSSOProviders and showEmailForm when enabledProviders changes
|
|
useEffect(() => {
|
|
// In debug mode, check if any providers exist in the config
|
|
const hasProviders = DEBUG_SHOW_ALL_PROVIDERS
|
|
? Object.keys(oauthProviderConfig).length > 0
|
|
: enabledProviders.length > 0;
|
|
setHasSSOProviders(hasProviders);
|
|
// If no SSO providers, show email form by default
|
|
if (!hasProviders) {
|
|
setShowEmailForm(true);
|
|
}
|
|
}, [enabledProviders]);
|
|
|
|
// Handle query params (email prefill, success messages, and session expiry)
|
|
useEffect(() => {
|
|
try {
|
|
const emailFromQuery = searchParams.get('email');
|
|
if (emailFromQuery) {
|
|
setEmail(emailFromQuery);
|
|
}
|
|
|
|
// Check if session expired (401 redirect)
|
|
const expired = searchParams.get('expired');
|
|
if (expired === 'true') {
|
|
setError(t('login.sessionExpired', 'Your session has expired. Please sign in again.'));
|
|
}
|
|
|
|
const messageType = searchParams.get('messageType')
|
|
if (messageType) {
|
|
switch (messageType) {
|
|
case 'accountCreated':
|
|
setSuccessMessage(t('login.accountCreatedSuccess', 'Account created successfully! You can now sign in.'))
|
|
break
|
|
case 'passwordChanged':
|
|
setSuccessMessage(t('login.passwordChangedSuccess', 'Password changed successfully! Please sign in with your new password.'))
|
|
break
|
|
case 'credsUpdated':
|
|
setSuccessMessage(t('login.credentialsUpdated', 'Your credentials have been updated. Please sign in again.'))
|
|
break
|
|
}
|
|
}
|
|
} catch (_) {
|
|
// ignore
|
|
}
|
|
}, [searchParams, t]);
|
|
|
|
const baseUrl = window.location.origin + BASE_PATH;
|
|
|
|
// Set document meta
|
|
useDocumentMeta({
|
|
title: `${t('login.title', 'Sign in')} - Stirling PDF`,
|
|
description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
|
|
ogTitle: `${t('login.title', 'Sign in')} - Stirling PDF`,
|
|
ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
|
|
ogImage: `${baseUrl}/og_images/home.png`,
|
|
ogUrl: `${window.location.origin}${window.location.pathname}`
|
|
});
|
|
|
|
// Show logged in state if authenticated
|
|
if (session && !loading) {
|
|
return <LoggedInState />;
|
|
}
|
|
|
|
const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure' | 'keycloak' | 'oidc') => {
|
|
try {
|
|
setIsSigningIn(true);
|
|
setError(null);
|
|
|
|
console.log(`[Login] Signing in with ${provider}`);
|
|
|
|
// Redirect to Spring OAuth2 endpoint
|
|
const { error } = await springAuth.signInWithOAuth({
|
|
provider,
|
|
options: { redirectTo: `${BASE_PATH}/auth/callback` }
|
|
});
|
|
|
|
if (error) {
|
|
console.error(`[Login] ${provider} error:`, error);
|
|
setError(t('login.failedToSignIn', { provider, message: error.message }) || `Failed to sign in with ${provider}`);
|
|
}
|
|
} catch (err) {
|
|
console.error(`[Login] Unexpected error:`, err);
|
|
setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred');
|
|
} finally {
|
|
setIsSigningIn(false);
|
|
}
|
|
};
|
|
|
|
const signInWithEmail = async () => {
|
|
if (!email || !password) {
|
|
setError(t('login.pleaseEnterBoth') || 'Please enter both email and password');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsSigningIn(true);
|
|
setError(null);
|
|
|
|
console.log('[Login] Signing in with email:', email);
|
|
|
|
const { user, session, error } = await springAuth.signInWithPassword({
|
|
email: email.trim(),
|
|
password: password
|
|
});
|
|
|
|
if (error) {
|
|
console.error('[Login] Email sign in error:', error);
|
|
setError(error.message);
|
|
} else if (user && session) {
|
|
console.log('[Login] Email sign in successful');
|
|
// Auth state will update automatically and Landing will redirect to home
|
|
// No need to navigate manually here
|
|
}
|
|
} catch (err) {
|
|
console.error('[Login] Unexpected error:', err);
|
|
setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred');
|
|
} finally {
|
|
setIsSigningIn(false);
|
|
}
|
|
};
|
|
|
|
// Forgot password handler (currently unused, reserved for future implementation)
|
|
// const handleForgotPassword = () => {
|
|
// navigate('/auth/reset');
|
|
// };
|
|
|
|
return (
|
|
<AuthLayout>
|
|
<LoginHeader title={t('login.login') || 'Sign in'} />
|
|
|
|
{/* Success message */}
|
|
{successMessage && (
|
|
<div style={{
|
|
padding: '1rem',
|
|
marginBottom: '1rem',
|
|
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
|
border: '1px solid rgba(34, 197, 94, 0.3)',
|
|
borderRadius: '0.5rem',
|
|
color: '#16a34a'
|
|
}}>
|
|
<p style={{ margin: 0, fontSize: '0.875rem', textAlign: 'center' }}>
|
|
{successMessage}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<ErrorMessage error={error} />
|
|
|
|
{/* OAuth first */}
|
|
<OAuthButtons
|
|
onProviderClick={signInWithProvider}
|
|
isSubmitting={isSigningIn}
|
|
layout="vertical"
|
|
enabledProviders={enabledProviders}
|
|
/>
|
|
|
|
{/* Divider between OAuth and Email - only show if SSO is available */}
|
|
{hasSSOProviders && (
|
|
<DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
|
|
)}
|
|
|
|
{/* Sign in with email button - only show if SSO providers exist */}
|
|
{hasSSOProviders && !showEmailForm && (
|
|
<div className="auth-section">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowEmailForm(true)}
|
|
disabled={isSigningIn}
|
|
className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
|
|
>
|
|
{t('login.useEmailInstead', 'Login with email')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Email form - show by default if no SSO, or when button clicked */}
|
|
{showEmailForm && (
|
|
<div style={{ marginTop: hasSSOProviders ? '1rem' : '0' }}>
|
|
<EmailPasswordForm
|
|
email={email}
|
|
password={password}
|
|
setEmail={setEmail}
|
|
setPassword={setPassword}
|
|
onSubmit={signInWithEmail}
|
|
isSubmitting={isSigningIn}
|
|
submitButtonText={isSigningIn ? (t('login.loggingIn') || 'Signing in...') : (t('login.login') || 'Sign in')}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
</AuthLayout>
|
|
);
|
|
}
|