@eohjsc/react-native-smart-city 0.7.27 → 0.7.31

package/src/screens/CreatePassword/__test__/index.test.js

@@ -0,0 +1,133 @@
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+
+import { useNavigation } from '@react-navigation/native';
+import { API } from '../../../configs';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import _TextInputPassword from '../../../commons/Form/TextInputPassword';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import api from '../../../utils/Apis/axios';
+import t from '../../../hooks/Common/useTranslations';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import CreatePassword from '..';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <CreatePassword />
+  </SCProvider>
+);
+
+describe('test CreatePassword', () => {
+  let tree;
+  const { navigate } = useNavigation();
+  const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
+
+  beforeEach(() => {
+    spyToastSuccess.mockClear();
+  });
+
+  const onChangePasswords = async (component, text1, text2) => {
+    await act(async () => {
+      await component[0].props.onChange(text1);
+    });
+    await act(async () => {
+      await component[1].props.onChange(text2);
+    });
+  };
+
+  const buttonDone = (instance) => {
+    return instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.CREATE_PASSWORD_BUTTON_DONE &&
+        el.type === TouchableOpacity
+    );
+  };
+
+  it('validate and create password success', async () => {
+    mock.onPatch(API.AUTH.CREATE_PASSWORD).reply(200);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const button = buttonDone(instance);
+    const texts = instance.findAllByType(_TextInputPassword);
+
+    await onChangePasswords(texts, '', '');
+    expect(texts[0].props.errorText).toEqual(t('please_enter_new_password'));
+    expect(texts[1].props.errorText).toEqual(
+      t('please_enter_your_confirm_password')
+    );
+    expect(button.props.disabled).toBeTruthy();
+
+    await onChangePasswords(texts, '123', '123');
+    expect(texts[0].props.errorText).toEqual(t('password_must_be_strong'));
+    expect(texts[1].props.errorText).toEqual('');
+    expect(button.props.disabled).toBeTruthy();
+
+    await onChangePasswords(texts, 'Password1', 'Password2');
+    expect(texts[0].props.errorText).toEqual('');
+    expect(texts[1].props.errorText).toEqual(t('confirm_password_not_match'));
+    expect(button.props.disabled).toBeTruthy();
+
+    await act(async () => {
+      await texts[1].props.onChange('Password1');
+    });
+    expect(texts[0].props.errorText).toEqual('');
+    expect(texts[1].props.errorText).toEqual('');
+    expect(button.props.disabled).toBeFalsy();
+
+    await act(async () => {
+      await texts[0].props.onChange('Password2');
+    });
+    expect(texts[0].props.errorText).toEqual('');
+    expect(texts[1].props.errorText).toEqual(t('confirm_password_not_match'));
+    expect(button.props.disabled).toBeTruthy();
+
+    await act(async () => {
+      await texts[0].props.onChange('Password1');
+    });
+    expect(texts[0].props.errorText).toEqual('');
+    expect(texts[1].props.errorText).toEqual('');
+    expect(button.props.disabled).toBeFalsy();
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    expect(spyToastSuccess).toHaveBeenCalledWith(
+      t('create_password_successfully')
+    );
+    expect(navigate).toHaveBeenCalledWith(Routes.Dashboard, {
+      needLogout: true,
+    });
+  });
+
+  it('create password fail', async () => {
+    mock.onPatch(API.AUTH.CREATE_PASSWORD).reply(400);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const button = buttonDone(instance);
+    const texts = instance.findAllByType(_TextInputPassword);
+
+    await onChangePasswords(texts, 'Password1', 'Password1');
+    expect(texts[0].props.errorText).toEqual('');
+    expect(texts[1].props.errorText).toEqual('');
+    expect(button.props.disabled).toBeFalsy();
+
+    await act(async () => {
+      await button.props.onPress();
+    });
+
+    expect(spyToastSuccess).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});

package/src/screens/CreatePassword/index.js

@@ -0,0 +1,134 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { Colors, API } from '../../configs';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { HeaderCustom } from '../../commons/Header';
+import _TextInputPassword from '../../commons/Form/TextInputPassword';
+import { Section } from '../../commons/Section';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { axiosPatch } from '../../utils/Apis/axios';
+import { isValidPassword } from '../../utils/Validation';
+import { ToastBottomHelper } from '../../utils/Utils';
+import Routes from '../../utils/Route';
+
+import styles from './styles';
+
+const CreatePassword = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [newPasswordError, setNewPasswordError] = useState('');
+  const [confirmPasswordError, setConfirmPasswordError] = useState('');
+
+  const onChangeNewPassword = useCallback(
+    (value) => {
+      setNewPassword(value);
+      setNewPasswordError(
+        !value
+          ? t('please_enter_new_password')
+          : !isValidPassword(value)
+          ? t('password_must_be_strong')
+          : ''
+      );
+      setConfirmPasswordError((prev) =>
+        confirmPassword && value !== confirmPassword
+          ? t('confirm_password_not_match')
+          : value === confirmPassword
+          ? ''
+          : prev
+      );
+    },
+    [confirmPassword, t]
+  );
+
+  const onChangeConfirmPassword = useCallback(
+    (value) => {
+      setConfirmPassword(value);
+      setConfirmPasswordError(
+        !value
+          ? t('please_enter_your_confirm_password')
+          : value !== newPassword
+          ? t('confirm_password_not_match')
+          : ''
+      );
+    },
+    [newPassword, t]
+  );
+
+  const canDone = useMemo(() => {
+    return (
+      newPassword &&
+      confirmPassword &&
+      !newPasswordError &&
+      !confirmPasswordError
+    );
+  }, [newPassword, confirmPassword, newPasswordError, confirmPasswordError]);
+
+  const onCreatePassword = useCallback(async () => {
+    const { success } = await axiosPatch(API.AUTH.CREATE_PASSWORD, {
+      new_password: newPassword,
+      confirm_password: confirmPassword,
+    });
+
+    if (success) {
+      ToastBottomHelper.success(t('create_password_successfully'));
+      navigate(Routes.Dashboard, { needLogout: true });
+    }
+  }, [newPassword, confirmPassword, navigate, t]);
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom
+        title={t('password')}
+        isShowSeparator
+        titleStyle={{ color: Colors.Gray9 }}
+      />
+      <Text style={styles.boardTitle} color={Colors.Black} bold>
+        {t('create_password')}
+      </Text>
+      <Section type={'border'}>
+        <_TextInputPassword
+          secureTextEntry
+          label={t('new_password')}
+          labelStyle={styles.labelStyle}
+          wrapStyle={styles.wrapStyle}
+          onChange={onChangeNewPassword}
+          value={newPassword}
+          textInputStyle={styles.passwordInput}
+          selectionColor={Colors.Primary}
+          errorText={newPasswordError}
+        />
+        <_TextInputPassword
+          secureTextEntry
+          label={t('confirm_password')}
+          labelStyle={styles.labelStyle}
+          wrapStyle={styles.wrapStyle}
+          onChange={onChangeConfirmPassword}
+          value={confirmPassword}
+          textInputStyle={styles.passwordInput}
+          selectionColor={Colors.Primary}
+          errorText={confirmPasswordError}
+        />
+      </Section>
+      <TouchableOpacity
+        style={[styles.buttonDone, !canDone && styles.buttonDoneDisable]}
+        onPress={onCreatePassword}
+        accessibilityLabel={AccessibilityLabel.CREATE_PASSWORD_BUTTON_DONE}
+        disabled={!canDone}
+      >
+        <Text
+          type="H4"
+          style={canDone ? styles.textDone : styles.textDoneDisable}
+        >
+          {t('done')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CreatePassword;

package/src/screens/CreatePassword/styles.js

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+  },
+  boardTitle: {
+    marginBottom: 8,
+    marginTop: 12,
+    marginLeft: 16,
+  },
+  labelStyle: {
+    color: Colors.Primary,
+  },
+  wrapStyle: {
+    marginTop: 12,
+    width: '100%',
+  },
+  passwordInput: {
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  buttonDone: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderRadius: 30,
+    backgroundColor: Colors.Primary,
+    width: '90%',
+    alignSelf: 'center',
+  },
+  buttonDoneDisable: {
+    backgroundColor: Colors.White,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+  },
+  textDone: {
+    color: Colors.White,
+  },
+  textDoneDisable: {
+    color: Colors.Gray6,
+  },
+});