Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix screen position for server / login / forgot password & mfa #8340

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+48 −100
Open

fix screen position for server / login / forgot password & mfa #8340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d011f57
fix screen position for server / login / forgot password & mfa
enahum Nov 13, 2024
7f368e0
refactor to use a hook
enahum Nov 13, 2024
b9d784b
fix scroll to offset not to height
enahum Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/hooks/device.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {DeviceContext} from '@context/device';

import type {KeyboardTrackingViewRef, KeyboardWillShowEventData} from '@mattermost/keyboard-tracker';
import type {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

const utilsEmitter = new NativeEventEmitter(RNUtils);

Expand Down Expand Up @@ -147,3 +148,16 @@ export function useKeyboardOverlap(viewRef: RefObject<View>, containerHeight: nu

return overlap;
}

export function useAvoidKeyboard(ref: RefObject<KeyboardAwareScrollView>, dimisher = 3) {
const height = useKeyboardHeight();

useEffect(() => {
let offsetY = height / dimisher;
if (offsetY < 80) {
offsetY = 0;
}

ref.current?.scrollToPosition(0, offsetY);
}, [height, dimisher, ref]);
}
26 changes: 6 additions & 20 deletions app/screens/forgot_password/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import FloatingTextInput from '@components/floating_text_input_label';
import FormattedText from '@components/formatted_text';
import {Screens} from '@constants';
import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
import {useIsTablet} from '@hooks/device';
import {useAvoidKeyboard} from '@hooks/device';
import Background from '@screens/background';
import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
import {isEmail} from '@utils/helpers';
Expand Down Expand Up @@ -93,33 +93,20 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
const dimensions = useWindowDimensions();
const translateX = useSharedValue(dimensions.width);
const isTablet = useIsTablet();
const [email, setEmail] = useState<string>('');
const [error, setError] = useState<string>('');
const [isPasswordLinkSent, setIsPasswordLinkSent] = useState<boolean>(false);
const {formatMessage} = useIntl();
const keyboardAwareRef = useRef<KeyboardAwareScrollView>(null);
const styles = getStyleSheet(theme);

useAvoidKeyboard(keyboardAwareRef);

const changeEmail = useCallback((emailAddress: string) => {
setEmail(emailAddress);
setError('');
}, []);

const onFocus = useCallback(() => {
if (Platform.OS === 'ios') {
let offsetY = 150;
if (isTablet) {
const {width, height} = dimensions;
const isLandscape = width > height;
offsetY = (isLandscape ? 230 : 150);
}
requestAnimationFrame(() => {
keyboardAwareRef.current?.scrollToPosition(0, offsetY);
});
}
}, [dimensions]);

const onReturn = useCallback(() => {
Navigation.popTo(Screens.LOGIN);
}, []);
Expand All @@ -146,7 +133,7 @@ const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
id: 'password_send.generic_error',
defaultMessage: 'We were unable to send you a reset password link. Please contact your System Admin for assistance.',
}));
}, [email]);
}, [email, formatMessage, serverUrl]);

const getCenterContent = () => {
if (isPasswordLinkSent) {
Expand Down Expand Up @@ -188,7 +175,7 @@ const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
<KeyboardAwareScrollView
bounces={false}
contentContainerStyle={styles.innerContainer}
enableAutomaticScroll={Platform.OS === 'android'}
enableAutomaticScroll={false}
enableOnAndroid={false}
enableResetScrollToCoords={true}
extraScrollHeight={0}
Expand Down Expand Up @@ -224,7 +211,6 @@ const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
keyboardType='email-address'
label={formatMessage({id: 'login.email', defaultMessage: 'Email'})}
onChangeText={changeEmail}
onFocus={onFocus}
onSubmitEditing={submitResetPassword}
returnKeyType='next'
spellCheck={false}
Expand Down Expand Up @@ -270,7 +256,7 @@ const ForgotPassword = ({componentId, serverUrl, theme}: Props) => {
const unsubscribe = Navigation.events().registerComponentListener(listener, componentId);

return () => unsubscribe.remove();
}, [dimensions]);
}, [componentId, dimensions, translateX]);

