Aait.web.g7.mikiasmain

web/AAiT-web-group-7/bankdash/app/(directories)/auth/login/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
+import { useState } from "react";
 import { useUserLoginMutation } from "@/redux/api/authentication-controller";
 import { signIn } from "next-auth/react";
 import ErrorMessage from "@/components/Message/ErrorMessage";
@@ -11,9 +13,11 @@ interface FormValues {
 }
 
 const Login = () => {
+  const router = useRouter();
   const [login, { isLoading }] = useUserLoginMutation();
   const { register, handleSubmit, formState } = useForm<FormValues>();
   const { errors } = formState;
+  const [loginErrorMessage, setErrorMessage] = useState("");
   const onSubmit = async (inputData: FormValues) => {
     console.log("inputData", inputData);
 
@@ -25,6 +29,12 @@ const Login = () => {
         callbackUrl: "/",
       });
       console.log("response", response);
+      if (response?.ok) {
+        setErrorMessage("");
+        router.push("/dashboard");
+      } else {
+        setErrorMessage("Invalid Username or password");
+      }
     } catch (error) {
       console.log("error", error);
     }
@@ -72,7 +82,14 @@ const Login = () => {
                   },
                 })}
               />
+              <div>
               <ErrorMessage message={errors.password?.message} />
+              {!errors.password && loginErrorMessage && (
+              <ErrorMessage message={loginErrorMessage} />
+
+            )}
+              </div>
+
             </div>
             <button
               className="bg-[#4640DE] text-white rounded-[80px] px-[24px] py-[12px] w-max-[408px] h-[50px] mt-3"

web/AAiT-web-group-7/bankdash/app/api/auth/[...nextauth]/options.ts

@@ -5,25 +5,19 @@ import { JWT } from "next-auth/jwt";
 
 export const options = {
   secret: process.env.NEXTAUTH_SECRET,
-  // url: process.env.NEXTAUTH_URL,
-
-  //   session: { strategy: "jwt" },
-  // pages: {
-  //   signIn: "/signup",
-  // },
   providers: [
     CredentialsProvider({
       name: "Credentials",
       credentials: {
-        username: {},
+        userName: {},
         password: {},
       },
       async authorize(credentials, req) {
-        const userName = credentials?.username;
+        const userName = credentials?.userName;
         const password = credentials?.password;
         try {
-          const resesponse = await fetch(
-            "https://bank-dashboard-latest.onrender.com//auth/login",
+          const fetchResponse = await fetch(
+            "https://bank-dashboard-aait-latest-sy48.onrender.com/auth/login",
             {
               method: "POST",
               headers: {
@@ -32,11 +26,11 @@ export const options = {
               body: JSON.stringify({ userName, password }),
             }
           );
-          const response = await resesponse.json();
-          console.log("data returned from the server on fetching", response);
-          if (response) {
-            return response;
-          }
+          const responseData = await fetchResponse.json();
+          console.log("data returned from the server on fetching", responseData);
+          if (responseData.success) {
+            return responseData;
+          } 
         } catch (err) {
           console.log("error", err);
         }

web/AAiT-web-group-7/bankdash/components/SignUp/SignUpLayout.tsx

@@ -10,6 +10,7 @@ import { Currencies } from "@/components/constants/currency";
 import { timezones } from "@/components/constants/timezones";
 import { CountryData } from "@/components/constants/countries";
 import { useUserRegistrationMutation } from "@/redux/api/authentication-controller";
+import { useRouter } from "next/navigation";
 
 interface prefData {
   timezone: string;
@@ -30,16 +31,17 @@ interface FormData {
   PresentAddress: string;
   City: string;
   Country: string;
-  profilePicture: File;
+  profilePicture: string;
 }
 
 const PageLayout = () => {
+  const route=useRouter();
   const [registerUser] = useUserRegistrationMutation();
   const [activeButton, setActiveButton] = useState("edit");
   const [profileImage, setProfileImage] = useState<File | null>(null);
 
   const form = useForm<FormData>();
-  const { register, handleSubmit, formState, setValue,getValues } = form;
+  const { register, handleSubmit, formState, setValue, getValues } = form;
 
   const {
     control,
@@ -68,7 +70,7 @@ const PageLayout = () => {
     console.log("All Form Values:", allValues);
 
     try {
-      const { data, error } = await registerUser({
+      const { data, success } = await registerUser({
         name: allValues.Name,
         email: allValues.Email,
         dateOfBirth: allValues.DOT,
@@ -80,15 +82,23 @@ const PageLayout = () => {
         city: allValues.City,
         country: allValues.Country,
         profilePicture: allValues.profilePicture,
-        currency: formData.currency,
-        sentOrReceiveDigitalCurrency: formData.transaction,
-        receiveMerchantOrder: formData.merchant,
-        accountRecommendations: formData.recommendation,
-        timeZone: formData.timezone,
-        twoFactorAuthentication: formData.recommendation,
+        preference: {
+          currency: formData.currency,
+          sentOrReceiveDigitalCurrency: formData.transaction,
+          receiveMerchantOrder: formData.merchant,
+          accountRecommendations: formData.recommendation,
+          timeZone: formData.timezone,
+          twoFactorAuthentication: formData.recommendation,
+        },
       }).unwrap();
+      if (success) {
+        console.log("response from server upon registration", data);
+        route.push("/auth/login");
+      }
 
-      console.log("response from server upon registration", data);
+      else {
+        console.log("error from server upon registration");
+      }
     } catch (error) {
       console.log("error from server upon registration");
     }
@@ -102,11 +112,10 @@ const PageLayout = () => {
 
     if (file) {
       setProfileImage(file);
-      setValue("profilePicture", file);
+      setValue("profilePicture", file.name);
     }
   };
 
-
   return (
     <div className="px-5 py-5 flex justify-center">
       <div className="flex flex-col rounded-3xl w-fill px-10  bg-white ">

web/AAiT-web-group-7/bankdash/components/settings/EditProfile/page.tsx

@@ -15,10 +15,11 @@ type Form = {
   PresentAddress: string;
   City: string;
   Country: string;
+  profileImage: string;
 };
 const EditProfile = () => {
   const form = useForm<Form>();
-  const { register, handleSubmit, formState } = form;
+  const { register, handleSubmit, formState,setValue } = form;
   const { errors } = formState;
   const onSubmit = (data: Form) => {
     console.log(data);
@@ -38,6 +39,8 @@ const EditProfile = () => {
 
     if (file) {
       setProfileImage(file);
+      setValue("profileImage", file.name)
+
     }
   };
   return (

web/AAiT-web-group-7/bankdash/components/settings/Preferences/page.tsx

@@ -1,26 +1,37 @@
 "use client";
 import React, { useState } from "react";
 import { Switch } from "@/components/ui/switch";
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import ErrorMessage from "@/components/Message/ErrorMessage";
 import { Currencies } from "@/components/constants/currency";
 import { timezones } from "@/components/constants/timezones";
 interface FormData {
   timezone: string;
   currency: string;
+  transaction: boolean;
+  merchant: boolean;
+  recommendation: boolean;
+  twoFactorAuth: boolean;
 }
 
 const PrefPage = () => {
-  const form = useForm<FormData>();
-  const { register, handleSubmit, formState } = form;
+  const form = useForm<FormData>({
+    defaultValues: {
+      currency: "",
+      timezone: "",
+      transaction: false,
+      merchant: false,
+      recommendation: false,
+      twoFactorAuth: false,
+    },
+  });
+  const { control, handleSubmit, formState } = form;
   const { errors } = formState;
 
   const onsubmit = (data: FormData) => {
     console.log(data);
   };
 
-
-
   return (
     <form
       onSubmit={handleSubmit(onsubmit)}
@@ -29,56 +40,89 @@ const PrefPage = () => {
       <div className="flex justify-between">
         <div className="flex flex-col gap-3">
           <div className="text-[#232323]">Currency</div>
-          <select
-            className="text-[#718EBF] rounded-xl w-[510px]  border border-[#DFEAF2] py-3 px-5"
-            {...register("currency", {
-              required: {
-                value: true,
-                message: "Select a currency",
-              },
-            })}
-          >
-            <option value="">Select a currency</option>
-            {Currencies.map((currency) => (
-              <option value={currency.value}>{currency.label}</option>
-            ))}
-          </select>
+          <Controller
+            name="currency"
+            control={control}
+            rules={{ required: "Select a currency" }}
+            render={({ field }) => (
+              <select
+                {...field}
+                className="text-[#718EBF] rounded-xl w-[510px] border border-[#DFEAF2] py-3 px-5"
+              >
+                <option value="">Select a currency</option>
+                {Currencies.map((currency) => (
+                  <option key={currency.value} value={currency.value}>
+                    {currency.label}
+                  </option>
+                ))}
+              </select>
+            )}
+          />
+
           <ErrorMessage message={errors.currency?.message} />
         </div>
         <div className="flex flex-col gap-3">
           <div className="text-[#232323]">Time Zone</div>
 
-          <select
-            className="text-[#718EBF] rounded-xl w-[510px]  border border-[#DFEAF2] py-3 px-5"
-            {...register("timezone", {
-              required: {
-                value: true,
-                message: "Select a timezone",
-              },
-            })}
-          >
-            <option value="">Select a currency</option>
-                  {timezones.map((time) => (
-                    <option value={time.offset}>{`(${
-                      time.offset === 0 ? "GMT" : time.offset > 0 ? "GMT+" : "GMT-"
-                    }${Math.abs(time.offset)>0 ? Math.abs(time.offset) : ""}) ${time.name}`}</option>
-                  ))}
-          </select>
+          <Controller
+            name="timezone"
+            control={control}
+            rules={{ required: "Select a timezone" }}
+            render={({ field }) => (
+              <select
+                {...field}
+                className="text-[#718EBF] rounded-xl w-[510px] border border-[#DFEAF2] py-3 px-5"
+              >
+                <option value="">Select a timezone</option>
+                {timezones.map((time) => (
+                  <option key={time.name} value={time.offset}>
+                    {`(${
+                      time.offset === 0
+                        ? "GMT"
+                        : time.offset > 0
+                        ? "GMT+"
+                        : "GMT-"
+                    }${
+                      Math.abs(time.offset) > 0 ? Math.abs(time.offset) : ""
+                    }) ${time.name}`}
+                  </option>
+                ))}
+              </select>
+            )}
+          />
           <ErrorMessage message={errors.timezone?.message} />
         </div>
       </div>
       <div className="flex flex-col gap-5">
         <div className="font-semibold">Notification</div>
         <div className="flex items-center gap-4">
-          <Switch />
+          <Controller
+            name="transaction"
+            control={control}
+            render={({ field }) => (
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            )}
+          />
           <div>I send or receive digita currency</div>
         </div>
         <div className="flex items-center gap-4">
-          <Switch />
+          <Controller
+            name="merchant"
+            control={control}
+            render={({ field }) => (
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            )}
+          />
           <div>I receive merchant order</div>
         </div>
         <div className="flex items-center gap-4">
-          <Switch className="bg-[#16DBCC]" />
+          <Controller
+            name="recommendation"
+            control={control}
+            render={({ field }) => (
+              <Switch checked={field.value} onCheckedChange={field.onChange} />
+            )}
+          />
           <div>There are recommendation for my account</div>
         </div>
       </div>