Sign Up Form, Cross Validations for Username, Email, Password, and more added.

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

@@ -17,3 +17,27 @@ export const VALIDATION_TOO_SHORT = () => (
     <span>This field is too short.</span>
   </Localized>
 );
+
+export const INVALID_EMAIL = () => (
+  <Localized id="framework-validation-invalidEmail">
+    <span>Please enter a valid email address.</span>
+  </Localized>
+);
+
+export const INVALID_USERNAME = () => (
+  <Localized id="framework-validation-invalidUsername">
+    <span>Please enter a valid username.</span>
+  </Localized>
+);
+
+export const INVALID_PASSWORD = () => (
+  <Localized id="framework-validation-invalidUsername">
+    <span>Please enter a valid password.</span>
+  </Localized>
+);
+
+export const PASSWORDS_DO_NOT_MATCH = () => (
+  <Localized id="framework-validation-passwordsDoNotMatch">
+    <span>Passwords do not match. Try again.</span>
+  </Localized>
+);

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

@@ -1,5 +1,11 @@
 import { ReactNode } from "react";
-import { VALIDATION_REQUIRED } from "./messages";
+import {
+  INVALID_EMAIL,
+  INVALID_PASSWORD,
+  INVALID_USERNAME,
+  PASSWORDS_DO_NOT_MATCH,
+  VALIDATION_REQUIRED,
+} from "./messages";
 
 type Validator<T, V> = (v: T, values: V) => ReactNode;
 
@@ -31,3 +37,35 @@ export function composeValidators<T = any, V = any>(
  * required is a Validator that checks that the value is truthy.
  */
 export const required = createValidator(v => !!v, VALIDATION_REQUIRED());
+
+/**
+ * validateEmail is a Validator that checks that the value is an email.
+ */
+export const validateEmail = createValidator(
+  v => /^.+@.+\..+$/.test(v),
+  INVALID_EMAIL()
+);
+
+/**
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validateUsername = createValidator(
+  v => /^[a-zA-Z0-9_.]+$/.test(v),
+  INVALID_USERNAME()
+);
+
+/**
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validatePassword = createValidator(
+  v => /^(?=.{8,}).*$/.test(v),
+  INVALID_PASSWORD()
+);
+
+/**s
+ * validateUsername is a Validator that checks that the value is a valid username.
+ */
+export const validateEqualPasswords = createValidator(
+  (v, values) => v === values.password,
+  PASSWORDS_DO_NOT_MATCH()
+);