example simple registration/login logic with basic UI

apps/browser/src/hooks/useLoginForm.ts

@@ -74,60 +74,21 @@ export function useLoginForm({ onSubmitSuccess }: UseLoginFormProps = {}) {
             setIsLoading(true)
             console.log('Submitting login data:', formData)
 
-            // --- TODO: Replace with actual API call to your RageMP server ---
             try {
-                // Example: Simulate API call
-                await new Promise(resolve => setTimeout(resolve, 1000))
-
-                // Assuming API returns success:
-                console.log('Login successful!')
-                // Here you would typically receive a token or session info
-                // Handle 'saveLogin' and 'savePassword' (e.g., using localStorage/sessionStorage)
-                if (formData.saveLogin) {
-                    localStorage.setItem('savedUsername', formData.identifier) // Example
-                } else {
-                    localStorage.removeItem('savedUsername') // Example
-                }
-                // Password saving is generally discouraged for security reasons,
-                // but if required:
-                if (formData.savePassword) {
-                    // Be VERY careful with storing passwords. Consider secure storage or tokens.
-                    // localStorage.setItem('savedPassword', formData.password); // **Highly discouraged**
-                    console.warn(
-                        'Password saving enabled - ensure secure storage mechanism.',
-                    )
-                }
-
                 setErrors({}) // Clear errors on success
                 if (onSubmitSuccess) {
                     onSubmitSuccess(formData) // Call success callback
                 }
-                // You might redirect the user or update application state here
-
-                // --- Mock Error Handling (remove in real implementation) ---
-                // if (formData.identifier === 'wrong') {
-                //     throw new Error("Invalid credentials.");
-                // }
-                // --- End Mock Error Handling ---
             } catch (apiError: unknown) {
                 console.error('Login API error:', apiError)
                 setSubmitError('Login failed. Please check your credentials.')
             } finally {
                 setIsLoading(false)
             }
-            // --- End API call section ---
         },
         [formData, validateForm, onSubmitSuccess],
     )
 
-    // Effect to potentially load saved username on initial render (example)
-    // useEffect(() => {
-    //     const savedUser = localStorage.getItem('savedUsername');
-    //     if (savedUser) {
-    //         setFormData(prev => ({ ...prev, identifier: savedUser, saveLogin: true }));
-    //     }
-    // }, []);
-
     return {
         formData,
         errors,

apps/browser/src/hooks/useRegisterForm.ts

@@ -74,13 +74,7 @@ export function useRegisterForm({
             setIsLoading(true)
             console.log('Submitting registration data:', formData)
 
-            // --- TODO: Replace with actual API call to your RageMP server ---
             try {
-                // Example: Simulate API call
-                await new Promise(resolve => setTimeout(resolve, 1500))
-
-                // Assuming API returns success:
-                console.log('Registration successful!')
                 setFormData({
                     username: '',
                     email: '',
@@ -92,20 +86,12 @@ export function useRegisterForm({
                 if (onSubmitSuccess) {
                     onSubmitSuccess(formData) // Call success callback if provided
                 }
-
-                // --- Mock Error Handling (remove in real implementation) ---
-                // if (formData.email.includes('fail')) {
-                //     throw new Error("Registration failed: Email already exists.");
-                // }
-                // --- End Mock Error Handling ---
             } catch (apiError: unknown) {
                 console.error('Registration API error:', apiError)
-                // Try to set a user-friendly error message
                 setSubmitError('Registration failed. Please try again.')
             } finally {
                 setIsLoading(false)
             }
-            // --- End API call section ---
         },
         [formData, validateForm, onSubmitSuccess],
     )

apps/browser/src/pages/Authorization/LoginPage.tsx

@@ -1,4 +1,8 @@
 import React from 'react'
+import { fw } from '@entityseven/rage-fw-browser'
+
+import { AuthEvent } from '../../../../shared/events'
+
 import Input from '../../components/ui/Input'
 import Checkbox from '../../components/ui/Checkbox'
 import Button from '../../components/ui/Button'
@@ -6,10 +10,17 @@ import { useLoginForm } from '../../hooks/useLoginForm'
 import { LoginFormData } from '../../validation'
 
 const LoginPage: React.FC = () => {
-    const handleLoginSuccess = (data: LoginFormData) => {
-        console.log('Login success callback triggered:', data)
-        // Redirect user or update app state
-        alert(`Login successful for ${data.identifier}!`)
+    const handleLoginSuccess = async (data: LoginFormData) => {
+        const tempData = {
+            login: data.identifier,
+            password: data.password,
+        }
+
+        const response = await fw.event.triggerServer(AuthEvent.LOGIN, [
+            tempData,
+        ])
+
+        console.log(response)
     }
 
     const {
@@ -56,13 +67,13 @@ const LoginPage: React.FC = () => {
 
                     <div className="rounded-md shadow-sm -space-y-px">
                         <Input
-                            label="Email or Username"
+                            label="Username"
                             id="identifier"
                             name="identifier"
                             type="text" // Use text to allow both email and username
                             autoComplete="username" // Browsers often use 'username' for this field
                             required
-                            placeholder="Email address or Username"
+                            placeholder="Username"
                             value={formData.identifier}
                             onChange={handleChange}
                             error={errors.identifier}

apps/browser/src/pages/Authorization/RegisterPage.tsx

@@ -1,14 +1,27 @@
 import React from 'react'
+
+import { fw } from '@entityseven/rage-fw-browser'
+
+import { AuthEvent } from '../../../../shared/events'
+
 import Input from '../../components/ui/Input'
 import Button from '../../components/ui/Button'
 import { useRegisterForm } from '../../hooks/useRegisterForm'
 import { RegisterFormData } from '../../validation'
 
 const RegisterPage: React.FC = () => {
-    const handleRegistrationSuccess = (data: RegisterFormData) => {
-        console.log('Registration success callback triggered:', data)
-        // Maybe show a success message or redirect
-        alert(`Registration successful for ${data.username}!`)
+    const handleRegistrationSuccess = async (data: RegisterFormData) => {
+        const tempData = {
+            login: data.username,
+            password: data.password,
+            email: data.email,
+        }
+
+        const response = await fw.event.triggerServer(AuthEvent.REGISTER, [
+            tempData,
+        ])
+
+        console.log(response)
     }
 
     const {