Email verification #6
Conversation
…tional rendering also done for home page
src/api/auth.ts
Outdated
|
|
||
| export const forgetPassword = (data: { email: string}) => { | ||
| export const forgetPassword = (data: {email: string}) => { | ||
| return request.post("/forgetpassword", data); |
There was a problem hiding this comment.
This is a matter of naming conventions. By convention (https://restfulapi.net/resource-naming/), REST API URLs should refer to nouns, rather than verbs. In this case, perhaps it would be better to name the URL something like /user/password/reset.
src/api/auth.ts
Outdated
| }; | ||
|
|
||
| export const confirmEmail = (data:{uid:string}) => { | ||
| return request.post("/confirmEmail",data) |
There was a problem hiding this comment.
Same goes for this one, perhaps /email/confirm would be more adhering to the convention. And also, it would be better to split multiple words into hyphens instead of using camelCase for naming REST URLs.
src/api/auth.ts
Outdated
|
|
||
|
|
||
| export const verificationEmail = (data:{uid:string}) => { | ||
| return request.post("/verifyEmail",data) |
src/components/Button/index.tsx
Outdated
| import React, { ButtonHTMLAttributes } from 'react' | ||
|
|
||
| interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'htmlType'> { | ||
| id?: string | ||
| block?: boolean | ||
| children?: React.ReactNode | ||
| className?: string | ||
| disabled?: boolean | ||
| htmlType?: 'reset' | 'submit' | ||
| onClick?: () => void | ||
| size?: 'small' | 'large' | ||
| icon?: React.ReactNode | ||
| type?: 'danger' | 'success' | 'outlined' | 'text' | 'primary' | 'secondary' | ||
| vCenter?: boolean | ||
| isSubmit?: boolean | ||
| isLoading?: boolean | ||
| } | ||
|
|
||
| export const Button = ({ | ||
| className, | ||
| size = 'large', | ||
| type = 'primary', | ||
| vCenter, | ||
| children, | ||
| disabled, | ||
| isSubmit, | ||
| isLoading = false, | ||
| ...buttonProps | ||
| }: Props) => { | ||
| return ( | ||
| <button {...buttonProps} disabled={Boolean(disabled)} type={isSubmit ? 'submit' : 'button'}> | ||
| {children} | ||
| </button> | ||
| ) | ||
| } | ||
|
|
||
| export default Button |
There was a problem hiding this comment.
By the way, you can just use the button from chakra ui (https://chakra-ui.com/docs/components/form/button) instead of creating your own component from scratch, if you don't want to bother styling the components from scratch :D
src/api/auth.ts
Outdated
| } | ||
|
|
||
|
|
||
| export const verificationEmail = (data:{uid:string}) => { |
There was a problem hiding this comment.
I think it would be better to be more explicit about the function name. In this case, it might be a bit confusing as to what exactly this does. Is it sending the email itself, or is it doing other things related to verification email.
I created a public page that the backend will use to authenticate an account which the backend will send the the user's email. The specific account or code to be verified will be obtained using the URL parameters.
I also modified the home page with conditional rendering based on whether the account is verified.
Both home page and email verification page would be perform their actions on render using useEffect.
One thing I am unsure is if my hooks for the user information is done properly. I just copied the useUser hook from evoucher-frontend/src/api/user.ts and created a new verified user type