useEffect(() => {
translateX.value = 0;
Expand Down
2 changes: 1 addition & 1 deletion app/screens/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,6 @@ export function registerScreens() {
const serverScreen = require('@screens/server').default;
const onboardingScreen = require('@screens/onboarding').default;
Navigation.registerComponent(Screens.ONBOARDING, () => withGestures(withIntl(withManagedConfig(onboardingScreen)), undefined));
Navigation.registerComponent(Screens.SERVER, () => withGestures(withIntl(withManagedConfig(serverScreen)), undefined));
Navigation.registerComponent(Screens.SERVER, () => withSafeAreaInsets(withGestures(withIntl(withManagedConfig(serverScreen)), undefined)));
Navigation.registerComponent(Screens.HOME, () => withGestures(withSafeAreaInsets(withServerDatabase(withManagedConfig(homeScreen))), undefined));
}
11 changes: 8 additions & 3 deletions app/screens/login/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import {useManagedConfig} from '@mattermost/react-native-emm';
import {Button} from '@rneui/base';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState, type RefObject} from 'react';
import {useIntl} from 'react-intl';
import {Keyboard, TextInput, TouchableOpacity, View} from 'react-native';

Expand All @@ -13,6 +13,7 @@ import FloatingTextInput from '@components/floating_text_input_label';
import FormattedText from '@components/formatted_text';
import Loading from '@components/loading';
import {FORGOT_PASSWORD, MFA} from '@constants/screens';
import {useAvoidKeyboard} from '@hooks/device';
import {t} from '@i18n';
import {goToScreen, loginAnimationOptions, resetToHome} from '@screens/navigation';
import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
Expand All @@ -22,10 +23,12 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {tryOpenURL} from '@utils/url';

import type {LaunchProps} from '@typings/launch';
import type {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

interface LoginProps extends LaunchProps {
config: Partial<ClientConfig>;
license: Partial<ClientLicense>;
keyboardAwareRef: RefObject<KeyboardAwareScrollView>;
serverDisplayName: string;
theme: Theme;
}
Expand Down Expand Up @@ -77,7 +80,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
}));

