bug fix in forms inside of dialog not submitting

Author: jsoneaday

server/.env.example

@@ -12,4 +12,5 @@ MAILGUN_USER_NAME=
 MAILGUN_PASSWORD=
 SMTP_PROVIDER=
 CONFIRMATION_LINK=
-CHANGE_PASSWORD_LINK=
+CHANGE_PASSWORD_LINK=
+ALLOWED_DOMAIN=

server/src/common/emailer/emailer.rs

@@ -105,7 +105,7 @@ impl EmailerSendService for Emailer {
         match mailer.send(&email) {
             Ok(_) => Ok(()),
             Err(e) => {
-                println!("{}", e);
+                error!("{}", e);
                 Err(EmailError::EmailConfirmationSendFailed)
             }
         }        

server/src/common/repository/developers/repo.rs

@@ -288,7 +288,10 @@ mod internal {
                         entity,
                         unique_key: uuid
                     }),
-                    Err(e) => Err(e.into())
+                    Err(e) => {
+                        error!("Send email confirm error: {}", e);
+                        Err(e.into())
+                    }
                 }
             },
             Err(e) => Err(e)

webclient/.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-ssl
+ssl
+.env

webclient/src/presentation/components/authentication/ChangePassword.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, useState } from "react";
+import { ChangeEvent, MouseEvent, useState } from "react";
 import { ValidationMsgView } from "../controls/ValidationMsgView";
 import { changePassword } from "../../../domain/repository/UserRepo";
 import { useProfile } from "../../common/redux/profile/ProfileHooks";
@@ -28,7 +28,7 @@ export function ChangePassword({ userType }: ChangePasswordProps) {
     setNewPassword(e.target.value);
   };
 
-  const onSubmitChangePassword = async (e: FormEvent<HTMLFormElement>) => {
+  const onSubmitChangePassword = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
     if (!profile || !profile.accessToken) {
@@ -72,7 +72,7 @@ export function ChangePassword({ userType }: ChangePasswordProps) {
   };
 
   return (
-    <form className="login-form" onSubmit={onSubmitChangePassword}>
+    <form className="login-form">
       <div style={{ padding: "2em", width: "100%" }}>
         <section className="form-section">
           <span>Current Password</span>
@@ -100,7 +100,11 @@ export function ChangePassword({ userType }: ChangePasswordProps) {
           className="form-section"
           style={{ marginTop: "1.5em", justifyContent: "flex-end" }}
         >
-          <PrimaryButton type="submit" disabled={disableSubmit}>
+          <PrimaryButton
+            type="submit"
+            disabled={disableSubmit}
+            onClick={onSubmitChangePassword}
+          >
             change
           </PrimaryButton>
         </section>

webclient/src/presentation/components/authentication/Profile/ProfileForm.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, MouseEvent, useEffect, useRef, useState } from "react";
 import { UiDevOrEmployer } from "../../../models/DevOrEmployer";
 import DropDown, { OptionType } from "../../controls/DropDown";
 import { getLanguages } from "../../../../domain/repository/LanguageRepo";
@@ -60,6 +60,7 @@ interface ProfileFormProps {
 }
 
 /// form to register or edit profile
+/// note: form's onSubmit does not work inside a <dialog>
 export function ProfileForm({
   isModalMode,
   editMode,
@@ -173,7 +174,7 @@ export function ProfileForm({
     // Add more custom styles for other parts
   };
 
-  const createOrEditProfile = async (e: FormEvent<HTMLFormElement>) => {
+  const createOrEditProfile = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
     if (!isValidProfile()) return;
@@ -544,7 +545,7 @@ export function ProfileForm({
 
   return (
     <div style={{ width: "100%" }}>
-      <form className="login-form" onSubmit={createOrEditProfile}>
+      <form className="login-form">
         {isModalMode ? (
           <div className="login-item">
             <span className="title-font">Welcome to SyntaxMakers</span>
@@ -718,8 +719,12 @@ export function ProfileForm({
             className="form-section"
             style={{ marginTop: "1.5em", justifyContent: "flex-end" }}
           >
-            <PrimaryButton type="submit" disabled={disableSubmit}>
-              {editMode === ProfileFormEditMode.Edit ? "edit" : "create"}
+            <PrimaryButton
+              type="submit"
+              disabled={disableSubmit}
+              onClick={createOrEditProfile}
+            >
+              {editMode === ProfileFormEditMode.Edit ? "Edit" : "Create"}
             </PrimaryButton>
           </section>
           <section className="form-section" style={{ marginTop: "1em" }}>

webclient/src/presentation/components/authentication/login/Login.tsx

@@ -75,6 +75,7 @@ function LoginView({ toggleOpen, toggleIsLogin }: LoginViewProps) {
                     setProfile(profile);
                     toggleOpen();
                   });
+                  toggleOpen();
                 } else {
                   setProfile(null);
                   setErrorMessage(`Failed to find user with email ${email}`);
@@ -161,10 +162,15 @@ function LoginView({ toggleOpen, toggleIsLogin }: LoginViewProps) {
         </button>
       </div>
       <div className="login-item" style={{ alignItems: "flex-end" }}>
-        <PrimaryButton onClick={onClickLogin}>Login</PrimaryButton>
+        <PrimaryButton type="submit" onClick={onClickLogin}>
+          Login
+        </PrimaryButton>
       </div>
       <div className="login-item">
-        <span>{errorMessage}</span>
+        <ValidationMsgView
+          successMessage={""}
+          validationMessage={errorMessage}
+        />
       </div>
     </div>
   );