orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/account/ProfilePasswordForm.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+  import { computed, reactive, useId, watch } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { profileLabels } from '@/utils/orionplace/profileLabels';
+  import OrionplacePasswordInput from '@/components/orionplace/shared/OrionplacePasswordInput.vue';
+  import type {
+    IStorefrontProfileState,
+    IStorefrontProfileAction,
+  } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+
+  const props          = defineProps<{ state: IStorefrontProfileState }>();
+  const emit           = defineEmits<{ request: [value: IStorefrontProfileAction] }>();
+  const store          = useOrionplaceStore();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => profileLabels(selectionStore.localeCode));
+  const busy           = computed(
+    () => Boolean(props.state.pending) || !props.state.loaded,
+  );
+  const inputId  = useId();
+
+  const fields   = reactive({
+    old_password: '',
+    new_password: '',
+    confirm_password: '',
+  });
+  const mismatch = computed(
+    () =>
+      Boolean(fields.confirm_password) &&
+      fields.new_password !== fields.confirm_password,
+  );
+  watch(
+    () => props.state.saved,
+    () => {
+      if (!store.isAuthenticated || props.state.message !== 'password') {
+        return;
+      }
+      fields.old_password     = '';
+      fields.new_password     = '';
+      fields.confirm_password = '';
+    },
+  );
+  function submit() {
+    if (busy.value || mismatch.value || fields.new_password.length < 6) {
+      return;
+    }
+    emit('request', {
+      action: 'password',
+      data: {
+        new_password: fields.new_password,
+        confirm_password: fields.confirm_password,
+        ...(store.profile?.password
+          ? { old_password: fields.old_password }
+          : {}),
+      },
+    });
+  }
+</script>
+<template>
+  <form
+    class="orionplace-profile-ui op-section"
+    @submit.prevent="submit"
+    :aria-busy="state.pending === 'password'"
+  >
+    <header class="op-section-head">
+      <span
+        class="op-section-icon"
+        aria-hidden="true"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M6 11h12v10H6zM8 11V7a4 4 0 0 1 8 0v4M12 15v2" />
+        </svg>
+      </span>
+      <div class="op-section-title">
+        <h2>
+          {{
+            store.profile?.password ? copy.changePassword : copy.createPassword
+          }}
+        </h2>
+        <p>{{ copy.passwordHint }}</p>
+      </div>
+    </header>
+    <div class="op-section-body op-fields">
+      <div
+        v-if="store.profile?.password"
+        class="op-field op-wide"
+      >
+        <label :for="`${inputId}-old`">
+          <span>
+            {{ copy.oldPassword }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+        </label>
+        <OrionplacePasswordInput
+          :id="`${inputId}-old`"
+          v-model="fields.old_password"
+          name="old_password"
+          autocomplete="current-password"
+          required
+          :disabled="busy"
+          :show-label="copy.showPassword"
+          :hide-label="copy.hidePassword"
+          :aria-invalid="Boolean(state.errors.old_password)"
+          :aria-describedby="`${inputId}-old-error`"
+        />
+        <small
+          :id="`${inputId}-old-error`"
+          class="op-error"
+        >
+          {{ state.errors.old_password }}
+        </small>
+      </div>
+      <div class="op-field">
+        <label :for="`${inputId}-new`">
+          <span>
+            {{ copy.newPassword }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+        </label>
+        <OrionplacePasswordInput
+          :id="`${inputId}-new`"
+          v-model="fields.new_password"
+          name="new_password"
+          autocomplete="new-password"
+          minlength="6"
+          required
+          :disabled="busy"
+          :show-label="copy.showPassword"
+          :hide-label="copy.hidePassword"
+          :aria-invalid="Boolean(state.errors.new_password)"
+          :aria-describedby="`${inputId}-new-error`"
+        />
+        <small
+          :id="`${inputId}-new-error`"
+          class="op-error"
+        >
+          {{ state.errors.new_password }}
+        </small>
+      </div>
+      <div class="op-field">
+        <label :for="`${inputId}-confirm`">
+          <span>
+            {{ copy.confirmPassword }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+        </label>
+        <OrionplacePasswordInput
+          :id="`${inputId}-confirm`"
+          v-model="fields.confirm_password"
+          name="confirm_password"
+          autocomplete="new-password"
+          minlength="6"
+          required
+          :disabled="busy"
+          :show-label="copy.showPassword"
+          :hide-label="copy.hidePassword"
+          :aria-invalid="mismatch || Boolean(state.errors.confirm_password)"
+          :aria-describedby="`${inputId}-confirm-error`"
+        />
+        <small
+          :id="`${inputId}-confirm-error`"
+          class="op-error"
+        >
+          {{ mismatch ? copy.mismatch : state.errors.confirm_password }}
+        </small>
+      </div>
+    </div>
+    <footer class="op-section-foot">
+      <button
+        type="submit"
+        class="op-primary"
+        :disabled="
+          busy ||
+          mismatch ||
+          fields.new_password.length < 6 ||
+          !fields.confirm_password
+        "
+      >
+        {{ state.pending === 'password' ? copy.pending : copy.save }}
+      </button>
+    </footer>
+  </form>
+</template>
+
+<style src="./profile.css"></style>

package/templates/app/components/orionplace/account/ProfileSignIn.vue

@@ -0,0 +1,446 @@
+<script setup lang="ts">
+  import { computed, reactive, useId, watch } from 'vue';
+  import { AsYouType } from 'libphonenumber-js';
+  import 'country-flag-icons/3x2/flags.css';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { profileLabels } from '@/utils/orionplace/profileLabels';
+  import { phoneWithCountryCode } from '@/utils/orionplace/phone';
+  import OrionplacePasswordInput from '@/components/orionplace/shared/OrionplacePasswordInput.vue';
+  import '@/components/orionplace/shared/features.css';
+  import type {
+    IStorefrontProfileState,
+    IStorefrontProfileAction,
+  } from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+
+  const props         = withDefaults(
+    defineProps<{
+      state: IStorefrontProfileState;
+      redirecting?: boolean;
+      headingLevel?: 'h1' | 'h2';
+    }>(),
+    { redirecting: false, headingLevel: 'h2' },
+  );
+  const emit           = defineEmits<{ request: [value: IStorefrontProfileAction] }>();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const copy           = computed(() => profileLabels(selectionStore.localeCode));
+
+  const inputId       = useId();
+  const heading       = computed(() => {
+    if (props.state.authStep === 'step_phone') {
+      return copy.value.signInOrRegister;
+    }
+    return props.state.authPurpose === 'reg'
+      ? copy.value.signUp
+      : copy.value.signIn;
+  });
+  // Sign-in is confirmed: Application Load refreshes, then the host may
+  // open another page. The form is replaced by a waiting indicator.
+  const waiting       = computed(
+    () =>
+      props.redirecting ||
+      (props.state.refreshRequired && Boolean(props.state.pending)),
+  );
+  const generalError  = computed(() => {
+    // The refresh notice below replaces request errors after sign-in.
+    if (props.state.refreshRequired || waiting.value) {
+      return '';
+    }
+
+    const errors        = Object.entries(props.state.errors).filter(
+      ([, message]) => message,
+    );
+    if (!errors.length) {
+      return props.state.error;
+    }
+
+    const stepFields    = {
+      step_phone: ['phone'],
+      step_password: ['auth_password'],
+      step_otp: ['otp_code'],
+      step_additional: ['first_name', 'last_name'],
+    };
+    const visibleFields = stepFields[props.state.authStep];
+    return errors
+      .filter(([field]) => !visibleFields.includes(field))
+      .map(([, message]) => message)
+      .join(' ');
+  });
+
+  const fields        = reactive({
+    phone: '',
+    auth_password: '',
+    otp_code: '',
+    first_name: '',
+    last_name: '',
+  });
+  const disabled      = computed(
+    () => Boolean(props.state.pending) || props.state.refreshRequired,
+  );
+  const phoneCooldown = computed(
+    () => props.state.authStep === 'step_phone' && props.state.otpDelay > 0,
+  );
+  const country       = computed(() => {
+    const phone = new AsYouType();
+    phone.input(phoneWithCountryCode(fields.phone, selectionStore.localeCode));
+    return phone.getCountry();
+  });
+  const otpHint       = computed(() => {
+    if (props.state.authCodeType === 'email') {
+      return props.state.authEmail
+        ? `${copy.value.otpEmail} ${props.state.authEmail}`
+        : copy.value.otpHint;
+    }
+    if (props.state.authCodeType === 'sms') {
+      return copy.value.otpSms;
+    }
+    if (props.state.authCodeType === 'call') {
+      return copy.value.otpCall;
+    }
+    return copy.value.otpHint;
+  });
+  watch(
+    () => props.state.authStep,
+    () => {
+      fields.auth_password = '';
+      fields.otp_code      = '';
+    },
+  );
+  function submit() {
+    if (disabled.value || phoneCooldown.value) {
+      return;
+    }
+    const step = props.state.authStep;
+    const data: Extract<
+      IStorefrontProfileAction,
+      { action: 'authenticate' }
+    >['data']  = { step };
+    if (step === 'step_phone') {
+      fields.phone = phoneWithCountryCode(fields.phone, selectionStore.localeCode);
+      data.phone   = fields.phone;
+    } else if (step === 'step_password') {
+      data.auth_password = fields.auth_password;
+    } else if (step === 'step_otp') {
+      data.otp_code = fields.otp_code;
+    } else {
+      data.first_name = fields.first_name;
+      data.last_name  = fields.last_name;
+    }
+    emit('request', { action: 'authenticate', data });
+  }
+</script>
+<template>
+  <form
+    class="orionplace-profile-ui op-section op-signin"
+    @submit.prevent="submit"
+    :aria-busy="Boolean(state.pending)"
+  >
+    <header class="op-signin-heading">
+      <component :is="headingLevel">{{ heading }}</component>
+      <p v-if="state.authStep === 'step_phone'">{{ copy.signInHint }}</p>
+    </header>
+    <div
+      v-if="waiting"
+      class="op-signin-waiting"
+      role="status"
+      data-signin-waiting
+    >
+      <span
+        class="op-signin-spinner"
+        aria-hidden="true"
+      />
+      <span
+        class="op-signin-progress"
+        aria-hidden="true"
+      />
+      <span class="sr-only">{{ copy.signingIn }}</span>
+    </div>
+    <template v-else-if="state.refreshRequired">
+      <div
+        class="op-notice op-notice-error"
+        role="alert"
+      >
+        {{ copy.refreshFailed }}
+      </div>
+      <button
+        class="op-primary"
+        type="button"
+        @click="emit('request', { action: 'refresh' })"
+      >
+        {{ copy.retry }}
+      </button>
+    </template>
+    <template v-else>
+      <label v-if="state.authStep === 'step_phone'">
+        <span>
+          {{ copy.phone }}
+          <span
+            class="op-required"
+            aria-hidden="true"
+          >*</span>
+        </span>
+        <span class="op-phone-input">
+          <span
+            v-if="country"
+            class="op-phone-flag"
+            :class="`flag:${country}`"
+            aria-hidden="true"
+          />
+          <input
+            v-model="fields.phone"
+            name="phone"
+            type="tel"
+            autocomplete="tel"
+            placeholder="+"
+            required
+            :class="{ 'op-phone-with-flag': country }"
+            :disabled="disabled"
+            :aria-invalid="Boolean(state.errors.phone)"
+            :aria-describedby="
+              state.errors.phone ? `${inputId}-phone-error` : undefined
+            "
+            @blur="
+              fields.phone = phoneWithCountryCode(
+                fields.phone,
+                selectionStore.localeCode,
+              )
+            "
+          />
+        </span>
+        <small
+          v-if="state.errors.phone"
+          :id="`${inputId}-phone-error`"
+          class="op-error"
+          role="alert"
+        >
+          {{ state.errors.phone }}
+        </small>
+      </label>
+      <div
+        v-else-if="state.authStep === 'step_password'"
+        class="op-signin-field"
+      >
+        <label :for="`${inputId}-password`">
+          <span>
+            {{ copy.password }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+        </label>
+        <OrionplacePasswordInput
+          :id="`${inputId}-password`"
+          v-model="fields.auth_password"
+          name="auth_password"
+          :autocomplete="
+            state.authPurpose === 'reg' ? 'new-password' : 'current-password'
+          "
+          :minlength="state.authPurpose === 'reg' ? 6 : undefined"
+          required
+          :disabled="disabled"
+          :show-label="copy.showPassword"
+          :hide-label="copy.hidePassword"
+          :aria-invalid="Boolean(state.errors.auth_password)"
+          :aria-describedby="
+            state.errors.auth_password
+              ? `${inputId}-auth_password-error`
+              : undefined
+          "
+          data-profile-password
+        />
+        <small
+          v-if="state.errors.auth_password"
+          :id="`${inputId}-auth_password-error`"
+          class="op-error"
+          role="alert"
+        >
+          {{ state.errors.auth_password }}
+        </small>
+      </div>
+      <div
+        v-else-if="state.authStep === 'step_otp'"
+        class="op-email-form"
+      >
+        <p class="op-otp-hint">{{ otpHint }}</p>
+        <label>
+          <span>
+            {{ copy.code }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+          <input
+            v-model="fields.otp_code"
+            name="otp_code"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            minlength="4"
+            maxlength="4"
+            required
+            :disabled="disabled"
+            :aria-invalid="Boolean(state.errors.otp_code)"
+            :aria-describedby="
+              state.errors.otp_code ? `${inputId}-otp_code-error` : undefined
+            "
+          />
+          <small
+            v-if="state.errors.otp_code"
+            :id="`${inputId}-otp_code-error`"
+            class="op-error"
+            role="alert"
+          >
+            {{ state.errors.otp_code }}
+          </small>
+        </label>
+        <button
+          type="button"
+          :disabled="disabled || state.otpDelay > 0"
+          :aria-label="
+            state.otpDelay > 0
+              ? `${copy.resend}: ${copy.cooldown} ${state.otpDelay} ${copy.seconds}`
+              : copy.resendHint
+          "
+          @click="emit('request', { action: 'auth-resend' })"
+        >
+          {{
+            state.otpDelay > 0
+              ? `${copy.resend} ${state.otpDelay} ${copy.seconds}`
+              : copy.resend
+          }}
+        </button>
+      </div>
+      <div
+        v-else
+        class="op-fields"
+      >
+        <label>
+          <span>
+            {{ copy.firstName }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+          <input
+            v-model="fields.first_name"
+            name="first_name"
+            autocomplete="given-name"
+            minlength="2"
+            required
+            :disabled="disabled"
+            :aria-invalid="Boolean(state.errors.first_name)"
+            :aria-describedby="
+              state.errors.first_name
+                ? `${inputId}-first_name-error`
+                : undefined
+            "
+          />
+          <small
+            v-if="state.errors.first_name"
+            :id="`${inputId}-first_name-error`"
+            class="op-error"
+            role="alert"
+          >
+            {{ state.errors.first_name }}
+          </small>
+        </label>
+        <label>
+          <span>
+            {{ copy.lastName }}
+            <span
+              class="op-required"
+              aria-hidden="true"
+            >*</span>
+          </span>
+          <input
+            v-model="fields.last_name"
+            name="last_name"
+            autocomplete="family-name"
+            minlength="2"
+            required
+            :disabled="disabled"
+            :aria-invalid="Boolean(state.errors.last_name)"
+            :aria-describedby="
+              state.errors.last_name ? `${inputId}-last_name-error` : undefined
+            "
+          />
+          <small
+            v-if="state.errors.last_name"
+            :id="`${inputId}-last_name-error`"
+            class="op-error"
+            role="alert"
+          >
+            {{ state.errors.last_name }}
+          </small>
+        </label>
+      </div>
+    </template>
+    <div
+      v-if="generalError"
+      class="op-notice op-notice-error"
+      role="alert"
+    >
+      {{ generalError }}
+    </div>
+    <p
+      v-if="phoneCooldown && !state.refreshRequired && !waiting"
+      :id="`${inputId}-phone-cooldown`"
+      class="op-notice op-signin-cooldown"
+      role="timer"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+        />
+        <path d="M12 7v5l3 2" />
+      </svg>
+      <span>{{ copy.phoneCooldown }} {{ state.otpDelay }} {{ copy.seconds }}</span>
+    </p>
+    <div
+      v-if="!state.refreshRequired && !waiting"
+      class="op-signin-actions"
+    >
+      <button
+        v-if="state.authStep !== 'step_phone'"
+        class="op-signin-back"
+        type="button"
+        :disabled="disabled"
+        @click="emit('request', { action: 'auth-restart' })"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m10 5-7 7 7 7M3 12h18" />
+        </svg>
+        {{ copy.back }}
+      </button>
+      <button
+        class="op-primary"
+        type="submit"
+        :disabled="disabled || phoneCooldown"
+        :aria-describedby="phoneCooldown ? `${inputId}-phone-cooldown` : undefined"
+      >
+        {{ copy.next }}
+      </button>
+    </div>
+  </form>
+</template>
+
+<style src="./profile.css"></style>

package/templates/app/components/orionplace/account/SignInHistory.README.md

@@ -0,0 +1,27 @@
+# SignInHistory · Nuxt
+
+The user’s sign-in dates, devices, browsers and IP addresses.
+
+The supplied storefront uses this component at `/activity`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/sign-in-history) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/sign-in-history)
+
+## Contract and dependencies
+
+`profile_get_logs` loads the entries a page at a time, newest first. Date filters are sent as `DD.MM.YYYY`; applying them opens page one. Device details use `device_brand`, `device_model` or `device_family`, `os_family` and `os_version`; the backend's `Other` for an unrecognised value is left out. The end date includes sign-ins from that whole day. Browser details use `browser_family` and `browser_version`; location uses `remote_city`.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/account/SignInHistory.vue`; the primary interface is `app/interfaces/orionplace/accounts/IProfileData.ts`.
+The component belongs to the `activity` composition; render it with that
+parent's controller and context.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+- `profile_get_logs`