Added actions to submit OTC from portal and sign in

Author: troyciesco

apps/portal/src/actions.js

@@ -116,6 +116,55 @@ async function signin({data, api, state}) {
     }
 }
 
+async function verifyOTC({data, api, state}) {
+    const {t} = state;
+
+    try {
+        const response = await api.member.verifyOTC(data);
+
+        if (response.valid && response.success) {
+            // Enhance the redirect URL with current page context
+            let finalRedirectUrl;
+
+            if (response.redirectUrl) {
+                // Parse the provided URL and add our referrer and action
+                const redirectUrl = new URL(response.redirectUrl);
+                redirectUrl.searchParams.set('r', window.location.href);
+                redirectUrl.searchParams.set('action', 'signin');
+                finalRedirectUrl = redirectUrl.href;
+            } else {
+                // Fallback: redirect to current page with success params
+                const fallbackUrl = new URL(window.location.href);
+                fallbackUrl.searchParams.set('success', 'true');
+                fallbackUrl.searchParams.set('action', 'signin');
+                finalRedirectUrl = fallbackUrl.href;
+            }
+
+            window.location.href = finalRedirectUrl;
+
+            return {
+                action: 'verifyOTC:success'
+            };
+        } else {
+            return {
+                action: 'verifyOTC:failed',
+                popupNotification: createPopupNotification({
+                    type: 'verifyOTC:failed', autoHide: false, closeable: true, state, status: 'error',
+                    message: response.message || t('Invalid verification code')
+                })
+            };
+        }
+    } catch (e) {
+        return {
+            action: 'verifyOTC:failed',
+            popupNotification: createPopupNotification({
+                type: 'verifyOTC:failed', autoHide: false, closeable: true, state, status: 'error',
+                message: chooseBestErrorMessage(e, t('Failed to verify code, please try again'), t)
+            })
+        };
+    }
+}
+
 async function signup({data, state, api}) {
     try {
         let {plan, tierId, cadence, email, name, newsletters, offerId} = data;
@@ -579,6 +628,7 @@ const Actions = {
     back,
     signout,
     signin,
+    verifyOTC,
     signup,
     updateSubscription,
     cancelSubscription,

apps/portal/src/components/pages/MagicLinkPage.js

@@ -118,15 +118,11 @@ export default class MagicLinkPage extends React.Component {
                 }], t: this.context.t})
             };
         }, () => {
-            // eslint-disable-next-line no-unused-vars
             const {otc, errors} = this.state;
             const {otcRef} = this.context;
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors && otcRef) {
-                // @TODO: replace with verifyOTC action
-                // For now, just log for development
-                // eslint-disable-next-line no-console
-                console.log('otc_ref and otc submitted');
+                this.context.onAction('verifyOTC', {otc, otcRef});
             }
         }
         );

apps/portal/src/utils/api.js

@@ -316,6 +316,33 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) {
             }
         },
 
+        async verifyOTC({otc, otcRef}) {
+            const url = endpointFor({type: 'members', resource: 'verify-otc'});
+            const body = {
+                otc,
+                otcRef
+            };
+
+            const res = await makeRequest({
+                url,
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+
+            if (res.ok) {
+                return await res.json();
+            } else {
+                const humanError = await HumanReadableError.fromApiResponse(res);
+                if (humanError) {
+                    throw humanError;
+                }
+                throw new Error('Failed to verify code');
+            }
+        },
+
         signout(all = false) {
             const url = endpointFor({type: 'members', resource: 'session'});
             return makeRequest({