[APP-522] Create & revoke App Passwords within settings (#505)

* create and delete app passwords

* add randomly generated name

* Tweak copy and layout of app passwords

* Improve app passwords on desktop web

* Rearrange settings

* Change app-passwords route and add to backend

* Fix link

* Fix some more desktop web

* Remove log

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 24 insertions, 1 deletions

diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index ad0a5a1d2..816c835cc 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
+import {CenteredView} from './Views'
 import {UserAvatar} from './UserAvatar'
 import {Text} from './text/Text'
 import {useStores} from 'state/index'
@@ -18,10 +19,12 @@ export const ViewHeader = observer(function ({
   title,
   canGoBack,
   hideOnScroll,
+  showOnDesktop,
 }: {
   title: string
   canGoBack?: boolean
   hideOnScroll?: boolean
+  showOnDesktop?: boolean
 }) {
   const pal = usePalette('default')
   const store = useStores()
@@ -42,7 +45,10 @@ export const ViewHeader = observer(function ({
   }, [track, store])
 
   if (isDesktopWeb) {
-    return <></>
+    if (showOnDesktop) {
+      return <DesktopWebHeader title={title} />
+    }
+    return null
   } else {
     if (typeof canGoBack === 'undefined') {
       canGoBack = navigation.canGoBack()
@@ -76,6 +82,19 @@ export const ViewHeader = observer(function ({
   }
 })
 
+function DesktopWebHeader({title}: {title: string}) {
+  const pal = usePalette('default')
+  return (
+    <CenteredView style={[styles.header, styles.desktopHeader, pal.border]}>
+      <View style={styles.titleContainer} pointerEvents="none">
+        <Text type="title-lg" style={[pal.text, styles.title]}>
+          {title}
+        </Text>
+      </View>
+    </CenteredView>
+  )
+}
+
 const Container = observer(
   ({
     children,
@@ -133,6 +152,10 @@ const styles = StyleSheet.create({
     top: 0,
     width: '100%',
   },
+  desktopHeader: {
+    borderBottomWidth: 1,
+    paddingVertical: 12,
+  },
 
   titleContainer: {
     marginLeft: 'auto',