Seems to be all working!!

account/src/User/ConfirmEmail.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Container,
   Dimmer,
@@ -7,72 +7,65 @@ import {
   Message,
   Icon
 } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import { confirmEmail } from "../features/user/userSlice";
+import { useDispatch } from 'react-redux'
 
-class ConfirmEmail extends Component {
+const ConfirmEmail = (props) => {
+  const dispatch = useDispatch();
+  const [loading, setLoading] = useState(true);
+  const [confirmMessage, setConfirmMessage] = useState({ success: false, message: "" });
+  const { userId, token } = useParams();
 
-  state = {
-    loading: true,
-    confirmMessage: { success: false, message:""}
-  };
-  componentDidMount() {
-    const { match: { params } } = this.props;
 
-    this.props
-      .confirmEmail(params.userId, params.token)
-      .then(confirmMessage => {
-        if (confirmMessage) {
-          // report to the user is there was a problem during login
-          this.setState({
-            confirmMessage: confirmMessage, loading: false
-          });
-        }
-      });
+  const checkConfirmation = async(userId, token) => {
+    const result = await dispatch(confirmEmail({ userId, token })).unwrap();
+    if (result) {
+      setConfirmMessage(result);
+      setLoading(false);
+    }
   }
 
-  render() {
-    var dimmerProps = {  };
-    if (this.state.loading) {
-      dimmerProps["active"] = true;
-    }
-    return (
+  useEffect(() => {
+    checkConfirmation(userId, token);
+  }, []);
 
-      <Container text>
+  const dimmerProps = { active: loading };
+
+  return (
+    <Container text>
       <Dimmer {...dimmerProps}>
-            <Loader indeterminate>Confirming Email Address</Loader>
-          </Dimmer>
-        
-          
-        {this.state.confirmMessage.success ? (
-          <Message icon>
-          
-       <Icon name='check'/>
-       <Message.Content>
-         <Message.Header>Success</Message.Header>
-           <p>You have successfully confirmed you email address.</p>
-             <Link to="/">
-              <Button
-                  size="large"
-                  content="Continue to Login"
-                  fluid
-                /></Link>
+        <Loader indeterminate>Confirming Email Address</Loader>
+      </Dimmer>
 
-       </Message.Content>
-       </Message>
-        ) : (
-          <Message icon>
-          <Icon name='exclamation'/>
+      {confirmMessage.success ? (
+        <Message icon>
+          <Icon name='check' />
+          <Message.Content>
+            <Message.Header>Success</Message.Header>
+            <p>You have successfully confirmed you email address.</p>
+            <Link to="/login">
+              <Button
+                size="large"
+                content="Continue to Login"
+                fluid
+              /></Link>
+          </Message.Content>
+        </Message>
+      ) : (
+        <Message icon>
+          <Icon name='exclamation' />
           <Message.Content>
             <Message.Header>Error</Message.Header>
-            <p>{this.state.confirmMessage.message}</p>
+            <p>{confirmMessage.message}</p>
           </Message.Content>
-          
-          </Message>
-        )}
-      
-     </Container>
-    );
-  }
+        </Message>
+      )}
+
+    </Container>
+  );
 }
 
 export default ConfirmEmail;
+
+

account/src/User/Profile.js

@@ -20,7 +20,7 @@ const Profile = (props) => {
       if (result.success) {
       console.log(result)
     } else {
-      setMessage = result.message;
+      setMessage(result.message);
     }
   }
 

account/src/User/Register.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { registerUser  } from "../features/user/userSlice";
-import { useNavigate, useSearchParams, Link  } from 'react-router-dom';
+import { registerUser } from "../features/user/userSlice";
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux'
 import {
   Container,
@@ -15,32 +15,32 @@ function Register(props) {
   const [requestMessage, setRequestMessage] = useState("");
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const onRegisterSubmit = async(user) => {
+  const onRegisterSubmit = async (user) => {
     const result = await dispatch(registerUser(user)).unwrap();
     if (result.success) {
-        navigate("/sent-confirm-email");
-  } else {
-    console.error(result);
-    setRequestMessage(result.message);
-  }
+      navigate("/sent-confirm-email");
+    } else {
+      console.error(result);
+      setRequestMessage(result.message);
+    }
   };
 
   return (
     <div>
       <Container text>
         <Message icon>
-          <Icon name='trophy'/>
+          <Icon name='trophy' />
           <Message.Content>
             <Message.Header>Welcome!</Message.Header>
-              <p>Creating an account on OpenMHz is the first step in sharing radio system recordings using Trunk Recorder.</p>
-              <p>After creating an account, head over <a href="https://github.com/robotastic/trunk-recorder">here</a> to learn more about Trunk Recorder</p>
-              <p> - Luke</p>
+            <p>Creating an account on OpenMHz is the first step in sharing radio system recordings using Trunk Recorder.</p>
+            <p>After creating an account, head over <a href="https://github.com/robotastic/trunk-recorder">here</a> to learn more about Trunk Recorder</p>
+            <p> - Luke</p>
           </Message.Content>
         </Message>
       </Container>
       <Container text>
         <Header style={{ paddingTop: '20px' }} as="h1">Register</Header>
-        <UserForm onSubmit={onRegisterSubmit} requestMessage={requestMessage} isWaiting={props.isWaiting}/>
+        <UserForm onSubmit={onRegisterSubmit} requestMessage={requestMessage} isWaiting={props.isWaiting} />
       </Container>
     </div>
   );

account/src/User/ResetPassword.js

@@ -43,7 +43,6 @@ const ResetPassword = (props) => {
       setConfirmPasswordError(false);
     }
 
-    const { match: { params } } = props;
     setCheckInputMessages(inputMessages);
     if (!error) {
       const result = await dispatch(resetPassword({ userId, token, password })).unwrap();

account/src/User/UserForm.js

@@ -28,6 +28,7 @@ const UserForm = (props) => {
   const [passwordError, setPasswordError] = useState(false);
   const [confirmPasswordError, setConfirmPasswordError] = useState(false);
   const [isEditing, setIsEditing] = useState(props.isEditing);
+  const [changed, setChanged] = useState(false);
   const requestMessage = props.requestMessage;
   
   useEffect(() => {
@@ -37,6 +38,7 @@ const UserForm = (props) => {
       setScreenName(props.user.screenName);
       setEmail(props.user.email);
       setLocation(props.user.location);
+      setChanged(false);
     }
   }, [props.isEditing, props.user]);
 
@@ -120,6 +122,7 @@ const UserForm = (props) => {
 
     if (!inputError) {
       const user ={ firstName, lastName, screenName, location, email, password };
+      setChanged(false);
       props.onSubmit(user);
     }
   }
@@ -153,6 +156,7 @@ const UserForm = (props) => {
       </Message>
     );
   }
+  const buttonDisabled = changed?{}:{disabled:true}
   return (
     <div>
       <Form
@@ -168,7 +172,7 @@ const UserForm = (props) => {
             <Form.Input
               type="text"
               name="firstName"
-              onChange={e => setFirstName(e.target.value)}
+              onChange={e => {setFirstName(e.target.value); setChanged(true)}}
               error={firstNameError}
               value={firstName}
               label="First name"
@@ -179,7 +183,7 @@ const UserForm = (props) => {
             <Form.Input
               type="text"
               name="lastName"
-              onChange={e => setLastName(e.target.value)}
+              onChange={e => {setLastName(e.target.value); setChanged(true)}}
               error={lastNameError}
               value={lastName}
               label="Last name"
@@ -192,7 +196,7 @@ const UserForm = (props) => {
             <Form.Input
               type="text"
               name="email"
-              onChange={e => setEmail(e.target.value)}
+              onChange={e => {setEmail(e.target.value); setChanged(true)}}
               error={emailError}
               value={email}
               disabled={isEditing}
@@ -205,7 +209,7 @@ const UserForm = (props) => {
             <Form.Input
               type="text"
               name="screenName"
-              onChange={e => setScreenName(e.target.value)}
+              onChange={e => {setScreenName(e.target.value); setChanged(true)}}
               error={screenNameError}
               value={screenName}
               label="Screen Name"
@@ -221,7 +225,7 @@ const UserForm = (props) => {
             <Form.Input
               type="text"
               name="location"
-              onChange={e => setLocation(e.target.value)}
+              onChange={e => {setLocation(e.target.value); setChanged(true)}}
               error={locationError}
               value={location}
               label="General Location"
@@ -235,7 +239,8 @@ const UserForm = (props) => {
               <Form.Input
                 name="password"
                 type="password"
-                onChange={e => setPassword(e.target.value)}
+                onChange={e => {setPassword(e.target.value); setChanged(true)}}
+                value={password}
                 error={passwordError}
                 disabled={isEditing}
                 label="Password"
@@ -246,7 +251,8 @@ const UserForm = (props) => {
               <Form.Input
                 name="confirmPassword"
                 type="password"
-                onChange={e => setConfirmPassword(e.target.value)}
+                onChange={e => {setConfirmPassword(e.target.value); setChanged(true)}}
+                value={confirmPassword}
                 error={confirmPasswordError}
                 disabled={isEditing}
                 label="Confirm Password"
@@ -256,7 +262,7 @@ const UserForm = (props) => {
           </Form.Group>
         )}
         <div style={floatStyle}>
-          <Button type="submit" size="large" floated="right" value="Login" color='blue'>
+          <Button type="submit" size="large" floated="right" value="Login" color='blue' disabled={!changed}>
             {isEditing !== true ? 'Register' : 'Update'}
           </Button>
         </div>