mirror of
https://gitlab.com/sarlink/kyc.git
synced 2025-07-30 01:12:49 +00:00
[feat] Form input page and validation
This commit is contained in:
2209
src/public/styles.css
Normal file
2209
src/public/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
3
src/styles/input.css
Normal file
3
src/styles/input.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
20
src/views/closed.ejs
Normal file
20
src/views/closed.ejs
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%- branding.title %> - KYC</title>
|
||||
<link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/public/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex h-[100vh] w-[100vw] items-center justify-center">
|
||||
<div class="card w-96 bg-base-100 shadow-xl image-full">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Registration Closed</h2>
|
||||
<p>Adding new devices is currently disabled.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
337
src/views/index.ejs
Normal file
337
src/views/index.ejs
Normal file
@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%- branding.title %> - KYC</title>
|
||||
<link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/public/styles.css" />
|
||||
<script>
|
||||
const blacklistedChars = /\s/g;
|
||||
|
||||
function fillDeviceName() {
|
||||
let deviceType = "";
|
||||
const macAddress = document.getElementById("mac_address").value;
|
||||
// now we find out which format it is
|
||||
// 35:df:61 = customerfirstname-android
|
||||
// 3A-DF-61 = customerfirstname-laptop
|
||||
// 3A:DF:61 = customerfirstname-iphone
|
||||
const macAddressRegex = new RegExp(
|
||||
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
|
||||
);
|
||||
if (macAddress === macAddress.toLowerCase()) {
|
||||
deviceType = "android";
|
||||
} else if (macAddress === macAddress.replace(/:/g, "-")) {
|
||||
deviceType = "laptop";
|
||||
} else if (macAddress === macAddress.toUpperCase()) {
|
||||
deviceType = "iphone";
|
||||
} else {
|
||||
deviceType = "phone";
|
||||
}
|
||||
|
||||
const fullName = document.getElementById("customer_name").value;
|
||||
const firstName = fullName.split(" ")[0];
|
||||
const deviceName = `${firstName}-${deviceType}`.toLowerCase();
|
||||
|
||||
const deviceNameInput = document.getElementById("device_name");
|
||||
if (!deviceNameInput.value) deviceNameInput.value = deviceName;
|
||||
}
|
||||
|
||||
function validateMACAddress() {
|
||||
var macAddress = document.getElementById("mac_address");
|
||||
var macAddressRegex = new RegExp(
|
||||
/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
|
||||
);
|
||||
const macAddressValue = macAddress.value;
|
||||
macAddress.setCustomValidity("");
|
||||
macAddress.classList.remove("input-error");
|
||||
macAddress.classList.remove("input-success");
|
||||
if (!macAddressRegex.test(macAddressValue)) {
|
||||
macAddress.classList.add("input-error");
|
||||
macAddress.setCustomValidity("Invalid MAC Address");
|
||||
macAddress.reportValidity();
|
||||
return false;
|
||||
}
|
||||
macAddress.classList.add("input-success");
|
||||
macAddress.reportValidity();
|
||||
fillDeviceName();
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const macAddressValid = validateMACAddress();
|
||||
const customerName = document.getElementById("customer_name");
|
||||
customerName.classList.remove("input-error");
|
||||
// customerName.setCustomValidity("");
|
||||
const deviceName = document.getElementById("device_name");
|
||||
deviceName.classList.remove("input-error");
|
||||
// deviceName.setCustomValidity("");
|
||||
const transferReceipt = document.getElementById("transfer_receipt");
|
||||
transferReceipt.classList.remove("input-error");
|
||||
// transferReceipt.setCustomValidity("");
|
||||
|
||||
if (customerName.value === "") {
|
||||
customerName.classList.add("input-error");
|
||||
// customerName.setCustomValidity("Customer Name is required");
|
||||
// customerName.reportValidity();
|
||||
}
|
||||
|
||||
if (deviceName.value === "") {
|
||||
deviceName.classList.add("input-error");
|
||||
// deviceName.setCustomValidity("Device Name is required");
|
||||
// deviceName.reportValidity();
|
||||
}
|
||||
|
||||
if (transferReceipt.files.length === 0) {
|
||||
transferReceipt.classList.add("input-error");
|
||||
// transferReceipt.setCustomValidity("Transfer Receipt is required");
|
||||
// transferReceipt.reportValidity();
|
||||
}
|
||||
|
||||
return (
|
||||
macAddressValid &&
|
||||
customerName.value !== "" &&
|
||||
deviceName.value !== "" &&
|
||||
transferReceipt.files.length > 0
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar bg-base-300">
|
||||
<button class="btn btn-ghost text-xl">
|
||||
<img class="w-10 rounded" src="<%- branding.logo %>" />
|
||||
<%- branding.title %>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<form class="flex justify-center" action="/register" method="post">
|
||||
<div class="w-[80vw]">
|
||||
<div class="join-horizontal mt-8">
|
||||
<div class="join-vertical justify-center">
|
||||
<h1 class="text-3xl font-bold">KYC</h1>
|
||||
<p class="text-base">
|
||||
Please fill in the form to complete your KYC
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>Customer Name</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="customer_name"
|
||||
name="customer_name"
|
||||
placeholder="John Doe"
|
||||
class="input input-bordered"
|
||||
onchange="validateForm()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>MAC Address</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="mac_address"
|
||||
id="mac_address"
|
||||
placeholder="00-00-00-00-00-00"
|
||||
class="input input-bordered"
|
||||
onchange="validateForm()"
|
||||
oninput="validateMACAddress()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="collapse bg-base-200">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
How do I find my MAC Address?
|
||||
</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<p>
|
||||
A MAC (Media Access Control) address is a unique identifier
|
||||
assigned to a device's network. It is used to identify the
|
||||
device on a network, helping to differentiate devices on a
|
||||
network.
|
||||
</p>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="my-accordion-1"
|
||||
checked="checked"
|
||||
/>
|
||||
<div class="collapse-title text-xl font-medium">iPhone</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<div class="overflow-x-auto text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>Settings</li>
|
||||
<li>General</li>
|
||||
<li>About</li>
|
||||
<li>Wi-Fi Address</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="checkbox" name="my-accordion-1" />
|
||||
<div class="collapse-title text-xl font-medium">Redmi</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<div class="overflow-x-auto text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>Settings</li>
|
||||
<li>About</li>
|
||||
<li>Wi-Fi MAC Address</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="checkbox" name="my-accordion-1" />
|
||||
<div class="collapse-title text-xl font-medium">Samsung</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<div class="overflow-x-auto text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>Settings</li>
|
||||
<li>About phone</li>
|
||||
<li>Status Information</li>
|
||||
<li>Wi-Fi MAC Address</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="checkbox" name="my-accordion-1" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Windows Laptop
|
||||
</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<div class="overflow-x-auto text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>Settings</li>
|
||||
<li>Network and Internet</li>
|
||||
<li>Wi-Fi</li>
|
||||
<li>Hardware Properties</li>
|
||||
<li>Physical address (MAC):</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse collapse-arrow bg-base-200">
|
||||
<input type="checkbox" name="my-accordion-1" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Other Device
|
||||
</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
Please contact <%- branding.title %> for assistance.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>Device Name</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="device_name"
|
||||
name="device_name"
|
||||
placeholder="iphone-12"
|
||||
class="input input-bordered"
|
||||
onchange="validateForm()"
|
||||
oninput="this.value =
|
||||
this.value.toLowerCase().replace(blacklistedChars, '-');"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class="collapse bg-base-200">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Transfer Details
|
||||
</div>
|
||||
<div class="collapse-content overflow-x-auto">
|
||||
<p>
|
||||
Please transfer MVR 100 to the following account and upload
|
||||
the receipt below.
|
||||
</p>
|
||||
<br />
|
||||
<div class="overflow-x-auto text-sm">
|
||||
<ul>
|
||||
<li>Bank: <%- branding.bankDetails.name %></li>
|
||||
<li>
|
||||
Account Number: <%- branding.bankDetails.accountNumber %>
|
||||
</li>
|
||||
<li>
|
||||
Account Name: <%- branding.bankDetails.accountName %>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-block btn-info"
|
||||
onclick="navigator.clipboard.writeText('<%- branding.bankDetails.accountNumber %>')"
|
||||
>
|
||||
Copy Account Number
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="collapse bg-base-200">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
How to transfer from BML to MIB?
|
||||
</div>
|
||||
<div class="collapse-content"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="join-vertical">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-bold text-lg text-base-content"
|
||||
>Transfer Receipt</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="transfer_receipt"
|
||||
name="transfer_receipt"
|
||||
class="file-input file-input-bordered w-full max-w-xs"
|
||||
accept="image/*"
|
||||
onchange="validateForm()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<button
|
||||
class="btn btn-info btn-block"
|
||||
onclick="if (!validateForm()) event.preventDefault()"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<footer>
|
||||
<div style="height: 10em"></div>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
25
src/views/success.ejs
Normal file
25
src/views/success.ejs
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%- branding.title %> - KYC</title>
|
||||
<link rel="shortcut icon" href="<%- branding.logo %>" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/public/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="flex h-[100vh] w-[100vw] items-center justify-center">
|
||||
<div
|
||||
class="card w-96 bg-base-100 shadow-xl bg-primary text-primary-content"
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Success</h2>
|
||||
<p>
|
||||
Your request has been sent to the owner! Please wait until access is
|
||||
granted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user