fix: 404 error

src/app/_components/user-context.tsx

@@ -1,45 +0,0 @@
-
-"use client"
-import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import User from "../_types/accountNo";
-import axios, { AxiosError } from "axios";
-import { notifications } from "@mantine/notifications";
-
-
-async function queryUser() {
-    let user: User | null = null;
-    
-    try {
-        const response = await axios.get<User>('/api/user');
-        user = response.data;
-    } catch (error: AxiosError | any) {
-        notifications.show({
-            color: 'red',
-            title: error.code,
-            message: error.message
-        })
-    }
-    return user;
-}
-
-const UserContext = React.createContext<User | null | undefined>(undefined);
-
-function UserContextProvider({ children }: { children: React.ReactNode }) {
-
-    const userQuery = useQuery({
-        queryKey: ['user'],
-        queryFn: queryUser,
-        networkMode: 'always',
-    });
-
-    return (
-        <UserContext.Provider value={userQuery.data}>
-            {children}
-        </UserContext.Provider>
-    )
-}
-
-const UserContextConsumer = UserContext.Consumer;
-
-export { UserContext, UserContextProvider, UserContextConsumer }

src/app/providers.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { UserContextProvider } from './_components/user-context';
 import { MantineProvider } from '@mantine/core';
 import { KccbTheme } from './_themes/KccbTheme';
 import { Notifications } from '@mantine/notifications';
@@ -11,11 +10,11 @@ const queryClient = new QueryClient();
 export function Providers({ children }: { children: React.ReactNode }) {
     return (
         <MantineProvider theme={KccbTheme} defaultColorScheme='light'>
-            <Notifications   position='top-center' />
+            <Notifications position='top-center' />
             <QueryClientProvider client={queryClient}>
-                <UserContextProvider>
-                {children}   
-                </UserContextProvider>
+                {/* <UserContextProvider> */}
+                {children}
+                {/* </UserContextProvider> */}
             </QueryClientProvider>
         </MantineProvider>
     )

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>
+  );
+}