Improved form handling with verifying data

2026-08-29 17:28:53 +00:00 · 2018-04-15 18:42:08 +02:00
parent 76e2637419
commit e5f69f3362
6 changed files with 150 additions and 57 deletions
@@ -11,7 +11,7 @@ client_script 'client/main.lua'
 server_scripts {
 	"@mysql-async/lib/MySQL.lua",
 	"@es_extended/locale.lua",
-	"server/main.lua",
+	"server/main.lua"
 }

 ui_page 'html/index.html'
@@ -20,5 +20,5 @@ files {
 	'html/index.html',
 	'html/script.js',
 	'html/style.css',
-	'html/cursor.png',
+	'html/cursor.png'
 }
@@ -1,5 +1,13 @@
 local guiEnabled = false
 local myIdentity = {}
+ESX = nil
+
+Citizen.CreateThread(function()
+	while ESX == nil do
+		TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
+		Citizen.Wait(0)
+	end
+end)

 function EnableGui(enable)
 	SetNuiFocus(enable)
@@ -21,11 +29,42 @@ RegisterNUICallback('escape', function(data, cb)
 end)

 RegisterNUICallback('register', function(data, cb)
+	local reason = ""
 	myIdentity = data
-	TriggerServerEvent('esx_identity:setIdentity', data)
-	EnableGui(false)
-	Citizen.Wait(500)
-	TriggerEvent('esx_skin:openSaveableMenu')
+	for theData, value in pairs(myIdentity) do
+		if theData == "firstname" or theData == "lastname" then
+			reason = verifyName(value)
+			
+			if reason ~= "" then
+				break
+			end
+		elseif theData == "dateofbirth" then
+			if value == "invalid" then
+				reason = "Invalid date of birth!"
+				break
+			end
+		elseif theData == "height" then
+			local height = tonumber(value)
+			if height then
+				if height > 200 or height < 140 then
+					reason = "Unacceptable player height!"
+					break
+				end
+			else
+				reason = "Unacceptable player height!"
+				break
+			end
+		end
+	end
+	
+	if reason == "" then
+		--TriggerServerEvent('esx_identity:setIdentity', data)
+		EnableGui(false)
+		Citizen.Wait(500)
+		--TriggerEvent('esx_skin:openSaveableMenu')
+	else
+		ESX.ShowNotification(reason)
+	end
 end)

 Citizen.CreateThread(function()
@@ -44,3 +83,47 @@ Citizen.CreateThread(function()
 		Citizen.Wait(10)
 	end
 end)
+
+function verifyName(name)
+	-- Don't allow short user names
+	local nameLength = string.len(name)
+	if nameLength > 25 or nameLength < 5 then
+		return 'Your player name is either too short or too long.'
+	end
+	
+	-- Don't allow special characters (doesn't always work)
+	local count = 0
+	for i in name:gmatch('[abcdefghijklmnopqrstuvwxyzåäöABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ0123456789 -]') do
+		count = count + 1
+	end
+	if count ~= nameLength then
+		return 'Your player name contains special characters that are not allowed on this server.'
+	end
+	
+	-- Does the player carry a first and last name?
+	-- 
+	-- Example:
+	-- Allowed:     'Bob Joe'
+	-- Not allowed: 'Bob'
+	-- Not allowed: 'Bob joe'
+	local spacesInName    = 0
+	local spacesWithUpper = 0
+	for word in string.gmatch(name, '%S+') do
+	
+		if string.match(word, '%u') then
+			spacesWithUpper = spacesWithUpper + 1
+		end
+	
+		spacesInName = spacesInName + 1
+	end
+	
+	if spacesInName > 2 then
+		return 'Your name contains more than two spaces'
+	end
+	
+	if spacesWithUpper ~= spacesInName then
+		return 'your name must start with a capital letter.'
+	end
+	
+	return ''
+end
@@ -1,8 +1,6 @@
-<!DOCTYPE html>
 <html>
-
 	<head>
-		<meta charset="UTF-8">
+		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
 		<link href="style.css" rel="stylesheet" type="text/css" />
 	</head>

@@ -14,9 +12,9 @@
 				<input id="firstname" type="text" placeholder="First name"><br>
 				<input id="lastname" type="text" placeholder="Last name"><br>
 				<input id="dateofbirth" type="text" placeholder="Date of Birth (YYYY-MM-DD)"><br>
-				<input id="height" type="text" placeholder="Height (48-96)"><br><center>
-				<input id="male" type="radio" name="sex" value="male">Male
- 				<input id="female" type="radio" name="sex" value="female">Female<br></center>
+				<input id="height" type="text" placeholder="Height (140-200 cm)"><br><center>
+				<input type="radio" name="sex" value="m" checked>Male
+				<input type="radio" name="sex" value="f">Female<br></center>
 				<button id="submit" type="submit">Create</button>
 			</form>
 		</div>
