From fd85060d6a75707434c1c400033ead46f3af297c Mon Sep 17 00:00:00 2001
From: Irving Puga <ipugakn@gmail.com>
Date: Wed, 16 Nov 2022 19:22:34 -0600
Subject: [PATCH] fix(create): minnor bugs (#1829)

* fix: remove top bar on dao creation
* fix: uploaded logo
* fix(create): add dashboard link
* fix(create): remove guest menu
* feat(create): add admin user validations
* fix(banner): background color
* fix(create): add image upload icon button
---
 src/components/common/base-banner.vue   |  4 +-
 src/components/ipfs/input-file-ipfs.vue |  2 +-
 src/layouts/MultiDhoLayout.vue          |  9 ++--
 src/pages/onboarding/create.vue         | 55 +++++++++++++++++++++----
 4 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/components/common/base-banner.vue b/src/components/common/base-banner.vue
index aca5f5fe9..bf6a3cb10 100644
--- a/src/components/common/base-banner.vue
+++ b/src/components/common/base-banner.vue
@@ -64,7 +64,7 @@ export default {
 </script>
 
 <template lang="pug">
-.base-banner.full-width.rounded-corners.relative-position.overflow-hidden(:style="{'background': getPaletteColor(color)}" :class="{'compact-banner' : compact}")
+.base-banner.full-width.rounded-corners.relative-position.overflow-hidden(:style="{'background': color}" :class="{'compact-banner' : compact}")
   #banner-pattern.absolute(:style="{'background': `url('${pattern}') repeat`, 'background-size': '200px' }" v-if="pattern")
   #banner-image.absolute(:style="{'background': `url('${background}') no-repeat`, 'background-size': 'cover' }" v-if="background")
   #linear-gradient.absolute.z-40(v-if="gradient")
@@ -101,7 +101,7 @@ export default {
 #linear-gradient
   width 100%
   height 100%
-  background: linear-gradient(268deg, rgba(19,34,106, 0) 0%, rgba(24,30,78, 1) 100%)
+  background: linear-gradient(268deg,rgba(0,0,0,0),rgba(0,0,0,0.3))
   opacity 0.7
 
 #banner-pattern, #banner-image
diff --git a/src/components/ipfs/input-file-ipfs.vue b/src/components/ipfs/input-file-ipfs.vue
index 62ecc780e..e6a36f6ea 100644
--- a/src/components/ipfs/input-file-ipfs.vue
+++ b/src/components/ipfs/input-file-ipfs.vue
@@ -98,7 +98,7 @@ export default {
       this.$emit('uploadedFile', this.typeCid)
       const file = await BrowserIpfs.retrieve(this.typeCid)
       this.file = file.payload
-      // this.imageURI = URL.createObjectURL(file.payload)
+      this.imageURI = URL.createObjectURL(file.payload)
     },
     chooseFile () {
       this.$refs.qFile.pickFiles()
diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue
index d0d0252fa..4045d8b07 100644
--- a/src/layouts/MultiDhoLayout.vue
+++ b/src/layouts/MultiDhoLayout.vue
@@ -132,7 +132,8 @@ export default {
       return this.getDaos(member)
     },
 
-    loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account }
+    loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account },
+    showTopBarItems () { return this.$route.name !== 'dao-launcher' }
   },
 
   methods: {
@@ -271,7 +272,7 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
                     router-link.text-primary.text-underline.text-weight-600(:to="breadcrumbs.tab.link") {{ breadcrumbs.tab.name }}
                   .row
                     .h-h3(v-if="title") {{ title }}
-                .col
+                .col(v-if="showTopBarItems")
                   .row.justify-end.items-center(v-if="$q.screen.gt.md")
                     router-link(:to="{ name: 'configuration' }")
                       q-btn.q-mr-xs(unelevated rounded padding="12px" icon="fas fa-cog"  size="sm" :color="isActiveRoute('configuration') ? 'primary' : 'white'" :text-color="isActiveRoute('configuration') ? 'white' : 'primary'" )
@@ -300,8 +301,8 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
                         q-icon(size="xs" color="primary" name="fas fa-search")
                       template(v-slot:append v-if="searchInput")
                         q-icon(size="xs" name="fas fa-times" @click="clearSearchInput")
-                guest-menu.q-ml-md(v-if="!account && !loadingAccount" :daoName="daoName")
-                non-member-menu.q-ml-md(v-if="!isMember && !isApplicant && account && !loadingAccount" :registrationEnabled="daoSettings.registrationEnabled")
+                guest-menu.q-ml-md(v-if="!account && !loadingAccount && showTopBarItems" :daoName="daoName")
+                non-member-menu.q-ml-md(v-if="!isMember && !isApplicant && account && !loadingAccount && showTopBarItems" :registrationEnabled="daoSettings.registrationEnabled")
                 q-btn.q-ml-lg.q-mr-md(v-if="$q.screen.gt.md && !right && !loadingAccount" flat round @click="right = true")
                   profile-picture(v-bind="profile" size="36px" v-if="account")
                   profile-picture(username="g" size="36px" v-if="!account" textOnly)
diff --git a/src/pages/onboarding/create.vue b/src/pages/onboarding/create.vue
index 37f026b7c..570e5f1f6 100644
--- a/src/pages/onboarding/create.vue
+++ b/src/pages/onboarding/create.vue
@@ -211,7 +211,11 @@ export default {
     ...mapGetters('accounts', ['account']),
 
     activeStep () { return this.steps[this.activeStepIndex].key },
-    isLastStep () { return this.activeStepIndex === this.steps.length - 1 }
+    isLastStep () { return this.activeStepIndex === this.steps.length - 1 },
+    isImageSelected: {
+      cache: false,
+      get () { return this.$refs.ipfsInput?.imageURI }
+    }
   },
 
   watch: {
@@ -270,11 +274,20 @@ export default {
       }
     },
 
+    onGoToDashboard () {
+      this.$router.push({ name: 'dashboard', params: { dhoname: this.dao.details_daoName_n } })
+    },
+
     async onSubmit () {
       this.state = 'CREATING'
 
       try {
-        await this.createDAO({ data: { ...this.form, onboarder_account: this.account } })
+        await this.createDAO({
+          data: {
+            ...this.form,
+            onboarder_account: this.account
+          }
+        })
 
         const query = await this.$apollo.watchQuery({
           query: require('~/query/dao-created.gql'),
@@ -311,6 +324,7 @@ export default {
     },
 
     //
+
     async onAddAdmin () {
       try {
         await this.addAdmins({ daoId: this.dao.docId, users: [...this.form.members.map(_ => _.username)] })
@@ -355,9 +369,16 @@ export default {
     },
 
     async addTeamMember () {
+      if (this.form.members.find(obj => obj.username === this.form.member)) return
+      const formCopy = { ...this.form, members: [] }
+      if (!(await this.validate(formCopy))) return
       const user = await this.getPublicProfile(this.form.member)
       this.form.members.push({ username: this.form.member, avatar: user ? user?.publicData?.avatar : null, fullName: user ? user?.publicData?.name : null })
       this.form.member = ''
+    },
+
+    async removeTeamMember (username) {
+      this.form.members = this.form.members.filter((obj) => obj.username !== username)
     }
   },
 
@@ -392,7 +413,7 @@ q-page.dao-launcher-page
               p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md {{this.form.description}}
           .row.justify-end.q-mt-md
               q-btn.q-px-xl(
-                :to="{ name: 'dashboard' }"
+                @click="onGoToDashboard"
                 color="primary"
                 label="Go to Dashboard"
                 no-caps
@@ -459,8 +480,16 @@ q-page.dao-launcher-page
               .row.justify-center.items-center
                 .col-auto
                   q-avatar(:size="$q.screen.gt.md ? '80px' :'60px' " color="primary" text-color="white")
-                    span(v-show="!form.logo") {{ form.title ? form.title[0].toUpperCase() : '' }}
-                    img(v-show="form.logo" :src="ipfsy(form.logo)")
+                    q-btn(v-if="!isImageSelected"
+                      @click="$refs.ipfsInput.chooseFile()"
+                      icon="fa fa-image"
+                      color="white"
+                      flat
+                      padding="30px"
+                      round
+                      size="xl"
+                      unelevated)
+                    img(v-if="isImageSelected" :src="$refs.ipfsInput.imageURI")
                 .col.q-ml-md
                   label.h-label Logo / Icon
                   q-btn.full-width.rounded-border.text-bold.q-mt-xs(
@@ -713,7 +742,7 @@ q-page.dao-launcher-page
             q-input.q-mt-xs.q-pa-none.rounded-border(
                   :debounce="200"
                   :ref="'member'"
-                  :rules="[rules.required, rules.accountExists]"
+                  :rules="[rules.required, rules.accountFormatBasic, rules.accountLength, rules.accountExists]"
                   bg-color="white"
                   dense
                   lazy-rules="ondemand"
@@ -730,7 +759,15 @@ q-page.dao-launcher-page
           .row.full-width.q-mt-xl
             template(v-for="(member, index) in form.members")
               .col-4.q-mt-md.q-px-md
-                .q-pa-sm.rounded-border.row.items-center(:style="{'border': '1px solid var(--q-color-primary)'}")
+                .q-pa-sm.rounded-border.row.items-center.relative.member-item(:style="{'border': '1px solid var(--q-color-primary)'}")
+                  q-btn.absolute-top-right.q-pa-xxs.z-50(
+                    @click="() => removeTeamMember(member.username)"
+                    color="body"
+                    flat
+                    icon="fas fa-times"
+                    round
+                    size="sm"
+                  )
                   q-avatar.q-mr-xs(size="xl" :style="{'background': form.primaryColor, 'color': form.textColor }")
                       img(:src="member.avatar" v-if="member.avatar").object-cover
                       span() {{ member && member.username[0] }}
@@ -740,7 +777,7 @@ q-page.dao-launcher-page
 
         nav.row.justify-end.q-mt-xl.q-gutter-xs
           q-btn.q-px-xl(
-            :to="{ name: 'dashboard' }"
+            @click="onGoToDashboard"
             color="primary"
             label="Go to Dashboard"
             no-caps
@@ -776,4 +813,6 @@ q-page.dao-launcher-page
 </template>
 
 <style lang="stylus" scoped>
+.member-item
+  position: relative
 </style>