Fakultas Ilmu Komputer UI

Commit 8a2ec5c7 authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Manual Registration UI Layout

parent f7e9cff5
......@@ -5,7 +5,13 @@ import { styles } from './styles';
import { Props } from './types';
import { typographyStyles } from 'styles';
const BigButton: FC<Props> = ({ title, onPress, disabled }) => (
const BigButton: FC<Props> = ({
title,
onPress,
disabled,
loading,
testID,
}) => (
<Button
titleStyle={[typographyStyles.overlineBig, styles.titleStyle]}
disabledTitleStyle={styles.disabledStyle}
......@@ -13,6 +19,8 @@ const BigButton: FC<Props> = ({ title, onPress, disabled }) => (
buttonStyle={styles.containerStyle}
onPress={onPress}
title={title}
loading={loading}
testID={testID}
/>
);
......
export interface Props {
title: string;
onPress: () => void;
loading?: boolean;
disabled?: true;
testID?: string;
}
......@@ -5,6 +5,7 @@ import {
ComingSoonPage,
DietelaQuizResult,
InitialPage,
ManualRegistrationPage,
ProgramDetail,
} from 'scenes';
import { FC } from 'react';
......@@ -35,7 +36,6 @@ export const navigation: NavRoute[] = [
component: ChoosePlan,
header: 'Choose Plan',
},
// COMING SOON
{
name: ROUTES.cart,
component: ComingSoonPage,
......@@ -51,4 +51,9 @@ export const navigation: NavRoute[] = [
component: ComingSoonPage,
header: 'Nutrisionis',
},
{
name: ROUTES.registration,
component: ManualRegistrationPage,
header: 'Registrasi',
},
];
......@@ -9,3 +9,5 @@ export const cart = 'cart';
export const choosePlan = `${cart}/choose-plan`;
export const programDetail = 'dietela-program';
export const nutritionistDetail = 'nutritionist';
export const registration = 'registration';
export const validRegistrationValues: { [_: string]: any } = {
name: 'Doan Didinding',
email: 'doan@dietela.com',
password1: 'g8ake1afig',
password2: 'g8ake1afig',
};
import React from 'react';
import { render, fireEvent } from 'utils/testing';
import * as ROUTES from 'constants/routes';
import ManualRegistrationPage from '.';
import { textField } from './schema';
import { validRegistrationValues } from 'mocks/auth';
describe('ManualRegistrationPage', () => {
it('renders correctly', () => {
render(<ManualRegistrationPage />, ROUTES.registration);
});
it('success when all field is valid', async () => {
const { getByPlaceholderText, getByTestId } = render(
<ManualRegistrationPage />,
ROUTES.registration,
);
textField.map(({ name, placeholder }) => {
const formField = getByPlaceholderText(placeholder as string);
fireEvent.changeText(formField, validRegistrationValues[name]);
});
const submitButton = getByTestId('submitButton');
fireEvent.press(submitButton);
});
});
import React, { FC } from 'react';
import { useForm } from 'hooks';
import { fieldValidation, initialValues, textField } from './schema';
import { generateValidationSchema } from 'utils/form';
import { TextField } from 'components/form';
import { ScrollView } from 'react-native-gesture-handler';
import { layoutStyles } from 'styles';
import { BigButton } from 'components/core';
const isPasswordField = (name: string) =>
name === 'password1' || name === 'password2';
const ManualRegistrationPage: FC = () => {
const { getTextInputProps, handleSubmit, isSubmitting } = useForm({
initialValues,
validationSchema: generateValidationSchema(fieldValidation),
onSubmit: async (values) => {
console.log(values);
},
});
return (
<ScrollView contentContainerStyle={layoutStyles}>
{textField.map((fieldProps, i) => {
return (
<TextField
key={`field${i}`}
label={fieldProps.label}
required={fieldProps.required}
placeholder={fieldProps.placeholder}
{...getTextInputProps(fieldProps.name)}
secureTextEntry={isPasswordField(fieldProps.name)}
/>
);
})}
<BigButton
title="daftarkan akun"
onPress={handleSubmit}
loading={isSubmitting}
testID="submitButton"
/>
</ScrollView>
);
};
export default ManualRegistrationPage;
import { TextFieldSchema } from 'types/form';
import { FieldType, FieldValidation } from 'utils/form';
export const textField: TextFieldSchema[] = [
{
label: 'Nama',
placeholder: 'Masukkan nama Anda',
required: true,
name: 'name',
},
{
label: 'Email address',
placeholder: 'Masukkan email Anda',
required: true,
name: 'email',
},
{
label: 'Password',
placeholder: 'Masukkan password Anda',
required: true,
name: 'password1',
},
{
label: 'Konfirmasi password',
placeholder: 'Konfirmasi password Anda',
required: true,
name: 'password2',
},
];
export const initialValues = {
name: '',
email: '',
password1: '',
password2: '',
};
export const fieldValidation: FieldValidation[] = [
{
name: 'name',
required: true,
label: 'Nama',
type: FieldType.TEXT,
},
{
name: 'email',
required: true,
label: 'Email address',
type: FieldType.EMAIL,
},
{
name: 'password1',
required: true,
label: 'Password',
type: FieldType.PASSWORD,
},
{
name: 'password2',
required: true,
label: 'Konfirmasi password',
type: FieldType.CONFIRM_PASSWORD,
matches: 'password1',
},
];
export { default as InitialPage } from './common/InitialPage';
export { default as ComingSoonPage } from './common/ComingSoonPage';
export { default as ManualRegistrationPage } from './common/ManualRegistrationPage';
export { default as AllAccessQuestionnaire } from './questionnaire/AllAccessQuestionnaire';
export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
export { default as ChoosePlan } from './cart/ChoosePlan';
export { default as ProgramDetail } from './cart/ProgramDetail';
export { default as ComingSoonPage } from './common/ComingSoonPage';
export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
export { default as InitialPage } from './common/InitialPage';
......@@ -5,6 +5,8 @@ export enum FieldType {
EMAIL = 'email',
RADIO_BUTTON = 'radiobutton',
CHECKBOX = 'checkbox',
PASSWORD = 'password',
CONFIRM_PASSWORD = 'confirmpassword',
}
export interface FieldValidation {
......@@ -12,6 +14,7 @@ export interface FieldValidation {
required?: boolean;
label?: string;
type: FieldType;
matches?: string;
}
export const generateValidationSchema = (fields: FieldValidation[]) => {
......@@ -42,6 +45,17 @@ export const generateValidationSchema = (fields: FieldValidation[]) => {
'Pilih semua yang berlaku',
);
break;
case FieldType.PASSWORD:
validationSchema[field.name] = Yup.string()
.required('Password harus diisi')
.min(8, 'Minimal 8 karakter');
break;
case FieldType.CONFIRM_PASSWORD:
validationSchema[field.name] = Yup.string().oneOf(
[Yup.ref(field.matches!), null],
'Konfirmasi password tidak sama',
);
break;
default:
break;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment