Merge pull request #1856 from ever-co/main

Main

.cspell.json

@@ -5,6 +5,7 @@
 	"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
 	"words": [
 		"appdev",
+		"signin",
 		"APPSTORE",
 		"barcodes",
 		"binutils",

apps/mobile/app/components/CodeField.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+import React, { FC, useEffect, useState } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { colors, typography, useAppTheme } from '../theme';
+import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
+
+interface ICodeField {
+	onChange: (e: any) => void;
+	editable: boolean;
+	length?: number;
+	defaultValue?: string;
+}
+
+export const CodeInputField: FC<ICodeField> = (props) => {
+	const { onChange, editable, length = 6 } = props;
+	const { colors } = useAppTheme();
+
+	const [value, setValue] = useState<string>('');
+
+	const [codeFieldProps, getCellOnLayoutHandler] = useClearByFocusCell({
+		value,
+		setValue
+	});
+
+	useEffect(() => {
+		onChange(value);
+	}, [value]);
+
+	const ref = useBlurOnFulfill({ value, cellCount: length });
+
+	return (
+		<CodeField
+			editable={editable}
+			ref={ref}
+			{...codeFieldProps}
+			// Use `caretHidden={false}` when users can't paste a text value, because context menu doesn't appear
+			value={value}
+			onChangeText={setValue}
+			cellCount={length}
+			rootStyle={styles.container}
+			keyboardType="default"
+			textContentType="oneTimeCode"
+			renderCell={({ index, symbol, isFocused }) => (
+				<View key={index} style={styles.inputContainer}>
+					<Text
+						style={[
+							styles.inputStyle,
+							{
+								borderColor: isFocused ? colors.primary : colors.border,
+								backgroundColor: colors.background,
+								color: colors.primary,
+								textAlignVertical: 'center',
+								flexDirection: 'column',
+								justifyContent: 'center',
+								alignItems: 'center',
+								lineHeight: 52
+							}
+						]}
+						onLayout={getCellOnLayoutHandler(index)}
+					>
+						{symbol || (isFocused ? <Cursor /> : null)}
+					</Text>
+				</View>
+			)}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		width: '100%'
+	},
+	inputContainer: {
+		backgroundColor: '#fff',
+		borderRadius: 10,
+		marginHorizontal: 4,
+		width: '14.6%'
+	},
+	inputStyle: {
+		backgroundColor: '#fff',
+		borderColor: 'rgba(0, 0, 0, 0.1)',
+		borderRadius: 10,
+		borderWidth: 1,
+		color: colors.primary,
+		fontFamily: typography.primary.semiBold,
+		fontSize: 16,
+		height: 53,
+		textAlign: 'center',
+		width: '100%'
+	}
+});

apps/mobile/app/components/CodeInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-native/no-color-literals */
 import React, { FC, useRef, useState } from 'react';
-import { TextInput, View, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native';
+import { TextInput, View, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData, Platform } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { colors, typography, useAppTheme } from '../theme';
 
@@ -38,7 +38,7 @@ export const CodeInput: FC<IInput> = (props) => {
 					onChange(updatedCode.join(''));
 				}
 				// Current input has value
-				if (inviteCode[active]) {
+				else if (inviteCode[active] && nativeEvent.key !== inviteCode[active]) {
 					const updatedCode = [...inviteCode];
 					updatedCode[active + 1] = nativeEvent.key.toUpperCase();
 					setInviteCode(updatedCode);
@@ -87,6 +87,8 @@ export const CodeInput: FC<IInput> = (props) => {
 				inputsRef.current[i].setNativeProps({ text: updatedCode[i] });
 			}
 		}
+
+		Platform.OS === 'android' && (await Clipboard.setStringAsync(''));
 	};
 
 	for (let i = 0; i < length; i++) {

apps/mobile/app/components/HomeHeader.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable react-native/no-inline-styles */
 import React, { FC } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 import HeaderTimer from './HeaderTimer';
 import { useAppTheme } from '../theme';
 import { useOrganizationTeam } from '../services/hooks/useOrganization';
 import { SvgXml } from 'react-native-svg';
-import { everTeamsLogoDarkTheme, everTeamsLogoLightTheme } from './svgs/icons';
+import {
+	everTeamsLogoDarkTheme,
+	everTeamsLogoDarkThemeAndroid,
+	everTeamsLogoLightTheme,
+	everTeamsLogoLightThemeAndroid
+} from './svgs/icons';
 
 interface Props {
 	showTimer: boolean;
@@ -19,7 +24,13 @@ const HomeHeader: FC<Props> = ({ props, showTimer }) => {
 	return (
 		<View style={[styles.mainContainer, { backgroundColor: dark ? colors.background2 : colors.background }]}>
 			<View style={[styles.secondContainer, { backgroundColor: dark ? colors.background2 : colors.background }]}>
-				{dark ? <SvgXml xml={everTeamsLogoDarkTheme} /> : <SvgXml xml={everTeamsLogoLightTheme} />}
+				{dark ? (
+					<SvgXml xml={Platform.OS === 'android' ? everTeamsLogoDarkThemeAndroid : everTeamsLogoDarkTheme} />
+				) : (
+					<SvgXml
+						xml={Platform.OS === 'android' ? everTeamsLogoLightThemeAndroid : everTeamsLogoLightTheme}
+					/>
+				)}
 				{showTimer && activeTeam && (
 					<View style={{ width: 126 }}>
 						<HeaderTimer />