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) => {
+    const handleLoginSuccess = async (data: LoginFormData) => {
-        console.log('Login success callback triggered:', data)
+        const tempData = {
-        // Redirect user or update app state
+            login: data.identifier,
-        alert(`Login successful for ${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) => {
+    const handleRegistrationSuccess = async (data: RegisterFormData) => {
-        console.log('Registration success callback triggered:', data)
+        const tempData = {
-        // Maybe show a success message or redirect
+            login: data.username,
-        alert(`Registration successful for ${data.username}!`)
+            password: data.password,
+            email: data.email,
+        }
+
+        const response = await fw.event.triggerServer(AuthEvent.REGISTER, [
+            tempData,
+        ])
+
+        console.log(response)
     }
 
     const {

apps/client/src/index.ts

@@ -1,3 +1,3 @@
 import { fw } from '@entityseven/rage-fw-client'
 
-fw.player.browser = mp.browsers.new('https://localhost:8080')
+fw.player.browser = mp.browsers.new('package://cef/index.html')

apps/server/.env

@@ -0,0 +1,5 @@
+POSTGRES_USER="postgres"
+POSTGRES_PASSWORD="mypassword"
+POSTGRES_DB="postgres"
+
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}"

apps/server/docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  database:
+    image: postgres:17
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test:
+        [ "CMD", "pg_isready", "-U", "${POSTGRES_USER}", "-d", "${POSTGRES_DB}" ]
+      interval: 5s
+      timeout: 10s
+      retries: 5
+    environment:
+      - POSTGRES_PASSWORD
+      - POSTGRES_USER
+      - POSTGRES_DB
+    volumes:
+      - rage_fw_db_data:/var/lib/postgresql/data
+
+volumes:
+  rage_fw_db_data:

apps/server/drizzle.config.ts

@@ -0,0 +1,15 @@
+import 'dotenv/config'
+import { defineConfig } from 'drizzle-kit'
+
+export default defineConfig({
+    out: './drizzle',
+    schema: './src/db/schema.ts',
+    dialect: 'postgresql',
+    dbCredentials: {
+        user: process.env.POSTGRES_USER!,
+        password: process.env.POSTGRES_PASSWORD!,
+        database: process.env.POSTGRES_DB!,
+        host: 'localhost',
+        ssl: false,
+    },
+})

apps/server/drizzle/0000_burly_jubilee.sql

@@ -0,0 +1,10 @@
+CREATE TABLE "users" (
+	"id" integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY (sequence name "users_id_seq" INCREMENT BY 1 MINVALUE 1 MAXVALUE 2147483647 START WITH 1 CACHE 1),
+	"socialClub" varchar(255) NOT NULL,
+	"email" varchar(255) NOT NULL,
+	"login" varchar(255) NOT NULL,
+	"password" varchar(255) NOT NULL,
+	CONSTRAINT "users_socialClub_unique" UNIQUE("socialClub"),
+	CONSTRAINT "users_email_unique" UNIQUE("email"),
+	CONSTRAINT "users_login_unique" UNIQUE("login")
+);

apps/server/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,95 @@
+{
+  "id": "690592ed-01d9-40ee-91c5-45e2ed38926b",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "identity": {
+            "type": "always",
+            "name": "users_id_seq",
+            "schema": "public",
+            "increment": "1",
+            "startWith": "1",
+            "minValue": "1",
+            "maxValue": "2147483647",
+            "cache": "1",
+            "cycle": false
+          }
+        },
+        "socialClub": {
+          "name": "socialClub",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "login": {
+          "name": "login",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_socialClub_unique": {
+          "name": "users_socialClub_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "socialClub"
+          ]
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        },
+        "users_login_unique": {
+          "name": "users_login_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "login"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

apps/server/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1744901803714,
+      "tag": "0000_burly_jubilee",
+      "breakpoints": true
+    }
+  ]
+}

apps/server/package.json

@@ -5,9 +5,19 @@
   "license": "CC BY-ND",
   "description": "Server side of rage-fw example",
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --platform=node --target=node10.4 --outfile=../../server/packages/server/index.js"
+    "build": "esbuild src/index.ts --bundle --platform=node --target=node14.10 --format=cjs --outfile=../../server/packages/server/index.js"
   },
   "dependencies": {
-    "@entityseven/rage-fw-server": "latest"
+    "@entityseven/rage-fw-server": "latest",
+    "dotenv": "^16.5.0",
+    "drizzle-orm": "^0.42.0",
+    "md5": "^2.3.0",
+    "pg": "^8.14.1"
+  },
+  "devDependencies": {
+    "@types/pg": "^8.11.13",
+    "drizzle-kit": "^0.31.0",
+    "tsx": "^4.19.3",
+    "@types/md5": "^2.3.5"
   }
 }

apps/server/src/commands.ts

@@ -1,10 +0,0 @@
-mp.events.addCommand('veh', async (player, fullText) => {
-    const vehicleID = mp.joaat(fullText)
-    const vehicle = mp.vehicles.new(vehicleID, player.position, {
-        numberPlate: 'admin',
-    })
-
-    setTimeout(() => {
-        player.putIntoVehicle(vehicle, 0)
-    }, 250)
-})

apps/server/src/db/index.ts

@@ -0,0 +1,6 @@
+import 'dotenv/config'
+import { drizzle } from 'drizzle-orm/node-postgres'
+
+const connUrl = `postgres://${process.env.POSTGRES_USER}:${process.env.POSTGRES_PASSWORD}@localhost:5432/${process.env.POSTGRES_DB}`
+
+export const db = drizzle(connUrl)

apps/server/src/db/schema.ts

@@ -0,0 +1,9 @@
+import { integer, pgTable, varchar } from 'drizzle-orm/pg-core'
+
+export const usersTable = pgTable('users', {
+    id: integer().primaryKey().generatedAlwaysAsIdentity(),
+    socialClub: varchar({ length: 255 }).notNull().unique(),
+    email: varchar({ length: 255 }).notNull().unique(),
+    login: varchar({ length: 255 }).notNull().unique(),
+    password: varchar({ length: 255 }).notNull(),
+})

apps/server/src/index.ts

@@ -1,9 +1,85 @@
 import { fw } from '@entityseven/rage-fw-server'
+import { AuthEvent } from '@shared/events'
 
-import './commands'
+import md5 from 'md5'
 
-fw.event.register('playerJoin', async player => {
+import { eq, or } from 'drizzle-orm'
-    fw.system.log.info(`Connected: ${player.socialClub}`)
 
-    fw.system.log.info(`Response from client: here respionse}`)
+import { usersTable } from './db/schema'
+import { db } from './db'
+
+fw.event.register(AuthEvent.REGISTER, async (player, [data]) => {
+    const { login, email, password } = data
+
+    const normalizedEmail = email.toLowerCase()
+    const normalizedLogin = login.toLowerCase()
+
+    try {
+        const existingUser = await db
+            .select()
+            .from(usersTable)
+            .where(
+                or(
+                    eq(usersTable.login, normalizedLogin),
+                    eq(usersTable.email, normalizedEmail),
+                    eq(usersTable.socialClub, player.socialClub),
+                ),
+            )
+
+        if (existingUser.length > 0) {
+            return 'User already exists'
+        }
+
+        const user: typeof usersTable.$inferInsert = {
+            socialClub: player.socialClub,
+            password: md5(password), // we can use md5 for simplicity, but in production you should use more secure hashing algorithms
+            email: normalizedEmail,
+            login: normalizedLogin,
+        }
+
+        await db.insert(usersTable).values(user)
+    } catch (e) {
+        console.log(e)
+        return 'Something went wrong'
+    }
+
+    console.log('User registered:', player.socialClub)
+
+    return 'User created successfully'
+})
+
+fw.event.register(AuthEvent.LOGIN, async (player, [data]) => {
+    const { login, password } = data
+    const normalizedLogin = login.toLowerCase()
+
+    console.log('Login data', data)
+
+    try {
+        const users = await db
+            .select()
+            .from(usersTable)
+            .where(eq(usersTable.login, normalizedLogin))
+
+        if (users.length === 0) {
+            return 'Invalid credentials'
+        }
+
+        const user = users[0]
+
+        if (user.password !== md5(password)) {
+            return 'Invalid credentials'
+        }
+
+        if (user.socialClub !== player.socialClub) {
+            return 'Invalid credentials'
+        }
+
+        console.log('User logged in:', user, player.socialClub)
+
+        // Auth success
+        return 'Login successful'
+    } catch (e) {
+        console.error('Login error:', e)
+        return 'Internal server error'
+    }
 })

apps/server/tsconfig.json

@@ -4,6 +4,7 @@
     "resolveJsonModule": true,
     "baseUrl": "./src",
     "types": [
+      "node",
       "../../node_modules/@ragempcommunity/types-server/",
       "../shared/declarations/rage-fw-shared-types/"
     ]

apps/shared/declarations/rage-fw-shared-types/index.d.ts

@@ -1,10 +1,17 @@
+import { AuthEvent } from '../../events'
+
 declare module '@entityseven/rage-fw-shared-types' {
     export interface RageFW_ICustomClientEvent {
         customClientEvent(greetings: string): string
     }
 
     export interface RageFW_ICustomServerEvent {
-        customServerEvent(greetings: string): string
+        [AuthEvent.LOGIN](data: { login: string; password: string }): string
+        [AuthEvent.REGISTER](data: {
+            login: string
+            email: string
+            password: string
+        }): string
     }
 
     export interface RageFW_ICustomBrowserEvent {

apps/shared/events/index.ts

@@ -0,0 +1,4 @@
+export enum AuthEvent {
+    LOGIN = 'AuthEvent::LOGIN',
+    REGISTER = 'AuthEvent::REGISTER',
+}

apps/shared/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@shared",
+  "version": "0.1.0",
+  "author": "Entity Seven Group",
+  "license": "CC BY-ND",
+  "description": "Shared types for rage-fw example"
+}

package.json

@@ -1,7 +1,9 @@
 {
   "name": "framework-example",
   "description": "This project is example of RAGE FW usage.",
-  "workspaces": ["apps/*"],
+  "workspaces": [
+    "apps/*"
+  ],
   "scripts": {
     "server:update": "cd server && rage-win64.exe",
     "build:client": "cd apps/client && pnpm build",
@@ -20,5 +22,6 @@
   },
   "author": "Entity Seven Group",
   "license": "MIT",
-  "version": "0.1.0"
+  "version": "0.1.0",
+  "packageManager": "[email protected]+sha512.398035c7bd696d0ba0b10a688ed558285329d27ea994804a52bad9167d8e3a72bcb993f9699585d3ca25779ac64949ef422757a6c31102c12ab932e5cbe5cc92"
 }

server/.env

@@ -0,0 +1,5 @@
+POSTGRES_USER="postgres"
+POSTGRES_PASSWORD="mypassword"
+POSTGRES_DB="postgres"
+
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}"

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["ESNext", "ES2019", "DOM"],
+    "lib": ["ESNext", "DOM"],
     "moduleResolution": "node",
     "module": "ESNext",
     "resolveJsonModule": true,