Add activation redirect

src/App/redirects/ActivationRedirect.tsx

@@ -0,0 +1,32 @@
+import {
+    generatePath,
+    useNavigate,
+    useParams,
+} from 'react-router-dom';
+
+import routes from '#routes';
+
+interface ActivationParams {
+    userId: string | undefined;
+    token: string | undefined;
+    [key: string]: string | undefined;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { userId, token } = useParams<ActivationParams>();
+    const navigate = useNavigate();
+
+    const activationLink = (userId && token && routes.activation.path) ? ({
+        pathname: (generatePath(routes.activation.path, { userId, token })),
+    })
+        : routes.pageNotFound.path;
+
+    if (activationLink) {
+        navigate(activationLink);
+    }
+
+    return null;
+}
+
+Component.displayName = 'ActivationRedirect';

src/App/routes/index.tsx

@@ -255,19 +255,19 @@ const recoverAccount = customWrapRoute({
     },
 });
 
-const resendValidationEmail = customWrapRoute({
-    parent: rootLayout,
-    path: 'resend-validation-email',
-    component: {
-        render: () => import('#views/ResendValidationEmail'),
-        props: {},
-    },
-    wrapperComponent: Auth,
-    context: {
-        title: 'Resend Validation Email',
-        visibility: 'is-not-authenticated',
-    },
-});
+// const resendValidationEmail = customWrapRoute({
+//     parent: rootLayout,
+//     path: 'resend-validation-email',
+//     component: {
+//         render: () => import('#views/ResendValidationEmail'),
+//         props: {},
+//     },
+//     wrapperComponent: Auth,
+//     context: {
+//         title: 'Resend Validation Email',
+//         visibility: 'is-not-authenticated',
+//     },
+// });
 
 const cookiePolicy = customWrapRoute({
     parent: rootLayout,
@@ -310,6 +310,33 @@ const resetPasswordRedirect = customWrapRoute({
         visibility: 'is-not-authenticated',
     },
 });
+const activation = customWrapRoute({
+    parent: rootLayout,
+    path: 'activation/:userId/:token',
+    component: {
+        render: () => import('#views/Activation'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Activation',
+        visibility: 'anything',
+    },
+});
+
+const activationRedirect = customWrapRoute({
+    parent: rootLayout,
+    path: 'permalink/user-activation/:userId/:token',
+    component: {
+        render: () => import('../redirects/ActivationRedirect'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Activation Redirect',
+        visibility: 'is-not-authenticated',
+    },
+});
 
 const wrappedRoutes = {
     rootLayout,
@@ -325,14 +352,16 @@ const wrappedRoutes = {
     pageNotFound,
     login,
     recoverAccount,
-    resendValidationEmail,
+    // resendValidationEmail,
     mySubscription,
     cookiePolicy,
     register,
     historicalAlerts,
     subscriptionDetail,
     recoverAccountConfirm,
     resetPasswordRedirect,
+    activationRedirect,
+    activation,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/views/Activation/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "activation",
+    "strings": {
+        "activationSuccessMessage":"Activation successful!",
+        "activationFailMessage":"An error occurred during activation. Please try again."
+    }
+}
+

src/views/Activation/index.tsx

@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+import {
+    useNavigate,
+    useParams,
+} from 'react-router-dom';
+import {
+    gql,
+    useMutation,
+} from '@apollo/client';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import {
+    ActivationMutation,
+    ActivationMutationVariables,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+
+import i18n from './i18n.json';
+
+interface ActivationParams {
+    uuid: string | undefined;
+    token: string | undefined;
+    [key: string]: string | undefined;
+}
+
+const ACCOUNT_ACTIVATION_MUTATION = gql`
+    mutation AccountActivation($data: UserActivationInput!) {
+        public {
+            accountActivation(data: $data) {
+                errors
+                ok
+            }
+        }
+    }
+`;
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { userId, token } = useParams<ActivationParams>();
+    const navigate = useNavigate();
+    const alert = useAlert();
+    const strings = useTranslation(i18n);
+
+    const [
+        activate,
+    ] = useMutation<ActivationMutation, ActivationMutationVariables>(ACCOUNT_ACTIVATION_MUTATION, {
+        onCompleted: (response) => {
+            const activateRes = response?.public?.accountActivation;
+            if (!activateRes) {
+                alert.show(
+                    strings.activationFailMessage,
+                    { variant: 'danger' },
+                );
+                return;
+            }
+            if (activateRes.ok) {
+                alert.show(
+                    strings.activationSuccessMessage,
+                    { variant: 'success' },
+                );
+                navigate('/login');
+            } else {
+                alert.show(
+                    strings.activationFailMessage,
+                    { variant: 'danger' },
+                );
+            }
+        },
+        onError: () => {
+            alert.show(
+                strings.activationFailMessage,
+                { variant: 'danger' },
+            );
+            navigate('/login');
+        },
+    });
+
+    useEffect(() => {
+        if (userId && token) {
+            activate({
+                variables: {
+                    data: {
+                        uuid: userId,
+                        token,
+                    },
+                },
+            });
+        }
+    }, [token, activate, userId]);
+
+    return null;
+}
+
+Component.displayName = 'Activation';

src/views/Login/index.tsx

@@ -214,13 +214,13 @@ export function Component() {
                     >
                         {strings.loginForgotUserPass}
                     </Link>
-                    <Link
+                    {/* <Link
                         to="resendValidationEmail"
                         title={strings.loginResendValidationTitle}
                         withUnderline
                     >
                         {strings.loginResendValidation}
-                    </Link>
+                    </Link> */}
                 </div>
                 <div className={styles.actions}>
                     <Button