Page MenuHomePhabricator
Files F3382308

D7723.diff
No OneTemporary
Actions

D7723.diff
View Options

diff --git a/native/account/registration/cool-or-nerd-mode-selection.react.js b/native/account/registration/cool-or-nerd-mode-selection.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/cool-or-nerd-mode-selection.react.js
@@ -0,0 +1,125 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
+import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import {
+ RegistrationTile,
+ RegistrationTileHeader,
+} from './registration-tile.react.js';
+import type { CoolOrNerdMode } from './registration-types.js';
+import {
+ type NavigationRoute,
+ KeyserverSelectionRouteName,
+} from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+
+type Props = {
+ +navigation: RegistrationNavigationProp<'CoolOrNerdModeSelection'>,
+ +route: NavigationRoute<'CoolOrNerdModeSelection'>,
+};
+function CoolOrNerdModeSelection(props: Props): React.Node {
+ const [currentSelection, setCurrentSelection] =
+ React.useState<?CoolOrNerdMode>();
+ const selectCool = React.useCallback(() => {
+ setCurrentSelection('cool');
+ }, []);
+ const selectNerd = React.useCallback(() => {
+ setCurrentSelection('nerd');
+ }, []);
+
+ const { navigate } = props.navigation;
+ const onSubmit = React.useCallback(() => {
+ invariant(
+ currentSelection,
+ 'Button should be disabled if currentSelection is not set',
+ );
+ navigate<'KeyserverSelection'>({
+ name: KeyserverSelectionRouteName,
+ params: { userSelections: { coolOrNerdMode: currentSelection } },
+ });
+ }, [navigate, currentSelection]);
+
+ const buttonState = currentSelection ? 'enabled' : 'disabled';
+ const styles = useStyles(unboundStyles);
+ return (
+ <View style={styles.container}>
+ <RegistrationContainer>
+ <Text style={styles.header}>To begin, choose your fighter</Text>
+ <Text style={styles.body}>
+ Do you want Comm to choose reasonable defaults for you, or do you want
+ to see all the options and make the decisions yourself?
+ </Text>
+ <Text style={styles.body}>
+ This setting will affect behavior throughout the app, but you can
+ change it later in your settings.
+ </Text>
+ <RegistrationTile
+ selected={currentSelection === 'nerd'}
+ onSelect={selectNerd}
+ >
+ <RegistrationTileHeader>
+ <Text style={styles.emojiIcon}>🤓</Text>
+ <Text style={styles.tileTitleText}>Nerd mode</Text>
+ </RegistrationTileHeader>
+ <Text style={styles.tileBody}>
+ We present more options and talk through their security and privacy
+ implications in detail.
+ </Text>
+ </RegistrationTile>
+ <RegistrationTile
+ selected={currentSelection === 'cool'}
+ onSelect={selectCool}
+ >
+ <RegistrationTileHeader>
+ <Text style={styles.emojiIcon}>😎</Text>
+ <Text style={styles.tileTitleText}>Cool mode</Text>
+ </RegistrationTileHeader>
+ <Text style={styles.tileBody}>
+ We select reasonable defaults for you.
+ </Text>
+ </RegistrationTile>
+ </RegistrationContainer>
+ <RegistrationButton onPress={onSubmit} label="Next" state={buttonState} />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ backgroundColor: 'panelBackground',
+ justifyContent: 'space-between',
+ flex: 1,
+ },
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ body: {
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+ tileTitleText: {
+ flex: 1,
+ fontSize: 18,
+ color: 'panelForegroundLabel',
+ },
+ tileBody: {
+ fontSize: 13,
+ color: 'panelForegroundSecondaryLabel',
+ },
+ emojiIcon: {
+ fontSize: 32,
+ bottom: 1,
+ marginRight: 5,
+ },
+};
+
+export default CoolOrNerdModeSelection;
diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -10,12 +10,19 @@
RegistrationTile,
RegistrationTileHeader,
} from './registration-tile.react.js';
+import type { CoolOrNerdMode } from './registration-types.js';
import CommIcon from '../../components/comm-icon.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Selection = 'ashoat' | 'custom';
+export type KeyserverSelectionParams = {
+ +userSelections: {
+ +coolOrNerdMode: CoolOrNerdMode,
+ },
+};
+
type Props = {
+navigation: RegistrationNavigationProp<'KeyserverSelection'>,
+route: NavigationRoute<'KeyserverSelection'>,
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -8,10 +8,12 @@
import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
+import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
import KeyserverSelection from './keyserver-selection.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import {
KeyserverSelectionRouteName,
+ CoolOrNerdModeSelectionRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -49,6 +51,10 @@
return (
<SafeAreaView style={styles.container} edges={safeAreaEdges}>
<Registration.Navigator screenOptions={screenOptions}>
+ <Registration.Screen
+ name={CoolOrNerdModeSelectionRouteName}
+ component={CoolOrNerdModeSelection}
+ />
<Registration.Screen
name={KeyserverSelectionRouteName}
component={KeyserverSelection}
diff --git a/native/account/registration/registration-types.js b/native/account/registration/registration-types.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-types.js
@@ -0,0 +1,3 @@
+// @flow
+
+export type CoolOrNerdMode = 'cool' | 'nerd';
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -4,6 +4,7 @@
import type { ActionResultModalParams } from './action-result-modal.react.js';
import type { InviteLinkModalParams } from './invite-link-modal.react';
+import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js';
import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js';
import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js';
import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js';
@@ -87,6 +88,7 @@
export const TermsAndPrivacyRouteName = 'TermsAndPrivacyModal';
export const RegistrationRouteName = 'Registration';
export const KeyserverSelectionRouteName = 'KeyserverSelection';
+export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection';
export type RootParamList = {
+LoggedOutModal: void,
@@ -167,7 +169,10 @@
export type CommunityDrawerParamList = { +TabNavigator: void };
-export type RegistrationParamList = { +KeyserverSelection: void };
+export type RegistrationParamList = {
+ +CoolOrNerdModeSelection: void,
+ +KeyserverSelection: KeyserverSelectionParams,
+};
export type ScreenParamList = {
...RootParamList,

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 9:47 AM (20 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596602
Default Alt Text
D7723.diff (7 KB)

Event Timeline