From 76234892d23382b657b4d3705798a7b33158628f Mon Sep 17 00:00:00 2001
From: jannikb <jb@allgravy.com>
Date: Wed, 25 Oct 2023 17:02:56 +0200
Subject: [PATCH] Add back button to 'Don't have an account' page (#24994)

* Add back button to 'Don't have an account' screen

* update track event based on pr comment

Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>

* fix absolute import

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
---
 .../src/components/access_problem/index.tsx   | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/access_problem/index.tsx b/webapp/channels/src/components/access_problem/index.tsx
index faab5d4e69..9d37d3e687 100644
--- a/webapp/channels/src/components/access_problem/index.tsx
+++ b/webapp/channels/src/components/access_problem/index.tsx
@@ -1,20 +1,44 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {useIntl} from 'react-intl';
+import {useHistory} from 'react-router-dom';
 
 import {trackEvent} from 'actions/telemetry_actions';
 
 import AccessProblemSVG from 'components/common/svg_images_components/access_problem_svg';
+import type {CustomizeHeaderType} from 'components/header_footer_route/header_footer_route';
 
 import './access_problem.scss';
 
-const AccessProblem = () => {
+type AccessProblemProps = {
+    onCustomizeHeader?: CustomizeHeaderType;
+}
+
+const AccessProblem = ({
+    onCustomizeHeader,
+}: AccessProblemProps) => {
     const {formatMessage} = useIntl();
+    const history = useHistory();
+
+    const handleHeaderBackButtonOnClick = useCallback(() => {
+        trackEvent('access_problem', 'click_back');
+        history.goBack();
+    }, [history]);
+
     useEffect(() => {
         trackEvent('signup', 'click_login_no_account__closed_server');
     }, []);
+
+    useEffect(() => {
+        if (onCustomizeHeader) {
+            onCustomizeHeader({
+                onBackButtonClick: handleHeaderBackButtonOnClick,
+            });
+        }
+    }, [onCustomizeHeader, handleHeaderBackButtonOnClick]);
+
     return (
         <div className='AccessProblem__body'>
             <AccessProblemSVG/>