From c54476c40e76645b5ffb507558d6a83f0e697dc7 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 7 Dec 2022 18:46:30 -0300
Subject: fix: username regex and error message word-break

---
 packages/demobank-ui/src/pages/home/RegistrationPage.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'packages/demobank-ui/src/pages/home/RegistrationPage.tsx')

diff --git a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
index c91eef7a0..ecec5793c 100644
--- a/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/home/RegistrationPage.tsx
@@ -44,6 +44,8 @@ export function RegistrationPage(): VNode {
   );
 }
 
+const usernameRegex = /^[a-z][a-zA-Z0-9]+$/;
+
 /**
  * Collect and submit registration data.
  */
@@ -57,8 +59,16 @@ function RegistrationForm(): VNode {
   const { i18n } = useTranslationContext();
 
   const errors = undefinedIfEmpty({
-    username: !username ? i18n.str`Missing username` : undefined,
-    password: !password ? i18n.str`Missing password` : undefined,
+    username: !username
+      ? i18n.str`Missing username`
+      : !usernameRegex.test(username)
+      ? i18n.str`Use only letter and numbers starting with a lower case letter`
+      : undefined,
+    password: !password
+      ? i18n.str`Missing password`
+      : !usernameRegex.test(password)
+      ? i18n.str`Use only letter and numbers starting with a lower case letter`
+      : undefined,
     repeatPassword: !repeatPassword
       ? i18n.str`Missing password`
       : repeatPassword !== password
-- 
cgit v1.2.3

