client portal login api

frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx

@@ -26,7 +26,6 @@ export default function LoginForm() {
 
   const LoginSchema = Yup.object().shape({
     email: Yup.string().email('Email must be a valid email address').required('Email is required'),
-    password: Yup.string().required('Password is required'),
   });
 
   const methods = useForm<FormValuesProps>({
@@ -71,6 +70,7 @@ export default function LoginForm() {
         type="submit"
         variant="contained"
         loading={isSubmitting}
+        sx={{ marginTop: 2 }}
       >
         Login
       </LoadingButton>

frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx

@@ -0,0 +1,83 @@
+import * as Yup from 'yup';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from '../../../utils/axios';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+// @mui
+import { Stack, Alert, InputAdornment } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+// components
+import { FormProvider, RHFTextField } from '../../../components/hook-form';
+
+// ----------------------------------------------------------------------
+
+type FormValuesProps = {
+  phone: string;
+  afterSubmit?: string;
+};
+
+export default function LoginPhoneForm() {
+  const navigate = useNavigate();
+
+  const LoginSchema = Yup.object().shape({
+    phone: Yup.string().required('Phone is required'),
+  });
+
+  const defaultValues = {
+    phone: '',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(LoginSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    setError,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = methods;
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      await axios.post('/otp-request', { phone_or_email: 0 + data.phone });
+      // console.log(response);
+      // navigate('/dashboard');
+    } catch (error: any) {
+      reset();
+      setError('afterSubmit', { ...error, message: error.response.data.message });
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+        <Alert severity="info">Masukkan akun yang telah terdaftar</Alert>
+        {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
+
+        <RHFTextField
+          name="phone"
+          label="Phone Number"
+          type={'number'}
+          InputProps={{
+            startAdornment: <InputAdornment position="start">+62</InputAdornment>,
+          }}
+        />
+      </Stack>
+
+      <LoadingButton
+        fullWidth
+        size="large"
+        type="submit"
+        variant="contained"
+        loading={isSubmitting}
+        sx={{ marginTop: 2 }}
+      >
+        Login
+      </LoadingButton>
+    </FormProvider>
+  );
+}

frontend/client-portal/src/sections/auth/login/index.ts

@@ -1 +1,2 @@
-export { default as LoginForm } from './LoginForm';
+export { default as LoginEmailForm } from './LoginEmailForm';
+export { default as LoginPhoneForm } from './LoginPhoneForm';