Added login and warranty along with toaster

dist/Js/auth/apiservice.js

@@ -1,12 +1,26 @@
-let SERVERNAME = 'https://anwi.bizgaze.app';
-const STAT = '05b2f2ca510344968c65e1ebf49a5595';
-
+// let SERVERNAME = 'https://anwi.bizgaze.app';
+let SERVERNAME = 'https://beta.bizgaze.app';
+//let SERVERNAME = 'http://localhost:3088';
+const STAT = 'b276960fddf84e8cb63de6e32d31529b';
+async function getStatAPIService(url,data={}){
+    let config = {
+        url,
+        method:'get',
+        data:data,
+        headers: {
+            'Authorization': `stat ${STAT}`,
+            'Content-Type': 'application/json'
+        },
+    }
+    let response = await axios(config);
 
+    return response;
+}
 
 async function postStatAPIService(url,data={}){
     let config = {
         url,
-        method:'get',
+        method:'post',
         data:data,
         headers: {
             'Authorization': `stat ${STAT}`,
@@ -17,3 +31,290 @@ async function postStatAPIService(url,data={}){
 
     return response;
 }
+
+
+async function postAPIServiceWarranty(url,data={}){
+    let SERVERURL = 'https://anwi.bizgaze.app';
+    let config = {
+        url:`${SERVERURL}/${url}`,
+        method:'post',
+        data:data,
+        headers: {
+            'Authorization': `Basic 6cdcfe22-1623-4740-97e0-363d518c0e8a`,
+            'Content-Type': 'application/json'
+        },
+    }
+    let response = await axios(config);
+
+    return response;
+}
+async function postAPIService(url,data={}){
+     let SERVERURL = 'https://beta.bizgaze.app';
+    //let SERVERURL = 'http://localhost:3088';
+    let config = {
+        url:`${SERVERURL}/${url}`,
+        method:'post',
+        data:data,
+    }
+    let response = await axios(config);
+
+    return response;
+}
+
+
+async function postAPIServiceLocal(url,data={}){
+    let config = {
+      url:`${SERVERNAME}/${url}`,
+        method:'post',
+        data:JSON.stringify(data),
+        headers: {
+            'Authorization': `Basic c86af480-b5ef-43af-8ce9-503e5b831e2e`,
+            'Content-Type': 'application/json'
+        },
+    }
+    let response = await axios(config);
+
+    return response;
+}
+async function getAPIServiceLocal(url){
+    let SERVERURL = 'https://anwi.bizgaze.app';
+    let config = {
+      url:`${SERVERURL}/${url}`,
+        method:'get',
+        headers: {
+            'Authorization': `Basic ed40b74d-561a-47af-b03b-4f29c5ff6937`,
+            'Content-Type': 'application/json'
+        },
+    }
+    let response = await axios(config);
+
+    return response;
+}
+
+
+class API_SERVICE_CLASS{
+    baseURL = '';
+    token='';
+    statToken=STAT;
+    Instance = null;
+    
+    constructor(baseurl){
+        this.Instance = this;
+        this.baseURL = baseurl;
+
+        this.getService = this.getService.bind(this);
+        this.postService = this.postService.bind(this);
+        this.justGetAPIService =this.justGetAPIService.bind(this);
+        this.justPostAPIService = this.justPostAPIService.bind(this);
+        
+    }
+
+    getService(url,isStat = false){
+       return this.baseService(this.buildURL(url),'get',isStat);
+    }
+
+    postService(url,data,isStat = false){
+        return this.baseService(this.buildURL(url),'post',isStat,data);
+    }
+
+    
+
+    async baseService(url,method,isStat,data){
+        let isPost = method == 'get' ? false : true;
+        const cookieData = COOKIE_HELPER_ACTIONS.getCookie();
+       if(!isStat){
+        if(!cookieData) return window.location.href = "/"
+       }
+        let token = isStat ?`stat ${this.statToken}` : `Basic ${cookieData.token}`;
+        // let token = isStat ?`stat ${this.statToken}` : `Basic ${this.token}`;
+        let successResFun = this.buildSuccessResponse;
+        let failureResFun = this.buildFailureResponse;
+        let config = {
+            url,
+            method,
+            headers:{
+               'Authorization': token,
+               'Content-Type': 'application/json'
+            }
+        }
+
+        if(isPost){
+            config['data'] = data;
+        }
+
+        try {
+            let response 
+           try {
+            response = await axios(config);
+            if(response.data === true || response.data === false){
+                return successResFun(response.data)
+            }
+            if(response.data.code == '417'){
+                window.location.href = '/index.html'
+                return failureResFun(response.data)
+            }
+            if(response.data.code != '0'){
+                return failureResFun(response.data)
+            }
+            return successResFun(response.data)
+            
+           } catch (error) {
+            return failureResFun(error)
+           }
+            
+        } catch (error) {
+            return failureResFun(error)
+        }
+
+    }
+
+
+    buildURL(url){
+        return `${this.baseURL}/${url}`;
+    }
+
+    buildSuccessResponse(response){
+        return {
+            isError : false,
+            errorMsg : null,
+            response:response,
+        }
+    }
+
+    buildFailureResponse(error){
+        return {
+            isError : true,
+            errorMsg : error,
+            response:null,
+        }
+    }
+
+    async justAPI_BaseService(){
+        let isPost = method == 'get' ? false : true;
+
+    
+        let successResFun = this.buildSuccessResponse;
+        let failureResFun = this.buildFailureResponse;
+        let config = {
+            url,
+            method,
+            headers:{
+               
+               'Content-Type': 'application/json'
+            }
+        }
+
+        if(isPost){
+            config['data'] = data;
+        }
+
+        try {
+            let response 
+           try {
+            response = await axios(config);
+            if(response.data.code == '417'){
+                // window.location.href = '/index.html'
+                return failureResFun(response.data)
+            }
+            if(response.data.code != '0'){
+                return failureResFun(response.data)
+            }
+            return successResFun(response.data)
+            
+           } catch (error) {
+            return failureResFun(error)
+           }
+            
+        } catch (error) {
+            return failureResFun(error)
+        }
+    }
+
+    justGetAPIService(url){
+        return this.justAPI_BaseService('get',url)
+    }
+    justPostAPIService(url){
+        return this.justAPI_BaseService('post',url)
+    }
+
+
+    isValid(){
+        const cookieData = COOKIE_HELPER_ACTIONS.getCookie();
+        if(!cookieData){
+          return  justGetAPIService('/Account/Session/Validate')
+        }
+    }
+
+    
+}
+
+const API_SERVICES = new API_SERVICE_CLASS(SERVERNAME);
+
+const API_SERVICES_ACTIONS = {
+    postAPIService:API_SERVICES.postService,
+    getAPIService:API_SERVICES.getService
+}
+
+
+// cookie helper
+const AUTH = 'AUTH'
+
+class COOKIE_HELPER_CLASS{
+    constructor(){
+        this.getCookie = this.getCookie.bind(this);
+    }
+    getCookie(){
+        let cookieVal = Cookies.get(AUTH);
+        if(!cookieVal){
+            return null;
+        }
+    return JSON.parse(cookieVal)
+    };
+    setCookie(value){
+        debugger;
+        return Cookies.set(AUTH,value)
+    };
+
+    removeCookie(token){
+        Cookies.remove(token)
+}
+    async validateToken() {
+        return await API_SERVICES_ACTIONS.getAPIService(`Account/Session/Validate`)
+    }
+}
+
+
+const COOKIE_HELPER = new COOKIE_HELPER_CLASS();
+const COOKIE_HELPER_ACTIONS ={
+    getCookie : COOKIE_HELPER.getCookie,
+    setCookie :COOKIE_HELPER.setCookie,
+    removeAuthCookie:COOKIE_HELPER.removeCookie.bind(null,AUTH)
+}
+function setCookieManual(token){
+    Cookies.set(AUTH,{
+        token,
+        userId:null
+    })
+}
+
+async function checkValidAuth(cb,redirect=undefined){
+    debugger;
+   document.querySelector('auth-loader').show();
+    const res = await COOKIE_HELPER.validateToken();
+    debugger
+    if(!res.response){
+        if(redirect){
+            window.location.href =redirect;
+         document.querySelector('auth-loader').hide();
+         return;
+        }
+        window.location.href = '/';
+         document.querySelector('auth-loader').hide();
+        return;
+    }
+    
+   setTimeout(()=>{
+    document.querySelector('auth-loader').hide();
+    cb();
+   },300);
+}

dist/Js/auth/login.js

@@ -1,8 +1,597 @@
+function initLogin() {
+  // alert('as')
+  // Command: toastr["success"]("Logged in successfully")
+  // Command: toastr["success"]("My name is Inigo Montoya. You killed my father. Prepare to die!")
 
+  // toasterOpts();
+  let reg_name, reg_email, reg_number, reg_pwd, reg_otp_email;
+  let loginForm = $("#login_form");
+  let registerForm = $("#register_form");
 
-function authFunction(){
-    console.log("hello");
-    postAPIService()
+  $("#register_form .otp-input-group input.press").on("paste", function (p) {
+    var data = p.originalEvent.clipboardData.getData("text");
+    var dataLength = data.length;
+
+    for (var i = 0; i < dataLength; i++) {
+      var input = $(
+        '#register_form .otp-input-group input[tabindex="' + (i + 1) + '"]'
+      );
+      input.val(data.charAt(i));
+      if (input.val().length >= input.attr("maxlength")) {
+        var nextInput = $(
+          '#register_form .otp-input-group input[tabindex="' + (i + 2) + '"]'
+        );
+        if (nextInput) {
+          nextInput.focus();
+        }
+      }
+    }
+    p.preventDefault();
+  });
+
+  $('#register_form .otp-input-group input[type="text"]').on(
+    "keyup",
+    function (e) {
+      if ($(this).val().length >= $(this).attr("maxlength")) {
+        if (e.keyCode !== 9 && e.keyCode !== 16) {
+          var tabIndex = parseInt($(this).attr("tabindex")) + 1;
+          $(
+            '#register_form .otp-input-group input[tabindex="' +
+              $(this).attr("tabindex") +
+              '"]'
+          ).val($(this).val());
+          $(
+            '#register_form .otp-input-group input[tabindex="' + tabIndex + '"]'
+          ).focus();
+        }
+      } else {
+        if (e.keyCode === 8) {
+          var tabIndex = parseInt($(this).attr("tabindex")) - 1;
+          $(
+            '#register_form .otp-input-group input[tabindex="' + tabIndex + '"]'
+          ).focus();
+        }
+      }
+    }
+  );
+
+  loginForm.find("#User_Email,#User_password").keypress(function (e) {
+    if (e.which == 13) $("#Login_btn").click();
+  });
+
+  $("#Login_btn").click(function () {
+    // loginForm.find(".loader-btn").show();
+    let userEmail = loginForm.find("#User_Email").val();
+    let userPassword = loginForm.find("#User_password").val();
+    let emailInput = loginForm.find(".email-login-inputgroup");
+    let passwordInput = loginForm.find(".password-login-inputgroup");
+    if (userEmail == "") {
+      emailInput.find("#User_Email").addClass("is-invalid");
+      emailInput.find(".form-floating").addClass("is-invalid");
+      emailInput.find(".invalid-feedback").text("Please enter your email");
+      loginForm.find(".loader-btn").hide();
+      $(this).show();
+    }
+    if (userPassword == "") {
+      passwordInput.find("#User_password").addClass("is-invalid");
+      passwordInput.find(".form-floating").addClass("is-invalid");
+      loginForm.find(".loader-btn").hide();
+      $(this).show();
+    } else {
+      emailInput.find("#User_Email").removeClass("is-invalid");
+      emailInput.find(".form-floating").removeClass("is-invalid");
+      passwordInput.find("#User_password").removeClass("is-invalid");
+      passwordInput.find(".form-floating").removeClass("is-invalid");
+      if (validateEmail(userEmail)) {
+         let port = "https://beta.bizgaze.app";
+      // let port = "http://localhost:3088";
+        let url = `${port}/account/getuserbyphoneormail/${userEmail}/${userEmail}`;
+        getDataStatAxios(url, userEmail);
+      } else {
+        loginForm.find(".loader-btn").hide();
+        $(this).show();
+        emailInput.find("#User_Email").addClass("is-invalid");
+        emailInput.find(".form-floating").addClass("is-invalid");
+        emailInput.find(".invalid-feedback").text("Please enter a valid email");
+      }
+    }
+  });
+  async function getDataStatAxios(url, userEmail) {
+    const config = {
+      url,
+      method: "get",
+    };
+    let response = await axios(config);
+    if (response.data.result == null) {
+      toasterOpts();
+      Command: toastr["error"]("Please enter Valid email / password");
+    } else {
+      let userEmail = $("#User_Email").val();
+      let userPassword = $("#User_password").val();
+      const loginPayload = {
+        username: userEmail,
+        Password: userPassword,
+        UnibaseId: "",
+        RememberMe: false,
+      };
+      $("#Login_btn").hide();
+      $(".loader-btn").show();
+      const res = await postAPIService(
+        `bizgaze/crm/webapi/crmuserlogin`,
+        loginPayload
+      );
+      debugger;
+      console.log(res);
+      $(".loader-btn").hide();
+      $("#Login_btn").show();
+      if (res.data.message == "200") {
+        debugger;
+        // Command: toastr["success"]("Logged in successfully")
+        // toasterOpts();
+        COOKIE_HELPER_ACTIONS.setCookie({
+          token: res.data.result.sessionId,
+          userid: res.data.result.userId,
+        });
+        // setInitLoginLocal();
+        window.localStorage.setItem("Useremail", userEmail);
+        //window.localStorage.setItem("Userpassword", userPassword);
+        window.localStorage.setItem("Isloggedintoaster", true);
+        window.localStorage.setItem("Isloggedin", true);
+        window.location.href = `./index.html`;
+      } else {
+        toasterOpts();
+      Command: toastr["error"](res.data.message)
+      }
+    }
+  }
+
+  // this function will be triggered on new user registration
+  async function userRegistration() {
+    reg_form = $("#register_form");
+    // reg_name = $("#User_Name").val();
+    reg_email = reg_form.find("#User_Email").val();
+    // reg_otp_email = $("#User_otp_Email").val();
+    // reg_number = $("#user_number").val();
+    reg_pwd = reg_form.find("#User_password").val();
+    let userName = reg_email.split("@");
+    let otpRes = null;
+    const userRegistratioNPayload = {
+      organizationtypeid: "2",
+      organizationid: "0",
+      contactid: "0",
+      userid: "0",
+      username: "0",
+      users_phonenumber: "0",
+      password: reg_pwd,
+      users_emailaddress: "0",
+      emailaddress: reg_email,
+      contactname: userName[0],
+      phonenumber: "0",
+      branchid: "0",
+      tenantname: "Anwi Systems",
+      rolename: "Customer Admin",
+      currencyid: "0",
+      customerformuniqueid: "Bizgaze_Platform_Crm_RegisterCRMUser",
+    };
+    debugger;
+    $('#register_btn').hide()
+    $(".loader-btn").show();
+    debugger;
+    const res = await postAPIService(
+      `bizgaze/crm/webapi/registercrmuser`,
+      userRegistratioNPayload
+    );
+    console.log(res, "register");
+    $(".loader-btn").hide();
+    $('#register_btn').show()
+    if (res.data.code == "404" ) {
+      toasterOpts();
+      Command: toastr["error"](res.data.message)
+      return;
+    }
+     else {
+      $("#register_form .email-password-group").hide();
+      $("#register_form .register_otp.otp-input-group").show();
+    }
+  
+    $("#proceed").click(async function () {
+      let userEnterOtp = "";
+      let userEmail = registerForm.find("#User_Email").val();
+      $(".otp-input-group input").each(function () {
+        let presVal = $(this).val();
+        userEnterOtp += presVal;
+      });
+      console.log(userEnterOtp);
+      debugger;
+      const userotppayload = {
+        email: userEmail,
+        otpid: res.data.result.OtpId,
+        userotp: userEnterOtp,
+      };
+      $(".loader-btn").show();
+      $('#proceed').hide()
+      otpRes = await postAPIService(
+        `bizgaze/crm/webapi/ValidateOtp`,
+        userotppayload
+      );
+      $(".loader-btn").hide();
+      $('#proceed').show()
+      debugger;
+      console.log(otpRes, "otp");
+      const verifyotpStatus = otpRes.data.result;
+      if (verifyotpStatus == "Otp verified successfully") {
+        const loginPayload = {
+          username: reg_email,
+          Password: reg_pwd,
+          UnibaseId: "",
+          RememberMe: false,
+        };
+        const res = await postAPIService(
+          `bizgaze/crm/webapi/crmuserlogin`,
+          loginPayload
+        );
+        if (res.data.message == "200") {
+          debugger;
+          // Command: toastr["success"]("Logged in successfully")
+          // toasterOpts();
+          COOKIE_HELPER_ACTIONS.setCookie({
+            token: res.data.result.sessionId,
+            userid: res.data.result.userId,
+          });
+          // setInitLoginLocal();
+          window.localStorage.setItem("Useremail", userEmail);
+          //window.localStorage.setItem("Userpassword", userPassword);
+          window.localStorage.setItem("isaccountCreated", true);
+          window.location.href = `./index.html`;
+        } else {
+          toasterOpts();
+        Command: toastr["error"](res.data.message)
+        }       
+      } else {
+        toasterOpts();
+        Command: toastr["error"]("Please enter Valid OTP");
+      }
+    });
+  }
+
+  // to validate password on keyup in password input field
+  function passwordValidate(pswd) {
+    if (pswd.length < 8) {
+      $("#chck_length").removeClass("pswd_valid").addClass("pswd_invalid");
+    } else {
+      $("#chck_length").removeClass("pswd_invalid").addClass("pswd_valid");
+    }
+    // validate uppercase letter
+    if (pswd.match(/[A-Z]/)) {
+      $("#chck_capital").removeClass("pswd_invalid").addClass("pswd_valid");
+    } else {
+      $("#chck_capital").removeClass("pswd_valid").addClass("pswd_invalid");
+    }
+    //validate special letter
+    if (pswd.match(/[!@#$%^&*]/)) {
+      $("#chck_special").removeClass("pswd_invalid").addClass("pswd_valid");
+    } else {
+      $("#chck_special").removeClass("pswd_valid").addClass("pswd_invalid");
+    }
+    let pswdVal = $("#register_form #User_password").val();
+    let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,}$/;
+    if (pswdVal.match(pattern)) {
+      $(".pswd_info").hide();
+    } else {
+      $(".pswd_info").show();
+    }
+    //validate number
+    if (pswd.match(/\d/)) {
+      $("#chck_number").removeClass("pswd_invalid").addClass("pswd_valid");
+    } else {
+      $("#chck_number").removeClass("pswd_valid").addClass("pswd_invalid");
+    }
+  }
+
+  //you have to use keyup, because keydown will not catch the currently entered value
+  $("#register_form #User_password")
+    .keyup(function () {
+      // set password variable
+      var pswd = $(this).val();
+      passwordValidate(pswd);
+    })
+    .focus(function () {
+      let pswdVal = $("#register_form #User_password").val();
+      let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{11,}$/;
+      if (pswdVal.match(pattern)) {
+        $(".pswd_info").hide();
+      } else {
+        $(".pswd_info").show();
+      }
+    })
+    .blur(function () {
+      $(".pswd_info").hide();
+    });
+
+  // function to validate user entered email
+  function validateEmail(userEmail) {
+    var pattern =
+      /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
+    return $.trim(userEmail).match(pattern) ? true : false;
+  }
+
+  // function to validate user entered password
+  function validatepassword(userPassword) {
+    var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{11,}$/;
+    return $.trim(userPassword).match(pattern) ? true : false;
+  }
+
+  registerForm.find("#User_Email,#User_password").keypress(function (e) {
+    if (e.which == 13) $("#register_btn").click();
+  });
+
+  // this will be triggered on clicking continue in signup form
+  $("#register_btn").click(function () {
+    registerForm.find(".loader-btn").show();
+    $(this).hide();
+    let userEmail = registerForm.find("#User_Email").val();
+    let userPassword = registerForm.find("#User_password").val();
+    let emailInput = registerForm.find(".email-login-inputgroup");
+    let passwordInput = registerForm.find(".password-login-inputgroup");
+    if (userEmail == "") {
+      emailInput.find("#User_Email").addClass("is-invalid");
+      emailInput.find(".form-floating").addClass("is-invalid");
+      emailInput.find(".invalid-feedback").text("Please enter your email");
+      registerForm.find(".loader-btn").hide();
+      $(this).show();
+    }
+    if (userPassword == "") {
+      passwordInput.find("#User_password").addClass("is-invalid");
+      passwordInput.find(".form-floating").addClass("is-invalid");
+      registerForm.find(".loader-btn").hide();
+      $(this).show();
+    } else {
+      emailInput.find("#User_Email").removeClass("is-invalid");
+      emailInput.find(".form-floating").removeClass("is-invalid");
+      passwordInput.find("#User_password").removeClass("is-invalid");
+      passwordInput.find(".form-floating").removeClass("is-invalid");
+      if (validateEmail(userEmail) && validatepassword(userPassword)) {
+        userRegistration();
+        $("#register_form .otp-input-group .otp-sent-email").text(userEmail);
+      } else {
+        emailInput.find("#User_Email").addClass("is-invalid");
+        emailInput.find(".form-floating").addClass("is-invalid");
+        emailInput.find(".invalid-feedback").text("Please enter a valid email");
+        registerForm.find(".loader-btn").hide();
+        $(this).show();
+      }
+    }
+  });
+  $(".pswd_eye").click(function(){
+    let eyeClass = $(this).find('svg').hasClass("fa-eye-slash");
+    if(eyeClass == true){
+         $(this).find('svg').removeClass("fa-eye-slash"); 
+        $(this).find('svg').addClass("fa-eye");
+        $(this).siblings('input').attr('type','password')
+      }else{
+        $(this).find('svg').removeClass("fa-eye");
+        $(this).find('svg').addClass("fa-eye-slash");  
+        $(this).siblings('input').attr('type','text')
+    }
+})
+  
+  $("#forgotPassword").click(function () {
+    $(".login-email-password-div").hide();
+    $(".login-forgot-password-div").show();
+  });
+  $("#forgot_Password_Back").click(function () {
+    $(".login-forgot-password-div").hide();
+    $(".login-email-password-div").show();
+  });
+  $("#forgot_password_submit").click(async function () {
+    let forgot_email = $("#forgot_User_Email").val();
+    if(forgot_email == ''){
+$('#forgot_User_Email').addClass('is-invalid')
+$('#forgot_User_Email').after(`<div class="invalid-feedback">Please enter Valid email</div>`);
+return
+    }
+    else{
+    debugger;
+  let port = "https://beta.bizgaze.app";
+   // let port = "http://localhost:3088";
+    let url = `${port}/account/getuserbyphoneormail/${forgot_email}/${forgot_email}`;
+    const config = {
+      url,
+      method: "get",
+    };
+    $(".loader-btn").show();
+    $('#forgot_password_submit').hide()
+    let response = await axios(config);
+    debugger;
+    console.log(response);
+    $(".loader-btn").hide();
+    $('#forgot_password_submit').show()
+    if (response.data.result != null) {
+      debugger;
+      console.log(response.data);
+      const forgotpassPayload = {
+        firstname: "",
+        lastname: "",
+        contactnumber: "",
+        email: "",
+        tenantname: "",
+        contactoremail: response.data.result.email,
+        IsSignup: false,
+        IsRegisterUser: false,
+        IsForgotPswd: true,
+        UnibaseId: response.data.result.userName,
+        OtpId: 0,
+        UserOtp: "",
+      };
+      $('#forgot_password_submit').hide()
+      $(".loader-btn").show();
+      const forgetpassRes = await postAPIService(
+        `account/sendotp`,
+        forgotpassPayload
+      );
+      $(".loader-btn").hide();
+      console.log(forgetpassRes);
+      $(".email-validation").hide();
+      $('.user_email').html(forgot_email)
+      $(".otp-validation .otp-input-group").show();
+      $(".otp-validation .otp-input-group").on("paste", function (p) {
+        let data = p.originalEvent.clipboardData.getData("text");
+        let dataLength = data.length;
+        for (let i = 0; i < dataLength; i++) {
+          let input = $(
+            '.otp-validation .otp-input-group input[tabindex="' + (i + 1) + '"]'
+          );
+          input.val(data.charAt(i));
+          if (input.val().length >= input.attr("maxlength")) {
+            let nextInput = $(
+              '.otp-validation .otp-input-group input[tabindex="' +
+                (i + 2) +
+                '"]'
+            );
+            if (nextInput) {
+              nextInput.focus();
+            }
+          }
+        }
+        p.preventDefault();
+      });
+
+      $('.otp-validation .otp-input-group input[type="text"]').on(
+        "keyup",
+        function (e) {
+          if ($(this).val().length >= $(this).attr("maxlength")) {
+            if (e.keyCode !== 9 && e.keyCode !== 16) {
+              let tabIndex = parseInt($(this).attr("tabindex")) + 1;
+              $(
+                '.otp-validation .otp-input-group input[tabindex="' +
+                  $(this).attr("tabindex") +
+                  '"]'
+              ).val($(this).val());
+              $(
+                '.otp-validation .otp-input-group input[tabindex="' +
+                  tabIndex +
+                  '"]'
+              ).focus();
+            }
+          } else {
+            if (e.keyCode === 8) {
+              let tabIndex = parseInt($(this).attr("tabindex")) - 1;
+              $(
+                '.otp-validation .otp-input-group input[tabindex="' +
+                  tabIndex +
+                  '"]'
+              ).focus();
+            }
+          }
+        }
+      );
+      $("#Forgot_pass_proceed").click(async function () {
+        debugger;
+        let userotp='';
+        $(".otp-validation .otp-input-group input").each(function () {
+          let presVal = $(this).val();
+          userotp += presVal;
+        });
+        console.log(userotp);
+          const validateForgotpass = {
+           email: forgot_email,
+            otpid: forgetpassRes.data,
+            userotp: userotp,
+          };
+          $('#Forgot_pass_proceed').hide()
+          $(".loader-btn").show();
+          const forgetpassResotp = await postAPIService(
+            `hyperfusion/validateotp`,
+            validateForgotpass
+         );
+         $(".loader-btn").hide();
+         $('#Forgot_pass_proceed').show()
+          console.log(forgetpassResotp);
+          const Resotp = forgetpassResotp.data.result;
+          if (Resotp == "Otp verified successfully") {
+            $(".login-forgot-password-details-div").show();
+        $(".otp-validation .otp-input-group").hide();
+          } else {
+      toasterOpts()
+            Command: toastr["error"]("Please enter Valid OTP");
+          }
+      });
+      $("#forgot_password_details_submit").click(async function () {
+        debugger;
+        let pswdone =$("#forgot-password-input-one").val();
+        let pswdtwo =$("#forgot-password-input-two").val();
+        if(pswdone == pswdtwo) {
+          const forgotpassPayload = {
+            username: response.data.result.userName,
+            password: pswdtwo,
+          };
+          $("#forgot_password_details_submit").hide();
+          $(".loader-btn").show();
+          const forgetpassRes = await postAPIService(
+            `account/UpdatePassword`,
+            forgotpassPayload
+          );
+          console.log(forgetpassRes);
+          $(".loader-btn").hide();
+          $("#forgot_password_details_submit").show();
+          window.localStorage.setItem('Ispasswordupdate',true)
+          window.location.href = `./myaccount.html`;
+        }else {
+          $("#forgot-password-input-one").addClass('is-invalid');
+          $("#forgot-password-input-two").addClass('is-invalid')
+          $('.password_display').text('Passwords are not matched !').addClass('text-danger')
+        }
+     
+      
+      });
+    } 
+    else{
+      $('#forgot_User_Email').addClass('is-invalid');
+      $('#forgot_User_Email').after(`<div class="invalid-feedback">Please enter Valid email</div>`);
+   
+    }
+  }
+  });
+  $(".user_pass")
+  .keyup(function () {
+    // set password variable
+    var pswd = $(this).val();
+    passwordValidate(pswd);
+    $('.pswd_info').hide();
+    $(this).parent().siblings('.pswd_info').show();
+  })
+  .focus(function () {
+    let pswdVal = $(this).val();
+    let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,}$/;
+    if (pswdVal.match(pattern)) {
+      $(this).parent().siblings('.pswd_info').hide();
+    } else {
+      $(this).parent().siblings('.pswd_info').show();
+    }
+  })
+  .blur(function () {
+    $(this).parent().siblings('.pswd_info').hide();
+  });
+
+  function toasterOpts(){
+    toastr.options = {
+      "closeButton": true,
+      "debug": false,
+      "newestOnTop": true,
+      "progressBar": true,
+      "positionClass": "toast-top-center",
+      "preventDuplicates": true,
+      "onclick": null,
+      "showDuration": "300",
+      "hideDuration": "1000",
+      "timeOut": "5000",
+      "extendedTimeOut": "1000",
+      "showEasing": "swing",
+      "hideEasing": "linear",
+      "showMethod": "fadeIn",
+      "hideMethod": "fadeOut"
+    }
+  }
 }
 
-authFunction();
+initLogin();

dist/Js/footer.js

@@ -218,7 +218,7 @@ $(document).ready(function () {
   </div>
     <div class="footer-main-container d-none d-sm-block ">
         <div class="footer-logo py-3
-                container"> <img src="./dist/assets/imgs/anwi-logo-2.png" class="img-fluid "  alt="anwi"> </div>
+                container"> <img src="../dist/assets/imgs/anwi-logo-2.png" class="img-fluid "  alt="anwi"> </div>
         <hr class="container-fluid
                 text-white">
         <div class="footer-content-main-container">

dist/Js/navbar.js

@@ -6,8 +6,8 @@ let nav_html = `
                         <div class="header-bottom-flex">
                             <div class="logo-menu-wrap d-flex">
                                 <div class="logo">
-                                    <a href="index.html">
-                                        <img src="./dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50">
+                                    <a href="../index.html">
+                                        <img src="../dist/assets/imgs/anwi-logo-1.png" alt="logo" class="w-50">
                                     </a>
                                 </div>
                                 <div class="main-menu menu-lh-1 main-menu-padding-1">
@@ -26,7 +26,7 @@ let nav_html = `
                             </div>
                             <div class="header-action-wrap header-action-flex header-action-width header-action-mrg-1">
                                 <div class="same-style">
-                                    <a href="#"><i class="fa-solid fa-user"></i></a>
+                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
                                 <div class="same-style header-cart">
                                     <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
@@ -49,8 +49,8 @@ let nav_html = `
                                     </button>
                                 </div>
                                 <div class="mobile-logo mobile-logo-width ps-3">
-                                    <a href="index.html">
-                                        <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-50">
+                                    <a href="../index.html">
+                                        <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-50">
                                     </a>
                                 </div>
                             </div>
@@ -58,7 +58,7 @@ let nav_html = `
                         <div class="col-6">
                             <div class="header-action-wrap header-action-flex header-action-mrg-1">
                                 <div class="same-style">
-                                    <a href="#"><i class="fa-solid fa-user"></i></a>
+                                <a href="./myaccount.html" class="my_avatar"><i class="fa-solid fa-user"></i></a>
                                 </div>
                                 <div class="same-style header-cart">
                                     <a class="cart-active1" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
@@ -75,8 +75,8 @@ let nav_html = `
             <div class="row pb-2 border-bottom">
                 <div class="col-6">
                     <div class="mobile-logo mobile-logo-width">
-                        <a href="index.html">
-                            <img alt="" src="./dist/assets/imgs/anwi-logo-1.png" class="w-75">
+                        <a href="../index.html">
+                            <img alt="" src="../dist/assets/imgs/anwi-logo-1.png" class="w-75">
                         </a>
                     </div>
                 </div>
@@ -135,7 +135,7 @@ $(".menu-negative-mrg2,.menu-negative-mrg3,.menu-negative-mrg4").css("width",wid
    $(".header-area").removeClass("bg-white");
    $(".main-menu").find("nav ul li a").addClass("text-white");
    $(".header-bottom.sticky-bar").removeClass("sticky-bar");
-   let src =`./dist/assets/imgs/anwi-logo-2.png`;
+   let src =`../dist/assets/imgs/anwi-logo-2.png`;
     $(".logo-menu-wrap").find("a img").attr("src",src);
     $(".main-body").find("iframe").attr("width",width);
     if (width <= 575 && width >= 390) {

dist/css/main.css

@@ -719,7 +719,10 @@ span.transform_fyro_text {
     border-left: 0px !important;
     border-bottom: 1px solid #0A1039 !important;
 }
-#get_otp,#proceed{
+#Login_btn,
+#register_btn,
+#proceed,
+#forgot_password_submit {
     border: none;
     background-color: #0A1039;
     text-transform: uppercase;
@@ -1524,4 +1527,72 @@ display: none;
   }
 }
   
-/* end new styles */
+/* end new styles */
+
+/* login verifiacation */
+/* Styles for verification */
+.pswd_info {
+    position: absolute;
+    top: 100%;
+    width: 250px;
+    padding: 10px;
+    background: #fefefe;
+    font-size: .7rem;
+    border-radius: 5px;
+    box-shadow: 0 1px 3px #ccc;
+    border: 1px solid #ddd;
+    display: none;
+}
+
+.pswd_info::before {
+    content: "\25B2";
+    position: absolute;
+    top: -12px;
+    left: 45%;
+    font-size: 14px;
+    line-height: 14px;
+    color: #ddd;
+    text-shadow: none;
+    display: block;
+}
+
+.pswd_invalid {
+    background: url(images/invalid.png) no-repeat 0 50%;
+    padding-left: 22px;
+    line-height: 24px;
+    color: #ec3f41;
+}
+
+.pswd_valid {
+    background: url(images/valid.png) no-repeat 0 50%;
+    padding-left: 22px;
+    line-height: 24px;
+    color: #3a7d34;
+}
+
+#toast-container > div{
+    opacity: 1 !important;
+    color: #000 !important;
+    margin-top: 20px !important;
+}
+/* .toast-close-button{
+    color:#000 !important;
+}
+.toast-success{
+    background: #fff !important;
+}
+.toast-error{
+    background: #fff !important;
+} */
+.h-50p {
+    height: 50px !important;
+}
+.warranty_row{
+    background: url(../assets/imgs/allin_imgs/desktop_bg.png);
+    background-size: cover;
+    background-position: center center;
+}
+.warranty-card .card{
+    background: rgb(22,62,96);
+background: linear-gradient(75deg, rgb(56 89 118) 51%, rgb(107 18 111) 89%)
+}

dist/css/style.css

@@ -31618,4 +31618,87 @@ h4.checkout-title::before {
 .sticky-bar{
   border-bottom: 1px solid #f9f9f9 !important;
   box-shadow: 0 3px 6px 0 rgba(0,0,0,.2) !important;
+}
+
+.order_details_btn {
+  width: 180px;
+  height: 30px;
+}
+
+
+/* added by rahul  */
+.authBox .form-floating label {
+  /* height: 58px; */
+}
+
+.loginContainer .form-floating label {
+  padding: 0.75rem 0.75rem;
+}
+
+/* otp box input css goes here */
+.otp-input-group .col {
+  margin: 0px 5px;
+}
+
+.otp-input-group .col input {
+  text-align: center;
+}
+
+.bg-gradient-anwi {
+  background: linear-gradient(112.1deg, rgb(63, 76, 119) -14.8%, rgb(32, 38, 57) 100.4%);
+}
+
+.loginContainer .nav-pills .nav-link.active {
+  background: linear-gradient(112.1deg, rgb(63, 76, 119) -14.8%, rgb(32, 38, 57) 100.4%) !important;
+  color: #fff;
+}
+
+.loginContainer .nav-pills .nav-link {
+  color: #272e47;
+  font-weight: 500;
+}
+
+/* login loader css  */
+.loader-btn {
+  position: relative;
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 4px;
+  border: none;
+  background-color: #4CAF50;
+  color: #fff;
+  font-size: 18px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  height: 38px;
+}
+
+.loader-btn .loader {
+  position: absolute;
+  top: 25%;
+  left: 48%;
+  /* transform: translate(-50%, -50%); */
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  border-top-color: #000;
+  animation: loader-rotate 0.8s linear infinite;
+  /* opacity: 0; */
+  transition: opacity 0.3s ease;
+}
+
+.loader-btn.loading .loader {
+  opacity: 1;
+}
+
+.loader-btn .btn-text {
+  z-index: 1;
+}
+
+@keyframes loader-rotate {
+  to {
+    transform: rotate(360deg);
+  }
 }

dist/toaster/toastr.css

@@ -20,9 +20,9 @@
   float: right;
   font-size: 20px;
   font-weight: bold;
-  color: #FFFFFF;
-  -webkit-text-shadow: 0 1px 0 #ffffff;
-  text-shadow: 0 1px 0 #ffffff;
+  color: #000000;
+  -webkit-text-shadow: 0 1px 0 #000000;
+  text-shadow: 0 1px 0 #000000;
   opacity: 0.8;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
   filter: alpha(opacity=80);
@@ -111,13 +111,13 @@ button.toast-close-button {
   border-radius: 3px 3px 3px 3px;
   background-position: 15px center;
   background-repeat: no-repeat;
-  -moz-box-shadow: 0 0 12px #999999;
-  -webkit-box-shadow: 0 0 12px #999999;
-  box-shadow: 0 0 12px #999999;
+  -moz-box-shadow:0 0.313rem 1.563rem rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0.313rem 1.563rem rgba(0,0,0,.1);
+  border-radius: 0.25em;
+  box-shadow: 0 0.313rem 1.563rem rgba(0,0,0,.1);
   color: #FFFFFF;
-  opacity: 0.8;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-  filter: alpha(opacity=80);
+  transition: transform 300ms ease-in-out;
+
 }
 #toast-container > div.rtl {
   direction: rtl;
@@ -125,9 +125,9 @@ button.toast-close-button {
   background-position: right 15px center;
 }
 #toast-container > div:hover {
-  -moz-box-shadow: 0 0 12px #000000;
-  -webkit-box-shadow: 0 0 12px #000000;
-  box-shadow: 0 0 12px #000000;
+  -moz-box-shadow:0 0.313rem 1.563rem rgba(0,0,0,.1);
+  -webkit-box-shadow: 0 0.313rem 1.563rem rgba(0,0,0,.1);
+  box-shadow:0 0.313rem 1.563rem rgba(0,0,0,.1);
   opacity: 1;
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   filter: alpha(opacity=100);
@@ -137,10 +137,10 @@ button.toast-close-button {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
 }
 #toast-container > .toast-error {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+  background-image: url("../assets/imgs/remove.png") !important;
 }
 #toast-container > .toast-success {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+  background-image: url("../assets/imgs/checked.png") !important;
 }
 #toast-container > .toast-warning {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
@@ -161,10 +161,12 @@ button.toast-close-button {
   background-color: #030303;
 }
 .toast-success {
-  background-color: #51A351;
+  background-color: #ffffff;
+  font-weight: 500;
 }
 .toast-error {
-  background-color: #BD362F;
+  background-color: #ffffff;
+  font-weight: 500;
 }
 .toast-info {
   background-color: #2F96B4;
@@ -177,10 +179,12 @@ button.toast-close-button {
   left: 0;
   bottom: 0;
   height: 4px;
-  background-color: #000000;
-  opacity: 0.4;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-  filter: alpha(opacity=40);
+}
+.toast-error .toast-progress {
+  background-color: #FF3055;
+}
+.toast-success .toast-progress {
+  background-color: #32BEA6;
 }
 /*Responsive Design*/
 @media all and (max-width: 240px) {

index.html

@@ -29,6 +29,7 @@
     <link rel="stylesheet" href="./dist/css/style.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
+    <link rel="stylesheet" href="./dist/toaster/toastr.css" />
 
     <title>Anwi</title>
     <style>
@@ -366,6 +367,8 @@
     <script src="./dist/js/axios.min.js"></script>
     <script src="./dist/js/footer.js"></script>
     <script src="./dist/js/cookies.min.js"></script>
+    <script src="./dist/js/auth/apiservice.js"></script>
+    <script src="./dist/toaster/toastr.js"></script>
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.min.js"></script>
     <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
@@ -386,6 +389,41 @@
 
 
     <script>
+            $(document).ready(function() {
+        let Newuser =window.localStorage.getItem('isaccountCreated');
+        let Loginstatus =window.localStorage.getItem('Isloggedintoaster')
+        if(Newuser == 'true'){
+            toasteropts()
+            Command: toastr["success"]("Account Created Successfully");
+            window.localStorage.removeItem('isaccountCreated')
+            return
+        }
+        if(Loginstatus == 'true'){
+            toasteropts()
+            Command: toastr["success"]("Logged In Successfully");
+            window.localStorage.removeItem('Isloggedintoaster')
+            return
+        }
+    function toasteropts(){
+       toastr.options = {
+      "closeButton": true,
+      "debug": false,
+      "newestOnTop": true,
+      "progressBar": true,
+      "positionClass": "toast-top-center",
+      "preventDuplicates": true,
+      "onclick": null,
+      "showDuration": "300",
+      "hideDuration": "1000",
+      "timeOut": "5000",
+      "extendedTimeOut": "1000",
+      "showEasing": "swing",
+      "hideEasing": "linear",
+      "showMethod": "fadeIn",
+      "hideMethod": "fadeOut"
+    }
+    }
+});
 
         $(".slick-prev").addClass("btn text-white");
         $(".slick-next").addClass("btn text-white");

login.html

@@ -5,34 +5,33 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
+
     <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="./dist/css/main.css" />
-    <link rel="stylesheet" href="./styles/style.css">
-    <link rel="stylesheet" href="./style.css">
-    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css">
-    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css">
-    <link rel="stylesheet" href="./dist/css/login.css">
-
-
-    
-
-    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
-    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css">
-    <link rel="stylesheet" href="./dist/css/vendor/vandella.css">
-    <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css">
-    <!-- <link rel="stylesheet" href="./dist/css/vendor/icofont.min.css"> -->
-    <link rel="stylesheet" href="./dist/css/vendor/fontello.css">
-    <link rel="stylesheet" href="./dist/css/plugins/easyzoom.css">
-    <link rel="stylesheet" href="./dist/css/plugins/slick.css">
-    <link rel="stylesheet" href="./dist/css/plugins/nice-select.css">
-    <link rel="stylesheet" href="./dist/css/plugins/animate.css">
-    <link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css">
-    <link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css">
-    <link rel="stylesheet" href="./dist/css/style.css">
-    <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
-    <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
-    <title>Login | Anwi</title>
+    <link rel="stylesheet" href="./styles/style.css" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.carousel.min.css" />
+    <link rel="stylesheet" href="./libs/owlcarousel/Css/owl.theme.default.min.css" />
+    <link rel="stylesheet" href="./dist/css/login.css" />
+
+    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/bootstrap.min.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/vandella.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/jellybelly.css" />
+    <link rel="stylesheet" href="./dist/css/vendor/fontello.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/easyzoom.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/slick.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/nice-select.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/animate.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/magnific-popup.css" />
+    <link rel="stylesheet" href="./dist/css/plugins/jquery-ui.css" />
+    <link rel="stylesheet" href="./dist/css/style.css" />
+    <link rel="stylesheet" href="./dist/css/fontawesome.all.css" />
+    <!-- <link rel="stylesheet" href="./dist/css/fontawesome.min.css" /> -->
+    <!-- <link rel="stylesheet" href="./libs/toaster/toastr.js" /> -->
+    <link rel="stylesheet" href="./dist/toaster/toastr.css" />
+    <title>Anwi</title>
+
     <style>
         html {
             height: 100%;
@@ -48,65 +47,432 @@
     <!-- navbar -->
     <div id="navbar-head" class="bg-white"></div>
     <!-- end-navbar -->
-
     <!-- main-body -->
-
     <section class="mainLogin h-100 mt-0 myaccount-content p-0">
-        <div class="loginContainer mainLogin bg-gradient-anwi mt-0 pt-md-5 h-100 satoshi_font">
-            <div class="container pt-5">
+        <div
+            class="loginContainer mainLogin bg-gradient-violet mt-0 pt-md-5 h-100 satoshi_font d-flex align-items-center">
+            <div class="container">
+                <div class="spinner d-flex justify-content-center align-items-center">
+                    <div class="spinner-border d-none" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
                 <div class="row justify-content-center">
-                 <div class="col-md-5 col-12 pt-5">
-                    <form class="authBox bg-white pb-md-2 mx-auto account-details-form rounded-3">
-                        <div class="formContanerAuth ">
-                            <div>
-                                <span class="authHeading satoshi_font text-theme-color fs-4">Login</span>
-                                <!-- <span class="satoshi_font">or</span> <span class="satoshi_font authHeading text-theme-color">Signup</span> -->
-                            </div>
-                            <div class="space-login"></div>
-                            <div>
-                                <label class="text-danger fs-9 d-none" id="not_valid">Please Enter a valid Number</label>
-                                <label class="text-danger fs-9 d-none" id="empt_num">Number should not be empty!</label>
-                                <label class="text-danger fs-9 d-none pb-1" id="otp_valid">OTP Should not be Empty!</label>
-                                <label for="user_number" class="required user_number">Mobile / Email</label>
-                                <input type="text" class="form-control shadow-none border-bottom-theme rounded-0" maxlength="10" autocomplete="off" id="user_number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==10) return false;">
-                            </div>
-                            <div class="otp-form d-flex justify-content-between d-none pb-2">
-                                <!-- <input type="text" class="form-input form-control users_otp" id="users_otp" placeholder="Please Enter your Otp"/> -->
-                                <input id="users_otp1" type="password" maxlength="1" tabindex="1" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
-                                <input id="users_otp2" type="password" maxlength="1" tabindex="2" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
-                                <input id="users_otp3" type="password" maxlength="1" tabindex="3" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
-                                <input id="users_otp4" type="password" maxlength="1" tabindex="4" autocomplete="off" name="user-otp" class="form-control shadow-none w-25 me-2"/>
+                    <div>
+                        <div class="bg-white rounded-3 authBox mx-auto p-5">
+                            <div class="text-warning fs-9 fw-500 error-div" style="display: none;">
+                                <svg class="svg-inline--fa fa-arrow-circle-o-left font-30 pb-1" aria-hidden="true"
+                                    focusable="false" data-prefix="fas" data-icon="arrow-circle-o-left" role="img"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
+                                    <g class="missing">
+                                        <path fill="currentColor"
+                                            d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z">
+                                        </path>
+                                        <circle fill="currentColor" cx="256" cy="364" r="28">
+                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
+                                                attributeName="r" values="28;14;28;28;14;28;"></animate>
+                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
+                                                attributeName="opacity" values="1;0;1;1;0;1;"></animate>
+                                        </circle>
+                                        <path fill="currentColor" opacity="1"
+                                            d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z">
+                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
+                                                attributeName="opacity" values="1;0;0;0;0;1;"></animate>
+                                        </path>
+                                        <path fill="currentColor" opacity="0"
+                                            d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z">
+                                            <animate attributeType="XML" repeatCount="indefinite" dur="2s"
+                                                attributeName="opacity" values="0;0;1;1;0;0;"></animate>
+                                        </path>
+                                    </g>
+                                </svg>
                             </div>
-                            <div class="otp_text d-none">
-                                <p class="mb-0">Please enter your OTP</p>
-                            </div>
-                            <div class="space-login"></div>
-        
-                            <div class="satoshi_font">
-                                <div class="text-center">
-                                   By continuing, I agree to the
-                                    <a href="#" class="text-theme-color text-decoration-underline fs-9">Terms of Use</a> &amp;
-                                    <a href="#" class="text-theme-color text-decoration-underline fs-9">Privacy Policy</a>
+                            <ul class="nav nav-pills mb-3 justify-content-center border rounded-3" id="pills-tab"
+                                role="tablist">
+                                <li class="nav-item w-50" role="presentation">
+                                    <button class="nav-link active w-100" id="pills-login-tab" data-bs-toggle="pill"
+                                        data-bs-target="#pills-login" type="button" role="tab"
+                                        aria-controls="pills-login" aria-selected="true">Login</button>
+                                </li>
+                                <li class="nav-item w-50" role="presentation">
+                                    <button class="nav-link w-100" id="pills-registration-tab" data-bs-toggle="pill"
+                                        data-bs-target="#pills-registration" type="button" role="tab"
+                                        aria-controls="pills-registration" aria-selected="false">Signup</button>
+                                </li>
+                            </ul>
+                            <div class="tab-content" id="pills-tabContent">
+                                <div class="tab-pane fade show active" id="pills-login" role="tabpanel"
+                                    aria-labelledby="pills-login-tab" tabindex="0">
+                                    <form id="login_form">
+                                        <div class="login-email-password-div">
+                                            <div class="input-group has-validation email-login-inputgroup">
+                                                <div class="form-floating py-0">
+                                                    <input type="email" class="form-control shadow-none h-50p"
+                                                        id="User_Email" placeholder="Enter Your Email"
+                                                        autocomplete="off">
+                                                    <label for="User_Email">Email address</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your email.
+                                                </div>
+                                            </div>
+                                            <div class="input-group has-validation mt-3 password-login-inputgroup">
+                                                <div class="form-floating py-0" id="password-input-div">
+                                                    <input type="password" class="form-control shadow-none h-50p"
+                                                        id="User_password" placeholder="Password"
+                                                        autocomplete="no password">
+                                                    <label for="User_password">Password</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your password.
+                                                </div>
+                                            </div>
+                                            <div class="mt-1">
+                                                <a href="#" class="text-theme-color fs-9 fw-500"
+                                                    id="forgotPassword">Forgot password?</a>
+                                            </div>
+                                            <div class="fs-7 mt-2 satoshi_font">
+                                                By continuing, I agree to the
+                                                <a href="#"
+                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
+                                                    of
+                                                    Use</a>
+                                                &amp;
+                                                <a href="#"
+                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
+                                                    Policy</a>
+                                            </div>
+                                            <div class="mt-3 ">
+                                                <div>
+                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                        style="display: none;">
+                                                        <span class="loader"></span>
+                                                    </div>
+                                                    <a href="#" class="btn bg-gradient-anwi w-100 fw-500" id="Login_btn"
+                                                        type="submit">Login</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="login-forgot-password-div" style="display:none">
+                                            <div
+                                                class="font-16 d-flex justify-content-end font-w600 text-darkgrey w-100 backtologin">
+                                                <!-- <span>Forgot Password?</span> -->
+                                                <a href="./login.html" class="" id="forgot_Password_Back"><span
+                                                        class=" cursor-pointer text-center d-flex align-items-center"><i
+                                                            class="fa-solid fa-arrow-left"></i></span></a>
+                                            </div>
+                                            <div class="email-validation">
+                                                <div class="font-14 w-100">Please enter your email address.
+                                                </div>
+                                                <div class="input-group has-validation forgot-password-inputgroup">
+                                                    <div class="form-floating py-0">
+                                                        <input type="email" class="form-control shadow-none h-50p"
+                                                            id="forgot_User_Email" placeholder="Enter Your Email"
+                                                            autocomplete="off">
+                                                        <label for="forgot_User_Email">Email address</label>
+                                                    </div>
+                                                    <div class="invalid-feedback">
+                                                        Please enter your email.
+                                                    </div>
+                                                </div>
+                                                <div class="mt-3">
+                                                    <div>
+                                                        <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                            style="display: none;">
+                                                            <span class="loader"></span>
+                                                        </div>
+                                                        <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
+                                                            id="forgot_password_submit" type="submit">Submit</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="otp-validation">
+                                                <div class="otp-input-group mt-3" style="display: none;">
+                                                    <div>
+                                                        <h4 class="text-center">Enter OTP</h4>
+                                                        <div class="text-center">we have sent an OTP to this Email
+                                                        </div>
+                                                        <p class="user_email text-center"></p>
+                                                        <div class="otp-sent-email fw-600 text-center"></div>
+                                                    </div>
+                                                    <div class="d-flex my-4">
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="1"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="2"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="3"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="4"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="5"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+
+                                                        <div class="col">
+                                                            <div class="form-group">
+                                                                <input type="text" class="press form-control"
+                                                                    name="code" maxlength="1" tabindex="6"
+                                                                    autocomplete="off">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div>
+                                                        <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                            style="display: none;">
+                                                            <span class="loader"></span>
+                                                        </div>
+                                                        <a href="#" class="bg-gradient-anwi btn fw-500 text-white w-100"
+                                                            id="Forgot_pass_proceed" type="submit">CONFIRM</a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="login-forgot-password-details-div" style="display:none">
+                                            <!-- <div
+                                                class="font-16 d-flex justify-content-between font-w600 text-darkgrey w-100 backtologin">
+                                            <span>Forgot Password?</span>
+                                                <a href="#" class=""
+                                                    id="forgot_Password_Details_Back"><span
+                                                        class=" cursor-pointer text-center d-flex align-items-center"><i
+                                                            class="fa-solid fa-arrow-left"></i></span></a>
+                                            </div> -->
+                                            <div class="font-14 w-100 password_display">Please Enter your New Password.
+                                            </div>
+                                            <div class="input-group has-validation forgot-password-details-inputgroup">
+                                                <div class=" align-items-center d-flex form-floating position-relative py-0">
+                                                    <input type="password"
+                                                        class="form-control shadow-none h-50p user_pass"
+                                                        id="forgot-password-input-one" placeholder="Enter New Password "
+                                                        autocomplete="off">
+                                                        <span class="end-0 pswd_eye me-2 position-absolute"><svg
+                                                            class="svg-inline--fa fa-eye" aria-hidden="true"
+                                                            focusable="false" data-prefix="fas" data-icon="eye"
+                                                            role="img" xmlns="http://www.w3.org/2000/svg"
+                                                            viewBox="0 0 576 512" data-fa-i2svg="">
+                                                            <path fill="currentColor"
+                                                                d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
+                                                            </path>
+                                                        </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
+                                                    <label for="forgot-password-input-one">Enter New Password</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your Password.
+                                                </div>
+                                                <div class="pswd_info" style="display: none;z-index: 1;">
+                                                    <p>Password must contain:</p>
+                                                    <ul>
+                                                        <li id="chck_capital" class="invalid">At least <strong>one
+                                                                capital
+                                                                letter</strong></li>
+                                                        <li id="chck_special" class="invalid">At least <strong>one
+                                                                special
+                                                                letter</strong></li>
+                                                        <li id="chck_number" class="invalid">At least <strong>one
+                                                                number</strong></li>
+                                                        <li id="chck_length" class="invalid">At least <strong>8
+                                                                characters</strong></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div
+                                                class="input-group has-validation forgot-password-details-inputgroup mt-4">
+                                                <div class="form-floating py-0">
+                                                    <input type="text" class="form-control shadow-none h-50p user_pass"
+                                                        id="forgot-password-input-two"
+                                                        placeholder="Confirm New Password" autocomplete="off">
+                                                    <label for="forgot-password-input-two">Confirm New Password</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your Password.
+                                                </div>
+                                            </div>
+                                            <div class="mt-3 ">
+                                                <div>
+                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                        style="display: none;">
+                                                        <span class="loader"></span>
+                                                    </div>
+                                                    <a href="#" class="btn bg-gradient-anwi w-100 text-white fw-500"
+                                                        id="forgot_password_details_submit" type="submit">Submit</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
+                                <div class="tab-pane fade" id="pills-registration" role="tabpanel"
+                                    aria-labelledby="pills-registration-tab" tabindex="0">
+                                    <form id="register_form">
+                                        <div class="email-password-group">
+                                            <div class="input-group has-validation email-login-inputgroup">
+                                                <div class="form-floating py-0">
+                                                    <input type="email" class="form-control shadow-none h-50p"
+                                                        id="User_Email" placeholder="Enter Your Email"
+                                                        autocomplete="off">
+                                                    <label for="User_Email">Email address</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your email.
+                                                </div>
+                                            </div>
+                                            <div class="input-group has-validation mt-3 password-login-inputgroup">
+                                                <div class="align-items-center d-flex form-floating position-relative py-0"
+                                                    id="password-input-div">
+                                                    <input type="password" class="form-control shadow-none h-50p"
+                                                        id="User_password" placeholder="Password"
+                                                        autocomplete="no password" required="">
+                                                    <span class="end-0 pswd_eye me-2 position-absolute"><svg
+                                                            class="svg-inline--fa fa-eye" aria-hidden="true"
+                                                            focusable="false" data-prefix="fas" data-icon="eye"
+                                                            role="img" xmlns="http://www.w3.org/2000/svg"
+                                                            viewBox="0 0 576 512" data-fa-i2svg="">
+                                                            <path fill="currentColor"
+                                                                d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
+                                                            </path>
+                                                        </svg><!-- <i class="fa-solid fa-eye"></i> Font Awesome fontawesome.com --></span>
+                                                    <label for="User_password">Password</label>
+                                                </div>
+                                                <div class="invalid-feedback">
+                                                    Please enter your password.
+                                                </div>
+                                                <div class="pswd_info" style="display: none;">
+                                                    <p>Password must contain:</p>
+                                                    <ul>
+                                                        <li id="chck_capital" class="invalid">At least <strong>one
+                                                                capital
+                                                                letter</strong></li>
+                                                        <li id="chck_special" class="invalid">At least <strong>one
+                                                                special
+                                                                letter</strong></li>
+                                                        <li id="chck_number" class="invalid">At least <strong>one
+                                                                number</strong></li>
+                                                        <li id="chck_length" class="invalid">At least <strong>8
+                                                                characters</strong></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="fs-7 mt-2 satoshi_font">
+                                                By continuing, I agree to the
+                                                <a href="#"
+                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Terms
+                                                    of
+                                                    Use</a>
+                                                &amp;
+                                                <a href="#"
+                                                    class="text-theme-color text-decoration-underline fs-7 fw-600">Privacy
+                                                    Policy</a>
+                                            </div>
+                                            <div class="mt-3 ">
+                                                <div>
+                                                    <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                        style="display: none;">
+                                                        <span class="loader"></span>
+                                                    </div>
+                                                    <a href="#" class="btn bg-gradient-anwi text-white w-100 fw-500"
+                                                        id="register_btn" type="submit">REGISTER</a>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="register_otp otp-input-group mt-3" style="display: none;">
+                                            <div>
+                                                <h4 class="text-center">Enter OTP</h4>
+                                                <div class="text-center">we have sent an OTP to this Email </div>
+                                                <div class="otp-sent-email fw-600 text-center"></div>
+                                            </div>
+                                            <div class="d-flex my-4">
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="1" autocomplete="off">
+                                                    </div>
+                                                </div>
+
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="2" autocomplete="off">
+                                                    </div>
+                                                </div>
+
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="3" autocomplete="off">
+                                                    </div>
+                                                </div>
+
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="4" autocomplete="off">
+                                                    </div>
+                                                </div>
+
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="5" autocomplete="off">
+                                                    </div>
+                                                </div>
+
+                                                <div class="col">
+                                                    <div class="form-group">
+                                                        <input type="text" class="press form-control" name="code"
+                                                            maxlength="1" tabindex="6" autocomplete="off">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div>
+                                                <div class="btn bg-gradient-anwi w-100 loader-btn"
+                                                    style="display: none;">
+                                                    <span class="loader"></span>
+                                                </div>
+                                                <a href="#" class="btn btn-primary w-100 fw-500" id="proceed"
+                                                    type="submit">CONFIRM</a>
+                                            </div>
+                                        </div>
+
+                                    </form>
                                 </div>
-                            </div>
-                            <div class="space-login"></div>
-                            <div class="single-input-item">
-                                <a href="#" class="btn w-100 check-btn sqr-btn  text-white" id="get_otp">Continue</a>
-                                <a href="#" class="btn w-100 btn-info text-white d-none" id="proceed">Proceed</a>
-                            </div>
-                            <div class="space-login"></div>
-                            <div class="text-dark">Have trouble logging in? <a href="#" class="text-theme-color text-decoration-underline">Get help</a>
                             </div>
                         </div>
-                    </form>
-                 </div>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- footer -->
 
 
-    <!-- footer -->
     <!-- <div id="footer-head"></div> -->
     <!-- end-footer -->
     <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script>
@@ -115,7 +481,7 @@
     <script src="./dist/js/auth/apiservice.js"></script>
     <script src="./dist/js/navbar.js"></script>
     <script src="./dist/js/footer.js"></script>
-    <script src="./dist/js/auth/login.js"></script>
+    <!-- <script src="./dist/js/auth/login.js"></script> -->
     <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
     <script src="./dist/js/vendor/jquery-v3.6.0.min.js"></script>
     <script src="./dist/js/vendor/jquery-migrate-v3.3.2.min.js"></script>
@@ -129,67 +495,15 @@
     <script src="./dist/js/plugins/isotope.js"></script>
     <script src="./dist/js/plugins/jquery-ui.js"></script>
     <script src="./dist/js/plugins/magnific-popup.js"></script>
-    <script src="./dist/js/axios.min.js"></script>
-    <script src="./dist/js/cookies.min.js"></script>
-    <script src="./dist/js/fontawesome.all.js"></script>
-    <script src="./dist/js/fontawesome.min.js"></script>
+    <script src="./libs/axios.min.js"></script>
+    <script src="./libs/cookies.min.js"></script>
+    <script src="../dist/js/fontawesome.all.js"></script>
+    <script src="./dist/js/utils/CookieHelper.js"></script>
+    <script src="./dist/toaster/toastr.js"></script>
+    <script src="./dist/js/auth/login.js"></script>
     <!-- Main JS -->
     <script src="./dist/js/main.js"></script>
 
-    <script>
-        $("#get_otp").click(function(){
-            let empty_num = $("#user_number").val();
-            if(empty_num !== "" ){
-                $("#empt_num").removeClass("d-none");
-                $("#not_valid").addClass("d-none");
-            }
-            else if(empty_num.length >= 9){
-                $("#empt_num").addClass("d-none");
-                $("#not_valid").removeClass("d-none");
-            }
-            else{
-                $("#empt_num").addClass("d-none");
-                $("#not_valid").addClass("d-none")
-                $(this).addClass("d-none");
-                $("#user_number").addClass("d-none");
-                $(".user_number").addClass("d-none");
-
-                $(".otp-form").removeClass("d-none");
-                $(".otp_text").removeClass("d-none");
-                $("#proceed").removeClass("d-none");
-            }
-        });
-        $("#proceed").click(function(){
-
-            $(".otp-form").find("input").each(function(){
-                let otp_val = $(this).val();
-                if(otp_val !== ""){
-                    $("#otp_valid").removeClass("d-none");
-                }else{
-                    $("#otp_valid").addClass("d-none");
-                    window.location.href = `/myaccount.html`;
-                }
-            })
-            
-        });
-
-        $('.otp-form').find('input[type="password"]').on('keyup', function (e) {
-            if (this.value.length >= this.maxLength) {
-              if (e.keyCode !== 9 && e.keyCode !== 16) {
-                var tabIndex = this.tabIndex + 1;
-                $('.otp-form').find("input[tabindex='" + this.tabIndex + "']").val(this.value);
-                $('.otp-form').find("input[tabindex='" + tabIndex + "']").focus();
-              }
-            }
-            else {
-              if (e.keyCode === 8) {
-                var tabIndex = this.tabIndex - 1;
-                $('.otp-form').find("input[tabindex='" + tabIndex + "']").focus();
-              }
-
-            }
-          });
-    </script>
 </body>
 
 </html>

myaccount.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="shortcut icon" type="image/x-icon" href="./dist/assets/imgs/favicon.gif">
     <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="./dist/css/main.css" />
     <link rel="stylesheet" href="./style.css">
@@ -25,14 +24,16 @@
     <link rel="stylesheet" href="./dist/css/style.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.all.min.css">
     <link rel="stylesheet" href="./dist/css/fontawesome.min.css">
-    <title>My Account | Anwi</title>
+    <link rel="stylesheet" href="./dist//toaster/toastr.css">
+    <title>Anwi</title>
 </head>
 
-<body class="my_account_page">
+<body class="my_account_page d-none">
     <!-- navbar -->
     <div id="navbar-head" class="bg-white"></div>
       <!-- end-navbar -->
     <!-- main-body -->
+    <auth-loader></auth-loader>
     <main class="shopping-cart-main-container main-body pb-0">
       <section class="pt-5">
         <div class="my-account-wrapper bg-gradient-violet py-md-5">
@@ -49,13 +50,12 @@
                                 <div class="col-lg-3 col-md-4">
                                     <div class="myaccount-tab-menu nav" role="tablist">
                                         <a href="#dashboad" class="" data-bs-toggle="tab">Overview</a>
-                                        <a href="#orders" data-bs-toggle="tab" class="active"> My Orders</a>
-                                        <a href="#warrenty" data-bs-toggle="tab">Warranty Products </a>
+                                        <a href="#orders" data-bs-toggle="tab" class="active"> Orders</a>
+                                        <a href="#warrenty" data-bs-toggle="tab" class="d-none">Warranty</a>
                                         <a href="#payment-method" data-bs-toggle="tab" class="d-none"> Payment Method</a>
-                                       
                                         <a href="#account-info" data-bs-toggle="tab">Profile</a>
                                         <a href="#address-edit" data-bs-toggle="tab">address</a>
-                                        <a href="./login.html">Logout</a>
+                                        <a href="./login.html" class="User_logout">Logout</a>
                                     </div>
                                 </div>
                                 <!-- My Account Tab Menu End -->
@@ -187,70 +187,7 @@
                                         </div>
                                         <!-- Single Tab Content End -->
                                         <!-- Single Tab Content Start -->
-                                        <div class="tab-pane fade active show" id="orders" role="tabpanel">
-                                            <div class="myaccount-content">
-                                                <h3>Orders</h3>
-                                                <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards">
-                                                    <div class="row align-items-center">
-                                                        <div class="col-md-3 text-center">
-                                                            <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
-                                                        </div>
-                                                        <div class="col-md-9">
-                                                            <div class="row ps-md-2 ps-3">
-                                                                <div class="col-md-5">
-                                                                    <div>Serial No : <span class="text-secondary fs-9">#7907987897348</span></div>
-                                                                    <div>Purchase Date : <span class="text-secondary fs-9">Feb 1, 2023</span></div>
-                                                                </div>
-                                                                <div class="col-md-7">
-                                                                    <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2">Mar 20, 2023</span></div>
-                                                                    <div class="row">
-                                                                            <div class="col-md-5 col-6"> Status :</div>
-                                                                            <div class="col-md-7 col-6"><span class="btn btn-success py-0 fs-9">Running</span></div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div class="p-3">
-                                                        <p class="text-success d-done">Add Product Serial Number</p>
-                                                        <div class="d-none">
-                                                            <button class="btn btn-primary me-2">Send Remainder</button>
-                                                            <button class="btn btn-primary">Extended warranty History</button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards">
-                                                    
-                                                    <div class="row align-items-center">
-                                                        <div class="col-md-3  text-center">
-                                                            <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
-                                                        </div>
-                                                        <div class="col-md-9">
-                                                            <div class="row  ps-md-2 ps-3">
-                                                                <div class="col-md-5">
-                                                                    <div class="fs-9">Serial No : <span class="text-secondary fs-9">#7907987897348</span></div>
-                                                                    <div class="fs-9">Purchase Date : <span class="text-secondary fs-9">Feb 1, 2023</span></div>
-                                                                </div>
-                                                                <div class="col-md-7">
-                                                                    <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2">Mar 20, 2023</span></div>
-                                                                    <div class="row">
-                                                                        <div class="col-md-5 col-6"> Status :</div>
-                                                                        <div class="col-md-7 col-6"> <span class="btn btn-success py-0 fs-9">Running</span></div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                    <div class="p-3">
-                                                        <p class="text-success d-none">Add Product Serial Number</p>
-                                                        <div class="d-none">
-                                                            <button class="btn btn-primary me-2">Send Remainder</button>
-                                                            <button class="btn btn-primary">Extended warranty History</button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
+                                       
                                         <!-- Single Tab Content End -->
                                         <!-- Single Tab Content Start -->
                                         <div class="tab-pane fade" id="payment-method" role="tabpanel">
@@ -288,49 +225,79 @@
                                                
                                             </div>
                                         </div>
+                                        <div class="tab-pane fade active show" id="orders" role="tabpanel">
+                                            <div class="myaccount-content">
+                                                <h3>Order Details</h3>
+                                                <div class="user_order_details border rounded mb-3">
+                                                </div>
+                                            </div>
+                                         
+                                        </div>
                                         <div class="tab-pane fade" id="warrenty" role="tabpanel">
-                                            <div class="myaccount-content pb-0">
-                                                <div id="product-2" class="tab-pane  active pb-5">
-                                                    <h5 class="mb-md-4">Enter your Product Serial no. :</h5>
-                                                    <div class="row ">
-                                                        <div class="col-md-12">
-                                                            <form>
-                                                                <div class="row pt-2">
-                                                                    <div class="col-md-6">
-                                                                        <div class="col-md-12 pb-4 d-none">
-                                                                            <input type="text" class="form-control border-0 shadow-none  border-bottom" placeholder="Enetr Mobile Number.." required />
-                                                                        </div>
-                                                                        <div class="col-md-12 text-center d-none py-md-4 py-2">
-                                                                            <sapn class="p-2 shadow bg-gray rounded-2">Or</span>
-                                                                        </div>
-                                                                        <div class="col-md-12 pb-4">
-                                                                            <input type="text"
-                                                                                class="form-control border-0 shadow-none  border-bottom"
-                                                                                placeholder="Enetr Serial Number.." required />
-                                                                        </div>
-                                                                        <div class="col-md-12 pb-4 d-none">
-                                                                            <input type="text"
-                                                                                class="form-control border-0 shadow-none  border-bottom"
-                                                                                placeholder="Enetr captcha" required />
-                                                                        </div>
-                                                                        <div class="col-md-12 pb-4 px-md-2 text-center d-none">
-                                                                            <span class="fw-bold pe-3">W p 5 C n</span> <span
-                                                                                class="cursor-pointer text-primary">Refresh captcha</span>
-                                                                        </div>
-                                                                        <div class="col-md-6 pb-4 px-md-2">
+                                                <div class="myaccount-content">
+                                                    <h3>Warranty Order Details</h3>
+                                                    <div class="user_orders">
+    
+                                                    </div>
+                                                    <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards d-none">
+                                                        <div class="row align-items-center">
+                                                            <div class="col-md-3">
+                                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
+                                                            </div>
+                                                            <div class="col-md-9">
+                                                                <div class="row">
+                                                                    <div class="col-md-5">
+                                                                        <div>Serail NO: <span class="text-secondary fs-9 serial_no">#7907987897348</span></div>
+                                                                        <div>Purchase Date : <span class="text-secondary fs-9 purchase_date">Feb 1, 2023</span></div>
+                                                                    </div>
+                                                                    <div class="col-md-7">
+                                                                        <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2 warrenty_date">Mar 20, 2023</span></div>
+                                                                        <div class="row">
+                                                                                <div class="col-md-5"> Status :</div>
+                                                                                <div class="col-md-7"> <span class="btn btn-success py-0 fs-9">Running</span></div>
                                                                         </div>
-                                                                        <div class="col-md-12 pb-4 text-center">
-                                                                            <span class="action_btn">
-                                                                                <button class="btn border px-5">Submit</button>
-                                                                            </span>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="p-3">
+                                                            <div class="d-none">
+                                                                <button class="btn btn-primary me-2">Send Remainder</button>
+                                                                <button class="btn btn-primary">Extended warranty History</button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="border-0 border-bottom card rounded-0 shadow-sm mb-2 order-cards d-none">
+                                                        
+                                                        <div class="row align-items-center">
+                                                            <div class="col-md-3">
+                                                                <img src="./dist/assets/imgs/Navbar/ora_ddr4_desktop.png" class="img-fluid w-75"/>
+                                                            </div>
+                                                            <div class="col-md-9">
+                                                                <div class="row">
+                                                                    <div class="col-md-5">
+                                                                        <div class="fs-9">Product ID : <span class="text-secondary fs-9">#7907987897348</span></div>
+                                                                        <div class="fs-9">Purchase Date : <span class="text-secondary fs-9">Feb 1, 2023</span></div>
+                                                                    </div>
+                                                                    <div class="col-md-7">
+                                                                        <div class="fs-9">Warrenty Expairy Date : <span class="bg-warning px-2 fs-9 rounded-2">Mar 20, 2023</span></div>
+                                                                        <div class="row">
+                                                                            <div class="col-md-5"> Status :</div>
+                                                                            <div class="col-md-7"> <span class="btn btn-success py-0 fs-9">Running</span></div>
                                                                         </div>
                                                                     </div>
                                                                 </div>
-                                                            </form>
+                                                            </div>
+                                                        </div>
+                                                        <div class="p-3">
+                                                            <div class="d-none">
+                                                                <button class="btn btn-primary me-2">Send Remainder</button>
+                                                                <button class="btn btn-primary">Extended warranty History</button>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                           
                                         </div>
                                         <!-- Single Tab Content End -->
                                         <!-- Single Tab Content Start -->
@@ -409,11 +376,13 @@
     <!-- footer -->
     <div id="footer-head"></div>
     <!-- end-footer -->
-    <!-- <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
+    <!-- <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="./libs/bootstrap/js/bootstrap.bundle.min.js"></script> -->
     <script src="./dist/js/jquery.min.js"></script>
     <script src="./dist/js/navbar.js"></script>
     <script src="./dist/js/footer.js"></script>
-    <script src="./dist/js/cookies.min.js"></script>
+    <script src="./dist/Js/components/authloader/authloader.js"></script>
+    <script src="./dist/js/auth/apiservice.js"></script>
+    <script src="./libs/cookies.min.js"></script>
     <script src="./dist/js/fontawesome.all.js"></script>
     <script src="./dist/js/fontawesome.min.js"></script>
     <script src="./dist/js/vendor/modernizr-3.11.7.min.js"></script>
@@ -429,16 +398,60 @@
     <script src="./dist/js/plugins/isotope.js"></script>
     <script src="./dist/js/plugins/jquery-ui.js"></script>
     <script src="./dist/js/plugins/magnific-popup.js"></script>
-    <!-- Main JS -->
+    <!-- Main JS --> 
+    <script src="./dist//toaster/toastr.js"></script>
+    <!-- <script src="./dist/js/auth/apiservice.js"></script> -->
+    <script src="./dist/js/localstorage/loginauthlocal.js"></script>
+    <!-- <script src="./dist/js/utils/CookieHelper.js"></script> -->
+    <script src="./libs/axios.min.js"></script>
+    <script src="./dist/js/myaccount/orderdetails.js"></script>
+    <script src="./dist/js/myaccount/myaccount_warrenty.js"></script>
+    <script src="./dist/Js/myaccount/Myaccount.js"></script>
     <script src="./dist/js/main.js"></script>
 
+
     <script>
+        $(document).ready(function() {
+            let Userpassword_update =window.localStorage.getItem('Ispasswordupdate')
+        if(Userpassword_update == 'true'){
+            toasteropts()
+            Command: toastr["success"]("Password Updated Successfully");
+            window.localStorage.removeItem('Ispasswordupdate')
+            return
+        }
+    function toasteropts(){
+       toastr.options = {
+      "closeButton": true,
+      "debug": false,
+      "newestOnTop": true,
+      "progressBar": true,
+      "positionClass": "toast-top-center",
+      "preventDuplicates": true,
+      "onclick": null,
+      "showDuration": "300",
+      "hideDuration": "1000",
+      "timeOut": "5000",
+      "extendedTimeOut": "1000",
+      "showEasing": "swing",
+      "hideEasing": "linear",
+      "showMethod": "fadeIn",
+      "hideMethod": "fadeOut"
+    }
+    }
+});
         $(".order-cards").each(function(){
             $(".order-cards").css("cursor","pointer")
             $(this).click(function(){
                 window.location.href = "./orderdetails.html";
             })
         })
+        $('.User_logout').click(function(){
+            window.localStorage.removeItem("Useremail");
+            window.localStorage.removeItem("Userpassword"); 
+            window.localStorage.setItem('Isloggedin',false)
+            COOKIE_HELPER_ACTIONS.removeAuthCookie();
+        })
+        
     </script>
 </body>
 

orderdetails.html

@@ -39,7 +39,7 @@
         <div class="container pb-5">
             <div class="row pb-4">
                 <div class="col-6">
-                    <a href="myaccount.html" class="fw-600 text-a-color"> Back to Orders</a>
+                    <a href="#" class="fw-600 text-a-color back_to_orders"> Back to Orders</a>
                 </div>
                 <div class="col-6 text-end">
                     <a href="#" class="fw-600 text-a-color">Need Help ?</a>
@@ -73,7 +73,7 @@
                                     <img src="./dist/assets/imgs/Home/Shopping-cart-item-img.png" class="img-fluid order_img"/>
                                 </div>
                                 <div class="col-md-8 position-relative">
-                                    <p class="mb-0 fs-6">14inch laptop</p>
+                                    <p class="mb-0 fs-6 order_itemname"></p>
                                     <p class="mb-3 fs-6 fw-600 d-flex align-items-center">
                                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
                                             <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"></path>
@@ -110,7 +110,7 @@
                                     <img src="./dist/assets/imgs/Home/Shopping-cart-item-img.png" class="img-fluid order_img"/>
                                 </div>
                                 <div class="col-md-8 position-relative">
-                                    <p class="mb-0 fs-6">14inch laptop</p>
+                                    <p class="mb-0 fs-6 order_itemname"></p>
                                     <p class="mb-3 fs-6 fw-600 d-flex align-items-center">
                                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
                                             <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"></path>
@@ -125,12 +125,7 @@
                 <div class="col-md-4">
                     <div class="Order_details_section mb-2">
                         <div class="card rounded-0 border-0 order-summary">
-                                <div class="card-body">
-                                    <div>
-                                        <p class="mb-0 fs-6 fw-500">Order<span># AN309630760202</span></span><span class="text-secondary fs-9"> (1 items)</p>
-                                        <p class="mb-0 fs-6">Order placed on 4th March 2023</p>
-                                        <p class="mb-0 fs-9">Paid by Credit Card</p>
-                                    </div>
+                               
                                 </div>
                         </div>
                         <div class="card rounded-0 border-top-0">
@@ -143,15 +138,17 @@
                                                     <p class="fs-9 mb-0">Order Amount</p> 
                                                 </div>
                                                 <div class="col-6 text-end">
-                                                    <p class="fs-7 mb-0">₹32,000.00</p>
+                                               <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
+                                            <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"></path>
+                                        </svg><span class="order_price fs-7">32,000</span>
                                                 </div>
                                             </div>
                                             <div class="row align-items-center">
                                                 <div class="col-6">
-                                                    <p class="fs-9 mb-0">Order Savings</p>
+                                                    <p class="fs-9 mb-0">Tax</p>
                                                 </div>
                                                 <div class="col-6 text-end">
-                                                    <p class="fs-7 mb-0 text-order-brown">-₹1000.00</p>
+                                                    <p class="fs-7 mb-0 text-order-brown order_tax">-₹1000.00</p>
                                                 </div>
                                             </div>
                                             <div class="row align-items-center">
@@ -164,10 +161,13 @@
                                             </div>
                                             <div class="row align-items-center">
                                                 <div class="col-6">
-                                                    <p class="fs-9 mb-1 fw-500">Order Toatal</p>
+                                                    <p class="fs-9 mb-1 fw-500">Order Total</p>
                                                 </div>
                                                 <div class="col-6 text-end">
-                                                    <p class="fs-7 mb-1 fw-500">₹31,000.00</p>
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="currentColor" class="bi bi-currency-rupee" viewBox="0 0 16 16">
+                                                        <path d="M4 3.06h2.726c1.22 0 2.12.575 2.325 1.724H4v1.051h5.051C8.855 7.001 8 7.558 6.788 7.558H4v1.317L8.437 14h2.11L6.095 8.884h.855c2.316-.018 3.465-1.476 3.688-3.049H12V4.784h-1.345c-.08-.778-.357-1.335-.793-1.732H12V2H4v1.06Z"></path>
+                                                    </svg>
+                                                    <span class="fs-7 mb-1 fw-500 Order_total"></span>
                                                 </div>
                                             </div>
     
@@ -248,6 +248,7 @@
     <script src="./dist/js/plugins/isotope.js"></script>
     <script src="./dist/js/plugins/jquery-ui.js"></script>
     <script src="./dist/js/plugins/magnific-popup.js"></script>
+    <script src="./dist/js/orderDetails/order_summary.js"></script>
     <!-- Main JS -->
     <script src="./dist/js/main.js"></script>