Finalize

frontend/src/graphql/types.ts

@@ -25,7 +25,6 @@ export type Scalars = {
 
 export type ActivateNewUserInput = {
   activation_key: Scalars["ID"];
-  email: Scalars["String"];
   name: Scalars["String"];
   password: Scalars["String"];
 };

frontend/src/pages/activateUser/ActivateUser.tsx

@@ -13,9 +13,7 @@ import { ROUTE_HOME, ROUTE_LOGIN } from "src/constants/route";
 import Title from "src/components/title";
 
 const schema = yup.object({
-  name: yup
-    .string()
-    .required("Username is required"),
+  name: yup.string().required("Username is required"),
   activationKey: yup.string().required("Activation Key is required"),
   password: yup.string().required("Password is required"),
 });

frontend/src/pages/resetPassword/ResetPassword.tsx

@@ -111,7 +111,9 @@ const ResetPassword: FC = () => {
                   placeholder="New Password"
                   {...register("newPassword")}
                 />
-                <div className="invalid-feedback">{errors?.newPassword?.message}</div>
+                <div className="invalid-feedback">
+                  {errors?.newPassword?.message}
+                </div>
               </Form.Group>
               <Form.Group controlId="confirmNewPassword" className="mb-3">
                 <Form.Control

frontend/src/pages/users/User.tsx

@@ -274,15 +274,16 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
         });
       })
       .catch((error: unknown) => {
-        let message: React.ReactNode | string | undefined = error instanceof Error && isApolloError(error) && error.message;
-        if (message === 'pending-email-change')
+        let message: React.ReactNode | string | undefined =
+          error instanceof Error && isApolloError(error) && error.message;
+        if (message === "pending-email-change")
           message = (
             <>
               <h5>Pending email change</h5>
               <div>Email change already requested. Please try again later.</div>
             </>
           );
-          toast({ variant: "danger", content: message });
+        toast({ variant: "danger", content: message });
       });
   };
 
