Merge pull request #407 from vuejs-jp/feature/add-namecard-register

[WIP]Feature/add namecard register

Author: jiyuujin

app/assets/locale/all.ts

@@ -106,6 +106,11 @@ export default {
       contact_form_name_label: 'お名前／Name',
       contact_form_name_placeholder: '山田太郎',
       contact_form_mail_label: 'メールアドレス／Mail',
+      /* register page */
+      register_form_display_name_label: 'お名前／Name　12文字以内',
+      register_form_avatar_label: 'アバター／Avatar',
+      register_form_secret_word_label: 'あいことば',
+      register_form_receipt_id_label: '注文番号',
       /* prettier-ignore */
       contact_form_text_label: 'お問い合わせ内容／Content',
       contact_submit_done: 'メッセージ送信に成功しました。',
@@ -224,6 +229,11 @@ export default {
       contact_form_name_label: 'Name',
       contact_form_name_placeholder: 'Yamada Taro',
       contact_form_mail_label: 'Mail',
+      /* register page */
+      register_form_name_label: 'Name  12 characters max.',
+      register_form_avatar_label: 'Avatar',
+      register_form_watchword_label: 'Watchword',
+      register_form_order_number_label: 'Order Number',
       /* prettier-ignore */
       contact_form_text_label: 'Content',
       contact_submit_done: 'Message sent successfully.',

app/atoms/user.ts

@@ -13,6 +13,8 @@ export function useStore() {
       provider: '',
       email: '',
       created_at: '',
+      display_name: '',
+      receipt_id: '',
     },
   })
 

app/components/AlertBar.vue

@@ -1,7 +1,16 @@
+<script setup lang="ts">
+const props = defineProps({
+  userId: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
 <template>
-  <a href="/register" class="alert-root">
+  <nuxt-link to="/user-edit" class="alert-root">
     チケット購入のまたは紐付けが未完了です。プロフィール画面から登録してください。
-  </a>
+  </nuxt-link>
 </template>
 
 <style lang="ts" scoped>

app/components/forms/InputField.vue

@@ -5,6 +5,7 @@ type _InputFieldProps = Omit<InputHTMLAttributes, 'onInput' | 'onBlur'>
 interface InputFieldProps extends /* @vue-ignore */ _InputFieldProps {
   titleLabel: string
   error: string
+  value?: string
   /**
    * FIXME 削除したい (削除できなさそう)
    */
@@ -15,7 +16,16 @@ interface InputFieldEmit {
   (e: 'blur', value: string): void
 }
 const props = defineProps<InputFieldProps>()
-const { id, name, placeholder = '', type, required = false, titleLabel, error = '' } = toRefs(props)
+const {
+  id,
+  name,
+  placeholder = '',
+  type,
+  required = false,
+  titleLabel,
+  error = '',
+  value,
+} = toRefs(props)
 const emit = defineEmits<InputFieldEmit>()
 function handleInput(e: Event) {
   if (!(e.target instanceof HTMLInputElement)) {
@@ -41,6 +51,7 @@ function handleFocusOut(e: Event) {
       class="form-input"
       :placeholder="placeholder"
       :required="required"
+      :value="value"
       @input="handleInput"
       @blur="handleFocusOut"
     />

app/components/namecard/NamecardSection.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import MarkDownText from '~/components/MarkDownText.vue'
 import CommentTitle from '~/components/CommentTitle.vue'
+import IntegrationCard from '~/components/namecard/IntegrationCard.vue'
 import RoundButton from '~/components/button/RoundButton.vue'
 import { useNamecard } from '~/composables/useNamecard'
+import { useDialog } from '~/composables/useDialog'
 
 const { canRegister } = useNamecard()
+const { handle, isShow } = useDialog()
 </script>
 
 <template>
@@ -30,17 +33,15 @@ const { canRegister } = useNamecard()
       -->
       <!-- ネームカードを作成 -->
       <div class="apply">
-        <RoundButton
-          :to="canRegister ? '/register' : '#'"
-          target="_blank"
-          rel="noreferrer"
-          :disabled="!canRegister"
-        >
+        <RoundButton type="submit" :disabled="!canRegister" @click="() => handle(true)">
           {{ $t('words.create_namecard') }}
         </RoundButton>
       </div>
     </div>
   </div>
+  <div v-if="isShow">
+    <IntegrationCard @on-close="() => handle(false)" />
+  </div>
 </template>
 
 <style lang="ts" scoped>

app/composables/useAuth.ts

@@ -11,6 +11,8 @@ const initialUser = {
   provider: '',
   email: '',
   created_at: '',
+  display_name: '',
+  receipt_id: '',
 }
 
 const dummyUser = {
@@ -20,6 +22,8 @@ const dummyUser = {
   provider: 'google',
   email: '[email protected]',
   created_at: '2023-06-02T15:12:03.369752Z',
+  display_name: 'ダミー表示名',
+  receipt_id: 'dummydummy',
 }
 
 let signedUser = reactive<FormUser>({ ...initialUser })
@@ -49,6 +53,8 @@ const useAuth = () => {
           signedUser.provider = user?.app_metadata.provider as AuthProvider
           signedUser.email = user?.email || ''
           signedUser.created_at = user?.created_at || ''
+          // signedUser.display_name = user?.display_name || ''
+          // signedUser.receipt_id = user?.receipt_id || ''
           store?.setUser(signedUser)
         }
       })
@@ -69,7 +75,12 @@ const useAuth = () => {
       .exhaustive()
   })
   const signIn = async (provider: AuthProvider) => {
-    const { error } = await supabase.auth.signInWithOAuth({ provider })
+    const { error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        redirectTo: isProd ? 'https://vuefes.jp/2023/register' : 'http://localhost:3000/register',
+      },
+    })
     if (error) {
       throw new Error(`can not signin with ${provider === 'github' ? 'GitHub' : 'Google'}`)
     }

app/composables/useFormError.ts

@@ -2,6 +2,8 @@ export function useFormError() {
   const nameError = ref('')
   const emailError = ref('')
   const detailError = ref('')
+  const displayNameError = ref('')
+  const receiptIdError = ref('')
 
   function validateName(value: string) {
     if (value === '') {
@@ -30,12 +32,32 @@ export function useFormError() {
     detailError.value = ''
   }
 
+  function validateDisplayName(value: string) {
+    if (value === '') {
+      nameError.value = '名前を入力してください'
+      return
+    }
+    nameError.value = ''
+  }
+
+  function validateReceiptId(value: string) {
+    if (value === '') {
+      nameError.value = '名前を入力してください'
+      return
+    }
+    nameError.value = ''
+  }
+
   return {
     nameError,
     emailError,
     detailError,
+    displayNameError,
+    receiptIdError,
     validateName,
     validateEmail,
     validateDetail,
+    validateDisplayName,
+    validateReceiptId,
   }
 }

app/composables/useSupabase.ts

@@ -4,25 +4,57 @@ import { useUserStore } from './useUserStore'
 import { useToast } from './useToast'
 
 export function useSupabase() {
+  const config = useRuntimeConfig()
+  const { supabaseProjectUrl } = config.public
   const client = useSupabaseClient<Database>()
   const { signedUser: user } = useUserStore()
   const { onError, onSuccess } = useToast()
 
-  async function addEventUser(displayName: string, secretWord: string, receiptId: string) {
+  async function addEventUser(displayName: string, avatarUrl: string, receiptId: string) {
     const userData = {
       ...user,
       display_name: displayName,
-      secret_word: secretWord,
+      avatar_url: avatarUrl,
       receipt_id: receiptId,
     }
 
     const { error } = await client.from('event_users').insert(userData)
     if (error) {
-      onError('購入できませんでした', 3000)
+      onError('登録できませんでした', 3000)
       return
     }
 
-    onSuccess('購入しました', 3000)
+    onSuccess('登録しました', 3000)
+  }
+
+  async function updateEventUser(
+    displayName: string,
+    avatarUrl: string,
+    receiptId: string,
+    userId: string,
+  ) {
+    const userData = {
+      ...user,
+      display_name: displayName,
+      avatar_url: avatarUrl,
+      receipt_id: receiptId,
+    }
+
+    const { error } = await client.from('event_users').update(userData).eq('user_id', userId)
+    if (error) {
+      onError('編集できませんでした', 3000)
+      return
+    }
+
+    onSuccess('編集しました', 3000)
+  }
+
+  function getFullAvatarUrl(avatarUrl: string) {
+    return `${supabaseProjectUrl}/storage/v1/object/public/avatar/${avatarUrl}`
+  }
+
+  async function uploadAvatar(filePath: string, file: File) {
+    await client.storage.from('avatar').upload(filePath, file)
   }
 
   async function updatePMReceipt(receiptIds: { role: Role; receipt_id: string }[]) {
@@ -38,5 +70,5 @@ export function useSupabase() {
     onSuccess('購入情報を取り込みました', 3000)
   }
 
-  return { addEventUser, updatePMReceipt }
+  return { addEventUser, updateEventUser, getFullAvatarUrl, uploadAvatar, updatePMReceipt }
 }

app/container/NavPageSectionContainer.vue

@@ -17,7 +17,7 @@ const { canRegister } = useNamecard()
 
 <template>
   <div v-if="canRegister && hasAuth && !eventUser?.activated_at">
-    <AlertBar />
+    <AlertBar :user-id="signedUser.user_id" />
   </div>
   <NavPageSection :has-alert="canRegister && hasAuth && !eventUser?.activated_at">
     <template #avatar>