From c978df3bf88981af85fc1007ae6435e8cf5ecd0c Mon Sep 17 00:00:00 2001
From: MarkCherepovskyi <mark.cherepovskyi@gmail.com>
Date: Sun, 24 Mar 2024 08:02:31 +0200
Subject: [PATCH] jwt

---
 package.json                       |   1 +
 src/common/Optionitem.vue          |   6 +-
 src/common/VoteCard.vue            |  57 ++++++++++++-
 src/common/VoteCardList.vue        |  18 +++-
 src/common/modals/QrAuthModal.vue  |   9 +-
 src/helpers/vote.helpers.ts        |  32 ++++---
 src/localization/resources/en.json |   5 ++
 src/pages/Home.vue                 |  24 ++++--
 src/pages/Vote.vue                 | 130 +++++++++++++++--------------
 src/router/index.ts                |   1 +
 src/types/api.types.ts             |   9 +-
 src/types/vote.types.ts            |  19 ++---
 yarn.lock                          |  12 +++
 13 files changed, 208 insertions(+), 115 deletions(-)

diff --git a/package.json b/package.json
index 23092fa..3f2b0d3 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "rsc": "node scripts/release-sanity-check.mjs"
   },
   "dependencies": {
+    "@big-whale-labs/poseidon": "^0.0.5",
     "@distributedlab/fetcher": "^1.0.0-rc.14",
     "@distributedlab/jac": "^1.0.0-rc.14",
     "@distributedlab/tools": "^1.0.0-rc.4",
diff --git a/src/common/Optionitem.vue b/src/common/Optionitem.vue
index c718ab3..ad2bd4c 100644
--- a/src/common/Optionitem.vue
+++ b/src/common/Optionitem.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="option-item">
-    <p>{{ item.id }}</p>
+    <p>{{ item.attributes.name }}</p>
     <app-button :text="$t('option-item.toggle-btn-txt')" @click="toggle" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { VoteOption } from '@/types'
+import { VoteOptions } from '@/types'
 import { AppButton } from '@/common'
 
 const emit = defineEmits<{
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  item: VoteOption
+  item: VoteOptions
 }>()
 
 const toggle = () => {
diff --git a/src/common/VoteCard.vue b/src/common/VoteCard.vue
index c7740ad..cf5e33e 100644
--- a/src/common/VoteCard.vue
+++ b/src/common/VoteCard.vue
@@ -1,7 +1,58 @@
 <template>
-  <div class="vote-item"></div>
+  <div class="vote-item">
+    <div v-for="field in payload" class="vote-card__payload" :key="field.lbl">
+      <p>{{ field.lbl }}</p>
+      <p>{{ field.value }}</p>
+    </div>
+
+    <app-button :text="$t('vote-card.select-btn-txt')" @click="select" />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Voting } from '@/types'
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import AppButton from '@/common/AppButton.vue'
+
+const emit = defineEmits<{
+  (e: 'select', value: Voting): void
+}>()
+
+const props = defineProps<{
+  voting: Voting
+}>()
+
+const { t } = useI18n()
+
+const payload = computed(() => [
+  {
+    lbl: t('vote-card.name-lbl'),
+    value: props.voting?.name ?? '',
+  },
+  {
+    lbl: t('vote-card.created-at-lbl'),
+    value: props.voting?.createdAt ?? '',
+  },
+  {
+    lbl: t('vote-card.active-until-lbl'),
+    value: props.voting?.activeUntil ?? '',
+  },
+])
+
+const select = () => {
+  emit('select', props.voting)
+}
+</script>
+
+<style scoped lang="scss">
+.vote-item {
+  padding: toRem(16);
+  display: grid;
+  border-radius: solid toRem(1) var(--background-primary-main);
+}
 
-<style scoped lang="scss"></style>
+.vote-card__payload {
+  display: grid;
+}
+</style>
diff --git a/src/common/VoteCardList.vue b/src/common/VoteCardList.vue
index e30858a..90c0e41 100644
--- a/src/common/VoteCardList.vue
+++ b/src/common/VoteCardList.vue
@@ -1,15 +1,29 @@
 <template>
   <div class="vote-card-list">
-    <vote-card v-for="vote in payload" :key="vote" :vote="vote" />
+    <vote-card
+      v-for="vote in payload"
+      :key="vote.name"
+      :voting="vote"
+      @select="select"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { VoteCard } from '@/common'
+import { Voting } from '@/types'
+
+const emit = defineEmits<{
+  (e: 'select', value: Voting): void
+}>()
 
 defineProps<{
-  payload: []
+  payload: Voting[]
 }>()
+
+const select = (vote: Voting) => {
+  emit('select', vote)
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/common/modals/QrAuthModal.vue b/src/common/modals/QrAuthModal.vue
index 88e748a..60346ed 100644
--- a/src/common/modals/QrAuthModal.vue
+++ b/src/common/modals/QrAuthModal.vue
@@ -9,11 +9,11 @@
 <script setup lang="ts">
 import * as QRCode from 'qrcode'
 import { Modal } from '@/common'
-import { v4 as uuid } from 'uuid'
 import { ref } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   isShown: boolean
+  nonce: string
 }>()
 
 const qr = ref('')
@@ -22,9 +22,8 @@ const genQr = async (text: string) => {
 }
 
 const init = async () => {
-  const id = uuid()
-
-  qr.value = await genQr(JSON.stringify({ nonce: id, url: '' }))
+  console.log(props.nonce)
+  qr.value = await genQr(JSON.stringify({ nonce: props.nonce, url: '' }))
 }
 
 init()
diff --git a/src/helpers/vote.helpers.ts b/src/helpers/vote.helpers.ts
index 882a31b..e3580e0 100644
--- a/src/helpers/vote.helpers.ts
+++ b/src/helpers/vote.helpers.ts
@@ -2,19 +2,27 @@ import { api } from '@/api'
 import { VotePayload, VotingListResponse, VotingResponse } from '@/types'
 import { JsonApiBodyBuilder } from '@distributedlab/jac'
 
-export const getVotingList = async () => api.get('/voting')
+export const getVotingList = async () =>
+  api.get<VotingListResponse>('/voting/list?include=options')
 
 export const getVotingById = async (voteId: number | string) =>
-  api.get<VotingListResponse>(`/integrations/voting-svc/voting/${voteId}`)
+  api.get<VotingResponse>(`/voting/${voteId}?include=options`)
 
-export const postVote = async (vote: string) => {
-  // const body = new JsonApiBodyBuilder()
-  //   .setData({
-  //     vote,
-  //   })
-  //   .build()
-  //
-  // return api.post<VotingResponse>('/voting/vote', {
-  //   body,
-  // })
+export const postVote = async (
+  vote: { votingOption: string }[],
+  token: string,
+) => {
+  const body = new JsonApiBodyBuilder()
+    .setData({
+      type: 'revoke-admin',
+      attributes: {
+        data: vote,
+      },
+    })
+    .build()
+
+  return api.post<VotingResponse>('/voting/vote', {
+    body,
+    headers: { authorization: token ?? 'test' },
+  })
 }
diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
index a7756e5..f65628f 100644
--- a/src/localization/resources/en.json
+++ b/src/localization/resources/en.json
@@ -26,5 +26,10 @@
     "vote-btn-txt": "Vote",
     "selected-part-title": "Selected items",
     "all-items-title": "All options"
+  },
+  "vote-card": {
+    "name-lbl": "Name",
+    "created-at-lbl": "Created at",
+    "active-until-lbl": "Active until"
   }
 }
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 0cadfeb..2c7ae1d 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-page">
-    <template v-if="list.length">
-      <vote-card-list :payload="list" />
+    <template v-if="votings.length">
+      <vote-card-list :payload="votings" @select="select" />
     </template>
   </div>
 </template>
