@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/pages/login.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="font-body">
+    <banner :pageTitle="isLoginForm ? 'Login' : 'Register'" />
+
+    <ClientOnly>
+      <div class="osi-login-wrap">
+        <form class="osi-auth-card" novalidate @submit.prevent="submitForm">
+          <!-- Login / Register switch -->
+          <div class="osi-segmented" role="tablist">
+            <button
+              type="button"
+              role="tab"
+              class="osi-btn"
+              :class="{ 'is-active': isLoginForm }"
+              :aria-selected="isLoginForm"
+              @click="isLoginForm = true"
+            >
+              Login
+            </button>
+            <button
+              type="button"
+              role="tab"
+              class="osi-btn"
+              :class="{ 'is-active': !isLoginForm }"
+              :aria-selected="!isLoginForm"
+              @click="isLoginForm = false"
+            >
+              Register
+            </button>
+          </div>
+
+          <!-- Login Form -->
+          <div v-if="isLoginForm" class="osi-auth-stack osi-login-body">
+            <OsiField
+              v-model="formData.email"
+              id="login-email"
+              label="Email"
+              type="email"
+              autocomplete="email"
+              required
+              :error="errors.email"
+              @input="clearError('email')"
+            />
+
+            <OsiField
+              v-model="formData.password"
+              id="login-password"
+              label="Password"
+              :type="isPasswordVisible ? 'text' : 'password'"
+              autocomplete="current-password"
+              required
+              :error="errors.password ? 'Password is required' : false"
+              @input="clearError('password')"
+            >
+              <template #suffix>
+                <button
+                  type="button"
+                  class="osi-login-eye"
+                  :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+                  @click="togglePasswordVisibility"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
+                </button>
+              </template>
+            </OsiField>
+
+            <router-link to="/forgot-password/" class="osi-login-link">
+              Forgot Your Password?
+            </router-link>
+
+            <button
+              type="submit"
+              class="osi-btn osi-btn--block osi-login-submit"
+              :disabled="isLoginLoading"
+              :aria-busy="isLoginLoading"
+            >
+              <span v-if="isLoginLoading" class="osi-btn-spinner" aria-hidden="true" />
+              <span>Login</span>
+            </button>
+          </div>
+
+          <!-- Register Form -->
+          <div v-else class="osi-auth-stack osi-login-body">
+            <div class="osi-auth-row">
+              <OsiField
+                v-model="registerData.first_name"
+                id="register-first-name"
+                label="First Name"
+                autocomplete="given-name"
+                required
+                :error="registerErrors.first_name"
+                @input="clearRegisterError('first_name')"
+              />
+              <OsiField
+                v-model="registerData.last_name"
+                id="register-last-name"
+                label="Last Name"
+                autocomplete="family-name"
+                required
+                :error="registerErrors.last_name"
+                @input="clearRegisterError('last_name')"
+              />
+            </div>
+
+            <OsiField
+              v-model="registerData.email"
+              id="register-email"
+              label="Email"
+              type="email"
+              autocomplete="email"
+              required
+              :error="registerErrors.email || emailError"
+              @input="clearRegisterError('email')"
+            />
+
+            <OsiField
+              label="Mobile number"
+              required
+              floated
+              :label-style="phoneLabelStyle"
+              :error="registerErrors.mobile"
+            >
+              <template #control="{ id, inputClass }">
+                <PhoneNumInput
+                  v-model="registerData.mobile"
+                  variant="theme"
+                  :input-id="id"
+                  :input-class="inputClass"
+                  :error="!!registerErrors.mobile"
+                  @update="phoneNumberResults = $event"
+                  @clear-error="clearRegisterError('mobile')"
+                />
+              </template>
+            </OsiField>
+
+            <OsiField
+              v-model="registerData.password"
+              id="register-password"
+              label="Password"
+              :type="isPasswordVisible ? 'text' : 'password'"
+              autocomplete="new-password"
+              required
+              :error="registerErrors.password"
+              @input="validatePasswords(); clearRegisterError('password')"
+            >
+              <template #suffix>
+                <button
+                  type="button"
+                  class="osi-login-eye"
+                  :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+                  @click="togglePasswordVisibility"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
+                </button>
+              </template>
+            </OsiField>
+
+            <OsiField
+              v-model="confirmPassword"
+              id="register-confirm-password"
+              label="Confirm Password"
+              :type="isConfirmPasswordVisible ? 'text' : 'password'"
+              autocomplete="new-password"
+              required
+              :error="registerErrors.confirmPassword || passwordError"
+              @input="validatePasswords(); clearRegisterError('confirmPassword')"
+            >
+              <template #suffix>
+                <button
+                  type="button"
+                  class="osi-login-eye"
+                  :aria-label="isConfirmPasswordVisible ? 'Hide password' : 'Show password'"
+                  @click="toggleConfirmPasswordVisibility"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                  </svg>
+                </button>
+              </template>
+            </OsiField>
+
+            <label class="osi-login-terms">
+              <input type="checkbox" class="osi-login-check" />
+              <span>
+                I agree to the
+                <a class="osi-login-link">Terms &amp; Conditions</a>
+                and
+                <a class="osi-login-link">Privacy Policy</a>
+              </span>
+            </label>
+
+            <button
+              type="submit"
+              class="osi-btn osi-btn--block osi-login-submit"
+              :disabled="isLoading"
+              :aria-busy="isLoading"
+            >
+              <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+              <span>Register</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import AuthenticationService from "../services/Authentication/AuthenticationService";
+import { useToast } from "vue-toastification";
+import { eventBus } from "../utils/eventBus";
+import { authBus } from "../services/AuthBus";
+import { PhoneNumInput } from "#components";
+import { OsiField } from "#components";
+import { getDeviceInfo } from "#osi/utils/device";
+import CartServices from "#osi/services/CartServices";
+
+import { ref } from "vue";
+const phoneNumber = ref();
+const countryCode = ref("FR");
+const phoneNumberResults = ref();
+
+export default {
+  components: {
+    PhoneNumInput,
+    OsiField,
+    banner,
+  },
+  setup() {
+    // Gives the Options API access to the same theme-controls source
+    // OsiField.vue reads internally, so phoneLabelStyle (below) can mirror
+    // the theme's current label style.
+    const { controls } = useThemeControls();
+    return { themeControls: controls };
+  },
+  data() {
+    return {
+      isLoginForm: true,
+      isPasswordVisible: false,
+      isConfirmPasswordVisible: false,
+      showErrorMessage: false,
+      isLoginLoading: false,
+      isLoading: false,
+      emailError: "",
+      passwordError: "",
+      errorMessage: "",
+      formData: {
+        email: "",
+        password: "",
+        login_as: "customer",
+      },
+      confirmPassword: "",
+      phoneNumberResults: null,
+      registerData: {
+        first_name: "",
+        last_name: "",
+        email: "",
+        mobile: "",
+        password: "",
+        register_as: "customer",
+        countryCode: "LB",
+      },
+      errors: {
+        email: false,
+        password: false,
+      },
+      registerErrors: {
+        first_name: false,
+        last_name: false,
+        email: false,
+        mobile: false,
+        password: false,
+        confirmPassword: false,
+      },
+    };
+  },
+  computed: {
+    // Mobile number field: show the label only when the theme's label
+    // style is ABOVE; otherwise keep it visually hidden (sr-only via
+    // OsiField's PLACEHOLDER style) rather than letting it float on focus.
+    phoneLabelStyle() {
+      return this.themeControls?.labelStyle === "ABOVE" ? "ABOVE" : "PLACEHOLDER";
+    },
+  },
+  methods: {
+    clearError(field) {
+      this.errors[field] = false;
+    },
+    clearRegisterError(field) {
+      this.registerErrors[field] = false;
+    },
+    //email validation
+    validateEmail() {
+      const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+
+      if (!emailPattern.test(this.registerData.email)) {
+        this.emailError = "Please enter a valid email address.";
+        return;
+      } else {
+        this.emailError = "";
+      }
+    },
+    //password validation
+    validatePasswords() {
+      this.passwordError = "";
+
+      if (!this.registerData.password || !this.confirmPassword) {
+        return false; // Prevent form submission if passwords are empty
+      }
+
+      if (this.registerData.password !== this.confirmPassword) {
+        this.passwordError = "Passwords do not match";
+        return false;
+      }
+
+      return true; // Passwords are valid
+    },
+
+    togglePasswordVisibility() {
+      this.isPasswordVisible = !this.isPasswordVisible;
+    },
+    toggleConfirmPasswordVisibility() {
+      this.isConfirmPasswordVisible = !this.isConfirmPasswordVisible;
+    },
+    showError(message) {
+      this.errorMessage = message;
+      this.showErrorMessage = true;
+
+      setTimeout(() => {
+        this.showErrorMessage = false;
+      }, 10000);
+    },
+    resetErrorMessage() {
+      this.errorMessage = "";
+    },
+
+    async submitForm() {
+      const toast = useToast();
+      if (this.isLoginForm) {
+        let isValid = true;
+
+        this.errors.email = false;
+        this.errors.password = false;
+
+        if (!this.formData.email) {
+          this.errors.email = "Email is required";
+          isValid = false;
+        } else if (!this.isValidEmail(this.formData.email)) {
+          this.errors.email = "Please enter a valid email address";
+          isValid = false;
+        }
+        if (!this.formData.password) {
+          this.errors.password = "Password is required";
+          isValid = false;
+        }
+
+        if (!isValid) {
+          return;
+        }
+
+        try {
+          this.isLoginLoading = true;
+   const deviceInfo = getDeviceInfo();
+ const loginResponse = await this.login({
+    ...this.formData,
+    ...deviceInfo,
+  });
+            toast.success("You have successfully signed into your account!");
+          authBus.checkAuth();
+          
+  // merge guest cart into the now-authenticated account
+  await CartServices.mergeCart();
+
+          eventBus.emit("cartUpdated");
+          const redirectPath = this.$route.query.redirect || "/";
+          this.$router.push(redirectPath);
+        } catch (error) {
+          this.isLoginLoading = false;
+          toast.error("Wrong Credentials");
+          this.errorMessage = "Wrong email or password";
+          this.showErrorMessage = true;
+          setTimeout(() => {
+            this.showErrorMessage = false;
+          }, 10000);
+        } finally {
+          this.isLoginLoading = false;
+        }
+      } else {
+        let isRegisterValid = true;
+        this.registerErrors.first_name = false;
+        this.registerErrors.last_name = false;
+        this.registerErrors.email = false;
+        this.registerErrors.mobile = false;
+        this.registerErrors.password = false;
+        this.registerErrors.confirmPassword = false;
+
+        if (!this.registerData.first_name) {
+          this.errors.first_name = "First name is required";
+          isRegisterValid = false;
+        }
+        if (!this.registerData.first_name) {
+          this.registerErrors.first_name = "First name is required";
+          isRegisterValid = false;
+        }
+        // Validate Last Name
+        if (!this.registerData.last_name) {
+          this.registerErrors.last_name = "Last name is required";
+          isRegisterValid = false;
+        }
+        if (!this.registerData.mobile) {
+          this.registerErrors.mobile = "Mobile number is required";
+          isRegisterValid = false;
+        } else if (!this.phoneNumberResults?.isValid) {
+          this.registerErrors.mobile = "Mobile number is not valid";
+          isRegisterValid = false;
+        }
+        // Validate Email
+        if (!this.registerData.email) {
+          this.registerErrors.email = "Email is required";
+          isRegisterValid = false;
+        } else if (!this.isValidEmail(this.registerData.email)) {
+          this.registerErrors.email = "Please enter a valid email address";
+          isRegisterValid = false;
+        }
+        if (!this.validatePasswords()) {
+          isRegisterValid = false;
+        }
+
+        if (!this.confirmPassword) {
+          this.registerErrors.confirmPassword = "Confirm Password is required";
+          isRegisterValid = false;
+        }
+        // Validate Password
+        if (!this.registerData.password) {
+          this.registerErrors.password = "Password is required";
+          isRegisterValid = false;
+        }
+        if (!isRegisterValid) {
+          return;
+        }
+
+        try {
+          this.isLoading = true;
+          const registerResponse = await this.register(this.registerData);
+          //console.log(registerResponse);
+          this.$router.push({
+            path: "/verificationcode",
+            query: { email: this.registerData.email },
+          });
+        } catch (error) {
+          //console.log(error)
+          this.isLoading = false;
+          if (error) {
+            const apiErrors = error;
+            let errorMessages = [];
+
+            this.registerErrors = {
+              first_name: "",
+              last_name: "",
+              email: "",
+              mobile: "",
+              password: "",
+              confirmPassword: "",
+            };
+
+            for (const messages of Object.values(apiErrors)) {
+              errorMessages.push(...messages);
+            }
+
+            // Display errors in toast
+            if (errorMessages.length > 1) {
+              toast.error(`• ${errorMessages.join("\n• ")}`, {
+                timeout: 5000,
+                closeOnClick: true,
+                pauseOnHover: true,
+              });
+            } else if (errorMessages.length === 1) {
+              toast.error(errorMessages[0]);
+            }
+          } else {
+            this.errorMessage = error.message;
+            this.showErrorMessage = true;
+            setTimeout(() => {
+              this.showErrorMessage = false;
+            }, 10000);
+          }
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+
+    isValidEmail(email) {
+      const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      return regex.test(email);
+    },
+
+    async login(formData) {
+      try {
+        const response = await AuthenticationService.login(formData);
+        eventBus.userLoggedIn = true;
+        return response;
+      } catch (error) {
+        console.error("Error during login:", error);
+        throw error;
+      }
+    },
+    async register(registerData) {
+      try {
+        const response = await AuthenticationService.register(registerData);
+        return response;
+      } catch (error) {
+        throw error;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.osi-login-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 2.5rem 1.25rem;
+}
+@media (min-width: 768px) {
+  .osi-login-wrap {
+    padding-block: 5rem;
+  }
+}
+.osi-login-body {
+  margin-top: 1.25rem;
+}
+.osi-login-submit {
+  margin-top: 0.5rem;
+}
+.osi-login-link {
+  width: fit-content;
+  font-size: 0.875rem;
+  color: inherit;
+  opacity: 0.7;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.osi-login-link:hover {
+  opacity: 1;
+}
+.osi-login-eye {
+  display: flex;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.osi-login-eye svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.osi-login-terms {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  font-size: 0.875rem;
+  opacity: 0.85;
+  cursor: pointer;
+}
+.osi-login-check {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.15rem;
+  accent-color: var(--osi-button-bg, var(--osi-btn-bg, currentColor));
+}
+</style>