Adapt sign up plus validation and translations

src/core/client/framework/lib/errors/badUserInputError.ts

@@ -1,12 +1,12 @@
 import { mapValues, once } from "lodash";
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED, VALIDATION_TOO_SHORT } from "../messages";
+import { VALIDATION_REQUIRED } from "../messages";
 
 /**
  * ValidationError represents all possible string values
  * that is responded by the server.
  */
-type ValidationError = "TOO_SHORT";
+type ValidationError = "REQUIRED";
 
 /**
  * InvalidArgsMap as responded by the server.
@@ -36,7 +36,6 @@ interface BadUserInputExtension {
  * Map server `ValidationError` to a translation message.
  */
 const validationMap = {
-  TOO_SHORT: VALIDATION_TOO_SHORT,
   REQUIRED: VALIDATION_REQUIRED,
 };
 

src/core/client/framework/lib/messages.tsx

@@ -12,9 +12,9 @@ export const VALIDATION_REQUIRED = () => (
   </Localized>
 );
 
-export const VALIDATION_TOO_SHORT = () => (
+export const VALIDATION_TOO_SHORT = (minLength: number) => (
   <Localized id="framework-validation-tooShort">
-    <span>This field is too short.</span>
+    <span>{"This field must contain at least {$minLength} characters."}</span>
   </Localized>
 );
 
@@ -24,15 +24,27 @@ export const INVALID_EMAIL = () => (
   </Localized>
 );
 
-export const INVALID_USERNAME = () => (
-  <Localized id="framework-validation-invalidUsername">
-    <span>Please enter a valid username.</span>
+export const INVALID_CHARACTERS = () => (
+  <Localized id="framework-validation-invalidCharacters">
+    <span>Invalid characters. Try again.</span>
   </Localized>
 );
 
-export const INVALID_PASSWORD = () => (
-  <Localized id="framework-validation-invalidUsername">
-    <span>Please enter a valid password.</span>
+export const USERNAME_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-usernameTooShort" $minLength={minLength}>
+    <span>{"Usernames must contain at least {$minLength} characters."}</span>
+  </Localized>
+);
+
+export const USERNAME_TOO_LONG = (maxLength: number) => (
+  <Localized id="framework-validation-usernameTooLong" $maxLength={maxLength}>
+    <span>{"Usernames cannot be longer than {$maxLength} characters."}</span>
+  </Localized>
+);
+
+export const PASSWORD_TOO_SHORT = (minLength: number) => (
+  <Localized id="framework-validation-passwordTooShort" $minLength={minLength}>
+    <span>{"Password must contain at least {$minLength} characters."}</span>
   </Localized>
 );
 

src/core/client/framework/lib/validation.tsx

@@ -1,9 +1,11 @@
 import { ReactNode } from "react";
 import {
+  INVALID_CHARACTERS,
   INVALID_EMAIL,
-  INVALID_PASSWORD,
-  INVALID_USERNAME,
+  PASSWORD_TOO_SHORT,
   PASSWORDS_DO_NOT_MATCH,
+  USERNAME_TOO_LONG,
+  USERNAME_TOO_SHORT,
   VALIDATION_REQUIRED,
 } from "./messages";
 
@@ -47,19 +49,44 @@ export const validateEmail = createValidator(
 );
 
 /**
- * validateUsername is a Validator that checks that the value is a valid username.
+ * validateUsernameCharacters is a Validator that checks that the username only contains valid characters.
  */
-export const validateUsername = createValidator(
+export const validateUsernameCharacters = createValidator(
   v => /^[a-zA-Z0-9_.]+$/.test(v),
-  INVALID_USERNAME()
+  INVALID_CHARACTERS()
+);
+
+/**
+ * validateUsernameMinLength is a Validator that checks that the username has a min length of characters
+ */
+export const validateUsernameMinLength = createValidator(
+  v => v.length >= 3,
+  USERNAME_TOO_SHORT(3)
+);
+
+/**
+ * validateUsernameMaxLength is a Validator that checks that the username has a max length of characters
+ */
+export const validateUsernameMaxLength = createValidator(
+  v => v.length <= 20,
+  USERNAME_TOO_LONG(20)
+);
+
+/**
+ * validateUsername is a Validator that checks that the username is valid.
+ */
+export const validateUsername = composeValidators(
+  validateUsernameCharacters,
+  validateUsernameMinLength,
+  validateUsernameMaxLength
 );
 
 /**
  * validateUsername is a Validator that checks that the value is a valid username.
  */
 export const validatePassword = createValidator(
-  v => /^(?=.{8,}).*$/.test(v),
-  INVALID_PASSWORD()
+  v => v.length >= 8,
+  PASSWORD_TOO_SHORT(8)
 );
 
 /**s