Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] create a textinput component + style auth flows #61

Merged
merged 16 commits into from
Dec 13, 2024

Conversation

rachaelch3n
Copy link
Contributor

@rachaelch3n rachaelch3n commented Dec 7, 2024

What's new in this PR 🧑‍🌾

Description

  • created TextInput component
  • Styled Auth Pages
    • TODO: decide how to handle clearing error messages
    • on Login, Login button is disabled if either field is empty
    • on Signup, Signup button is disabled if any fields are empty, passwords don't match or password complexity not met.
      • created a checkEmailExists query, but it's currently unused (commented out) b/c supabase signup already returns this as an error
  • misc
    • fixed error in fetchProfileById query in the case that user doesn't have an entry in profile table yet

Screenshots

Sign Up

User Alr Registered Error
Screen Shot 2024-12-12 at 11 28 36 PM

Invalid Email Error
Screen Shot 2024-12-12 at 11 28 24 PM

Disabled SignUp (if password complexity not met, passwords don't match, or any fields blank)
Screen Shot 2024-12-12 at 11 28 08 PM

Login

Invalid login credentials error
Screen Shot 2024-12-12 at 11 27 27 PM

How to review

Next steps

  • Once validate email flow is implemented, we should edit the check if email exists query in supabase to include a clause that checks whether the user has been validated or not.
  • Keep in mind: Use error.code rather than error.message: https://supabase.com/docs/guides/auth/debugging/error-codes
  • decide on a more elegant way to handle Invalid login credentials (can’t assume that both email and password are wrong)
  • supabase login function already handles the “Email Already Exists” error, so we might be able to remove the checkEmailExists query later.
  • decide how to handle clearing error messages on both signup and login
  • nit: remove inline styling /consolidate styling between auth pages

Relevant links

Online sources

Related PRs

CC: @ccatherinetan

@ccatherinetan ccatherinetan changed the title Rachaelchen/33 create a textinput component 2 [feat] create a textinput component + style auth flows Dec 7, 2024
This was linked to issues Dec 13, 2024
@ccatherinetan ccatherinetan force-pushed the rachaelchen/33-create-a-textinput-component-2 branch from 263d7b3 to 8e2f7e2 Compare December 13, 2024 07:29
Copy link
Collaborator

@ccatherinetan ccatherinetan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looking great!! i made some changes and i'll merge!

toggleVisibility,
error,
}) => {
const inputType = type === 'password' && isVisible ? 'text' : type;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great handling!

error?: boolean;
}

const TextInput: React.FC<TextInputProps> = ({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for consistency in the codebase, we want to declare components using

export default function TextInput({
  label,
  id,
  type,
  onChange,
  isVisible,
  value,
  toggleVisibility,
  error,
}: TextInputProps) {
...
}

Comment on lines 112 to 114
if (result.error.message === 'Account already exists for this email') {
setCheckEmailExistsError(result.error.message);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we want to catch all other possible errors too, so we don't need this conditional wrapper

string | null
>(null);
const [passwordComplexity, setPasswordComplexity] = useState<boolean>(false);
const [samePasswordCheck, setSamePasswordCheck] = useState('');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this state can be inferred from password and confirmPassword states (i.e. just use password===confirmPassword when needed). You can use a constant instead of creating a new state.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: i realized supabase login function already handles this error, so we might be able to remove this query later.

@ccatherinetan ccatherinetan merged commit 379c69a into main Dec 13, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Finalize Auth Styling Create a TextInput Component
2 participants