fix: 404 error

2025-06-25 16:12:09 +05:30
parent 0420c72aa7
commit 2e90465c89
4 changed files with 202 additions and 143 deletions
--- a/src/app/registration/page.tsx
+++ b/src/app/registration/page.tsx
@@ -0,0 +1,125 @@
+"use client"
+import { useState } from 'react';
+import {
+  TextInput, PasswordInput, Button, Group, Box, Radio, Text, Paper,
+  Title, Stack, Alert,
+} from '@mantine/core';
+import { Providers } from "@/app/providers"
+
+export default function Register() {
+  const [cif, setCif] = useState('');
+  const [otp, setOtp] = useState('');
+  const [enteredOtp, setEnteredOtp] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [tpin, setTpin] = useState('');
+  const [confirmTpin, setConfirmTpin] = useState('');
+  const [errors, setErrors] = useState<string[]>([]);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = () => {
+    const newErrors: string[] = [];
+
+    // CIF validation
+    if (!/^\d{10}$/.test(cif)) {
+      newErrors.push('CIF should be exactly 10 numeric digits.');
+    }
+
+    // OTP validation
+    if (otp !== enteredOtp) {
+      newErrors.push('OTP does not match.');
+    }
+
+    // Password validation
+    const strongPassword = /^(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
+    if (!strongPassword.test(password) || password !== confirmPassword) {
+      newErrors.push('Password must be strong and confirmed.');
+    }
+
+    // TPIN validation
+    if (!strongPassword.test(tpin) || tpin !== confirmTpin) {
+      newErrors.push('TPIN must be strong and confirmed.');
+    }
+
+    if (newErrors.length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+
+    setErrors([]);
+    setMessage('Login Successfully ✅');
+  };
+
+  return (
+    <Providers>
+      <Box maw={600} mx="auto" p="md">
+        <Title order={2} align="center" mb="md">Internet Banking Registration</Title>
+        <Paper shadow="xs" p="md">
+          <Stack spacing="sm">
+            <TextInput
+              label="CIF Number"
+              placeholder="Enter 10-digit CIF"
+              value={cif}
+              onChange={(e) => setCif(e.target.value)}
+            />
+
+            <Group grow>
+              <TextInput
+                label="OTP Sent"
+                value={otp}
+                onChange={(e) => setOtp(e.target.value)}
+              />
+              <TextInput
+                label="Enter OTP"
+                value={enteredOtp}
+                onChange={(e) => setEnteredOtp(e.target.value)}
+              />
+            </Group>
+
+            <Group grow>
+              <PasswordInput
+                label="Login Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <PasswordInput
+                label="Confirm Password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+            </Group>
+
+            <Group grow>
+              <PasswordInput
+                label="T-PIN"
+                value={tpin}
+                onChange={(e) => setTpin(e.target.value)}
+              />
+              <PasswordInput
+                label="Confirm T-PIN"
+                value={confirmTpin}
+                onChange={(e) => setConfirmTpin(e.target.value)}
+              />
+            </Group>
+
+            {errors.length > 0 && (
+              <Alert color="red" title="Errors" mt="sm">
+                {errors.map((err, index) => (
+                  <Text key={index} color="red" size="sm">{err}</Text>
+                ))}
+              </Alert>
+            )}
+
+            {message && (
+              <Alert color="green" mt="sm">
+                {message}
+              </Alert>
+            )}
+
+            <Button fullWidth onClick={handleSubmit}>Process</Button>
+          </Stack>
+        </Paper>
+      </Box>
+    </Providers>
+  );
+}