From 424bf84ef2f000254b82a85d91b7cd16c2c5a018 Mon Sep 17 00:00:00 2001
From: Dominik Biedebach <dominik@bdbch.com>
Date: Fri, 29 Nov 2024 09:32:10 +0100
Subject: [PATCH] Add blur to app password copy screen

---
 .../components/AddAppPasswordDialog.tsx       | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/screens/Settings/components/AddAppPasswordDialog.tsx b/src/screens/Settings/components/AddAppPasswordDialog.tsx
index 9278757786..17e5333346 100644
--- a/src/screens/Settings/components/AddAppPasswordDialog.tsx
+++ b/src/screens/Settings/components/AddAppPasswordDialog.tsx
@@ -22,6 +22,7 @@ import * as Dialog from '#/components/Dialog'
 import * as TextInput from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import {Eye_Stroke2_Corner0_Rounded as EyeIcon} from '#/components/icons/Eye'
 import {SquareBehindSquare4_Stroke2_Corner0_Rounded as CopyIcon} from '#/components/icons/SquareBehindSquare4'
 import {Text} from '#/components/Typography'
 import {CopyButton} from './CopyButton'
@@ -47,6 +48,7 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
   const t = useTheme()
   const {_} = useLingui()
   const autogeneratedName = useRandomName()
+  const [showPassword, setShowPassword] = useState(false)
   const [name, setName] = useState('')
   const [privileged, setPrivileged] = useState(false)
   const {
@@ -191,15 +193,37 @@ function CreateDialogInner({passwords}: {passwords: string[]}) {
                   Use this to sign into the other app along with your handle.
                 </Trans>
               </Text>
-              <CopyButton
-                value={data.password}
-                label={_(msg`Copy App Password`)}
-                size="large"
-                variant="solid"
-                color="secondary">
-                <ButtonText>{data.password}</ButtonText>
-                <ButtonIcon icon={CopyIcon} />
-              </CopyButton>
+              <View style={[a.flex_row, a.align_center, a.gap_sm, a.w_full]}>
+                <View style={[a.flex_grow, a.flex_shrink_0]}>
+                  <CopyButton
+                    value={data.password}
+                    label={_(msg`Copy App Password`)}
+                    size="large"
+                    variant="solid"
+                    color="secondary">
+                    <ButtonText
+                      style={{
+                        color: showPassword
+                          ? t.atoms.text.color
+                          : 'transparent',
+                        textShadowColor: t.atoms.text.color,
+                        textShadowRadius: showPassword ? 0 : 8,
+                      }}>
+                      {data.password}
+                    </ButtonText>
+                    <ButtonIcon icon={CopyIcon} />
+                  </CopyButton>
+                </View>
+                <Button
+                  label={_(msg`Show Password`)}
+                  size="small"
+                  variant="ghost"
+                  color="primary"
+                  onPress={() => setShowPassword(!showPassword)}
+                  style={[a.flex_shrink]}>
+                  <ButtonIcon icon={EyeIcon} />
+                </Button>
+              </View>
               <Text
                 style={[
                   a.text_md,