Dev (#1)

* init home page and impelement qr gen

* update types

* update api and prepare ci

* voting page

* buffer

* jwt

* update vote system

* update qr

* update logo and main page

* Add docker build

---------

Co-authored-by: Nazarii Shcherbak <[email protected]>

.github/workflows/actions.yaml

@@ -0,0 +1,35 @@
+on:
+  push:
+    branches:
+      - '*'
+
+jobs:
+  converge:
+    name: Converge
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install werf
+        uses: werf/actions/[email protected]
+
+      - name: Log in to registry
+        # This is where you will update the personal access token to GITHUB_TOKEN
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+
+      - name: Run echo
+        run: |
+          werf version
+          docker version
+          echo $GITHUB_REPOSITORY
+          echo $GITHUB_SHA
+      - name: Run Build
+        run: |
+          . $(werf ci-env github --as-file)
+          werf export web --tag ghcr.io/debabky/web-client:$GITHUB_SHA
+      - name: Build the Docker image
+        run: docker build . --file Dockerfile --tag ghcr.io/debabky/web-client && docker push ghcr.io/debabky/web-client

.github/workflows/tag.yaml

@@ -0,0 +1,34 @@
+on:
+  push:
+    tags:
+      - '[0-9]+.[0-9]+.[0-9]+'
+
+jobs:
+  converge:
+    name: Converge
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install werf
+        uses: werf/actions/[email protected]
+
+      - name: Log in to registry
+        # This is where you will update the personal access token to GITHUB_TOKEN
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+
+      - name: Run echo
+        run: |
+          werf version
+          docker version
+          echo $GITHUB_REPOSITORY
+          echo $GITHUB_REF_NAME
+      - name: Run Build
+        run: |
+          . $(werf ci-env github --as-file)
+          werf export web --tag ghcr.io/debabky/web-client:$GITHUB_REF_NAME
+

README.md

@@ -31,7 +31,7 @@ yarn rsc %release-version%
 ```
 
 ### Dealing with env variables
-Env variables can be rewritten by [env.is] (./static/env.js) file in runtime. To do so, we need to provide same [env variables](.env.example) there in json format
+Env variables can be rewritten by [env.is] (./static/env.js) file in runtime. To do so, we need to provide same [env variables](.env.local) there in json format
 
 ## Some additional features
 

package.json

@@ -13,30 +13,39 @@
     "analyze": "dotenv -e .env.analyze yarn vite-build",
     "lint": "yarn lint:styles && yarn lint:scripts",
     "lint:styles": "stylelint \"src/**/*.{vue,scss,css}\" --max-warnings=0",
-    "lint:scripts": "eslint \"{src,config}/**/*.{vue,js,ts}\" --cache --fix --max-warnings=0",
+    "lint:scripts": "tsc --noEmit && vue-tsc --noEmit  && eslint \"{src,config}/**/*.{vue,js,ts}\" --max-warnings=0",
     "preview": "vite preview",
     "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",
+    "@types/qrcode": "^1.5.5",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.1.2",
+    "humps": "^2.0.1",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
     "pinia": "^2.0.28",
     "postcss": "^8.4.20",
+    "qrcode": "^1.5.3",
+    "sha3": "^2.1.4",
     "uuid": "^9.0.0",
     "vue": "^3.3.2",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
-    "vue-toastification": "^2.0.0-rc.5"
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue-tsc": "^2.0.7"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rushstack/eslint-patch": "^1.1.3",
+    "@types/humps": "^2.0.6",
     "@types/lodash": "^4.14.194",
     "@types/node": "^20.1.3",
     "@types/uuid": "^9.0.2",

src/App.vue

@@ -2,7 +2,10 @@
   <div v-if="isAppInitialized" class="app__container">
     <app-navbar class="app__navbar" />
     <router-view v-slot="{ Component, route }">
-      <transition :name="route.meta.transition || 'fade'" mode="out-in">
+      <transition
+        :name="route.meta.transition as string || 'fade'"
+        mode="out-in"
+      >
         <component class="app__main" :is="Component" />
       </transition>
     </router-view>
@@ -57,6 +60,8 @@ init()
   display: grid;
   grid-template-rows: toRem(85) 1fr max-content;
   flex: 1;
+  max-width: var(--large-page);
+  margin: auto;
 
   @include respond-to(small) {
     grid-template-rows: max-content 1fr max-content;

src/api/api.ts

@@ -0,0 +1,8 @@
+import { config } from '@/config'
+import { JsonApiClient } from '@distributedlab/jac'
+import { attachErrorHandler, attachCaseConverter } from './apiInterceptors'
+
+export const api = new JsonApiClient(
+  { baseUrl: config.API_URL, credentials: 'include' },
+  [{ error: attachErrorHandler }, { response: attachCaseConverter }],
+)

src/api/apiInterceptors.ts

@@ -0,0 +1,48 @@
+import {
+  HTTP_STATUS_CODES,
+  JsonApiResponseErrors,
+  JsonApiRecord,
+} from '@distributedlab/jac'
+import { errors } from '@/errors'
+import { FetcherResponse } from '@distributedlab/fetcher'
+import { camelizeKeys } from 'humps'
+
+export const attachErrorHandler = async (
+  response: FetcherResponse<JsonApiResponseErrors>,
+) => {
+  const isUnauthorized = response?.status === HTTP_STATUS_CODES.UNAUTHORIZED
+
+  if (!isUnauthorized) {
+    switch (response?.status) {
+      case HTTP_STATUS_CODES.METHOD_NOT_ALLOWED:
+        throw errors.MethodNotAllowed
+
+      case HTTP_STATUS_CODES.BAD_REQUEST:
+        throw errors.BadRequestError
+
+      case HTTP_STATUS_CODES.CONFLICT:
+        throw errors.ConflictError
+
+      case HTTP_STATUS_CODES.UNAUTHORIZED:
+        throw errors.UnauthorizedError
+
+      case HTTP_STATUS_CODES.FORBIDDEN:
+        throw errors.ForbiddenError
+
+      case HTTP_STATUS_CODES.INTERNAL_SERVER_ERROR:
+        throw errors.InternalServerError
+
+      default:
+        throw errors.RuntimeError
+    }
+  }
+  throw errors.TokenExpiredError
+}
+
+export const attachCaseConverter = (
+  response: FetcherResponse<JsonApiRecord>,
+) => {
+  return new Promise<FetcherResponse<JsonApiRecord>>(resolve => {
+    resolve(camelizeKeys(response) as FetcherResponse<JsonApiRecord>)
+  })
+}

src/api/index.ts

@@ -0,0 +1 @@
+export * from './api'

src/common/AppLogo.vue

@@ -2,10 +2,10 @@
   <div class="app-logo">
     <img
       class="app-logo__img"
-      src="/branding/logo.svg"
+      src="/branding/logo.png"
       :alt="$config.APP_NAME"
     />
-    <router-link class="app-logo__link" :to="{ name: $routes.uiKit }" />
+    <router-link class="app-logo__link" :to="{ name: $routes.home }" />
   </div>
 </template>
 
@@ -18,6 +18,11 @@
   position: relative;
 }
 
+.app-logo__img {
+  max-width: toRem(60);
+  max-height: toRem(60);
+}
+
 .app-logo__link {
   position: absolute;
   top: 0;

src/common/AppNavbar.vue

@@ -5,15 +5,8 @@
     <app-button
       class="app-navbar__link"
       :scheme="'flat'"
-      :text="$routes.uiKit"
-      :route="{ name: $routes.uiKit }"
-    />
-
-    <app-button
-      class="app-navbar__link"
-      :scheme="'flat'"
-      :text="$routes.complexForm"
-      :route="{ name: $routes.complexForm }"
+      :text="$routes.home"
+      :route="{ name: $routes.home }"
     />
   </div>
 </template>

src/common/Modal.vue

@@ -69,7 +69,8 @@ $z-index-local: 100;
   align-items: center;
   justify-content: center;
   position: relative;
-  height: auto;
+  height: 100%;
+  width: 100%;
   max-width: var(--max-width);
 }
 

src/common/Optionitem.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="option-item">
+    <p>{{ item.attributes.name }}</p>
+    <app-button :text="$t('option-item.toggle-btn-txt')" @click="toggle" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoteOptions } from '@/types'
+import { AppButton } from '@/common'
+
+const emit = defineEmits<{
+  (e: 'toggle-state', id: string | number): void
+}>()
+
+const props = defineProps<{
+  item: VoteOptions
+}>()
+
+const toggle = () => {
+  emit('toggle-state', props.item.id)
+}
+</script>
+
+<style scoped lang="scss">
+.option-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: toRem(16);
+  border-radius: toRem(16);
+  background: var(--background-secondary-main);
+}
+</style>

src/common/VoteCard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="vote-item">
+    <div v-for="field in payload" class="vote-card__payload" :key="field.lbl">
+      <p class="vote-item__lbl">
+        {{ field.lbl }}
+      </p>
+      <p class="vote-item__value">
+        {{ field.value }}
+      </p>
+    </div>
+
+    <app-button
+      class="vote-card__btn"
+      :text="$t('vote-card.select-btn-txt')"
+      @click="select"
+    />
+  </div>
+</template>
+
+<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: toRem(16);
+  border: solid toRem(3) var(--background-primary-dark);
+}
+
+.vote-card__payload {
+  display: grid;
+}
+
+.vote-card__btn {
+  margin: toRem(16) auto;
+  width: 100%;
+}
+
+.vote-item__lbl {
+  color: var(--text-primary-light);
+}
+
+.vote-item__value {
+  color: var(--text-secondary-invert-dark);
+}
+</style>