login and register

Author: joshistoast

api/customer/fragments/address.ts

@@ -0,0 +1,23 @@
+import gql from 'graphql-tag'
+
+export const mailingAddress = gql`
+  fragment mailingAddress on MailingAddress {
+    address1
+    address2
+    city
+    company
+    country
+    countryCodeV2
+    firstName
+    formattedArea
+    id
+    lastName
+    latitude
+    longitude
+    name
+    phone
+    province
+    provinceCode
+    zip
+  }
+`

api/customer/fragments/customer.ts

@@ -0,0 +1,21 @@
+import gql from 'graphql-tag'
+import { mailingAddress } from './address'
+
+export const customer = gql`
+  ${mailingAddress}
+  fragment customer on Customer {
+    acceptsMarketing
+    createdAt
+    defaultAddress {
+      ...mailingAddress
+    }
+    displayName
+    email
+    firstName
+    id
+    lastName
+    phone
+    tags
+    updatedAt
+  }
+`

api/customer/mutations/customerAccessTokenCreate.ts

@@ -0,0 +1,21 @@
+import gql from 'graphql-tag'
+
+export const customerAccessTokenCreate = gql`
+  mutation customerAccessTokenCreate(
+    $input: CustomerAccessTokenCreateInput!
+  ) {
+    customerAccessTokenCreate(
+      input: $input
+    ) {
+      customerAccessToken {
+        accessToken
+        expiresAt
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+`

api/customer/mutations/customerAccessTokenDelete.ts

@@ -0,0 +1,18 @@
+import gql from 'graphql-tag'
+
+export const customerAccessTokenDelete = gql`
+  mutation customerAccessTokenDelete(
+    $customerAccessToken: String!
+  ) {
+    customerAccessTokenDelete(
+      customerAccessToken: $customerAccessToken
+    ) {
+      deletedAccessToken
+      deletedCustomerAccessTokenId
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`

api/customer/mutations/customerCreate.ts

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag'
+import { customer } from '../fragments/customer'
+
+export const customerCreate = gql`
+  ${customer}
+  mutation customerCreate(
+    $input: CustomerCreateInput!
+  ) {
+    customerCreate(
+      input: $input
+    ) {
+      customer {
+        ...customer
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+`

api/customer/mutations/index.ts

@@ -0,0 +1,3 @@
+export { customerAccessTokenCreate } from './customerAccessTokenCreate'
+export { customerAccessTokenDelete } from './customerAccessTokenDelete'
+export { customerCreate } from './customerCreate'

api/customer/queries/customer.ts

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag'
+import { customer } from '../fragments/customer'
+
+export const getCustomer = gql`
+  ${customer}
+  query customer (
+    $customerAccessToken: String!
+  ) {
+    customer (
+      customerAccessToken: $customerAccessToken
+    ) {
+      ...customer
+    }
+  }
+`

pages/account.vue

