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

chore: refactor setpassword bars to fix bug #4519

Conversation

pete-watters
Copy link
Contributor

@pete-watters pete-watters commented Nov 15, 2023

This PR refactors the PasswordStrength indicator to help migrate it and fix bugs found.

You can see a before + after below with:

  • left light mode - current production
  • right dark mode - after this change
Kapture.2023-11-15.at.11.50.27.mp4

const { strengthColor, strengthResult } = props;

export function PasswordStrengthIndicator({
password,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm passing password now also so that if users delete what they have typed it clears the bars

@pete-watters pete-watters force-pushed the refactor/remove-stacks-ui-part-3-tests branch from a6a349a to 25e4c7e Compare November 15, 2023 11:48
@@ -1,6 +1,6 @@
import { PasswordStrength, ValidatedPassword } from '@app/common/validation/validate-password';

export const defaultColor = 'accent.text-subdued';
export const defaultColor = 'accent.background-secondary';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I changed this as it wasn't appearing with 'accent.text-subdued'
Screenshot 2023-11-15 at 11 48 55

@pete-watters pete-watters requested a review from fbwoolf November 15, 2023 11:52
@pete-watters pete-watters marked this pull request as ready for review November 15, 2023 11:52
@pete-watters
Copy link
Contributor Author

I'll merge this but some work is still needed regarding the colours and I'm not sure why.

In the original video posted you can see the colours working however when I went to try and swap Flex + Box in for styled... it stopped working.

I noticed this earlier but once I got it working it was working OK. For some reason error.label works initially but then the other colours aren't applied:

Kapture.2023-11-15.at.13.21.53.mp4

@pete-watters pete-watters merged commit d4885b1 into refactor/remove-stacks-ui-part-3 Nov 15, 2023
17 of 18 checks passed
@pete-watters pete-watters deleted the refactor/remove-stacks-ui-part-3-tests branch November 15, 2023 13:25
@fbwoolf
Copy link
Contributor

fbwoolf commented Nov 15, 2023

Thanks for fixing @pete-watters!

@pete-watters
Copy link
Contributor Author

Thanks for fixing @pete-watters!

No problem 👍

There could be more to do. The colours worked but now they don't and I don't know why.

It may be to do with runtime values, I'll check

I'll merge this but some work is still needed regarding the colours and I'm not sure why.

In the original video posted you can see the colours working however when I went to try and swap Flex + Box in for styled... it stopped working.

I noticed this earlier but once I got it working it was working OK. For some reason error.label works initially but then the other colours aren't applied:

Kapture.2023-11-15.at.13.21.53.mp4

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.

3 participants