Page MenuHomePhabricator
Files F3298666

D8912.id30281.diff
No OneTemporary
Actions

D8912.id30281.diff
View Options

diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -49,6 +49,7 @@
type NavigationRoute,
LoggedOutModalRouteName,
RegistrationRouteName,
+ QRCodeSignInNavigatorRouteName,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js';
@@ -572,7 +573,7 @@
if (__DEV__) {
signInButtons.push(
<TouchableOpacity
- onPress={null}
+ onPress={this.onPressQRCodeSignIn}
style={[styles.button, styles.classicAuthButton]}
activeOpacity={0.6}
key="qr-code-login"
@@ -672,6 +673,10 @@
this.setMode('log-in');
};
+ onPressQRCodeSignIn = () => {
+ this.props.navigation.navigate(QRCodeSignInNavigatorRouteName);
+ };
+
onPressRegister = () => {
this.keyboardHeightValue.setValue(-1);
this.setMode('register');
diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -44,6 +44,7 @@
InviteLinkNavigatorRouteName,
CommunityCreationRouteName,
RolesNavigatorRouteName,
+ QRCodeSignInNavigatorRouteName,
} from './route-names.js';
import LoggedOutModal from '../account/logged-out-modal.react.js';
import RegistrationNavigator from '../account/registration/registration-navigator.react.js';
@@ -59,6 +60,7 @@
import CommunityCreationNavigator from '../community-creation/community-creation-navigator.react.js';
import InviteLinksNavigator from '../invite-links/invite-links-navigator.react.js';
import CustomServerModal from '../profile/custom-server-modal.react.js';
+import QRCodeSignInNavigator from '../qr-code/qr-code-sign-in-navigator.react.js';
import RolesNavigator from '../roles/roles-navigator.react.js';
enableScreens();
@@ -205,6 +207,11 @@
component={RegistrationNavigator}
options={disableGesturesScreenOptions}
/>
+ <Root.Screen
+ name={QRCodeSignInNavigatorRouteName}
+ component={QRCodeSignInNavigator}
+ options={disableGesturesScreenOptions}
+ />
<Root.Screen
name={CommunityCreationRouteName}
component={CommunityCreationNavigator}
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
@@ -130,6 +130,8 @@
export const RolesNavigatorRouteName = 'RolesNavigator';
export const CommunityRolesScreenRouteName = 'CommunityRolesScreen';
export const CreateRolesScreenRouteName = 'CreateRolesScreen';
+export const QRCodeSignInNavigatorRouteName = 'QRCodeSignInNavigator';
+export const QRCodeScreenRouteName = 'QRCodeScreen';
export type RootParamList = {
+LoggedOutModal: void,
@@ -149,6 +151,7 @@
+InviteLinkModal: InviteLinkModalParams,
+InviteLinkNavigator: void,
+RolesNavigator: void,
+ +QRCodeSignInNavigator: void,
};
export type MessageTooltipRouteNames =
@@ -252,6 +255,10 @@
+CreateRolesScreen: CreateRolesScreenParams,
};
+export type QRCodeSignInParamList = {
+ +QRCodeScreen: void,
+};
+
export type ScreenParamList = {
...RootParamList,
...OverlayParamList,
@@ -264,12 +271,17 @@
...InviteLinkParamList,
...CommunityCreationParamList,
...RolesParamList,
+ ...QRCodeSignInParamList,
};
export type NavigationRoute<RouteName: string = $Keys<ScreenParamList>> =
RouteProp<ScreenParamList, RouteName>;
-export const accountModals = [LoggedOutModalRouteName, RegistrationRouteName];
+export const accountModals = [
+ LoggedOutModalRouteName,
+ RegistrationRouteName,
+ QRCodeSignInNavigatorRouteName,
+];
export const scrollBlockingModals = [
ImageModalRouteName,
diff --git a/native/qr-code/qr-code-screen.react.js b/native/qr-code/qr-code-screen.react.js
new file mode 100644
--- /dev/null
+++ b/native/qr-code/qr-code-screen.react.js
@@ -0,0 +1,86 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+import type { QRCodeSignInNavigationProp } from './qr-code-sign-in-navigator.react.js';
+import type { NavigationRoute } from '../navigation/route-names.js';
+import { useStyles } from '../themes/colors.js';
+
+type QRCodeScreenProps = {
+ +navigation: QRCodeSignInNavigationProp<'QRCodeScreen'>,
+ +route: NavigationRoute<'QRCodeScreen'>,
+};
+
+// eslint-disable-next-line no-unused-vars
+function QRCodeScreen(props: QRCodeScreenProps): React.Node {
+ const styles = useStyles(unboundStyles);
+ return (
+ <View style={styles.container}>
+ <Text style={styles.heading}>Log in to Comm</Text>
+ <Text style={styles.headingSubtext}>
+ Open the Comm app on your phone and scan the QR code below
+ </Text>
+ <QRCode value="https://www.google.com" size={200} />
+ <View style={styles.instructionsBox}>
+ <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Go to </Text>
+ <Text style={styles.instructionsBold}>Profile</Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Select </Text>
+ <Text style={styles.instructionsBold}>Linked devices </Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Click </Text>
+ <Text style={styles.instructionsBold}>Add </Text>
+ <Text>on the top right</Text>
+ </Text>
+ </View>
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ marginTop: 125,
+ },
+ heading: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 12,
+ },
+ headingSubtext: {
+ fontSize: 12,
+ color: 'panelForegroundLabel',
+ paddingBottom: 30,
+ },
+ instructionsBox: {
+ alignItems: 'center',
+ width: 300,
+ marginTop: 40,
+ padding: 15,
+ borderColor: 'panelForegroundLabel',
+ borderWidth: 2,
+ borderRadius: 8,
+ },
+ instructionsTitle: {
+ fontSize: 12,
+ color: 'panelForegroundLabel',
+ paddingBottom: 15,
+ },
+ instructionsStep: {
+ fontSize: 12,
+ padding: 1,
+ color: 'panelForegroundLabel',
+ },
+ instructionsBold: {
+ fontWeight: 'bold',
+ },
+};
+
+export default QRCodeScreen;
diff --git a/native/qr-code/qr-code-sign-in-navigator.react.js b/native/qr-code/qr-code-sign-in-navigator.react.js
new file mode 100644
--- /dev/null
+++ b/native/qr-code/qr-code-sign-in-navigator.react.js
@@ -0,0 +1,77 @@
+// @flow
+
+import {
+ createStackNavigator,
+ type StackNavigationProp,
+ type StackNavigationHelpers,
+} from '@react-navigation/stack';
+import * as React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import QRCodeScreen from './qr-code-screen.react.js';
+import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
+import {
+ type ScreenParamList,
+ type QRCodeSignInParamList,
+ QRCodeScreenRouteName,
+} from '../navigation/route-names.js';
+import { useStyles, useColors } from '../themes/colors.js';
+
+const safeAreaEdges = ['bottom'];
+
+export type QRCodeSignInNavigationProp<
+ RouteName: $Keys<QRCodeSignInParamList>,
+> = StackNavigationProp<ScreenParamList, RouteName>;
+
+const QRCodeSignInStack = createStackNavigator<
+ ScreenParamList,
+ QRCodeSignInParamList,
+ StackNavigationHelpers<ScreenParamList>,
+>();
+
+type QRCodeSignInNavigatorProps = {
+ +navigation: RootNavigationProp<'QRCodeSignInNavigator'>,
+ ...
+};
+
+// eslint-disable-next-line no-unused-vars
+function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node {
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const screenOptions = React.useMemo(
+ () => ({
+ headerTransparent: true,
+ headerBackTitleVisible: false,
+ headerTitle: '',
+ headerTintColor: colors.panelForegroundLabel,
+ headerLeftContainerStyle: {
+ paddingLeft: 12,
+ },
+ }),
+ [colors.panelForegroundLabel],
+ );
+
+ return (
+ <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
+ <QRCodeSignInStack.Navigator screenOptions={screenOptions}>
+ <QRCodeSignInStack.Screen
+ name={QRCodeScreenRouteName}
+ component={QRCodeScreen}
+ />
+ </QRCodeSignInStack.Navigator>
+ </SafeAreaView>
+ );
+}
+
+const unboundStyles = {
+ safeArea: {
+ flex: 1,
+ backgroundColor: 'modalBackground',
+ },
+ headerLeftStyle: {
+ paddingLeft: 12,
+ },
+};
+
+export default QRCodeSignInNavigator;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 7:45 AM (21 h, 8 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2534297
Default Alt Text
D8912.id30281.diff (8 KB)

Event Timeline