@@ -8,6 +8,6 @@ useHead({
 
 <template>
   <div>
-    Account Page
+    <NuxtPage></NuxtPage>
   </div>
 </template>

pages/account/login.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {} from '@/types'
+import { useCustomer } from '@/stores'
+
+// TODO: handle if customer has no password?
+
+const email = ref('')
+const password = ref('')
+const canLogin = computed(() => email.value && password.value)
+const loginErrors = computed(() => useCustomer().customerUserErrors)
+
+const submitLogin = () => {
+  if (canLogin.value) {
+    useCustomer().login(email.value, password.value)
+  }
+}
+onMounted(() => {
+  const createdEmailParam = useRoute().params.email
+  createdEmailParam ? typeof createdEmailParam === 'string' ? email.value = createdEmailParam : email.value = createdEmailParam[0] : false
+})
+</script>
+
+<template>
+  <div>
+    <h1 class="pb-6 text-lg font-extrabold border-b border-gray-200 md:text-3xl xl:text-4xl pt-14">Login</h1>
+    <form
+      class="grid max-w-xs gap-4 my-6"
+      @submit.prevent="submitLogin"
+    >
+      <UIInput
+        stretch
+        type="email"
+        label="Email"
+        v-model="email"
+        required
+      />
+      <UIInput
+        stretch
+        type="password"
+        label="Password"
+        v-model="password"
+        required
+      />
+      <div class="text-red-600" v-if="loginErrors?.length">
+        <span v-for="error in loginErrors">{{ error.message }}</span>
+      </div>
+      <div class="flex items-center space-x-3">
+        <UIButton
+          type="submit"
+          :disabled="!canLogin"
+        >
+          Sign In
+        </UIButton>
+        <span>or</span>
+        <NuxtLink
+          :to="{ name: 'account-register' }"
+          class="prose"
+        >
+          Create an Account
+        </NuxtLink>
+      </div>
+    </form>
+  </div>
+</template>

pages/account/register.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import {} from '@/types'
+import { useCustomer } from '@/stores'
+import {} from '@/api/customer/mutations'
+
+const customer = reactive({
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: ''
+})
+const confirmPassword = ref('')
+const canRegister = computed(() =>
+  customer.firstName &&
+  customer.lastName &&
+  customer.email &&
+  customer.password &&
+  customer.password === confirmPassword.value
+)
+const loginErrors = computed(() => useCustomer().customerUserErrors)
+
+const submitRegister = () => {
+  if (canRegister.value) {
+    useCustomer().customerCreate(customer)
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <h1 class="pb-6 text-lg font-extrabold border-b border-gray-200 md:text-3xl xl:text-4xl pt-14">Register</h1>
+    <form
+      class="grid max-w-xs gap-4 my-6"
+      @submit.prevent="submitRegister"
+    >
+      <UIInput
+        stretch
+        type="text"
+        label="First Name"
+        v-model="customer.firstName"
+        required
+      />
+      <UIInput
+        stretch
+        type="text"
+        label="Last Name"
+        v-model="customer.lastName"
+        required
+      />
+      <UIInput
+        stretch
+        type="email"
+        label="Email"
+        v-model="customer.email"
+        required
+      />
+      <UIInput
+        stretch
+        type="password"
+        label="Password"
+        v-model="customer.password"
+        required
+      />
+      <UIInput
+        stretch
+        type="password"
+        label="Password"
+        v-model="confirmPassword"
+        required
+      />
+      <div class="text-red-600">
+        <span v-for="error in loginErrors">{{ error.message }}</span>
+        <span v-if="confirmPassword !== customer.password">Passwords do not match</span>
+      </div>
+      <div class="flex items-center space-x-3">
+        <UIButton
+          type="submit"
+          :disabled="!canRegister"
+        >
+          Register
+        </UIButton>
+        <span>or</span>
+        <NuxtLink
+          :to="{ name: 'account-login' }"
+          class="prose"
+        >
+          Login
+        </NuxtLink>
+      </div>
+    </form>
+  </div>
+</template>

stores/customer.ts

@@ -1,7 +1,89 @@
 import { defineStore } from 'pinia'
+import { useClient } from '@/utilities/apollo-client'
+import {
+  Customer,
+  CustomerAccessTokenCreateInput,
+  CustomerAccessTokenDeleteInput,
+  CustomerAccessToken,
+  CustomerUserError,
+  CustomerAccessTokenCreatePayload,
+  CustomerCreateInput,
+  CustomerCreatePayload,
+} from '@/types'
+import {
+  customerAccessTokenCreate,
+  customerAccessTokenDelete,
+  customerCreate
+} from '@/api/customer/mutations'
+
+type CustomerMutTokenCreate = {
+  customerAccessTokenCreate: CustomerAccessTokenCreatePayload
+}
 
 export const useCustomer = defineStore('customer', {
-  state: () => ({}),
+  state: () => ({
+    customer: null as Customer | null,
+    customerAccessToken: null as CustomerAccessToken | null,
+    loading: false as boolean,
+    customerUserErrors: null as CustomerUserError[],
+  }),
+  actions: {
+    async customerCreate (input: CustomerCreateInput) {
+      if (input) {
+        const { data } = await useClient().mutate({
+          mutation: customerCreate,
+          variables: { input }
+        })
+        if (data.customerCreate.customer) {
+          useRouter().push({ name: 'account-login', params: { email: input.email } })
+        }
+        if (data.customerCreate.customerUserErrors) {
+          this.customerUserErrors = data.customerCreate.customerUserErrors
+        }
+      }
+    },
+    async getCustomer (accessToken: string) {
+      console.log('getCustomer', accessToken)
+    },
+    async login (email: string, password: string) {
+      try {
+        this.loading = true
+        if (!this.customerAccessToken) {
+          const tokenCreateInput = { email, password }
+          this.customerAccessTokenCreate(tokenCreateInput)
+        }
+        if (this.customerAccessToken.accessToken) {
+          this.getCustomer(this.customerAccessToken.accessToken)
+        }
+      } catch (e) {
+        return e
+      } finally {
+        this.loading = false
+      }
+    },
+    async logout () {},
+    async customerAccessTokenCreate (input: CustomerAccessTokenCreateInput) {
+      try {
+        const { data } = await useClient().mutate<CustomerMutTokenCreate>({
+          mutation: customerAccessTokenCreate,
+          variables: {
+            input,
+          }
+        })
+        if (data.customerAccessTokenCreate.customerAccessToken) {
+          this.customerAccessToken = data.customerAccessTokenCreate.customerAccessToken
+        }
+        if (data.customerAccessTokenCreate.customerUserErrors) {
+          this.customerUserErrors = data.customerAccessTokenCreate.customerUserErrors
+        }
+      } catch (e) {
+        return e
+      }
+    },
+    async customerAccessTokenDelete () {},
+  },
+  persist: {
+    paths: ['customer', 'customerAccessToken'],
+  },
   getters: {},
-  actions: {}
 })