From f3bea4d8d76e263f8277856dea9506e1642de342 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 28 Jul 2022 22:24:43 +0530
Subject: [PATCH] feat(gui-v2): add password toggle icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/SharedViewList.vue     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
index fc4fd9f036..f829d9752a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SharedViewList.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { onMounted } from '#imports'
+import MdiVisibilityOnIcon from '~icons/mdi/visibility'
+import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 
 const { view, $api, meta } = useSmartsheetStoreOrThrow()
 
@@ -48,7 +50,6 @@ const test = (t) => console.log(t)
       <!-- View Link -->
       <a-table-column key="title" :title="$t('labels.viewLink')" data-index="title">
         <template #default="{ record }">
-          <div @click="test(rest)">click</div>
           <!--          <nuxt-link :to="sharedViewUrl(currentView)">
             {{ `${dashboardUrl}#${sharedViewUrl(currentView)}` }}
           </nuxt-link> -->
@@ -56,15 +57,17 @@ const test = (t) => console.log(t)
       </a-table-column>
       <!-- Password -->
       <a-table-column key="password" :title="$t('labels.password')" data-index="title">
-        <template #default="{ text }">
-          {{ text }}
-          <!--          <span>{{ currentView.showPassword ? currentView.password : '***************************' }}</span>
-          <v-icon small @click="$set(currentView, 'showPassword', !currentView.showPassword)">
-            {{ currentView.showPassword ? 'visibility_off' : 'visibility' }}
-          </v-icon> -->
+        <template #default="{ text, record }">
+          <div class="flex align-center items-center gap-1">
+            <span class="h-min">{{ record.showPassword ? text : '***************************' }}</span>
+            <component
+              :is="record.showPassword ? MdiVisibilityOffIcon : MdiVisibilityOnIcon"
+              @click="record.showPassword = !record.showPassword"
+            />
+          </div>
         </template>
       </a-table-column>
-      <!-- Password -->
+      <!-- Todo: i18n  -->
       <a-table-column key="meta" title="Download allowed" data-index="title">
         <template #default="{ text }">
           {{ text }}