susee

.gitignore

@@ -16,7 +16,7 @@ public/assets/fonts
 public/assets/images
 public/assets/js
 public/assets/libs
-public/assets/member_images
 # Include
 !public/assets/member_css
 !public/assets/member_js
+!public/assets/member_images

app/Views/memberaccess.php

@@ -495,7 +495,7 @@ $(document).ready(function(){
         //     .catch(function() { callback("us"); });
         // },
         // hiddenInput: "full_number",
-        initialCountry: country_code || "us",
+        initialCountry: country_code || "ca",
         // localizedCountries: { 'de': 'Deutschland' },
         // nationalMode: false,
         // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],

app/Views/myaccount.php

@@ -19,6 +19,12 @@
     <script src="<?= base_url()."/public"; ?>/assets/libs/parsleyjs/parsley.min.js"></script>
     <!-- Validation init js-->
     <script src="<?= base_url()."/public"; ?>/assets/js/pages/form-validation.init.js"></script>
+    
+    <!-- Internatinal Mobile Number -->
+    <link rel="stylesheet" href="<?= base_url()."/public/"; ?>assets/member_css/intlTelInput.css">
+    <script src="<?= base_url()."/public/"; ?>assets/member_js/intlTelInput.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>  
+
     <script>
 
         function check_if_exists() {
@@ -88,7 +94,7 @@
     .field-icon {
     float: right;
     margin-left: -35px;
-    margin-top: 17px;
+    margin-top: 18px;
     margin-right: 12px;
     position: relative;
     z-index: 3;
@@ -119,27 +125,43 @@
                         <label for="username">Last Name</label>
                         <input type="text" class="form-control" required parsley-type="text" name="last_name" placeholder="Last Name" id="lastname"/> 
                     </div>
-                    <div class="col-6 mb-3">
+                    <div class="col-12 mb-3">
                         <label for="loginemail">Email Id</label>
-                        <input type="email" class="form-control" required name="email" placeholder="Email" onchange="check_if_exists();" id="email"/> 
+                        <input type="email" class="form-control" required name="email" placeholder="Enter your email id" onchange="check_if_exists();" id="email"/> 
                         <span id="already_err"></span>
                     </div>
-                    <div class="col-6 mb-3">
+                    <div class="col-12 mb-3">
                         <label for="loginemail">Confirm Email</label>
-                        <input type="email" class="form-control" required name="confirm_email" onpaste="disablePaste(event)" placeholder="Email" id="cemail"/> 
+                        <input type="email" class="form-control" required name="confirm_email" onpaste="disablePaste(event)" placeholder="Enter your email id" id="cemail"/> 
                         <span id="email_match"></span>
                     </div>
-                    <div class="col-12 mb-3">
+                     <div class="col-12 mb-3">
                         <label for="mobile">Mobile Number</label>
-                        <input type="tel" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" class="form-control" data-parsley-type="number" name="mobile" placeholder="Enter your mobile number" id="mobile"/> 
+                        <input type="tel" class="form-control" data-parsley-type="number" name="mobile" placeholder="Enter your mobile number" id="mobile"/> 
                     </div>
-                    <div class="col-6 mb-3">
+                    <!-- <div class="col-12 mb-3">
-                        <label for="mobile">Password</label>
+                        <label for="mobile">Address</label>
-                        <input required parsley-type="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="password" placeholder="Password" id="hori-pass"/> 
+                        <input type="text" class="form-control" data-parsley-type="text" name="address" placeholder="Enter your address" id="hori-pass1"/> 
+                    </div> -->
+                    <div class="col-12 mb-3 show-password1 login-pwd">
+                        <label for="hori-pass">Password</label>
+                        <span toggle="#hori-pass" id="toggle-password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
+                        <input required type="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="password" placeholder="Password" id="hori-pass"/> 
+                        <div id="pswd_info">
+                            <h4>Password requirements</h4>
+                            <ul>
+                                <li id="letter" class="invalid">At least <strong>one letter</strong></li>
+                                <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
+                                <li id="number" class="invalid">At least <strong>one number</strong></li>
+                                <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
+                                <li id="space" class="invalid">use any one<strong> [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
+                            </ul>
+				        </div> 
                     </div>
-                    <div class="col-6 mb-3">
+                    <div class="col-12 mb-3 show-password1 login-pwd">
-                        <label for="mobile">Confirm Password</label>
+                        <label for="cpassword">Confirm Password</label>
-                        <input required parsley-type="password" class="form-control" data-parsley-equalto="#hori-pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="cpassword" placeholder="Password" id="cpassword"/> 
+                        <span toggle="#cpassword" id="toggle-password1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
+                        <input required type="password" class="form-control" data-parsley-equalto="#hori-pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="cpassword" placeholder="Password" id="cpassword"/> 
                     </div> 
                 </div>                                                   
                 <button class="signup-btn" type="submit">Register</button>
@@ -208,7 +230,7 @@
 
                 <button class="signin-btn" type="submit">Login</button>
 
-                <a href="<?=  base_url()."forgot_password"; ?>" class="forget-pwd">Forgot your password?</a>
+                <a href="<?=  base_url()."forgot_password"; ?>" class="forget-pwd mt-2">Forgot your password?</a>
 
             </form>
 
@@ -278,6 +300,34 @@ signInButton.addEventListener('click', () => {
 
 </script>
 <script>
+    var country_code = $('#country_code').val();
+     var input = document.querySelector("#mobile");
+      window.intlTelInput(input, {
+        // allowDropdown: false,
+         autoInsertDialCode: true,
+       // autoPlaceholder: "on",
+        dropdownContainer: document.body,
+        // excludeCountries: ["us"],
+       // formatOnDisplay: true,
+        // geoIpLookup: function(callback) {
+        //   fetch("https://ipapi.co/json")
+        //     .then(function(res) { return res.json(); })
+        //     .then(function(data) { callback(data.country_code); })
+        //     .catch(function() { callback("us"); });
+        // },
+        // hiddenInput: "full_number",
+        initialCountry: country_code || "ca",
+        // localizedCountries: { 'de': 'Deutschland' },
+        // nationalMode: false,
+        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
+        // placeholderNumberType: "MOBILE",
+        // preferredCountries: ['cn', 'jp'],
+        //separateDialCode: true,
+        showFlags: true,
+        utilsScript: "<?= base_url()."/public/"; ?>assets/member_js/utils.js"
+      });
+    $('#mobile').inputmask('(999)-999-9999'); 
+
     $("#toggle-password").click(function() {
     $(this).toggleClass("fa-eye fa-eye-slash");
     var input = $($(this).attr("toggle"));
@@ -288,6 +338,65 @@ signInButton.addEventListener('click', () => {
         input.attr("type", "password");
     }
     });
+    $("#toggle-password1").click(function() {
+    $(this).toggleClass("fa-eye fa-eye-slash");
+    if ($('#cpassword').attr("type") == "password") {
+        $('#cpassword').attr("type", "text");
+    } 
+    else {
+        $('#cpassword').attr("type", "password");
+    }
+    });
+</script>
+
+<script>
+$(document).ready(function(){
+	
+	$('#hori-pass').keyup(function() {
+		var pswd = $(this).val();
+		
+		//validate the length
+		if ( pswd.length < 8 ) {
+			$('#length').removeClass('valid').addClass('invalid');
+		} else {
+			$('#length').removeClass('invalid').addClass('valid');
+		}
+		
+		//validate letter
+		if ( pswd.match(/[A-z]/) ) {
+			$('#letter').removeClass('invalid').addClass('valid');
+		} else {
+			$('#letter').removeClass('valid').addClass('invalid');
+		}
+
+		//validate capital letter
+		if ( pswd.match(/[A-Z]/) ) {
+			$('#capital').removeClass('invalid').addClass('valid');
+		} else {
+			$('#capital').removeClass('valid').addClass('invalid');
+		}
+
+		//validate number
+		if ( pswd.match(/\d/) ) {
+			$('#number').removeClass('invalid').addClass('valid');
+		} else {
+			$('#number').removeClass('valid').addClass('invalid');
+		}
+		
+		//validate space
+		if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
+			$('#space').removeClass('invalid').addClass('valid');
+		} else {
+			$('#space').removeClass('valid').addClass('invalid');
+		}
+		
+	}).focus(function() {
+		$('#pswd_info').show();
+	}).blur(function() {
+		$('#pswd_info').hide();
+	});
+	
+});
 </script> 
 
 

public/assets/member_css/front-style.css

@@ -919,12 +919,11 @@ body.checkout  .select2-container--default .select2-selection--single .select2-s
 }
 .account-width h1{
     text-align: center;
-    font-size: 28px;
+    font-size: 21px;
 }
 
 .account-width form{
     background:#ffffff;
-    height: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -933,7 +932,7 @@ body.checkout  .select2-container--default .select2-selection--single .select2-s
 
 .account-width input[type="text"], .account-width input[type="email"], .account-width input[type="password"], .account-width input[type="tel"], .forgetpassword input[type="email"], .forgetpassword input[type="number"], .forgetpassword input[type="text"], .forgetpassword input[type="password"]{
     width: 100%;   
-    height:50px;
+    height:40px;
     border:2px solid #BEBEBF;
     padding:5px 10px;
     border-radius:5px;
@@ -989,6 +988,10 @@ body.checkout  .select2-container--default .select2-selection--single .select2-s
     padding:30px 30px;
 }
 
+.sign-in-container form{
+    height: 100%;
+}
+
 .account-width.right-panel-active .sign-in-container {
 	transform: translateX(100%);
 }
@@ -1006,6 +1009,8 @@ body.checkout  .select2-container--default .select2-selection--single .select2-s
 	opacity: 1;
 	z-index: 5;
 	animation: show 0.6s;
+    overflow-y:scroll;
+    background-color: #ffffff;
 }
 
 @keyframes show {
@@ -1551,3 +1556,14 @@ body.checkout  .select2-container--default .select2-selection--single .select2-s
     background:#002b60;
     color:#fff;
 }
+.login-pwd #pswd_info{
+    top: 80px!important;
+    right: 0!important;
+}
+.login-pwd #pswd_info::before {
+    left: 45%;
+    margin-top: -12.5px;
+    position: absolute;
+    top:0;
+    transform: rotate(45deg);
+}

public/assets/member_images/footer icon/facebook-f.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>

public/assets/member_images/footer icon/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

public/assets/member_images/footer icon/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>