From aa6aad652e8091ea6039af82f41d4de3669a5944 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 31 Oct 2024 20:45:34 +0000
Subject: [Settings] Thread prefs revamp (#5772)

* thread preferences screen

* minor tweaks

* more spacing

* replace gate with IS_INTERNAL

* [Settings] Following feed prefs revamp (#5773)

* gated new settings screen

* Following feed prefs

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* replace pref following feed gate

* Update src/screens/Settings/FollowingFeedPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* use "Experimental" as the header

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] External media prefs revamp (#5774)

* gated new settings screen

* external media prefs revamp

* replace gate ext media embeds

* Update src/screens/Settings/ExternalMediaPreferences.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* add imports for translation

* alternate list style on native

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Languages revamp (partial) (#5775)

* language settings (lazy restyle)

* replace gate

* fix text determining flex space

* [Settings] App passwords revamp (#5777)

* rework app passwords screen

* Apply surfdude's copy changes

Thanks @surfdude29!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* format

* replace gate

* use admonition for input error and animate

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Change handle dialog (#5781)

* new change handle dialog

* animations native only

* overflow hidden on togglebutton animation

* add a low-contrast border

* extract out copybutton

* finish change handle dialog

* invalidate query on success

* web fixes

* error message for rate limit exceeded

* typo

* em dash!

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* another em dash

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* set maxwidth of suffixtext

* Copy tweak

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* [Settings] Notifs settings revamp (#5884)

* rename, move, and restyle notif settings

* bold "experimental:"

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
---
 .../Settings/components/AddAppPasswordDialog.tsx   | 280 +++++++++++++++++++++
 1 file changed, 280 insertions(+)
 create mode 100644 src/screens/Settings/components/AddAppPasswordDialog.tsx

(limited to 'src/screens/Settings/components/AddAppPasswordDialog.tsx')

diff --git a/src/screens/Settings/components/AddAppPasswordDialog.tsx b/src/screens/Settings/components/AddAppPasswordDialog.tsx
new file mode 100644
index 000000000..dcb212879
--- /dev/null
+++ b/src/screens/Settings/components/AddAppPasswordDialog.tsx
@@ -0,0 +1,280 @@
+import React, {useEffect, useMemo, useState} from 'react'
+import {useWindowDimensions, View} from 'react-native'
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LayoutAnimationConfig,
+  LinearTransition,
+  SlideInRight,
+  SlideOutLeft,
+} from 'react-native-reanimated'
+import {ComAtprotoServerCreateAppPassword} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMutation} from '@tanstack/react-query'
+
+import {isWeb} from '#/platform/detection'
+import {useAppPasswordCreateMutation} from '#/state/queries/app-passwords'
+import {atoms as a, native, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+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 {SquareBehindSquare4_Stroke2_Corner0_Rounded as CopyIcon} from '#/components/icons/SquareBehindSquare4'
+import {Text} from '#/components/Typography'
+import {CopyButton} from './CopyButton'
+
+export function AddAppPasswordDialog({
+  control,
+  passwords,
+}: {
+  control: Dialog.DialogControlProps
+  passwords: string[]
+}) {
+  const {height} = useWindowDimensions()
+  return (
+    <Dialog.Outer control={control} nativeOptions={{minHeight: height}}>
+      <Dialog.Handle />
+      <CreateDialogInner passwords={passwords} />
+    </Dialog.Outer>
+  )
+}
+
+function CreateDialogInner({passwords}: {passwords: string[]}) {
+  const control = Dialog.useDialogContext()
+  const t = useTheme()
+  const {_} = useLingui()
+  const autogeneratedName = useRandomName()
+  const [name, setName] = useState('')
+  const [privileged, setPrivileged] = useState(false)
+  const {
+    mutateAsync: actuallyCreateAppPassword,
+    error: apiError,
+    data,
+  } = useAppPasswordCreateMutation()
+
+  const regexFailError = useMemo(
+    () =>
+      new DisplayableError(
+        _(
+          msg`App password names can only contain letters, numbers, spaces, dashes, and underscores`,
+        ),
+      ),
+    [_],
+  )
+
+  const {
+    mutate: createAppPassword,
+    error: validationError,
+    isPending,
+  } = useMutation<
+    ComAtprotoServerCreateAppPassword.AppPassword,
+    Error | DisplayableError
+  >({
+    mutationFn: async () => {
+      const chosenName = name.trim() || autogeneratedName
+      if (chosenName.length < 4) {
+        throw new DisplayableError(
+          _(msg`App password names must be at least 4 characters long`),
+        )
+      }
+      if (passwords.find(p => p === chosenName)) {
+        throw new DisplayableError(_(msg`App password name must be unique`))
+      }
+      return await actuallyCreateAppPassword({name: chosenName, privileged})
+    },
+  })
+
+  const [hasBeenCopied, setHasBeenCopied] = useState(false)
+  useEffect(() => {
+    if (hasBeenCopied) {
+      const timeout = setTimeout(() => setHasBeenCopied(false), 100)
+      return () => clearTimeout(timeout)
+    }
+  }, [hasBeenCopied])
+
+  const error =
+    validationError || (!name.match(/^[a-zA-Z0-9-_ ]*$/) && regexFailError)
+
+  return (
+    <Dialog.ScrollableInner label={_(msg`Add app password`)}>
+      <View style={[native(a.pt_md)]}>
+        <LayoutAnimationConfig skipEntering skipExiting>
+          {!data ? (
+            <Animated.View
+              style={[a.gap_lg]}
+              exiting={native(SlideOutLeft)}
+              key={0}>
+              <Text style={[a.text_2xl, a.font_bold]}>
+                <Trans>Add App Password</Trans>
+              </Text>
+              <Text style={[a.text_md, a.leading_snug]}>
+                <Trans>
+                  Please enter a unique name for this app password or use our
+                  randomly generated one.
+                </Trans>
+              </Text>
+              <View>
+                <TextInput.Root isInvalid={!!error}>
+                  <Dialog.Input
+                    label={_(msg`App Password`)}
+                    placeholder={autogeneratedName}
+                    onChangeText={setName}
+                    returnKeyType="done"
+                    onSubmitEditing={() => createAppPassword()}
+                    blurOnSubmit
+                    autoCorrect={false}
+                    autoComplete="off"
+                    autoCapitalize="none"
+                    autoFocus
+                  />
+                </TextInput.Root>
+              </View>
+              {error instanceof DisplayableError && (
+                <Animated.View entering={FadeIn} exiting={FadeOut}>
+                  <Admonition type="error">{error.message}</Admonition>
+                </Animated.View>
+              )}
+              <Animated.View
+                style={[a.gap_lg]}
+                layout={native(LinearTransition)}>
+                <Toggle.Item
+                  name="privileged"
+                  type="checkbox"
+                  label={_(msg`Allow access to your direct messages`)}
+                  value={privileged}
+                  onChange={setPrivileged}
+                  style={[a.flex_1]}>
+                  <Toggle.Checkbox />
+                  <Toggle.LabelText
+                    style={[a.font_normal, a.text_md, a.leading_snug]}>
+                    <Trans>Allow access to your direct messages</Trans>
+                  </Toggle.LabelText>
+                </Toggle.Item>
+                <Button
+                  label={_(msg`Next`)}
+                  size="large"
+                  variant="solid"
+                  color="primary"
+                  style={[a.flex_1]}
+                  onPress={() => createAppPassword()}
+                  disabled={isPending}>
+                  <ButtonText>
+                    <Trans>Next</Trans>
+                  </ButtonText>
+                  <ButtonIcon icon={ChevronRight} />
+                </Button>
+                {!!apiError ||
+                  (error && !(error instanceof DisplayableError) && (
+                    <Animated.View entering={FadeIn} exiting={FadeOut}>
+                      <Admonition type="error">
+                        <Trans>
+                          Failed to create app password. Please try again.
+                        </Trans>
+                      </Admonition>
+                    </Animated.View>
+                  ))}
+              </Animated.View>
+            </Animated.View>
+          ) : (
+            <Animated.View
+              style={[a.gap_lg]}
+              entering={isWeb ? FadeIn.delay(200) : SlideInRight}
+              key={1}>
+              <Text style={[a.text_2xl, a.font_bold]}>
+                <Trans>Here is your app password!</Trans>
+              </Text>
+              <Text style={[a.text_md, a.leading_snug]}>
+                <Trans>
+                  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>
+              <Text
+                style={[
+                  a.text_md,
+                  a.leading_snug,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>
+                  For security reasons, you won't be able to view this again. If
+                  you lose this app password, you'll need to generate a new one.
+                </Trans>
+              </Text>
+              <Button
+                label={_(msg`Done`)}
+                size="large"
+                variant="outline"
+                color="primary"
+                style={[a.flex_1]}
+                onPress={() => control.close()}>
+                <ButtonText>
+                  <Trans>Done</Trans>
+                </ButtonText>
+              </Button>
+            </Animated.View>
+          )}
+        </LayoutAnimationConfig>
+      </View>
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+class DisplayableError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'DisplayableError'
+  }
+}
+
+function useRandomName() {
+  return useState(
+    () => shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
+  )[0]
+}
+
+const shadesOfBlue: string[] = [
+  'AliceBlue',
+  'Aqua',
+  'Aquamarine',
+  'Azure',
+  'BabyBlue',
+  'Blue',
+  'BlueViolet',
+  'CadetBlue',
+  'CornflowerBlue',
+  'Cyan',
+  'DarkBlue',
+  'DarkCyan',
+  'DarkSlateBlue',
+  'DeepSkyBlue',
+  'DodgerBlue',
+  'ElectricBlue',
+  'LightBlue',
+  'LightCyan',
+  'LightSkyBlue',
+  'LightSteelBlue',
+  'MediumAquaMarine',
+  'MediumBlue',
+  'MediumSlateBlue',
+  'MidnightBlue',
+  'Navy',
+  'PowderBlue',
+  'RoyalBlue',
+  'SkyBlue',
+  'SlateBlue',
+  'SteelBlue',
+  'Teal',
+  'Turquoise',
+]
-- 
cgit 1.4.1

