@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/pages/forgot-password.vue

@@ -0,0 +1,115 @@
+<template>
+  <banner pageTitle="Forgot password" />
+
+  <div class="osi-auth-wrap font-body">
+    <form class="osi-auth-card" novalidate @submit.prevent="submitForm">
+      <p class="osi-auth-title">Enter your email to reset your password</p>
+
+      <div class="osi-auth-stack">
+        <OsiField
+          v-model="email"
+          id="forgot-email"
+          label="Email"
+          type="email"
+          autocomplete="email"
+          required
+          :error="errors.email"
+          @input="clearError('email')"
+        />
+
+        <button
+          type="submit"
+          class="osi-btn osi-btn--block osi-auth-submit"
+          :disabled="isLoading"
+          :aria-busy="isLoading"
+        >
+          <span v-if="isLoading" class="osi-btn-spinner" aria-hidden="true" />
+          <span>Submit</span>
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { Banner as banner } from "#components";
+import { OsiField } from "#components";
+import AuthenticationService from "../services/Authentication/AuthenticationService";
+import { useToast } from "vue-toastification";
+export default {
+  data() {
+    return {
+      isLoading: false,
+      email: "",
+      errors: {
+        email: false,
+      },
+    };
+  },
+  components: {
+    OsiField,
+    banner,
+  },
+  methods: {
+    validateEmail(email) {
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailPattern.test(email);
+    },
+    async submitForm() {
+      const toast = useToast();
+      this.errors.email = "";
+
+      if (!this.email) {
+        this.errors.email = "Email is required.";
+      } else if (!this.validateEmail(this.email)) {
+        this.errors.email = "Invalid email format.";
+      }
+
+      if (!this.errors.email) {
+        try {
+          this.isLoading = true;
+          const response = await AuthenticationService.forgotPassword(
+            this.email
+          );
+          toast.success("An email has been sent to your account!");
+          this.$router.push({
+            path: "/resetverificationcode",
+            query: { email: this.email },
+          });
+        } catch (error) {
+          this.isLoading = false;
+const message = error.data?.email?.[0] || error.data?.detail || error.message || "Something went wrong.";
+  toast.error(message);
+        } finally {
+          this.isLoading = false;
+        }
+      }
+    },
+    clearError(field) {
+      this.errors[field] = "";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.osi-auth-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 2.5rem 1.25rem;
+}
+@media (min-width: 768px) {
+  .osi-auth-wrap {
+    padding-block: 5rem;
+  }
+}
+.osi-auth-title {
+  margin: 0 0 1.25rem;
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 1.3;
+}
+.osi-auth-submit {
+  margin-top: 0.5rem;
+}
+</style>

package/app/pages/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+/**
+ * Homepage.
+ *
+ * Every theme-driven route is this same shape: ask the backend which template
+ * serves this path, publish the payload, hand the sections to SectionRenderer.
+ * Nothing here knows what a hero is.
+ *
+ * `render()` returns sections already filtered (disabled and out-of-window
+ * dropped), media already resolved to URLs, and products already fetched into
+ * `section.data` — so no section component makes a request of its own. A
+ * six-section homepage is one round trip.
+ */
+import { useRenderContext } from '#osi/composables/useRenderContext';
+
+const { render, store } = useStorefront();
+const { setRenderContext } = useRenderContext();
+
+const { data, error } = await useAsyncData("render:/", () => render("/"));
+console.log("[render] API response:", JSON.stringify(data.value, null, 2))
+
+// Publish before the sections mount. MAIN_* sections read `resource` from here
+// rather than taking it as a prop — SectionRenderer only passes `section` and
+// `index`, and in the builder there's no page render to drill from anyway.
+// INDEX resolves no resource, but the template still belongs in the context.
+setRenderContext(data.value);
+watch(data, (payload) => setRenderContext(payload));
+
+// Read here, not in the template: import.meta is module syntax and Vue compiles
+// template expressions as scripts.
+const isDev = import.meta.dev;
+
+</script>
+
+<template>
+  <div>
+    <SectionRenderer v-if="data?.sections?.length" :sections="data.sections" />
+
+    <!-- A theme with no INDEX sections isn't an error — a merchant who hasn't
+         built a homepage yet should see something, not a blank page. -->
+    <div v-else-if="!error" class="osi-empty">
+      <p>This store's homepage hasn't been set up yet.</p>
+    </div>
+
+    <div v-else class="osi-empty">
+      <p>We couldn't load this page.</p>
+      <pre v-if="isDev" class="osi-empty-detail">{{ error.message }}</pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.osi-empty {
+  padding: 6rem 1rem;
+  text-align: center;
+  color: var(--osi-text);
+  opacity: 0.7;
+}
+.osi-empty-detail {
+  margin-top: 1rem;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+</style>