@@ -6,47 +6,53 @@ var cursorX = documentWidth / 2;
 var cursorY = documentHeight / 2;

 function UpdateCursorPos() {
-    cursor.style.left = cursorX;
-    cursor.style.top = cursorY;
+	cursor.style.left = cursorX;
+	cursor.style.top = cursorY;
 }

 function Click(x, y) {
-    var element = $(document.elementFromPoint(x, y));
-    element.focus().click();
+	var element = $(document.elementFromPoint(x, y));
+	element.focus().click();
 }

 $(function() {
-    window.addEventListener('message', function(event) {
-        if (event.data.type == "enableui") {
-            cursor.style.display = event.data.enable ? "block" : "none";
-            document.body.style.display = event.data.enable ? "block" : "none";
-        } else if (event.data.type == "click") {
-            // Avoid clicking the cursor itself, click 1px to the top/left;
-            Click(cursorX - 1, cursorY - 1);
-        }
-    });
+	window.addEventListener('message', function(event) {
+		if (event.data.type == "enableui") {
+			cursor.style.display = event.data.enable ? "block" : "none";
+			document.body.style.display = event.data.enable ? "block" : "none";
+		} else if (event.data.type == "click") {
+			// Avoid clicking the cursor itself, click 1px to the top/left;
+			Click(cursorX - 1, cursorY - 1);
+		}
+	});

-    $(document).mousemove(function(event) {
-        cursorX = event.pageX;
-        cursorY = event.pageY;
-        UpdateCursorPos();
-    });
+	$(document).mousemove(function(event) {
+		cursorX = event.pageX;
+		cursorY = event.pageY;
+		UpdateCursorPos();
+	});

-    document.onkeyup = function (data) {
-        if (data.which == 27) { // Escape key
-            $.post('http://esx_identity/escape', JSON.stringify({}));
-        }
-    };
+	document.onkeyup = function (data) {
+		if (data.which == 27) { // Escape key
+			$.post('http://esx_identity/escape', JSON.stringify({}));
+		}
+	};
 	
-    $("#register").submit(function(e) {
-        e.preventDefault(); // Prevent form from submitting
-        
-        $.post('http://esx_identity/register', JSON.stringify({
-            firstname: $("#firstname").val(),
-            lastname: $("#lastname").val(),
-            dateofbirth: $("#dateofbirth").val(),
-            sex: $("#sex").val(),
-            height: $("#height").val()
-        }));
-    });
+	$("#register").submit(function(e) {
+		e.preventDefault(); // Prevent form from submitting
+		
+		// Verify date
+		var date = $("#dateofbirth").val();
+		var dateCheck = new Date($("#dateofbirth").val());
+		if (dateCheck == "Invalid Date") {
+			date == "invalid";
+		}
+		$.post('http://esx_identity/register', JSON.stringify({
+			firstname: $("#firstname").val(),
+			lastname: $("#lastname").val(),
+			dateofbirth: date,
+			sex: $("input[type='radio'][name='sex']:checked").val(),
+			height: $("#height").val()
+		}));
+	});
 });
@@ -4,6 +4,13 @@
 	display: none;
 }

+/* Required */
+body {
+	font-family: sans-serif;
+	overflow: hidden;
+	display: none;
+}
+
 .dialog {
 	width: 300px;
 	position: absolute;
@@ -13,15 +20,13 @@
 	right: 0;
 	padding: 10px;
 	box-shadow: 0px 0px 50px 0px #000;
+	background-color: #f1f1f1;
 	overflow: hidden;
-}
-
-form {
-	margin: 0;
+	opacity: 0.9;
 }

 input[type=text] {
-	width: 93%;
+	width: 100%;
 	padding: 7px;
 	text-align: center;
 }
@@ -133,7 +133,7 @@ function setIdentity(identifier, data, callback)
      ['@firstname']    = data.firstname,
      ['@lastname']     = data.lastname,
      ['@dateofbirth']  = data.dateofbirth,
-      ['@sex']        = data.sex,
+      ['@sex']          = data.sex,
      ['@height']       = data.height
    },
  function(done)
@@ -203,6 +203,7 @@ end)
 AddEventHandler('es:playerLoaded', function(source)
  getIdentity(source, function(data)
    if data.firstname == '' then
+		print('do not register!')
      TriggerClientEvent('esx_identity:showRegisterIdentity', source)
    else
      print('Successfully Loaded Identity For ' .. data.firstname .. ' ' .. data.lastname)
@@ -220,16 +221,16 @@ end, function(source, args, user)
  TriggerClientEvent('chatMessage', source, "IDHelp", {255, 0, 0}, "Insufficienct permissions!")
 end, {help = "List Your Characters"})

-
 TriggerEvent('es:addCommand', 'register', function(source, args, user)
+
  getCharacters(source, function(data)
    if data.firstname3 ~= '' then
      TriggerClientEvent('chatMessage', source, 'REGISTER', {255, 0, 0}, "You Can Only Have 3 Characters.")
    else
-      TriggerClientEvent('esx_identity:showRegisterIdentity', source, {})
+      TriggerClientEvent('esx_identity:showRegisterIdentity', source)
    end
  end)
-end)
+end, {help = "Register a new character"})

 TriggerEvent('es:addGroupCommand', 'char', "user", function(source, args, user)
  getIdentity(source, function(data)
@@ -241,7 +242,7 @@ TriggerEvent('es:addGroupCommand', 'char', "user", function(source, args, user)
  end)
 end, function(source, args, user)
  TriggerClientEvent('chatMessage', source, "SYSTEM", {255, 0, 0}, "Insufficienct permissions!")
-end, {help = "List Your Current Active Character"})
+end, {help = "List your current character"})

 TriggerEvent('es:addGroupCommand', 'charlist', "user", function(source, args, user)
  getCharacters(source, function(data)
@@ -403,4 +404,4 @@ TriggerEvent('es:addCommand', 'delchar', function(source, args, user)
      TriggerClientEvent('chatMessage', source, "DELCHAR", {255, 0, 0}, "Failed To Delete Identity!")
    end
  end)
-end)
+end, {help = "Delete your character"})