Merge pull request #250 from DecentralCardGame/243-login

243 login

package.json

@@ -4,7 +4,7 @@
     "@cosmjs/launchpad": "^0.27.0",
     "@cosmjs/proto-signing": "^0.27.1",
     "@cosmjs/stargate": "^0.27.1",
-    "@hcaptcha/vue3-hcaptcha": "^1.0.1",
+    "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@ignt/vue-library": "^0.4.3",

src/components/elements/CCButton/BaseCCButton.vue

@@ -64,7 +64,7 @@ const getButtonColor = () => {
     case ButtonType.TEAL:
       return "bg-[#40C1C7]";
     case ButtonType.RED:
-      return "bg-[#D82027]";
+      return "bg-cc-red";
   }
 };
 </script>

src/components/elements/CCButton/RouterCCButton.vue

@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -21,6 +22,4 @@ const props = withDefaults(
     type: ButtonType.YELLOW,
   }
 );
-
-import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
 </script>

src/components/elements/LoginComponent.vue

@@ -0,0 +1,37 @@
+<template>
+  <button
+    class="text-white font-bold uppercase flex hover:underline my-auto"
+    @click="tryLogin"
+  >
+    <ProfilePicComponent
+      class="h-8 w-8 mr-4"
+      size="8"
+      :src="loggedIn ? loggedInProfilePic : Profile"
+      alt="PP"
+    />
+    <a class="my-auto">{{
+      isSignUpRequired ? "Log in / Sign up" : loggedIn ? "Profile" : "Login"
+    }}</a>
+  </button>
+</template>
+
+<script setup lang="ts">
+import Profile from "@/assets/figma/Profile.png";
+import { useProfilePic } from "@/def-composables/useProfilePic";
+import { useLoggedIn } from "@/def-composables/useLoggedIn";
+import { useLogin } from "@/def-composables/useLogin";
+import { onMounted } from "vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+
+const { loggedInProfilePic } = useProfilePic();
+const { loggedIn } = useLoggedIn();
+const { tryLogin, isSignUpRequired, checkSignUpRequired } = useLogin();
+
+onMounted(() => {
+  checkSignUpRequired().then((value) => {
+    if (!value) {
+      tryLogin();
+    }
+  });
+});
+</script>

src/components/elements/ProfilePicComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    :class="[
+      'overflow-hidden',
+      'rounded-full',
+      'w-' + props.size,
+      'h-' + props.size,
+    ]"
+  >
+    <img :src="src" class="-pt-[10%] w-[100%] object-contain" :alt="alt" />
+  </div>
+</template>
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    src: any;
+    size: number | string;
+    alt: string;
+  }>(),
+  {
+    src: {},
+    size: 64,
+    alt: "Profile Pic",
+  }
+);
+</script>

src/components/modals/ChoosePBModal.vue

@@ -1,43 +1,51 @@
 <template>
-  <transition name="modal-fade">
-    <div class="modal__backdrop" style="z-index: 1000">
-      <div
-        aria-describedby="modalDescription"
-        aria-labelledby="modalTitle"
-        class="modal"
-        role="dialog"
-      >
-        <header id="modalTitle" class="modal__header">
-          <slot name="header"> Choose profile card</slot>
-          <button
-            aria-label="Close modal"
-            type="button"
-            class="btn--close"
-            @click="close"
-          >
-            x
-          </button>
-        </header>
-        <div class="modal__body input--transfer">
-          <div v-for="obj in state.images" :key="obj" class="sppBox">
-            <img :src="obj.img" @click="send(obj.id)" />
-          </div>
-        </div>
-      </div>
+  <ModalFrame
+    heading="Choose Profile Card"
+    class="max-w-[100rem]"
+    @close="emit('close')"
+  >
+    <div class="overflow-y-auto flex flex-wrap gap-8 max-h-[50rem] m-16">
+      <ProfilePicComponent
+        v-for="obj in state.images"
+        :key="obj.id"
+        :src="obj.img"
+        size="40"
+        :class="
+          ['w-40', 'h-40'].concat(
+            obj.id == state.choosen ? ['border-cc-red', 'border-8'] : []
+          )
+        "
+        :alt="'Pic' + obj.id"
+        @click="choose(obj.id)"
+      />
     </div>
-  </transition>
+    <BaseCCButton
+      :type="ButtonType.RED"
+      @click="send"
+      class="mx-auto text-center"
+      >Save
+    </BaseCCButton>
+  </ModalFrame>
 </template>
 
 <script setup lang="ts">
+import { useAddress } from "@/def-composables/useAddress";
 import { useUser } from "@/def-composables/useUser";
 import { useTx } from "@/def-composables/useTx";
+import { useProfilePic } from "@/def-composables/useProfilePic";
 import type { Card } from "@/model/Card";
 import { onMounted, reactive } from "vue";
 import { useCards } from "@/def-composables/useCards";
+import ModalFrame from "@/components/modals/ModalFrame.vue";
+import ProfilePicComponent from "@/components/elements/ProfilePicComponent.vue";
+import BaseCCButton from "@/components/elements/CCButton/BaseCCButton.vue";
+import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 
+const { address } = useAddress();
+const { getDefaultImg } = useProfilePic();
 const { setProfileCard } = useTx();
 const { queryUser } = useUser();
-const { getCard } = useCards()
+const { getCard } = useCards();
 const emit = defineEmits(["close"]);
 
 class Pic {
@@ -53,42 +61,52 @@ class Pic {
 const props = withDefaults(
   defineProps<{
     cardIds: number[];
+    current: number;
   }>(),
   {
     cardIds: () => [],
+    current: 0,
   }
 );
 
 const initialState: {
   images: Array<Pic>;
+  choosen: number;
 } = {
-  images: new Array<Pic>(),
+  images: [new Pic(0, getDefaultImg(address.value))],
+  choosen: 0,
 };
 
 const state = reactive(initialState);
 
-onMounted(() => {
-  props.cardIds.map(id => loadCard(id))
-})
+onMounted(async () => {
+  state.choosen = props.current;
+  console.log("choosen " + state.choosen);
+  props.cardIds.forEach((id) => loadCard(id));
+});
 
 const loadCard = (id: number) => {
   getCard(id).then((card: Card) => {
     if (["permanent", "trial"].includes(card.status)) {
       state.images.push(new Pic(id, card.image));
     }
   });
-}
+};
+
+const close = () => emit("close");
 
-const close = () => emit("close")
+const choose = (id: number) => {
+  state.choosen = id;
+};
 
-const send = (id: number) => {
+const send = () => {
   setProfileCard(
-    id,
+    state.choosen,
     (res) => {
       queryUser();
       close();
     },
     console.log
   );
-}
+};
 </script>