• With username/password
• With Facebook
• With Google

https://minimals.cc/components

• Color #79
• Typography #79
• Shadows #79
• Grid/Spacing #79
• Icons (Migrate icons to @iconify/react)
• Fix broken tokens

Currently, after finishing registering for an account, the UI shows nothing to indicate the finished task.

Config codebase to support i18n

Move away from Supabase to Firebase

Background

The LayoutProvider right now seems to be there to support only the Modals. It wraps inside the DefaultLayout which I don't remember why I made such decision.

Proposal

• Make LayoutProvider becomes ModalProvider and wrap it under AuthProvider (and also under SnackbarProvider when #98 is marged)\
• Rename useLayoutModals to simply useModals
• Any future Modal should be put inside ModalProvider so that no 2 modals can be shown at the same time (supported by useModalGroup)

Currently, the register form response with "Oops" on an existing user.

Also, fix this as well.

• Links
• Footer text
• Switch language button

From #63:

• Create a protected route / page guard mechanism (may become a seperated issue) #71
• Change the type of error parameter in getErrorMessage() in src/utils/api-responses.ts to unknwon
• Fix typo in ModeLType

From #70:

• Refactor modals - making show and onDismiss mandataory props
• Refactor useModalGroup - making return ModalControl non-optional type
• Move logic of onCreateAccountClick and onAlreadyHaveAccountClick inside the componenets

Reproduce

Branch: dev

• From homepage, open Menu > Login & Security
• Close sign in modal
• open Menu > Login & Security

What happened

Cannot open the login modal

Expect

Login modal should open

Inside the details of a house, have a button to compare with another selected house.

• Sign-in modal
• Register modal

Reproduce

Branch: dev

• From homepage, open Menu > Login
• Enter the wrong username and password
• Press login

What happened

The modal is closed

Expect

Login should open and show an error message

I suspect this is because react-hook-form doesn't properly handle errors thrown in handleSubmit. I might have done it wrong, but their docs is not accurate. This does not handle the throw (even though their docs says so)

const onSubmit = () => {
  throw new Error('Something is wrong')
}

handleSubmit(onSubmit).catch((e) => {
  // you will need to catch that error
})

In the other project, I handle this with mutation from react-query. SWR seems to has the same concept for mutation, but I'm not sure.

Reproduce

Pick a DOB later than today

Expect

Error shows more readable date

Background

Right now, almost every form field (TextField, PasswordField, DatePicker, SelectField) requires a id prop so it can use it for a11y purpose (for the aria-describedby attribute).

Proposal

After #95 is merged which includes the useUid hook, we should make the id prop optional. If an id is not passed into the components above, we should generate a random id and use it instead

Need to add aria-describedby on inputs.

• Text #81
• Snackbar #98
• Tab #118
• Menu
  • #119
  • #120
• Tooltips #129
• Chip

Form looks pretty verbose and a lot of redundant stylings.

The menu should be toggled even when the user clicks outside of the hamburger icon (on the account icon or the white edgfe for examples).

• User unauthenticated page
  • Prompt the user to login/register
  • Buttons to show the login/register modals
• User's email unverified page
  • Prompt the user to go to their mailbox and click on the verification link
  • Button to resend the verification link
  • Links to popular mailboxes
    • Gmail, Outlook, Yahoo
    • Collapsible for more email services (if you happen to don't have any thing better to do)
• Custom error page
  • 404 page
  • 500 page

Let's pick a component library and gradually make our own version with Tailwindcss.

1. Infima https://infima.dev/docs/components/card
2. Flowbite https://flowbite.com/docs/getting-started/introduction/ <-- Winner 🥇
3. Vercel UI https://react.geist-ui.dev/en-us
4. Minimals http://minimals.cc/ <-- Winner 🥇

===========================================

Tasks:

• #77
• #80
• #78
• Refactor PasswordActionField see #76

• Refactor PasswordActionField to be more reuseable by creatinng a ActionField componenet with the following props:
  • label: string
  • mainContent: ReactNode, default to empty Node
  • alternativeContent: ReactNode, default to empty Node
  • mainButtonText: string, default to "Update"
  • alternativeButtonText: stringg, default to "Cancel"
  • showActionButton: boolean, default to true
  • Also, create a context wrapping the children and a hook to access that context (i.e.: useActionCollapsible()) which exposes properties and functions such as isOpen, open(), close() and toggle() so that any child componenet within the ActionCollapsible can control it (example use case: A form can close the collapsible when it successfully submitted)

Add the User Profile page allowing:

• View user profile
• Edit user profile

Profile
---------------
id: User ID from Supabase Auth
fname
lname
gender
dob?
bio?
phone?
created_on
last_signin_on
_______________

Opening the Login or Register modal from the user menu requires the UserMenuLink to be a button (with onClick attribute)

Examples of protected routes:

• /account
• /account/profile
• /account/security
• ...

Allow deactivating account from /account/security

• Primary theme
• Secondary theme
• Rounded
• Define consistent button size (xl, lg, md, sm, xs)

• Heading
• Card
• Footer text

Background

Currently, we have this long-winded code for every form to pass the name and, more importantly, the control of the form to the useController hook of each field in the form.

  const controllers: Controllers<RegisterFormModel> = {
    firstName: {
      control,
      name: 'firstName',
    },
    lastName: {
      control,
      name: 'lastName',
    },
    gender: {
      control,
      name: 'gender',
    },
    dob: {
      control,
      name: 'dob',
    },
    email: {
      control,
      name: 'email',
    },
    password: {
      control,
      name: 'password',
    },
  };

Proposal

We can avoid passing the control of the form to individual fields by wrapping the form around a <FormProvider> exported from react-form-hook (See the description of the control property in the docs).

By doing this, we can eleminate the controllers altogether and pass only the name directly to the fields.

Official example for the use of <FormProvider> can be found here.

• Fixed on checkbox
• Fixed on textfield

• for DatePicker
• for phone

• Breadcrumb
• Read/Edit fields
• Description card

@vitokhangnguyen I have tried zod on two other projects, and honestly, I feel that the code is much more concise than using a class and yup, especially the duplication in the current constructor, and another duplicate in yup.object(). Here's an example using zod

import { z } from 'zod';

export const addCourseReviewSchema = z.object({
  courseId: z.string().min(1, 'Have to select a course ID'),
  difficulty: z
    .string()
    .transform((val) => +val)
    .refine((val) => val <= 5, { message: 'Maximum value is 5' })
    .refine((val) => val >= 1, { message: 'Minimum value is 1' }),
  professorIdList: z
    .string()
    .array()
    .min(1, { message: 'Minimum one related professor' }),
  title: z.string().min(1, { message: 'Review must have a title' }),
});

export type AddCourseReviewFormValues = z.infer<typeof addCourseReviewSchema>;

Validation

import { HasMessage, TResult, TResultSuccess, ValidateQuery } from '@common';
import { withApiHandler } from '@lib/api/withApiHandler';
import { signupFormSchema, SignupFormValues } from '@modules/auth';
import { AuthService } from '@modules/auth/server-index';
import {
  getErrorMessage,
  ResultError,
  ResultOk,
  ResultSuccess,
} from '@utils/api-utils';
import { errorsToString } from '@utils/parse-utils';
import { NextApiHandler } from 'next';

type PostData = HasMessage;
export type Auth_SignupByPassword_PostData = TResultSuccess<PostData>;
export type Auth_SignupByPassword_PostBody = SignupFormValues;

const post: NextApiHandler<TResult<PostData>> = async (req, res) => {
  const bodyResult = validateBody(req.body);

  if (bodyResult.type === 'error') return res.status(422).json(bodyResult);

  try {
    await AuthService.signUpByPassword(bodyResult.data);
  } catch (error) {
    return res
      .status(500)
      .json(ResultError(`Fail to sign up: ${getErrorMessage(error)}`));
  }

  return res.status(201).json(ResultOk());
};

const validateBody: ValidateQuery<Auth_SignupByPassword_PostBody> = (body) => {
  const result = signupFormSchema.safeParse(body);

  if (!result.success) {
    return ResultError(errorsToString(result.error.errors));
  }

  return ResultSuccess(body);
};

export default withApiHandler({ post });

• Edit password
  • validate old password
  • update new password
  • add last update timestamp
• /account/index
  • user info #8
  • deactivate account #73

• TextField
• Datepicker
• Checkbox

• Search bar missing focus styling
• ButtonSimple should have opacity instead of gray-shade on hover
• TextField should have a lighter gray shade (or even better, opacity) on hover

Better ask users for anonymous data collection

Metadata

• Rent rates
• Type (main floor, basement)
• Bedroom's type (master bedroom, shared bedroom, single bedroom)
• Share kitchen/washroom with X housemate

Filters

• By region
• By combining the above metadata

Allow tenants to share their preferences abouit their dream houses and housemates, as well as, their personalities.

This information will be shared with the owner when the tenant expresses their interests.

• Navbar
• Mobile Navbar
• Footer
• switch langauge button
• user badge
• logo

When input has an error, the ring and border overlap.

At the moment, date-fns is only used for formatting date in DatePickerInput. This should be easily replaced with dayjs. See https://react-day-picker.js.org/docs/input

Either change how we implement it or add onKeyPress + tabIndex.

• Base size
• Small size
• Headings. Calculator: https://royalfig.github.io/fluid-typography-calculator/
• Media queries with em. See: https://zellwk.com/blog/media-query-units/
• Use px for queries. See https://adamwathan.me/dont-use-em-for-media-queries/

• Reset password modal for unauthenticated user
  • Add a modal with a TextField with type="email" and a submit button which will send an email containing the reset password link. Firebase SDK supports this feature and we can customize the email content on Firebase console. After submitting, close the modal and show a succes snackbar, show a snackbar error if and only if a network issue occurs.
• Reset password modal for unauthenticated user
  • Same as the modal for unauthenticated user and...
  • Fill the TextField with the current user's email
• Change the "Need a new password?" text below to "Forget password?"

See react-hook-form/resolvers#271

• By username/password
• By Facebook
• By Google
• By Apple