@@ -10,11 +10,25 @@
 import { VoteCardList } from '@/common'
 import { ref } from 'vue'
 import { getVotingList } from '@/helpers/vote.helpers'
+import { Voting } from '@/types'
+import { router } from '@/router'
+import { ROUTE_NAMES } from '@/enums'
+
+const votings = ref<Voting[]>([])
+
+const select = (vote: Voting) => {
+  console.log(vote)
+  router.push({
+    name: ROUTE_NAMES.vote,
+    params: { id: vote.id },
+  })
+}
 
-const list = ref<[]>([])
 const init = async () => {
-  const data = await getVotingList()
-  console.log(data)
+  const { data } = await getVotingList()
+
+  votings.value = data
+  console.log(votings.value)
 }
 
 init()
diff --git a/src/pages/Vote.vue b/src/pages/Vote.vue
index eb44feb..78e58a3 100644
--- a/src/pages/Vote.vue
+++ b/src/pages/Vote.vue
@@ -4,6 +4,14 @@
       <h4 class="vote__title">
         {{ $t('vote.selected-part-title') }}
       </h4>
+
+      <div class="vote__voting-info">
+        <div v-for="item in payload" :key="item.lbl">
+          <p>{{ item.lbl }}</p>
+          <p>{{ item.value }}</p>
+        </div>
+      </div>
+
       <div class="vote__list">
         <template v-for="option in selectedList" :key="option.id">
           <optionitem