const LoginForm = ({config, extra, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
const LoginForm = ({config, extra, keyboardAwareRef, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
const styles = getStyleSheet(theme);
const loginRef = useRef<TextInput>(null);
const passwordRef = useRef<TextInput>(null);
Expand All @@ -93,6 +96,8 @@ const LoginForm = ({config, extra, serverDisplayName, launchError, launchType, l
const usernameEnabled = config.EnableSignInWithUsername === 'true';
const ldapEnabled = license.IsLicensed === 'true' && config.EnableLdap === 'true' && license.LDAP === 'true';

useAvoidKeyboard(keyboardAwareRef);

const preSignIn = preventDoubleTap(async () => {
setIsLoading(true);

Expand Down Expand Up @@ -222,7 +227,7 @@ const LoginForm = ({config, extra, serverDisplayName, launchError, launchType, l
};

goToScreen(FORGOT_PASSWORD, '', passProps, loginAnimationOptions());
}, [theme]);
}, [config.ForgotPasswordLink, serverUrl, theme]);

const togglePasswordVisiblity = useCallback(() => {
setIsPasswordVisible((prevState) => !prevState);
Expand Down
13 changes: 7 additions & 6 deletions app/screens/login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const LoginOptions = ({
defaultMessage="You can't log in to your account yet. At least one login option must be configured. Contact your System Admin for assistance."
/>
);
}, [hasLoginForm, numberSSOs, theme]);
}, [hasLoginForm, numberSSOs, styles.subheader]);

const goToSso = preventDoubleTap((ssoType: string) => {
goToScreen(Screens.SSO, '', {config, extra, launchError, launchType, license, theme, ssoType, serverDisplayName, serverUrl}, loginAnimationOptions());
Expand Down Expand Up @@ -160,7 +160,7 @@ const LoginOptions = ({
});

return () => navigationEvents.remove();
}, []);
}, [closeButtonId, componentId, serverUrl]);

useEffect(() => {
translateX.value = 0;
Expand All @@ -178,7 +178,7 @@ const LoginOptions = ({
const unsubscribe = Navigation.events().registerComponentListener(listener, Screens.LOGIN);

return () => unsubscribe.remove();
}, [dimensions]);
}, [dimensions, translateX]);

useNavButtonPressed(closeButtonId || '', componentId, dismiss, []);
useAndroidHardwareBackHandler(componentId, pop);
Expand Down Expand Up @@ -219,11 +219,11 @@ const LoginOptions = ({
<KeyboardAwareScrollView
bounces={true}
contentContainerStyle={[styles.innerContainer, additionalContainerStyle]}
enableAutomaticScroll={true}
enableAutomaticScroll={false}
enableOnAndroid={false}
enableResetScrollToCoords={true}
extraScrollHeight={0}
keyboardDismissMode='interactive'
extraScrollHeight={20}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps='handled'
ref={keyboardAwareRef}
scrollToOverflowEnabled={true}
Expand All @@ -239,6 +239,7 @@ const LoginOptions = ({
<Form
config={config}
extra={extra}
keyboardAwareRef={keyboardAwareRef}
license={license}
launchError={launchError}
launchType={launchType}
Expand Down
24 changes: 5 additions & 19 deletions app/screens/mfa/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import FloatingTextInput from '@components/floating_text_input_label';
import FormattedText from '@components/formatted_text';
import Loading from '@components/loading';
import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
import {useIsTablet} from '@hooks/device';
import {useAvoidKeyboard} from '@hooks/device';
import {t} from '@i18n';
import Background from '@screens/background';
import {popTopScreen} from '@screens/navigation';
Expand Down Expand Up @@ -99,7 +99,6 @@ const AnimatedSafeArea = Animated.createAnimatedComponent(SafeAreaView);
const MFA = ({componentId, config, goToHome, license, loginId, password, serverDisplayName, serverUrl, theme}: MFAProps) => {
const dimensions = useWindowDimensions();
const translateX = useSharedValue(dimensions.width);
const isTablet = useIsTablet();
const keyboardAwareRef = useRef<KeyboardAwareScrollView>(null);
const intl = useIntl();
const [token, setToken] = useState<string>('');
Expand All @@ -109,20 +108,6 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD

const styles = getStyleSheet(theme);

const onFocus = useCallback(() => {
if (Platform.OS === 'ios') {
let offsetY = 150;
if (isTablet) {
const {width, height} = dimensions;
const isLandscape = width > height;
offsetY = (isLandscape ? 270 : 150);
}
requestAnimationFrame(() => {
keyboardAwareRef.current?.scrollToPosition(0, offsetY);
});
}
}, [dimensions]);

const handleInput = useCallback((userToken: string) => {
setToken(userToken);
setError('');
Expand Down Expand Up @@ -156,6 +141,8 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD
};
}, []);

useAvoidKeyboard(keyboardAwareRef, 2);

useEffect(() => {
const listener = {
componentDidAppear: () => {
Expand All @@ -168,7 +155,7 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD
const unsubscribe = Navigation.events().registerComponentListener(listener, componentId);

return () => unsubscribe.remove();
}, [dimensions]);
}, [componentId, dimensions, translateX]);

useEffect(() => {
translateX.value = 0;
Expand All @@ -190,7 +177,7 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD
<KeyboardAwareScrollView
bounces={false}
contentContainerStyle={styles.innerContainer}
enableAutomaticScroll={Platform.OS === 'android'}
enableAutomaticScroll={false}
enableOnAndroid={false}
enableResetScrollToCoords={true}
extraScrollHeight={0}
Expand Down Expand Up @@ -226,7 +213,6 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD
keyboardType='numeric'
label={formatMessage({id: 'login_mfa.token', defaultMessage: 'Enter MFA Token'})}
onChangeText={handleInput}
onFocus={onFocus}
onSubmitEditing={submit}
returnKeyType='go'
spellCheck={false}
Expand Down
Loading
Loading