@@ -308,7 +309,9 @@ const UserComponent: FC<Props> = ({ user, refetch }) => {
               </Link>
             )}
             {isOwner && (
-              <Button onClick={() => handleChangeEmail()} className="ms-2">Change Email</Button>
+              <Button onClick={() => handleChangeEmail()} className="ms-2">
+                Change Email
+              </Button>
             )}
             {isAdmin(Auth.user) && (
               <>

frontend/src/pages/users/UserConfirmChangeEmail.tsx

@@ -1,10 +1,10 @@
 import { FC, useState } from "react";
 import { isApolloError } from "@apollo/client";
 import { useNavigate } from "react-router-dom";
-import { Button, Form, Row, Col } from "react-bootstrap";
+import { Button, Form } from "react-bootstrap";
 
 import type { User } from "src/AuthContext";
-import { useQueryParams } from "src/hooks";
+import { useQueryParams, useToast } from "src/hooks";
 import { userHref } from "src/utils";
 import { ErrorMessage } from "src/components/fragments";
 import Title from "src/components/title";
@@ -14,42 +14,58 @@ const ConfirmChangeEmail: FC<{ user: User }> = ({ user }) => {
   const navigate = useNavigate();
   const [submitError, setSubmitError] = useState<string | undefined>();
   const [{ token }] = useQueryParams({
-    token: { name: "token", type: "string" },
+    token: { name: "key", type: "string" },
   });
+  const toast = useToast();
 
   const [confirmChangeEmail, { loading }] = useConfirmChangeEmail();
 
-  if (!token) return <ErrorMessage error="Missing token" />;
+  if (!token) return <ErrorMessage error="Missing key" />;
   if (submitError) return <ErrorMessage error={submitError} />;
 
   const onSubmit = () => {
     setSubmitError(undefined);
     confirmChangeEmail({ variables: { token } })
-      .then(() => {
-        navigate(userHref(user));
+      .then((res) => {
+        const status = res.data?.confirmChangeEmail;
+        if (status === "SUCCESS") {
+          toast({
+            variant: "success",
+            content: (
+              <>
+                <h5>Email successfully changed</h5>
+              </>
+            ),
+          });
+          navigate(userHref(user));
+        } else if (status === "INVALID_TOKEN")
+          setSubmitError(
+            "Invalid or expired token, please restart the process."
+          );
+        else if (status === "EXPIRED")
+          setSubmitError(
+            "Email change token expired, please restart the process."
+          );
+        else setSubmitError("An unknown error occurred");
       })
       .catch(
         (error: unknown) =>
           error instanceof Error &&
           isApolloError(error) &&
           setSubmitError(error.message)
       );
+    return false;
   };
 
   return (
     <div className="LoginPrompt">
-      <Title page="Confirm Email" />
-      <Form className="align-self-center col-8 mx-auto" onSubmit={onSubmit}>
-        <Row>
-          <Col
-            xs={{ span: 3, offset: 9 }}
-            className="justify-content-end mt-2 d-flex"
-          >
-            <Button type="submit" disabled={loading}>
-              Confirm email change
-            </Button>
-          </Col>
-        </Row>
+      <Title page="Confirm Email change" />
+      <Form className="align-self-center col-8 mx-auto">
+        <h5>Confirm change email</h5>
+        <p>Click the button to confirm email change.</p>
+        <Button type="submit" disabled={loading} onClick={onSubmit}>
+          Complete email change
+        </Button>
       </Form>
     </div>
   );

frontend/src/pages/users/UserValidateChangeEmail.tsx

@@ -35,15 +35,33 @@ const ValidateChangeEmail: FC<{ user: User }> = () => {
 
   const [validateChangeEmail, { loading }] = useValidateChangeEmail();
 
-  if (submitted) return <div>Submitted!</div>;
+  if (submitted)
+    return (
+      <div className="LoginPrompt">
+        <div className="align-self-center col-8 mx-auto">
+          <h5>Confirmation email sent</h5>
+          <p>Please check your email to complete the email change.</p>
+        </div>
+      </div>
+    );
 
   if (!token) return <ErrorMessage error="Missing token" />;
 
   const onSubmit = (formData: ValidateChangeEmailFormData) => {
     setSubmitError(undefined);
     validateChangeEmail({ variables: { ...formData } })
-      .then(() => {
-        setQueryParam("submitted", true);
+      .then((res) => {
+        const status = res.data?.validateChangeEmail;
+        if (status === "CONFIRM_NEW") setQueryParam("submitted", true);
+        else if (status === "INVALID_TOKEN")
+          setSubmitError(
+            "Invalid or expired token, please restart the process."
+          );
+        else if (status === "EXPIRED")
+          setSubmitError(
+            "Email change token expired, please restart the process."
+          );
+        else setSubmitError("An unknown error occurred");
       })
       .catch(
         (error: unknown) =>
@@ -66,22 +84,17 @@ const ValidateChangeEmail: FC<{ user: User }> = () => {
         className="align-self-center col-8 mx-auto"
         onSubmit={handleSubmit(onSubmit)}
       >
+        <h5>Change email</h5>
+        <p>Enter a new email address to complete email change.</p>
         <Form.Control type="hidden" value={token} {...register("token")} />
 
         <Form.Group controlId="email" className="mt-2">
-          <Row>
-            <Col xs={4}>
-              <Form.Label>New Email:</Form.Label>
-            </Col>
-            <Col xs={8}>
-              <Form.Control
-                className={cx({ "is-invalid": errors?.email })}
-                type="email"
-                placeholder="Email"
-                {...register("email")}
-              />
-            </Col>
-          </Row>
+          <Form.Control
+            className={cx({ "is-invalid": errors?.email })}
+            type="email"
+            placeholder="New email"
+            {...register("email")}
+          />
         </Form.Group>
 
         {errorList.map((error) => (

pkg/email/email.go

@@ -54,11 +54,11 @@ func (m *Manager) Send(email, subject, text, html string) error {
 
 	message := mail.NewMsg()
 	if err := message.FromFormat(config.GetTitle(), config.GetEmailFrom()); err != nil {
-		return errors.New(fmt.Sprintf("failed to set From address: %s", err))
+		return fmt.Errorf("failed to set From address: %w", err)
 	}
 
 	if err := message.To(email); err != nil {
-		return errors.New(fmt.Sprintf("failed to set To address: %s", err))
+		return fmt.Errorf("failed to set To address: %w", err)
 	}
 
 	message.Subject(subject)
@@ -68,11 +68,11 @@ func (m *Manager) Send(email, subject, text, html string) error {
 	client, err := mail.NewClient(config.GetEmailHost(), mail.WithPort(config.GetEmailPort()), mail.WithSMTPAuth(mail.SMTPAuthPlain),
 		mail.WithUsername(config.GetEmailUser()), mail.WithPassword(config.GetEmailPassword()))
 	if err != nil {
-		return errors.New(fmt.Sprintf("failed to create mail client: %s", err))
+		return fmt.Errorf("failed to create mail client: %w", err)
 	}
 
 	if err := client.DialAndSend(message); err != nil {
-		return errors.New(fmt.Sprintf("failed to send mail: %s", err))
+		return fmt.Errorf("failed to send mail: %w", err)
 	}
 
 	// add to email map

pkg/user/activation.go

@@ -113,10 +113,13 @@ func generateActivationKey(tqb models.UserTokenCreator, email string, inviteKey
 		Type:      models.UserTokenTypeNewUser,
 	}
 
-	activation.SetData(models.NewUserTokenData{
+	err = activation.SetData(models.NewUserTokenData{
 		Email:     email,
 		InviteKey: inviteKey,
 	})
+	if err != nil {
+		return nil, err
+	}
 
 	token, err := tqb.Create(activation)
 	if err != nil {
@@ -137,6 +140,9 @@ func ActivateNewUser(fac models.Repo, name string, id uuid.UUID, password string
 	}
 
 	data, err := t.GetNewUserTokenData()
+	if err != nil {
+		return nil, err
+	}
 
 	if t == nil || t.Type != models.UserTokenTypeNewUser {
 		return nil, ErrInvalidActivationKey
@@ -253,9 +259,12 @@ func generateResetPasswordActivationKey(aqb models.UserTokenCreator, userID uuid
 		Type:      models.UserTokenTypeResetPassword,
 	}
 
-	activation.SetData(models.UserTokenData{
+	err = activation.SetData(models.UserTokenData{
 		UserID: userID,
 	})
+	if err != nil {
+		return nil, err
+	}
 
 	obj, err := aqb.Create(activation)
 	if err != nil {