-
- ) => {
+ setFormData(prev => ({
+ ...prev,
+ [e.target.name]: e.target.value
+ }));
+ };
+
+ // Forgot Password Modal
+ if (showForgotPassword) {
+ return (
+
Welcome back!
-You have successfully logged in.
+ if (result.success) { + // Redirect or handle successful authentication + console.log('Authentication successful:', result.data); + // You can redirect here or handle the successful login + window.location.href = '/'; // Example redirect + } else { + // Error is already set in the hook, no need to set it again + console.error('Authentication failed:', result.error); + } + } catch (err) { + console.error('Authentication error:', err); + } + }; + + const handleForgotPasswordSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(''); + + if (!forgotPasswordEmail) { + setError('Please enter your email address'); + return; + } + + const result = await handleForgotPassword(forgotPasswordEmail); + if (result.success) { + setError(''); // Clear any previous errors + alert(result.message); // Or show a success message in a better way + setShowForgotPassword(false); + setForgotPasswordEmail(''); + } + }; + + const handleChange = (e: React.ChangeEvent
+
+
);
-}
+ }
-const RightSide = () => {
- return (
-
+ {/* Back Button */}
+
+
+ {/* Header */}
+
- `;
- document.body.appendChild(successElement);
-
- // Add animation with CSS
- const checkmark = successElement.querySelector('svg');
- if (checkmark) {
- checkmark.style.transform = 'scale(0)';
- checkmark.style.transition = 'transform 0.5s ease-out';
- setTimeout(() => {
- checkmark.style.transform = 'scale(1)';
- }, 100);
- }
-
- // Navigate after animation completes
- setTimeout(() => {
- // Remove the success element before navigating
- document.body.removeChild(successElement);
- router.push('/');
- }, 1800);
- } else {
- setError(data?.message || 'Failed to login. Please check your credentials.');
- }
- } catch (err: any) {
- setError('Failed to login. Please try again.');
- } finally {
- setIsLoading(false);
- }
- };
-
- const handleSubmitSignUp = async (e: React.FormEvent) => {
- e.preventDefault();
- setIsLoading(true);
- setError('');
-
- try {
- const response = await fetch('https://solidpoint-auth.ghaymah.systems/signup/email-password', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ email, password }), // Add more fields like name if needed
- });
-
- const data = await response.json();
- console.log(data);
-
- if (response.ok) {
- const accessToken = data.session?.accessToken;
- const refreshToken = data.session?.refreshToken;
- const userId = data.session?.user?.id;
-
- const userData = {
- email,
- accessToken,
- userId,
- isLoggedIn: true,
- lastLogin: new Date().toISOString()
- };
-
- localStorage.setItem('sp_user', JSON.stringify(userData));
- localStorage.setItem('user_id', userId);
- window.dispatchEvent(new Event('userChanged'));
-
- // Store tokens in HttpOnly cookies
- try {
- const tokenResponse = await fetch('/api/auth/store-tokens', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- credentials: 'include',
- body: JSON.stringify({
- access_token: accessToken,
- refresh_token: refreshToken,
- expires_in: 3600
- })
- });
-
- if (!tokenResponse.ok) {
- console.error('Failed to store token in HttpOnly cookie');
- } else {
- console.log('Token stored successfully in HttpOnly cookie');
- }
- } catch (error) {
- console.error('Error storing token in HttpOnly cookie:', error);
- }
-
- // Success animation
- const successElement = document.createElement('div');
- successElement.className = 'fixed inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm z-50';
- successElement.innerHTML = `
-
+
+
+ {/* Error Display */}
+ {error && (
+ + Reset Your Password +
++ Enter your email address and we'll send you a link to reset your password. +
+
+
+ )}
+
+ {/* Forgot Password Form */}
+
-
-
- `;
- document.body.appendChild(successElement);
-
- const checkmark = successElement.querySelector('svg');
- if (checkmark) {
- checkmark.style.transform = 'scale(0)';
- checkmark.style.transition = 'transform 0.5s ease-out';
- setTimeout(() => {
- checkmark.style.transform = 'scale(1)';
- }, 100);
- }
-
- setTimeout(() => {
- document.body.removeChild(successElement);
- router.push('/');
- }, 1800);
- } else {
- setError(data?.message || 'Signup failed. Please check your info.');
- }
- } catch (err: any) {
- setError('Signup failed. Please try again.');
- } finally {
- setIsLoading(false);
- }
- };
-
-
- const [swapAuth, setSwapAuth] = useState(false);
-
- const swapAuthFunction = () => {
- setSwapAuth(!swapAuth);
- setEmail('');
- setPassword('');
- setError('');
- }
-
- const handleSubmitForgotPassword = async (e: React.FormEvent) => {
- e.preventDefault();
- setIsLoading(true);
- setError('');
- // setMessage('');
-
- try {
- const res = await fetch('https://solidpoint-auth.ghaymah.systems/user/password/reset', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ email }),
- });
-
- if (res.ok) {
- // setMessage('If the email exists, a reset link has been sent.');
- console.log('If the email exists, a reset link has been sent.');
- } else {
- const data = await res.json();
- setError(data.message || 'Failed to send reset email.');
- }
- } catch {
- setError('Failed to send reset email. Try again later.');
- } finally {
- setIsLoading(false);
- }
- };
-
- const [forgotPassword, setForgotPassword] = useState(false);
-
-
- if (forgotPassword) {
- return (
- Account Created!
-You have successfully signed up.
-
-
- )
- }
-
- return (
- // Replaced motion.div with standard div and adopted SignUp's overall layout
-
-
-
-
-
-
-
-
-
-
- {/* Logo */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- SolidPoint
- - Welcome Back! -
-- Please enter your credentials to access your account. -
- - {error && ( -
-
- {error}
-
- )}
-
-
-
-
- {/* Background decorative elements - optimized for performance */}
-
+
-
-
-
-
-
- {/* Page split with 35%/65% ratio and responsiveness */}
-
- {/* Left side - Login Form (aligned with SignUp's form side) */}
-
- {/* Logo */}
-
-
-
-
-
-
-
-
-
-
-
-
- SolidPoint
- - Welcome Back! -
-- Please enter your credentials to access your account. -
- - {error && ( -
-
- {error}
-
- )}
-
-
-
-
-
Why Choose SolidPoint?
- - {/* Platform Purpose */} -
-
-
-
-
- {/* Key Features */}
-
-
-
-
- Platform Purpose
-
- -
-
- - - SolidPoint is an AI-powered content summarization platform - -
- - - Helps users save time by extracting key insights from various content types - -
-
-
-
-
-
- {/* Target Use Cases */}
-
-
-
-
- Key Features Highlighted
-
-
- -
-
- - - Security: - Data protection and privacy - -
- - - Summarization: - AI-powered content condensation - -
- - - Performance: - Fast and reliable service - -
- - - Pricing: - Cost-effective plans for different needs - -
-
-
-
+ return (
+
-
-
-
- Target Use Cases
-
-
-
-
-
-
-
-
- YouTube video summarization
-
-
-
- 
-
- Reddit post summarization
-
-
-
-
-
-
- arXiv paper summarization
-
-
-
-
-
- Website content summarization
-
-
-
-
-
- PDF to flashcard conversion
-
+
+ );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/src/pages/useAuth.tsx b/src/pages/useAuth.tsx
new file mode 100644
index 0000000..9d366f2
--- /dev/null
+++ b/src/pages/useAuth.tsx
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { useNhostClient } from '@nhost/react';
+
+export const useAuth = () => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState('');
+ const nhost = useNhostClient();
+
+ const handleLogin = async (email: string, password: string) => {
+ setIsLoading(true);
+ setError('');
+ try {
+ const { session, error } = await nhost.auth.signIn({
+ email,
+ password,
+ });
+
+ if (error) {
+ throw new Error(error.message || 'Failed to login. Please check your credentials.');
+ }
+
+ if (session) {
+ const accessToken = session.accessToken;
+ const refreshToken = session.refreshToken;
+ const userId = session.user?.id;
+
+ // Store user data in localStorage
+ const userData = {
+ email,
+ accessToken,
+ userId,
+ isLoggedIn: true,
+ lastLogin: new Date().toISOString()
+ };
+
+ localStorage.setItem('sp_user', JSON.stringify(userData));
+ localStorage.setItem('user_id', userId);
+ window.dispatchEvent(new Event('userChanged'));
+
+ // Store tokens in HttpOnly cookies (if still needed)
+ try {
+ await fetch('/api/auth/store-tokens', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ credentials: 'include',
+ body: JSON.stringify({
+ access_token: accessToken,
+ refresh_token: refreshToken,
+ expires_in: 3600
+ })
+ });
+ } catch (error) {
+ console.error('Error storing token in HttpOnly cookie:', error);
+ }
+
+ return { success: true, data: { session } };
+ } else {
+ throw new Error('Login failed: No session returned');
+ }
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleSignUp = async (email: string, password: string) => {
+ setIsLoading(true);
+ setError('');
+ try {
+ const { session, error } = await nhost.auth.signUp({
+ email,
+ password,
+ });
+
+ if (error) {
+ throw new Error(error.message || 'Signup failed. Please check your info.');
+ }
+
+ if (session) {
+ const accessToken = session.accessToken;
+ const refreshToken = session.refreshToken;
+ const userId = session.user?.id;
+
+ const userData = {
+ email,
+ accessToken,
+ userId,
+ isLoggedIn: true,
+ lastLogin: new Date().toISOString()
+ };
+
+ localStorage.setItem('sp_user', JSON.stringify(userData));
+ localStorage.setItem('user_id', userId);
+ window.dispatchEvent(new Event('userChanged'));
+
+ // Store tokens in HttpOnly cookies (if still needed)
+ try {
+ await fetch('/api/auth/store-tokens', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ credentials: 'include',
+ body: JSON.stringify({
+ access_token: accessToken,
+ refresh_token: refreshToken,
+ expires_in: 3600
+ })
+ });
+ } catch (error) {
+ console.error('Error storing token in HttpOnly cookie:', error);
+ }
+
+ return { success: true, data: { session } };
+ } else {
+ // Note: NHost may not return a session immediately if email verification is required
+ return {
+ success: true,
+ data: {
+ message: 'Signup successful! Please check your email for verification.'
+ }
+ };
+ }
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleForgotPassword = async (email: string) => {
+ setIsLoading(true);
+ setError('');
+ try {
+ const { error } = await nhost.auth.resetPassword({ email });
+
+ if (error) {
+ throw new Error(error.message || 'Failed to send reset email.');
+ }
+
+ return {
+ success: true,
+ message: 'If the email exists, a reset link has been sent.'
+ };
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ // Additional NHost auth methods you might find useful
+ const handleSignOut = async () => {
+ setIsLoading(true);
+ setError('');
+ try {
+ const { error } = await nhost.auth.signOut();
+
+ if (error) {
+ throw new Error(error.message || 'Failed to sign out.');
+ }
+
+ // Clear local storage
+ localStorage.removeItem('sp_user');
+ localStorage.removeItem('user_id');
+ window.dispatchEvent(new Event('userChanged'));
+
+ return { success: true };
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleChangePassword = async (newPassword: string) => {
+ setIsLoading(true);
+ setError('');
+ try {
+ const { error } = await nhost.auth.changePassword({ newPassword });
+
+ if (error) {
+ throw new Error(error.message || 'Failed to change password.');
+ }
+
+ return { success: true, message: 'Password changed successfully.' };
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred';
+ setError(errorMessage);
+ return { success: false, error: errorMessage };
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return {
+ isLoading,
+ error,
+ handleLogin,
+ handleSignUp,
+ handleForgotPassword,
+ handleSignOut,
+ handleChangePassword,
+ setError
+ };
+};
\ No newline at end of file
+ {/* Header */}
+
+
+
- )
-}
+
+ {/* Auth Card */}
+ + {isLogin ? 'Welcome Back' : 'Create Account'} +
++ {isLogin ? 'Sign in to your account' : 'Create your account'} +
+ {/* Error Display */}
+ {error && (
+
+
+ {/* Footer */}
+
+
+ )}
+
+
+
+ {/* Toggle between Login and Signup */}
+
+
+ + {isLogin ? "Don't have an account? " : "Already have an account? "} + +
+
+
+ + By continuing, you agree to our{' '} + {' '} + and{' '} + +
+