Make password creation form functional

[voltrevo]

Dependent PR

This PR builds on top of #95. Please review and merge that one first.

What is this PR doing?

Adds functionality to the password creation form:

• Displays password strength using method from previous work
  • Shows weak/strong/etc
  • Description elaborating on weak/strong/etc
  • Horizontal bar with a width corresponding to granular strength measurement
• Confirm password box shows whether it is correct/incorrect/incomplete
• Continue button is disabled if a password hasn't been entered or the confirm field doesn't match

I included some naive css this time because I couldn't help it. Just things like background-color: green though. Intended to be thrown away.

How can these changes be manually tested?

Visit the password creation form and verify the above.

Does this PR resolve or contribute to any issues?

Resolves #97, resolves #98.

Checklist

• I have manually tested these changes
• Post a link to the PR in the group chat

Guidelines

• If your PR is not ready, mark it as a draft
• The resolve conversation button is for reviewers, not authors
  • (But add a 'done' comment or similar)

[jacque006]

To prevent redundant computation in render cycles and prevent subcomponents from unnecessarily re-rendering, generating values like this can be memoized. https://reactjs.org/docs/hooks-reference.html#usememo

Suggested change

	const confirmFieldClasses = ['password-confirm-field'];
	if (confirmPasswordFieldValue === '') {
	confirmFieldClasses.push('empty');
	} else if (confirmPasswordFieldValue === passwordFieldValue) {
	confirmFieldClasses.push('correct');
	} else if (passwordFieldValue.startsWith(confirmPasswordFieldValue)) {
	confirmFieldClasses.push('incomplete');
	} else {
	confirmFieldClasses.push('incorrect');
	}
	const confirmFieldClasses = React.useMemo(() => {
	const classes = ['password-confirm-field'];
	if (confirmPasswordFieldValue === '') {
	classes.push('empty');
	} else if (confirmPasswordFieldValue === passwordFieldValue) {
	classes.push('correct');
	} else if (passwordFieldValue.startsWith(confirmPasswordFieldValue)) {
	classes.push('incomplete');
	} else {
	classes.push('incorrect');
	}
	return classes;
	}, [confirmPasswordFieldValue, passwordFieldValue]);

Now confirmFieldClasses will only become a new Array object when either confirmPasswordFieldValue or passwordFieldValue changes.

I don't think this is needed for this round of changes, but something to keep in mind.

[voltrevo]

This was merged before #95. Oops.