Merge branch 'development' into 'master'

Development

See merge request !1

web/src/components/Console.tsx

@@ -8,7 +8,6 @@ import {
   Popover,
   Position,
   Avatar,
-  Portal,
   Button,
   toaster,
   CornerDialog,
@@ -16,12 +15,6 @@ import {
 import {
   FullCircleIcon,
   UngroupObjectsIcon,
-  RefreshIcon,
-  SwapVerticalIcon,
-  FullscreenIcon,
-  MinimizeIcon,
-  LogOutIcon,
-  CogIcon,
   ErrorIcon,
   DisableIcon,
 } from 'evergreen-ui';
@@ -132,7 +125,6 @@ const Console = (props: RouteComponentProps) => {
     const _t = sessionStorage.getItem(Config.jwt.tokenName);
     if (_t === null) {
       toaster.danger(t('console:web_socket_expire'));
-      // setConnecting(ConnStatus.ConnectionLost)
       props.history.push('/signin');
       return;
     }
@@ -153,11 +145,26 @@ const Console = (props: RouteComponentProps) => {
       setConnecting(ConnStatus.ConnectionAlive);
     };
 
-    ws.onclose = () => {
+    ws.onclose = (ev) => {
       term.setOption('cursorBlink', false);
       sessionStorage.removeItem(Config.jwt.tokenName);
       setConnecting(ConnStatus.ConnectionLost);
       setShowCornerDialog(true);
+
+      send(ev);
+    };
+
+    const send = (e: CloseEvent) => {
+      e.preventDefault();
+
+      if (window && window.parent) {
+        window.parent.postMessage(
+          {
+            message: 'close',
+          },
+          '*',
+        );
+      }
     };
 
     sshWebSocket.bindTerminal(term, ws!, true, -1);
@@ -219,16 +226,6 @@ const Console = (props: RouteComponentProps) => {
                 </Menu.Item>
               </Menu.Group>
               <Menu.Divider />
-              <Menu.Group>
-                <Menu.Item
-                  icon={LogOutIcon}
-                  intent="danger"
-                  onSelect={() => {
-                    toaster.notify('under develop!', { id: 'dev' });
-                  }}>
-                  {t('console:nav_user_exit')}
-                </Menu.Item>
-              </Menu.Group>
             </Menu>
           }>
           <Avatar
@@ -266,14 +263,6 @@ const Console = (props: RouteComponentProps) => {
         <Button intent="success" onClick={() => setSideSheetShwon(true)}>
           SFTP
         </Button>
-        <Button
-          intent="none"
-          marginLeft="0.05rem"
-          onClick={() => {
-            toaster.notify('under develop!', { id: 'dev' });
-          }}>
-          Paste
-        </Button>
         <Pane flex="1"></Pane>
         <Text marginRight="0.4rem">active time: 0:00:00</Text>
       </Pane>
@@ -295,55 +284,6 @@ const Console = (props: RouteComponentProps) => {
         onCloseComplete={() => setShowCornerDialog(false)}>
         {t('console:ssh_disconn_dialog_text')}
       </CornerDialog>
-      <Portal>
-        <Pane
-          className="toolbar"
-          zIndex={10}
-          borderRadius={4}
-          display="flex"
-          flexDirection="column"
-          background="#2d8cf0"
-          padding={0}
-          position="fixed"
-          top={120}
-          right={64}>
-          <Button
-            appearance="minimal"
-            marginY={8}
-            className="toolbar-item"
-            onClick={() => {
-              toaster.notify('under develop!', { id: 'dev' });
-            }}>
-            <RefreshIcon color="white" size={10} />
-          </Button>
-          <Button
-            appearance="minimal"
-            marginY={8}
-            className="toolbar-item"
-            onClick={() => setSideSheetShwon(true)}>
-            <SwapVerticalIcon color="white" size={10} />
-          </Button>
-          <Button
-            appearance="minimal"
-            marginY={8}
-            className="toolbar-item"
-            onClick={() => {
-              setFullscreen(!fullscreen);
-            }}>
-            {!fullscreen && <FullscreenIcon color="white" size={10} />}
-            {fullscreen && <MinimizeIcon color="white" size={10} />}
-          </Button>
-          <Button
-            appearance="minimal"
-            marginY={8}
-            className="toolbar-item"
-            onClick={() => {
-              toaster.notify('under develop!', { id: 'dev' });
-            }}>
-            <CogIcon color="white" size={10} />
-          </Button>
-        </Pane>
-      </Portal>
     </Pane>
   );
 };

web/src/components/Home.tsx

@@ -3,7 +3,6 @@ import { NavLink, Route, Switch } from 'react-router-dom';
 import { Button, Pane, Heading } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
-import Footer from './layout/Footer';
 import Header from './layout/Header';
 import Signin from './Signin';
 
@@ -48,14 +47,10 @@ const Home = () => {
       </header>
       <main className="home-content-main main-content-container">
         <Switch>
-          <Route exact path={`/`} component={MainPage} />
+          <Route exact path={`/`} component={Signin} />
           <Route path={`/signin`} component={Signin} />
         </Switch>
       </main>
-      {/*<footer className="home-content-footer">
-        <Footer />
-  </footer>
-  */}
     </div>
   );
 };

web/src/components/Signin.tsx

-import React, { useState } from 'react';
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import {
-  //Button,
-  Pane,
-  Heading,
-  //TextInputField,
-  //GeolocationIcon,
-  //FormField,
-  toaster,
-} from 'evergreen-ui';
+import { Pane, Heading, toaster } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
 import Config from '../config/config';
 import Utils from '../libs/utils';
 import apiRouters from '../config/api_routers';
 
-{
-  /*interface FieldState {
-  isInvalid: boolean;
-  validationMessage: string | undefined;
-  value: string;
-}
-
-const checkHostFormat = (host: string) => {
-  if (!host || host === '') {
-    return [false, '', 22];
-  }
-  const hostList = host.split(':');
-  if (hostList.length === 1) {
-    return [true, host, 22];
-  }
-  const ok =
-    hostList.length === 2 &&
-    hostList[1].length !== 0 &&
-    !isNaN(Number(hostList[1]));
-  if (ok) {
-    return [true, hostList[0], parseInt(hostList[1])];
-  } else {
-    return [false, host, 22];
-  }
-};*/
-}
 const Signin = (props: RouteComponentProps) => {
   React.useEffect(() => {
     window.addEventListener('message', (event) => {
-      if (event.origin !== process.env.REACT_APP_CLUSTER_URL) return;
-
+      const baseUrl = process.env.REACT_APP_CLUSTER_URL as string;
+      console.log(event.origin);
+      console.log(process.env.REACT_APP_CLUSTER_URL);
+      console.log('-----');
+      console.log(!event.origin.includes(baseUrl));
+      console.log('-----');
+      console.log(event.data);
+      console.log('-----');
+      if (!event.origin.includes(process.env.REACT_APP_CLUSTER_URL!)) return;
       doSignin(event.data);
     });
   }, []);
 
   const { t } = useTranslation(['signin']);
-
   const doSignin = (data: Record<string, string>) => {
-    console.log(data);
     Utils.axiosInstance
       .post(Utils.loadUrl(apiRouters.router.sign_in, null), {
-        // _xsrf: Utils.base64Decode(xsrf.split("|")[0]), // todo
         host: data.host,
         port: data.port,
         username: data.username,
         passwd: data.password,
       })
       .then((response) => {
+        console.log(response);
         try {
           if (!response.data || response.data.has_error) {
-            // self.$Loading.error();
             switch (response.data.message) {
               case 0:
+                console.log(t('signin:form_has_error'));
                 toaster.danger(t('signin:form_has_error'));
                 break;
               case 1:
+                console.log(t('signin:form_error_passport'));
                 toaster.danger(t('signin:form_error_passport'));
                 break;
               case 2:
+                console.log(t('signin:form_error_ssh_login'));
                 toaster.danger(t('signin:form_error_ssh_login'));
                 break;
             }
+
+            if (window && window.parent) {
+              console.log('Send Message has error');
+              window.parent.postMessage(
+                {
+                  message: 'close',
+                },
+                '*',
+              );
+            }
+            props.history.push('/');
           } else {
             if (!response.data.addition) {
-              // self.$Loading.error();
               toaster.danger(t('signin:form_error_remote_server'));
+              if (window && window.parent) {
+                console.log('Send Message Else');
+                window.parent.postMessage(
+                  {
+                    message: 'close',
+                  },
+                  '*',
+                );
+              }
+              props.history.push('/');
             } else {
-              // self.$Loading.finish();
               toaster.success(t('signin:signin_success'));
               localStorage.setItem('user.host', data.host);
               localStorage.setItem('user.username', data.username);
@@ -95,13 +87,33 @@ const Signin = (props: RouteComponentProps) => {
             }
           }
         } catch (e) {
-          // self.$Loading.error();
+          console.log(e.message);
           toaster.danger(t('signin:form_error_ssh_login'));
+          if (window && window.parent) {
+            console.log('Send Message Error 1');
+            window.parent.postMessage(
+              {
+                message: 'close',
+              },
+              '*',
+            );
+          }
+          props.history.push('/');
         }
       })
       .catch((e: Error) => {
-        // self.$Loading.error();
+        console.log(e.message);
         toaster.danger(t('signin:form_error_ssh_login') + ': ' + e.message);
+        if (window && window.parent) {
+          console.log('Send Message Error 2');
+          window.parent.postMessage(
+            {
+              message: 'close',
+            },
+            '*',
+          );
+        }
+        props.history.push('/');
       });
   };
 
@@ -116,65 +128,7 @@ const Signin = (props: RouteComponentProps) => {
         <Heading marginBottom="0.6rem" marginTop="0.6rem" size={700}>
           {t('signin:form_title')}
         </Heading>
-        {/*
-        <form
-          onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-            event.preventDefault();
-            doSignin();
-            return false;
-          }}>
-          <Pane textAlign="left">
-            <TextInputField
-              value={hostField.value}
-              isInvalid={hostField.isInvalid}
-              validationMessage={hostField.validationMessage}
-              label={t('signin:form_fullhost_label')}
-              onChange={onHostChanged}
-              onBlur={onHostChanged}
-              placeholder={t('signin:form_fullhost_ph')}
-              marginBottom="8px"
-            />
-            <TextInputField
-              value={unameField.value}
-              isInvalid={unameField.isInvalid}
-              label={t('signin:form_username_label')}
-              onChange={onUsernameChanged}
-              onBlur={onUsernameChanged}
-              placeholder={t('signin:form_username_ph')}
-              validationMessage={unameField.validationMessage}
-              marginBottom="8px"
-            />
-            <TextInputField
-              label={t('signin:form_passwd_label')}
-              type="password"
-              placeholder={t('signin:form_passwd_ph')}
-              marginBottom="24px"
-              onChange={onPasswdChanged}
-              onBlur={onPasswdChanged}
-              onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>): void => {
-                // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
-                if (event.key === 'Enter') {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  doSignin();
-                }
-              }}
-            />
-          </Pane>
-          <FormField>
-            <Button
-              isLoading={submitLoading}
-              type="submit"
-              width="100%"
-              appearance="primary"
-              justifyContent="center"
-              intent="success"
-              iconBefore={GeolocationIcon}>
-              {t('signin:form_submit_btn')}
-            </Button>
-          </FormField>
-        </form>
-        */}
+        <span>Waiting for loging - Test 8</span>!
       </div>
     </Pane>
   );