fix(ui): login/logout bug when base HREF set. Fixes #14897 (cherry-pick #14909 for 3.7)

ui/src/login/login.test.tsx

@@ -0,0 +1,80 @@
+import {fireEvent, render} from '@testing-library/react';
+import {createMemoryHistory, History} from 'history';
+import React from 'react';
+
+import {deleteCookie, setCookie} from '../shared/cookie';
+import {Login} from './login';
+
+jest.mock('../shared/cookie');
+
+describe('Login', () => {
+    const LoginWithHistory = (history: History) => <Login history={history} match={null} location={history.location} />;
+
+    beforeEach(() => {
+        const base = document.createElement('base');
+        base.setAttribute('href', '/');
+        document.head.appendChild(base);
+    });
+
+    afterEach(() => {
+        document.querySelector('base').remove();
+    });
+
+    describe('SSO login', () => {
+        it('button has right href', () => {
+            const {getAllByText} = render(LoginWithHistory(createMemoryHistory()));
+            const button = getAllByText('Login')[3];
+            expect(button.getAttribute('href')).toBe('/oauth2/redirect?redirect=%2Fworkflows');
+        });
+
+        it('button has right href with custom <base>', () => {
+            document.querySelector('base').setAttribute('href', '/test/');
+            const {getAllByText} = render(LoginWithHistory(createMemoryHistory()));
+
+            const button = getAllByText('Login')[3];
+            expect(button.getAttribute('href')).toBe('/test/oauth2/redirect?redirect=%2Ftest%2Fworkflows');
+        });
+
+        it('button has right href when ?redirect set', () => {
+            const history = createMemoryHistory();
+            history.push('/login?redirect=/workflow-templates');
+            const {getAllByText} = render(LoginWithHistory(history));
+
+            const button = getAllByText('Login')[3];
+            expect(button.getAttribute('href')).toBe('/oauth2/redirect?redirect=%2Fworkflow-templates');
+        });
+    });
+
+    describe('token login', () => {
+        it('responds to click', () => {
+            const {getAllByText, getByRole} = render(LoginWithHistory(createMemoryHistory()));
+
+            const button = getAllByText('Login')[4];
+            fireEvent.change(getByRole('textbox'), {target: {value: 'test-token'}});
+            fireEvent.click(button);
+
+            expect(button.getAttribute('href')).toBe('/');
+            expect(setCookie).toHaveBeenCalledWith('authorization', 'test-token');
+        });
+
+        it('responds to click with custom <base>', () => {
+            document.querySelector('base').setAttribute('href', '/test/argo');
+            const {getAllByText, getByRole} = render(LoginWithHistory(createMemoryHistory()));
+
+            const button = getAllByText('Login')[4];
+            fireEvent.change(getByRole('textbox'), {target: {value: 'test123'}});
+            fireEvent.click(button);
+
+            expect(button.getAttribute('href')).toBe('/test/argo');
+            expect(setCookie).toHaveBeenCalledWith('authorization', 'test123');
+        });
+    });
+
+    describe('logout', () => {
+        it('responds to button click', () => {
+            const {getByText} = render(LoginWithHistory(createMemoryHistory()));
+            fireEvent.click(getByText('Logout'));
+            expect(deleteCookie).toHaveBeenCalledWith('authorization');
+        });
+    });
+});

ui/src/login/login.tsx

@@ -1,26 +1,18 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import * as React from 'react';
+import {useState} from 'react';
+import {RouteComponentProps} from 'react-router';
 
 import {uiUrl, uiUrlWithParams} from '../shared/base';
+import {deleteCookie, setCookie} from '../shared/cookie';
 import {useCollectEvent} from '../shared/use-collect-event';
 
 import './login.scss';
 
-function logout() {
-    document.cookie = 'authorization=;Max-Age=0';
-    document.location.reload();
-}
-function user(token: string) {
-    const path = uiUrl('');
-    document.cookie = 'authorization=' + token + ';SameSite=Strict;path=' + path;
-    document.location.href = path;
-}
-function getRedirect(): URLSearchParams {
-    const urlParams = new URLSearchParams(document.location.search);
-    return new URLSearchParams({redirect: urlParams.get('redirect') ?? '/workflows'});
-}
-
-export function Login() {
+export function Login({location, history}: RouteComponentProps<any>) {
+    const urlParams = new URLSearchParams(location.search);
+    const redirect = new URLSearchParams({redirect: urlParams.get('redirect') ?? uiUrl('workflows')});
+    const [token, setToken] = useState('');
     useCollectEvent('openedLogin');
     return (
         <Page title='Login' toolbar={{breadcrumbs: [{title: 'Login'}]}}>
@@ -41,13 +33,9 @@ export function Login() {
                             If your organisation has configured <b>single sign-on</b>:
                         </p>
                         <div>
-                            <button
-                                className='argo-button argo-button--base-o'
-                                onClick={() => {
-                                    document.location.href = uiUrlWithParams('oauth2/redirect', getRedirect());
-                                }}>
+                            <a className='argo-button argo-button--base-o' href={uiUrlWithParams('oauth2/redirect', redirect)}>
                                 <i className='fa fa-sign-in-alt' /> Login
-                            </button>
+                            </a>
                         </div>
                     </div>
                     <div className='columns small-4'>
@@ -56,20 +44,25 @@ export function Login() {
                             <a href='https://argo-workflows.readthedocs.io/en/latest/access-token/#token-creation'>here</a> and paste in this box:
                         </p>
                         <div>
-                            <textarea id='token' cols={32} rows={8} />
+                            <textarea id='token' cols={32} rows={8} value={token} onChange={e => setToken(e.target.value)} />
                         </div>
                         <div>
-                            <button className='argo-button argo-button--base-o' onClick={() => user((document.getElementById('token') as HTMLInputElement).value)}>
+                            <a className='argo-button argo-button--base-o' href={uiUrl('')} onClick={() => setCookie('authorization', token)}>
                                 <i className='fa fa-sign-in-alt' /> Login
-                            </button>
+                            </a>
                         </div>
                     </div>
                     <div className='columns small-4'>
                         <div>
                             <p>Something wrong? Try logging out and logging back in:</p>
-                            <button className='argo-button argo-button--base-o' onClick={() => logout()}>
+                            <a
+                                className='argo-button argo-button--base-o'
+                                onClick={() => {
+                                    deleteCookie('authorization');
+                                    history.go(0);
+                                }}>
                                 <i className='fa fa-sign-out-alt' /> Logout
-                            </button>
+                            </a>
                         </div>
                     </div>
                 </div>

ui/src/shared/cookie.ts

@@ -11,3 +11,13 @@ export const getCookie = (name: string) =>
 export function setCookie(name: string, value: string) {
     document.cookie = name + '=' + value + ';SameSite=Strict;path=' + uiUrl('');
 }
+
+export function deleteCookie(name: string) {
+    // "If the user agent receives a new cookie with the same cookie-name,
+    // domain-value, and path-value as a cookie that it has already stored, the
+    // existing cookie is evicted and replaced with the new cookie. Notice that
+    // servers can delete cookies by sending the user agent a new cookie with an
+    // Expires attribute with a value in the past."
+    // Spec: https://httpwg.org/specs/rfc6265.html#sane-set-cookie-semantics
+    document.cookie = name + '=;Max-Age=0;path=' + uiUrl('');
+}