Skip to content

Commit

Permalink
feat: add Login Page for Remote Frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
kris liu authored and kris-liu-smile committed Aug 23, 2022
1 parent a75a175 commit aacc0b7
Show file tree
Hide file tree
Showing 28 changed files with 1,273 additions and 72 deletions.
12 changes: 12 additions & 0 deletions apps/storefront/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import {
} from '@b3/hooks'
import styled from '@emotion/styled'

import {
Login,
ForgotPassword,
} from '@/pages'
import {
Layout,
RegisteredCloseButton,
Expand Down Expand Up @@ -148,7 +152,15 @@ export default function App() {
path="form"
element={<Form />}
/>
<Route
path="login"
element={<Login />}
/>
</Route>
<Route
path="/forgotpassword"
element={<ForgotPassword />}
/>
</Routes>
</Suspense>
) : null}
Expand Down
5 changes: 5 additions & 0 deletions apps/storefront/src/components/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,11 @@ export function Layout({
to: '/registeredbctob2b',
icon: VerifiedUserIcon,
},
{
label: 'Login',
to: '/login',
icon: VerifiedUserIcon,
},
].map(({
label, icon: Icon,
to,
Expand Down
81 changes: 49 additions & 32 deletions apps/storefront/src/components/form/B3TextField.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
TextField,
Box,
} from '@mui/material'
import {
Controller,
Expand Down Expand Up @@ -37,6 +38,8 @@ export const B3TextField = ({
fullWidth,
muiTextFieldProps,
disabled,
labelName,
size,
} = rest

const b3Lang = useB3Lang()
Expand All @@ -48,7 +51,7 @@ export const B3TextField = ({
defaultValue,
rules: {
required: required && b3Lang('intl.global.validate.required', {
label,
label: labelName || labelName,
}),
validate: validate && ((v: string) => validate(v, b3Lang)),
},
Expand All @@ -63,9 +66,10 @@ export const B3TextField = ({
rows,
disabled,
multiline: fieldType === 'multiline',
variant: variant || 'filled',
variant,
fullWidth: fullWidth || true,
required,
size,
}

const inputProps = {
Expand Down Expand Up @@ -101,36 +105,49 @@ export const B3TextField = ({
'password',
'multiline',
].includes(fieldType) && (
<Controller
{...fieldsProps}
render={({
field: {
...rest
},
}) => (
fieldType === 'number'
? (
<StyleNumberTextField
{...textField}
{...rest}
inputProps={muiAttributeProps}
error={!!errors[name]}
helperText={(errors as any)[name] ? (errors as any)[name].message : null}
onKeyDown={handleNumberInputKeyDown}
onWheel={handleNumberInputWheel}
/>
)
: (
<TextField
{...textField}
{...rest}
inputProps={muiAttributeProps}
error={!!errors[name]}
helperText={(errors as any)[name] ? (errors as any)[name].message : null}
/>
)
)}
/>
<>
{
labelName && (
<Box sx={{
mb: 1,
}}
>
{`${labelName} :`}
</Box>
)

}
<Controller
{...fieldsProps}
render={({
field: {
...rest
},
}) => (
fieldType === 'number'
? (
<StyleNumberTextField
{...textField}
{...rest}
inputProps={muiAttributeProps}
error={!!errors[name]}
helperText={(errors as any)[name] ? (errors as any)[name].message : null}
onKeyDown={handleNumberInputKeyDown}
onWheel={handleNumberInputWheel}
/>
)
: (
<TextField
{...textField}
{...rest}
inputProps={muiAttributeProps}
error={!!errors[name]}
helperText={(errors as any)[name] ? (errors as any)[name].message : null}
/>
)
)}
/>
</>
)
}
</>
Expand Down
4 changes: 2 additions & 2 deletions apps/storefront/src/components/spin/B3Sping.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ interface B3SpingProps {
isSpinning: Boolean | undefined,
children: ReactNode,
tip?: string,
size?: Number & undefined,
thickness?: Number & undefined,
size?: number,
thickness?: number & undefined,
isCloseLoading?: Boolean,
}

Expand Down
15 changes: 15 additions & 0 deletions apps/storefront/src/locales/en-US/users.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,19 @@ export default {

// register components
'intl.user.register.RegisteredSingleCheckBox.label': 'Email me special promotions and updates',

// login
'intl.user.login.loginTipInfo.resetPassword': 'You must reset your password before you may log in again. Please check your email at {email} to reset your password',
'intl.user.login.loginTipInfo.receivePassword': 'If the entered email address is associated with this store, you will receive a password reset email. If you don\'t receive this e-mail, please check your junk mail folder or contact us for further assistance.',
'intl.user.login.loginTipInfo.accountsuccess': 'You\'ve been logged out of your account successfully.',
'intl.user.login.loginTipInfo.accountincorrect': 'Your email address or password is incorrect. Please try again. If you\'ve forgotten your sign in details, just click the \'Forgot your password?\' link below.',

'intl.user.login.loginText.forgotPasswordText': 'Forgot your password ?',
'intl.user.login.loginText.emailAddress': 'Email Address',
'intl.user.login.loginText.password': 'Password',

'intl.user.forgot.forgotText.resetPassword': 'Reset Password',
'intl.user.forgot.forgotText.requestEmail': 'Fill in your email below to request a new password. An email will be sent to the address below containing a link to verify your email address.',
'intl.user.forgot.forgotText.resetPasswordBtn': 'Reset Password',

}
7 changes: 7 additions & 0 deletions apps/storefront/src/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,10 @@
page-break-before: auto;
page-break-inside: auto;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
14 changes: 14 additions & 0 deletions apps/storefront/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export {
Home,
} from './Home'
export {
Form,
} from './Form'

export {
Login,
ForgotPassword,
} from './login'
export {
Registered, RegisteredBCToB2B,
} from './registered'
145 changes: 145 additions & 0 deletions apps/storefront/src/pages/login/ForgotPassword.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import {
useState,
} from 'react'

import {
Box,
Grid,
} from '@mui/material'

import {
useForm,
SubmitHandler,
} from 'react-hook-form'

import {
useB3Lang,
} from '@b3/lang'

import {
useNavigate,
} from 'react-router-dom'

import {
getForgotPasswordFields,
sendEmail,
LoginConfig,
} from './config'

import {
B3CustomForm,
B3Sping,
} from '@/components'

import {
B3ForgotButton,
} from './styled'

const ForgotPassword = () => {
const [isLoading, setLoading] = useState<boolean>(false)
const b3Lang = useB3Lang()
const forgotPasswordFields = getForgotPasswordFields(b3Lang)

const {
control,
handleSubmit,
getValues,
formState: {
errors,
},
setValue,
} = useForm<LoginConfig>({
mode: 'onSubmit',
})

const navigate = useNavigate()

const handleLoginClick: SubmitHandler<LoginConfig> = async (data) => {
setLoading(true)
const {
emailAddress,
} = data
try {
await sendEmail(emailAddress)
setLoading(false)
navigate('/login?loginFlag=2')
} catch (e) {
console.log(e)
}
}

return (
<Box sx={{
mr: '25%',
ml: '25%',
}}
>
<Box sx={{
display: 'flex',
justifyContent: 'center',
fontSize: '25px',
mt: 3,
mb: 3,
}}
>
{b3Lang('intl.user.forgot.forgotText.resetPassword')}
</Box>
<Box sx={{
display: 'flex',
justifyContent: 'center',
mt: '50px',
mb: '50px',
}}
>
{b3Lang('intl.user.forgot.forgotText.requestEmail')}
</Box>

<Box>
<Grid container>
<Grid
item
xs={8}
>
<B3CustomForm
formFields={forgotPasswordFields}
errors={errors}
control={control}
getValues={getValues}
setValue={setValue}
/>
</Grid>

<Grid
item
xs={4}
>
<Box sx={{
pl: 2,
mt: '31px',
}}
>
<B3Sping
isSpinning={isLoading}
size={20}
>
<B3ForgotButton
type="submit"
size="medium"
onClick={handleSubmit(handleLoginClick)}
variant="contained"
>
{b3Lang('intl.user.forgot.forgotText.resetPasswordBtn')}
</B3ForgotButton>
</B3Sping>

</Box>

</Grid>

</Grid>
</Box>
</Box>
)
}

export default ForgotPassword
Loading

0 comments on commit aacc0b7

Please sign in to comment.