@@ -31,87 +39,58 @@
       </div>
     </div>
 
-    <qr-auth-modal :is-shown="isModalShown" />
-
     <app-button
       class="vote__btn"
       :text="$t('vote.vote-btn-txt')"
       :disabled="!isSelectedAll"
       @click="vote"
     />
+
+    <qr-auth-modal v-model:is-shown="isModalShown" :nonce="nonce" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { VoteOption, VotePayload } from '@/types'
+import { VoteOptions, Voting } from '@/types'
 import { AppButton, Optionitem, QrAuthModal } from '@/common'
-import { ErrorHandler, getVotingById, getVotingList } from '@/helpers'
+import { auth, ErrorHandler, getVotingById, postVote, sleep } from '@/helpers'
+import { poseidon } from '@big-whale-labs/poseidon'
+import { useI18n } from 'vue-i18n'
+import { v4 as uuidv4 } from 'uuid'
 
 const props = defineProps<{
   id: string | number
 }>()
 
-const options = [
-  {
-    id: 'DeBabky',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBaite bky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-  {
-    id: '5656',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBabky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-  {
-    id: '55',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBabky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-  {
-    id: 'De5555Babky',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBabky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-  {
-    id: '421',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBabky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-  {
-    id: '123',
-    type: 'voting_options',
-    attributes: {
-      name: 'DeBabky',
-      voting_id: 'b9a1c722-f771-4b1a-b293-7bf90a4d55fa',
-    },
-  },
-]
+const { t } = useI18n()
 
+const votingInfo = ref<Voting | null>(null)
 const items = ref<
   {
-    item: VoteOption
+    item: VoteOptions
     isSelected: boolean
   }[]
 >([])
 
 const isModalShown = ref(false)
-const selectedList = ref<VoteOption[]>([])
+const selectedList = ref<VoteOptions[]>([])
+const nonce = ref('2a7dc999-5967-415e-ab49-50e32ec6ec15')
+
+const payload = computed(() => [
+  {
+    lbl: t('vote-card.name-lbl'),
+    value: votingInfo.value?.name ?? '',
+  },
+  {
+    lbl: t('vote-card.created-at-lbl'),
+    value: votingInfo.value?.createdAt ?? '',
+  },
+  {
+    lbl: t('vote-card.active-until-lbl'),
+    value: votingInfo.value?.activeUntil ?? '',
+  },
+])
 
 const isSelectedAll = computed(
   () => items.value.length === selectedList.value.length,
@@ -136,27 +115,45 @@ const vote = async () => {
   isModalShown.value = true
 
   try {
-    const data = selectedList.value.map(
-      (vote, id) => ({ votingOption: vote.id, rank: id } as VotePayload),
-    )
+    const data = selectedList.value.map(vote => ({
+      votingOption: vote.attributes.name,
+    }))
+
+    const ids = selectedList.value.map(item => item.attributes.id)
 
-    console.log(data.toString())
-    const dataJson = JSON.parse(data.toString())
+    const hash = poseidon(ids)
+    const authResp = await validate()
 
-    // await postVote(data)
+    await postVote(
+      data,
+      'Bearer ' + authResp?.data?.accessToken?.token ?? 'test',
+    )
   } catch (error) {
     ErrorHandler.process(error)
   }
 }
 
+const validate = async () => {
+  try {
+    return auth(nonce.value)
+  } catch (error) {
+    await sleep(1000)
+    await auth(nonce.value)
+  }
+}
+
 const init = async () => {
   const { data } = await getVotingById(props.id)
+  votingInfo.value = data
 
-  items.value = options.map(option => ({
+  const list = data.options.map(option => ({
     item: option,
     isSelected: false,
-    id: -1,
   }))
+
+  // nonce.value = uuidv4()
+
+  items.value = list
 }
 
 init()
@@ -185,4 +182,9 @@ init()
 .vote__title {
   margin-bottom: toRem(16);
 }
+
+.vote__voting-info {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(toRem(100), 1fr));
+}
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index bd38bbf..ab539d6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,7 @@ const routes: Array<RouteRecordRaw> = [
     path: '/vote/:id',
     name: ROUTE_NAMES.vote,
     component: () => import('@/pages/Vote.vue'),
+    props: true,
   },
 ]
 
diff --git a/src/types/api.types.ts b/src/types/api.types.ts
index 65da231..fedc551 100644
--- a/src/types/api.types.ts
+++ b/src/types/api.types.ts
@@ -14,11 +14,6 @@ export type JsonApiRecordBase<T extends string> = {
   relationship_names?: JsonApiRelationships
 }
 
-export type VotingListResponse = JsonApiRecordBase<'vote'> &
-  Voting[] &
-  VoteOptions
+export type VotingListResponse = JsonApiRecordBase<'vote'> & Voting[]
 
-export type VotingResponse = JsonApiRecordBase<'vote'> &
-  JsonApiRecord &
-  Voting &
-  VoteOptions
+export type VotingResponse = JsonApiRecordBase<'vote'> & Voting
diff --git a/src/types/vote.types.ts b/src/types/vote.types.ts
index a57ab61..513c275 100644
--- a/src/types/vote.types.ts
+++ b/src/types/vote.types.ts
@@ -5,29 +5,20 @@ export type VotePayload = {
 
 export type Voting = {
   name: string
+  id: string
   description: string
   createdAt: string
   activeUntil: string
+  options: VoteOptions[]
 }
 
 export type VoteOptions = {
-  included: [
-    {
-      id: string
-      type: string
-      attributes: {
-        name: string
-        voting_id: string
-      }
-    },
-  ]
-}
-
-export type VoteOption = {
   id: string
   type: string
   attributes: {
+    id: number
     name: string
-    voting_id: string
+    points: number
+    votingId: string
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 97275a5..340e765 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -35,6 +35,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
   integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
 
+"@big-whale-labs/poseidon@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@big-whale-labs/poseidon/-/poseidon-0.0.5.tgz#38aee33760bf7a532c570cbbe572e35d9a577f26"
+  integrity sha512-Gen4qMrQl85tXg1VWBFaqUS3KylqYPoQOMy5OzQjcDTfazbUyxuB0fNVOVavKg1L2nkoF2zqQoQgPIiySuOTag==
+  dependencies:
+    big-integer "^1.6.51"
+
 "@csstools/css-parser-algorithms@^2.3.1":
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz#c45440d1efa2954006748a01697072dae5881bcd"
@@ -874,6 +881,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+big-integer@^1.6.51:
+  version "1.6.52"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
+  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"