mirror of
https://github.com/wavetermdev/backup.git
synced 2026-08-05 13:57:07 -07:00
add connection modal (#64)
* various improvements * animation menu on close * finish custom dropdown * minor change * minor fix * add error support for dropdown * create remote modal * NumberField component and more on add remote connection modal implementation * extend TextField instead. dobounce should be handled by the user not the component * PasswordField * remove used code. fix ssh key file field issue * style buttons. fix modal height issue * use react portal for dropdown menu * remove debugging code * tooltip implementation * put back modal background * (sawka) add autofocus attribute to textfield. change label color to color-secondary. fix file menu name. fix typescript error in basicrenderer
This commit is contained in:
Red J Adaya
+14
-2
@@ -24,7 +24,13 @@ import {
|
||||
import { RemotesModal } from "./connections/connections";
|
||||
import { TosModal } from "./common/modals/modals";
|
||||
import { MainSideBar } from "./sidebar/sidebar";
|
||||
import { DisconnectedModal, ClientStopModal, AlertModal, AboutModal } from "./common/modals/modals";
|
||||
import {
|
||||
DisconnectedModal,
|
||||
ClientStopModal,
|
||||
AlertModal,
|
||||
AboutModal,
|
||||
CreateRemoteConnModal,
|
||||
} from "./common/modals/modals";
|
||||
import { ErrorBoundary } from "./common/error/errorboundary";
|
||||
import "./app.less";
|
||||
|
||||
@@ -79,7 +85,10 @@ class App extends React.Component<{}, {}> {
|
||||
let sessionSettingsModal = GlobalModel.sessionSettingsModal.get();
|
||||
let lineSettingsModal = GlobalModel.lineSettingsModal.get();
|
||||
let clientSettingsModal = GlobalModel.clientSettingsModal.get();
|
||||
let remotesModal = GlobalModel.remotesModalModel.isOpen();
|
||||
let remotesModel = GlobalModel.remotesModalModel;
|
||||
let remotesModal = remotesModel.isOpen();
|
||||
let selectedRemoteId = remotesModel.selectedRemoteId.get();
|
||||
let remoteEdit = remotesModel.remoteEdit.get();
|
||||
let disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
|
||||
let hasClientStop = GlobalModel.getHasClientStop();
|
||||
let dcWait = this.dcWait.get();
|
||||
@@ -127,6 +136,9 @@ class App extends React.Component<{}, {}> {
|
||||
<If condition={GlobalModel.aboutModalOpen.get()}>
|
||||
<AboutModal />
|
||||
</If>
|
||||
<If condition={remoteEdit !== null && !remoteEdit.old}>
|
||||
<CreateRemoteConnModal model={remotesModel} remoteEdit={remoteEdit} />
|
||||
</If>
|
||||
<If condition={screenSettingsModal != null}>
|
||||
<ScreenSettingsModal
|
||||
key={screenSettingsModal.sessionId + ":" + screenSettingsModal.screenId}
|
||||
|
||||
+215
-23
@@ -257,20 +257,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button.is-wave-green {
|
||||
.wave-button {
|
||||
display: flex;
|
||||
padding: 6px 16px !important;
|
||||
color: @term-bright-white !important;
|
||||
color: @term-white !important;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-radius: 6px !important;
|
||||
height: auto !important;
|
||||
|
||||
&:hover {
|
||||
color: @term-white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-button.is-wave-green {
|
||||
color: @term-bright-white !important;
|
||||
background: @term-green !important;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
|
||||
|
||||
&:hover {
|
||||
background-color: @term-green;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.8) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.6) inset;
|
||||
color: @term-bright-white !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -625,17 +633,173 @@
|
||||
}
|
||||
}
|
||||
|
||||
.textfield {
|
||||
.wave-dropdown {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
height: 44px;
|
||||
width: 412px;
|
||||
border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
|
||||
border-radius: 6px;
|
||||
background: var(--element-hover-2, rgba(255, 255, 255, 0.06));
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
font-size: 12.5px;
|
||||
transition: all 0.3s;
|
||||
color: @term-white;
|
||||
line-height: 10px;
|
||||
|
||||
&.float {
|
||||
font-size: 10px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&.offset-left {
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
&-display {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 5px;
|
||||
|
||||
&.offset-left {
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s;
|
||||
pointer-events: none;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow-rotate {
|
||||
transform: translateY(-50%) rotate(180deg); // Rotate the arrow when dropdown is open
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
min-width: 120px;
|
||||
padding: 5px 8px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
border-radius: 6px;
|
||||
|
||||
&-highlighted,
|
||||
&:hover {
|
||||
background: var(--element-active, rgba(241, 246, 243, 0.08));
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-input-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wave-input-decoration.end-position {
|
||||
margin-right: 44px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wave-input-decoration.start-position {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-error {
|
||||
border-color: @term-red;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @term-green;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
margin-top: 2px;
|
||||
padding: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
padding: 6px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
border-radius: 6px;
|
||||
background: var(--olive-dark-1, #151715);
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 8px 0px rgba(0, 0, 0, 0.35), 0px 0px 0.5px 0px #fff inset,
|
||||
0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
animation-fill-mode: forwards;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.wave-dropdown-menu-close {
|
||||
z-index: 0;
|
||||
animation: waveDropdownMenuFadeOut 0.3s ease-out;
|
||||
}
|
||||
|
||||
.wave-textfield.wave-password {
|
||||
.wave-textfield-inner-eye {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 52%;
|
||||
transform: translateY(-50%);
|
||||
transition: transform 0.3s;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-input-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wave-input-decoration.end-position {
|
||||
margin-right: 47px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wave-input-decoration.start-position {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wave-textfield {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid @term-white;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
background-color: transparent;
|
||||
height: 44px;
|
||||
min-width: 412px;
|
||||
gap: 6px;
|
||||
border: 1px solid var(--element-separator, rgba(241, 246, 243, 0.15));
|
||||
border-radius: 6px;
|
||||
background: var(--element-hover-2, rgba(255, 255, 255, 0.06));
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
|
||||
&.focused {
|
||||
border-color: @term-green;
|
||||
@@ -645,20 +809,20 @@
|
||||
border-color: @term-red;
|
||||
}
|
||||
|
||||
.textfield-inner {
|
||||
&-inner {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
|
||||
.textfield-label {
|
||||
&-label {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
font-size: 12.5px;
|
||||
transition: all 0.3s;
|
||||
color: @term-white;
|
||||
color: @text-secondary;
|
||||
line-height: 10px;
|
||||
|
||||
&.float {
|
||||
@@ -666,12 +830,12 @@
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&.start {
|
||||
&.offset-left {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.textfield-input {
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: none;
|
||||
@@ -682,23 +846,51 @@
|
||||
color: @term-bright-white;
|
||||
line-height: 20px;
|
||||
|
||||
&.start {
|
||||
&.offset-left {
|
||||
padding: 5px 16px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wave-input-decoration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-decoration {
|
||||
.wave-input-decoration.start-position {
|
||||
margin: 0 4px 0 16px;
|
||||
}
|
||||
|
||||
.wave-input-decoration.end-position {
|
||||
margin: 0 16px 0 8px;
|
||||
}
|
||||
|
||||
.wave-tooltip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
margin: 8px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #777;
|
||||
background-color: #444;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
max-width: 300px;
|
||||
|
||||
i {
|
||||
display: inline;
|
||||
font-size: 16px;
|
||||
fill: @base-color;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-edit {
|
||||
@@ -717,11 +909,11 @@
|
||||
|
||||
&.edit-not-active {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
i.fa-pen {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
@@ -733,9 +925,9 @@
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+490
-20
File diff suppressed because it is too large
Load Diff
@@ -182,7 +182,7 @@
|
||||
}
|
||||
|
||||
.modal.wave-modal {
|
||||
.modal-content {
|
||||
.wave-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -192,14 +192,14 @@
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35), 0px 10px 24px 0px rgba(0, 0, 0, 0.45),
|
||||
0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
|
||||
.modal-content-wrapper {
|
||||
.wave-modal-content-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
|
||||
header {
|
||||
.wave-modal-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -208,14 +208,14 @@
|
||||
line-height: 20px;
|
||||
border-bottom: 1px solid rgba(250, 250, 250, 0.1);
|
||||
|
||||
.modal-title {
|
||||
.wave-modal-title {
|
||||
color: @term-bright-white;
|
||||
font-style: normal;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.close-icon-wrapper {
|
||||
.wave-modal-close {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
align-items: center;
|
||||
@@ -223,7 +223,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.wave-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -235,7 +235,7 @@
|
||||
}
|
||||
|
||||
.modal.tos-modal {
|
||||
.modal-content.tos-modal-content {
|
||||
.modal-content.wave-modal-content {
|
||||
padding: 32px 48px;
|
||||
gap: 8px;
|
||||
|
||||
@@ -324,13 +324,13 @@
|
||||
}
|
||||
|
||||
.modal.about-modal {
|
||||
.modal-content.about-modal-content {
|
||||
.about-wave-modal-content {
|
||||
width: 401px;
|
||||
|
||||
.about-content {
|
||||
.about-wave-modal-body {
|
||||
margin-bottom: 0;
|
||||
|
||||
.wave-section {
|
||||
.wave-modal-section {
|
||||
.logo-wrapper {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
@@ -403,7 +403,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wave-section:nth-child(3) {
|
||||
.wave-modal-section:nth-child(3) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
@@ -418,7 +418,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wave-section:last-child {
|
||||
.wave-modal-section:last-child {
|
||||
margin-bottom: 24px;
|
||||
color: @term-white;
|
||||
}
|
||||
@@ -426,6 +426,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wave-modal.crconn-modal {
|
||||
.wave-modal-content.crconn-wave-modal-content {
|
||||
width: 452px;
|
||||
min-height: 411px;
|
||||
overflow: visible;
|
||||
|
||||
.wave-modal-content-inner.crconn-wave-modal-content-inner {
|
||||
display: flex;
|
||||
padding-bottom: 0px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.crconn-wave-modal-body {
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.crconn-wave-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
|
||||
div.button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wave-button {
|
||||
display: flex;
|
||||
padding: 6px 16px;
|
||||
@@ -465,7 +507,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wave-section {
|
||||
.wave-modal-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
@@ -9,11 +9,13 @@ import { If, For } from "tsx-control-statements/components";
|
||||
import cn from "classnames";
|
||||
import dayjs from "dayjs";
|
||||
import localizedFormat from "dayjs/plugin/localizedFormat";
|
||||
import { GlobalModel, GlobalCommandRunner } from "../../../model/model";
|
||||
import { Markdown } from "../common";
|
||||
import { GlobalModel, GlobalCommandRunner, RemotesModalModel } from "../../../model/model";
|
||||
import * as T from "../../../types/types";
|
||||
import { Markdown, InfoMessage } from "../common";
|
||||
import * as util from "../../../util/util";
|
||||
import { Toggle, Checkbox } from "../common";
|
||||
import { ClientDataType } from "../../../types/types";
|
||||
import { TextField, NumberField, InputDecoration, Dropdown, PasswordField, Tooltip } from "../common";
|
||||
|
||||
import close from "../../assets/icons/close.svg";
|
||||
import { ReactComponent as WarningIcon } from "../../assets/icons/line/triangle-exclamation.svg";
|
||||
@@ -22,6 +24,7 @@ import shield from "../../assets/icons/shield_check.svg";
|
||||
import help from "../../assets/icons/help_filled.svg";
|
||||
import github from "../../assets/icons/github.svg";
|
||||
import logo from "../../assets/waveterm-logo-with-bg.svg";
|
||||
import { ReactComponent as AngleDownIcon } from "../../assets/icons/history/angle-down.svg";
|
||||
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
@@ -255,9 +258,9 @@ class TosModal extends React.Component<{}, {}> {
|
||||
|
||||
return (
|
||||
<div className={cn("modal tos-modal wave-modal is-active")}>
|
||||
<div className="modal-background" />
|
||||
<div className="modal-content tos-modal-content">
|
||||
<div className="modal-content-wrapper">
|
||||
<div className="modal-background wave-modal-background" />
|
||||
<div className="modal-content wave-modal-content tos-wave-modal-content">
|
||||
<div className="modal-content-inner wave-modal-content-inner tos-wave-modal-content-inner">
|
||||
<header className="tos-header unselectable">
|
||||
<div className="modal-title">Welcome to Wave Terminal!</div>
|
||||
<div className="modal-subtitle">Lets set everything for you</div>
|
||||
@@ -332,7 +335,7 @@ class TosModal extends React.Component<{}, {}> {
|
||||
<div className="button-wrapper">
|
||||
<button
|
||||
onClick={this.acceptTos}
|
||||
className={cn("button is-wave-green is-outlined is-small", {
|
||||
className={cn("button wave-button is-wave-green is-outlined is-small", {
|
||||
"disabled-button": !this.state.isChecked,
|
||||
})}
|
||||
disabled={!this.state.isChecked}
|
||||
@@ -375,7 +378,7 @@ class AboutModal extends React.Component<{}, {}> {
|
||||
<div className="text-selectable">Client Version v0.4.0 20231016-110014</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
if (isUpToDate) {
|
||||
return (
|
||||
<div className="status updated">
|
||||
@@ -406,17 +409,17 @@ class AboutModal extends React.Component<{}, {}> {
|
||||
render() {
|
||||
return (
|
||||
<div className={cn("modal about-modal wave-modal is-active")}>
|
||||
<div className="modal-background" />
|
||||
<div className="modal-content about-modal-content unselectable">
|
||||
<div className="modal-content-wrapper">
|
||||
<header className="common-header">
|
||||
<div className="modal-title">About</div>
|
||||
<div className="close-icon-wrapper" onClick={this.closeModal}>
|
||||
<div className="modal-background wave-modal-background" />
|
||||
<div className="modal-content wave-modal-content about-wave-modal-content">
|
||||
<div className="modal-content-inner wave-modal-content-inner about-wave-modal-content-inner">
|
||||
<header className="wave-modal-header about-wave-modal-header">
|
||||
<div className="wave-modal-title about-wave-modal-title">About</div>
|
||||
<div className="wave-modal-close about-wave-modal-close" onClick={this.closeModal}>
|
||||
<img src={close} alt="Close (Escape)" />
|
||||
</div>
|
||||
</header>
|
||||
<div className="content about-content">
|
||||
<section className="wave-section about-section">
|
||||
<div className="wave-modal-body about-wave-modal-body">
|
||||
<section className="wave-modal-section about-section">
|
||||
<div className="logo-wrapper">
|
||||
<img src={logo} alt="logo" />
|
||||
</div>
|
||||
@@ -425,10 +428,10 @@ class AboutModal extends React.Component<{}, {}> {
|
||||
<div className="text-standard">Modern Terminal for Seamless Workflow</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="wave-section about-section text-standard">
|
||||
<section className="wave-modal-section about-section text-standard">
|
||||
{this.getStatus(this.isUpToDate())}
|
||||
</section>
|
||||
<section className="wave-section about-section">
|
||||
<section className="wave-modal-section about-section">
|
||||
<a
|
||||
className="wave-button wave-button-link color-standard"
|
||||
href={util.makeExternLink("https://github.com/wavetermdev/waveterm")}
|
||||
@@ -456,7 +459,7 @@ class AboutModal extends React.Component<{}, {}> {
|
||||
License
|
||||
</a>
|
||||
</section>
|
||||
<section className="wave-section about-section text-standard">
|
||||
<section className="wave-modal-section about-section text-standard">
|
||||
Copyright © 2023 Command Line Inc.
|
||||
</section>
|
||||
</div>
|
||||
@@ -467,4 +470,333 @@ class AboutModal extends React.Component<{}, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
export { LoadingSpinner, ClientStopModal, AlertModal, DisconnectedModal, TosModal, AboutModal };
|
||||
@mobxReact.observer
|
||||
class CreateRemoteConnModal extends React.Component<{ model: RemotesModalModel; remoteEdit: T.RemoteEditType }, {}> {
|
||||
tempAlias: OV<string>;
|
||||
tempHostName: OV<string>;
|
||||
tempPort: OV<string>;
|
||||
tempAuthMode: OV<string>;
|
||||
tempConnectMode: OV<string>;
|
||||
tempManualMode: OV<boolean>;
|
||||
tempPassword: OV<string>;
|
||||
tempKeyFile: OV<string>;
|
||||
errorStr: OV<string>;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
let { remoteEdit } = this.props;
|
||||
this.tempAlias = mobx.observable.box("", { name: "CreateRemote-alias" });
|
||||
this.tempHostName = mobx.observable.box("", { name: "CreateRemote-hostName" });
|
||||
this.tempPort = mobx.observable.box("", { name: "CreateRemote-port" });
|
||||
this.tempAuthMode = mobx.observable.box("none", { name: "CreateRemote-authMode" });
|
||||
this.tempConnectMode = mobx.observable.box("auto", { name: "CreateRemote-connectMode" });
|
||||
this.tempKeyFile = mobx.observable.box("", { name: "CreateRemote-keystr" });
|
||||
this.tempPassword = mobx.observable.box("", { name: "CreateRemote-password" });
|
||||
this.errorStr = mobx.observable.box(remoteEdit.errorstr, { name: "CreateRemote-errorStr" });
|
||||
}
|
||||
|
||||
remoteCName(): string {
|
||||
let hostName = this.tempHostName.get();
|
||||
if (hostName == "") {
|
||||
return "[no host]";
|
||||
}
|
||||
if (hostName.indexOf("@") == -1) {
|
||||
hostName = "[no user]@" + hostName;
|
||||
}
|
||||
return hostName;
|
||||
}
|
||||
|
||||
getErrorStr(): string {
|
||||
if (this.errorStr.get() != null) {
|
||||
return this.errorStr.get();
|
||||
}
|
||||
return this.props.remoteEdit.errorstr;
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
submitRemote(): void {
|
||||
mobx.action(() => {
|
||||
this.errorStr.set(null);
|
||||
})();
|
||||
let authMode = this.tempAuthMode.get();
|
||||
let cname = this.tempHostName.get();
|
||||
if (cname == "") {
|
||||
this.errorStr.set("You must specify a 'user@host' value to create a new connection");
|
||||
return;
|
||||
}
|
||||
let kwargs: Record<string, string> = {};
|
||||
kwargs["alias"] = this.tempAlias.get();
|
||||
if (this.tempPort.get() != "" && this.tempPort.get() != "22") {
|
||||
kwargs["port"] = this.tempPort.get();
|
||||
}
|
||||
if (authMode == "key" || authMode == "key+password") {
|
||||
if (this.tempKeyFile.get() == "") {
|
||||
this.errorStr.set("When AuthMode is set to 'key', you must supply a valid key file name.");
|
||||
return;
|
||||
}
|
||||
kwargs["key"] = this.tempKeyFile.get();
|
||||
} else {
|
||||
kwargs["key"] = "";
|
||||
}
|
||||
if (authMode == "password" || authMode == "key+password") {
|
||||
if (this.tempPassword.get() == "") {
|
||||
this.errorStr.set("When AuthMode is set to 'password', you must supply a password.");
|
||||
return;
|
||||
}
|
||||
kwargs["password"] = this.tempPassword.get();
|
||||
} else {
|
||||
kwargs["password"] = "";
|
||||
}
|
||||
kwargs["connectmode"] = this.tempConnectMode.get();
|
||||
kwargs["visual"] = "1";
|
||||
kwargs["submit"] = "1";
|
||||
let model = this.props.model;
|
||||
let prtn = GlobalCommandRunner.createRemote(cname, kwargs, false);
|
||||
prtn.then((crtn) => {
|
||||
if (crtn.success) {
|
||||
let crRtn = GlobalCommandRunner.screenSetRemote(cname, true, false);
|
||||
crRtn.then((crcrtn) => {
|
||||
if (crcrtn.success) {
|
||||
model.closeModal();
|
||||
return;
|
||||
}
|
||||
mobx.action(() => {
|
||||
this.errorStr.set(crcrtn.error);
|
||||
})();
|
||||
});
|
||||
return;
|
||||
}
|
||||
mobx.action(() => {
|
||||
this.errorStr.set(crtn.error);
|
||||
})();
|
||||
});
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeKeyFile(value: string): void {
|
||||
mobx.action(() => {
|
||||
this.tempKeyFile.set(value);
|
||||
})();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangePassword(value: string): void {
|
||||
mobx.action(() => {
|
||||
this.tempPassword.set(value);
|
||||
})();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeAlias(value: string): void {
|
||||
mobx.action(() => {
|
||||
this.tempAlias.set(value);
|
||||
})();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangePort(value: string): void {
|
||||
mobx.action(() => {
|
||||
this.tempPort.set(value);
|
||||
})();
|
||||
}
|
||||
|
||||
@boundMethod
|
||||
handleChangeHostName(value: string): void {
|
||||
mobx.action(() => {
|
||||
this.tempHostName.set(value);
|
||||
})();
|
||||
}
|
||||
|
||||
render() {
|
||||
let { model, remoteEdit } = this.props;
|
||||
let authMode = this.tempAuthMode.get();
|
||||
|
||||
return (
|
||||
<div className={cn("modal wave-modal crconn-modal is-active")}>
|
||||
<div className="modal-background wave-modal-background" />
|
||||
<div className="modal-content wave-modal-content crconn-wave-modal-content">
|
||||
<div className="wave-modal-content-inner crconn-wave-modal-content-inner">
|
||||
<header className="wave-modal-header crconn-wave-modal-header">
|
||||
<div className="wave-modal-title crconn-wave-modal-title">Add Connection</div>
|
||||
<div className="wave-modal-close crconn-wave-modal-close" onClick={model.cancelEditAuth}>
|
||||
<img src={close} alt="Close (Escape)" />
|
||||
</div>
|
||||
</header>
|
||||
<div className="wave-modal-body crconn-wave-modal-body">
|
||||
<div className="user-section">
|
||||
<TextField
|
||||
label="user@host"
|
||||
autoFocus={true}
|
||||
value={this.tempHostName.get()}
|
||||
onChange={this.handleChangeHostName}
|
||||
required={true}
|
||||
decoration={{
|
||||
endDecoration: (
|
||||
<InputDecoration>
|
||||
<Tooltip
|
||||
message={`(Required) The user and host that you want to connect with. This is in the same format as
|
||||
you would pass to ssh, e.g. "ubuntu@test.mydomain.com".`}
|
||||
icon={<i className="fa-sharp fa-regular fa-circle-question" />}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-circle-question" />
|
||||
</Tooltip>
|
||||
</InputDecoration>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="alias-section">
|
||||
<TextField
|
||||
label="Alias"
|
||||
onChange={this.handleChangeAlias}
|
||||
value={this.tempAlias.get()}
|
||||
maxLength={100}
|
||||
decoration={{
|
||||
endDecoration: (
|
||||
<InputDecoration>
|
||||
<Tooltip
|
||||
message={`(Optional) A short alias to use when selecting or displaying this connection.`}
|
||||
icon={<i className="fa-sharp fa-regular fa-circle-question" />}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-circle-question" />
|
||||
</Tooltip>
|
||||
</InputDecoration>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="port-section">
|
||||
<NumberField
|
||||
label="Port"
|
||||
placeholder="22"
|
||||
value={this.tempPort.get()}
|
||||
onChange={this.handleChangePort}
|
||||
decoration={{
|
||||
endDecoration: (
|
||||
<InputDecoration>
|
||||
<Tooltip
|
||||
message={`(Optional) Defaults to 22. Set if the server you are connecting to listens to a non-standard
|
||||
SSH port.`}
|
||||
icon={<i className="fa-sharp fa-regular fa-circle-question" />}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-circle-question" />
|
||||
</Tooltip>
|
||||
</InputDecoration>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="authmode-section">
|
||||
<Dropdown
|
||||
label="Auth Mode"
|
||||
options={[
|
||||
{ value: "none", label: "none" },
|
||||
{ value: "key", label: "key" },
|
||||
{ value: "password", label: "password" },
|
||||
{ value: "key+password", label: "key+password" },
|
||||
]}
|
||||
value={this.tempAuthMode.get()}
|
||||
onChange={(val: string) => {
|
||||
this.tempAuthMode.set(val);
|
||||
}}
|
||||
decoration={{
|
||||
endDecoration: (
|
||||
<InputDecoration>
|
||||
<Tooltip
|
||||
message={
|
||||
<ul>
|
||||
<li>
|
||||
<b>none</b> - no authentication, or authentication is
|
||||
already configured in your ssh config.
|
||||
</li>
|
||||
<li>
|
||||
<b>key</b> - use a private key.
|
||||
</li>
|
||||
<li>
|
||||
<b>password</b> - use a password.
|
||||
</li>
|
||||
<li>
|
||||
<b>key+password</b> - use a key with a passphrase.
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
icon={<i className="fa-sharp fa-regular fa-circle-question" />}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-circle-question" />
|
||||
</Tooltip>
|
||||
</InputDecoration>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<If condition={authMode == "key" || authMode == "key+password"}>
|
||||
<TextField
|
||||
label="SSH Keyfile"
|
||||
placeholder="keyfile path"
|
||||
onChange={this.handleChangeKeyFile}
|
||||
value={this.tempKeyFile.get()}
|
||||
maxLength={400}
|
||||
required={true}
|
||||
decoration={{
|
||||
endDecoration: (
|
||||
<InputDecoration>
|
||||
<Tooltip
|
||||
message={`(Required) The path to your ssh key file.`}
|
||||
icon={<i className="fa-sharp fa-regular fa-circle-question" />}
|
||||
>
|
||||
<i className="fa-sharp fa-regular fa-circle-question" />
|
||||
</Tooltip>
|
||||
</InputDecoration>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</If>
|
||||
<If condition={authMode == "password" || authMode == "key+password"}>
|
||||
<PasswordField
|
||||
label={authMode == "password" ? "SSH Password" : "Key Passphrase"}
|
||||
placeholder="password"
|
||||
onChange={this.handleChangePassword}
|
||||
value={this.tempPassword.get()}
|
||||
maxLength={400}
|
||||
/>
|
||||
</If>
|
||||
<div className="connectmode-section">
|
||||
<Dropdown
|
||||
label="Connect Mode"
|
||||
options={[
|
||||
{ value: "startup", label: "startup" },
|
||||
{ value: "key", label: "key" },
|
||||
{ value: "auto", label: "auto" },
|
||||
{ value: "manual", label: "manual" },
|
||||
]}
|
||||
value={this.tempConnectMode.get()}
|
||||
onChange={(val: string) => {
|
||||
this.tempConnectMode.set(val);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<If condition={!util.isBlank(this.getErrorStr())}>
|
||||
<div className="settings-field settings-error">Error: {this.getErrorStr()}</div>
|
||||
</If>
|
||||
</div>
|
||||
<footer className="wave-modal-footer crconn-wave-modal-footer">
|
||||
<div className="action-buttons">
|
||||
<div onClick={model.cancelEditAuth} className="button wave-button is-plain">
|
||||
Cancel
|
||||
</div>
|
||||
<button
|
||||
onClick={this.submitRemote}
|
||||
className="button wave-button is-wave-green text-standard"
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { LoadingSpinner, ClientStopModal, AlertModal, DisconnectedModal, TosModal, AboutModal, CreateRemoteConnModal };
|
||||
|
||||
@@ -1129,6 +1129,12 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
|
||||
let selectedRemote = GlobalModel.getRemote(selectedRemoteId);
|
||||
let remoteEdit = model.remoteEdit.get();
|
||||
let onlyAddNewRemote = model.onlyAddNewRemote.get();
|
||||
|
||||
// @TODO: this is a hack to determine which create modal to show
|
||||
if (remoteEdit && !remoteEdit.old) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("modal remotes-modal settings-modal prompt-modal is-active")}>
|
||||
<div className="modal-background" />
|
||||
@@ -1179,7 +1185,15 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
|
||||
}
|
||||
|
||||
@mobxReact.observer
|
||||
class ConnectionDropdown extends React.Component<{ curRemote: T.RemoteType, onSelectRemote?: (cname: string) => void, allowNewConn: boolean, onNewConn?: () => void }, {}> {
|
||||
class ConnectionDropdown extends React.Component<
|
||||
{
|
||||
curRemote: T.RemoteType;
|
||||
onSelectRemote?: (cname: string) => void;
|
||||
allowNewConn: boolean;
|
||||
onNewConn?: () => void;
|
||||
},
|
||||
{}
|
||||
> {
|
||||
connDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "connDropdownActive" });
|
||||
|
||||
@boundMethod
|
||||
@@ -1208,7 +1222,7 @@ class ConnectionDropdown extends React.Component<{ curRemote: T.RemoteType, onSe
|
||||
this.props.onNewConn();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
let { curRemote } = this.props;
|
||||
let remote: T.RemoteType = null;
|
||||
@@ -1219,39 +1233,31 @@ class ConnectionDropdown extends React.Component<{ curRemote: T.RemoteType, onSe
|
||||
<div className="conn-dd-trigger">
|
||||
<If condition={curRemote != null}>
|
||||
<div className="lefticon">
|
||||
<GlobeIcon className="globe-icon"/>
|
||||
<StatusCircleIcon className={cn("status-icon", "status-" + curRemote.status)}/>
|
||||
<GlobeIcon className="globe-icon" />
|
||||
<StatusCircleIcon className={cn("status-icon", "status-" + curRemote.status)} />
|
||||
</div>
|
||||
<div className="conntext">
|
||||
<If condition={util.isBlank(curRemote.remotealias)}>
|
||||
<div className="text-standard conntext-solo">
|
||||
{curRemote.remotecanonicalname}
|
||||
</div>
|
||||
<div className="text-standard conntext-solo">{curRemote.remotecanonicalname}</div>
|
||||
</If>
|
||||
<If condition={!util.isBlank(curRemote.remotealias)}>
|
||||
<div className="text-secondary conntext-1">
|
||||
{curRemote.remotealias}
|
||||
</div>
|
||||
<div className="text-caption conntext-2">
|
||||
{curRemote.remotecanonicalname}
|
||||
</div>
|
||||
<div className="text-secondary conntext-1">{curRemote.remotealias}</div>
|
||||
<div className="text-caption conntext-2">{curRemote.remotecanonicalname}</div>
|
||||
</If>
|
||||
</div>
|
||||
<div className="dd-control">
|
||||
<ArrowsUpDownIcon className="icon"/>
|
||||
<ArrowsUpDownIcon className="icon" />
|
||||
</div>
|
||||
</If>
|
||||
<If condition={curRemote == null}>
|
||||
<div className="lefticon">
|
||||
<GlobeIcon className="globe-icon"/>
|
||||
<GlobeIcon className="globe-icon" />
|
||||
</div>
|
||||
<div className="conntext">
|
||||
<div className="text-standard conntext-solo">
|
||||
(no connection)
|
||||
</div>
|
||||
<div className="text-standard conntext-solo">(no connection)</div>
|
||||
</div>
|
||||
<div className="dd-control">
|
||||
<ArrowsUpDownIcon className="icon"/>
|
||||
<ArrowsUpDownIcon className="icon" />
|
||||
</div>
|
||||
</If>
|
||||
</div>
|
||||
@@ -1259,9 +1265,13 @@ class ConnectionDropdown extends React.Component<{ curRemote: T.RemoteType, onSe
|
||||
<div className="dropdown-menu" role="menu">
|
||||
<div className="dropdown-content conn-dd-menu">
|
||||
<For each="remote" of={allRemotes}>
|
||||
<div className="dropdown-item" key={remote.remoteid} onClick={() => this.selectRemote(remote.remotecanonicalname)}>
|
||||
<div
|
||||
className="dropdown-item"
|
||||
key={remote.remoteid}
|
||||
onClick={() => this.selectRemote(remote.remotecanonicalname)}
|
||||
>
|
||||
<div className="status-div">
|
||||
<CircleIcon className={cn("status-icon", "status-" + remote.status)}/>
|
||||
<CircleIcon className={cn("status-icon", "status-" + remote.status)} />
|
||||
</div>
|
||||
<If condition={util.isBlank(remote.remotealias)}>
|
||||
<div className="text-standard">{remote.remotecanonicalname}</div>
|
||||
@@ -1275,7 +1285,7 @@ class ConnectionDropdown extends React.Component<{ curRemote: T.RemoteType, onSe
|
||||
<If condition={this.props.allowNewConn}>
|
||||
<div className="dropdown-item" onClick={this.clickNewConnection}>
|
||||
<div className="add-div">
|
||||
<AddIcon className="add-icon"/>
|
||||
<AddIcon className="add-icon" />
|
||||
</div>
|
||||
<div className="text-standard">New Connection</div>
|
||||
</div>
|
||||
|
||||
@@ -101,7 +101,7 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
|
||||
|
||||
@boundMethod
|
||||
clickNewConnection(): void {
|
||||
GlobalModel.remotesModalModel.openModalForEdit({ remoteedit: true }, true);
|
||||
GlobalModel.remotesModalModel.openModalForEdit({ remoteedit: true, old: false }, true);
|
||||
}
|
||||
|
||||
renderTabIconSelector(): React.ReactNode {
|
||||
@@ -171,9 +171,8 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
|
||||
return (
|
||||
<div className="newtab-container">
|
||||
<div className="newtab-section name-section">
|
||||
<div className="text-standard">Name</div>
|
||||
<TextField
|
||||
label="Title"
|
||||
label="Name"
|
||||
required={true}
|
||||
defaultValue={screen.name.get() ?? ""}
|
||||
onChange={this.updateName}
|
||||
|
||||
@@ -188,7 +188,7 @@ let menuTemplate = [
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Filemenu",
|
||||
label: "File",
|
||||
submenu: [{ role: "close" }, { role: "forceReload" }],
|
||||
},
|
||||
{
|
||||
|
||||
+1
-1
@@ -3290,7 +3290,7 @@ class Model {
|
||||
if (rview.remoteshowall) {
|
||||
this.remotesModalModel.openModal();
|
||||
} else if (rview.remoteedit != null) {
|
||||
this.remotesModalModel.openModalForEdit(rview.remoteedit, false);
|
||||
this.remotesModalModel.openModalForEdit({ ...rview.remoteedit, old: true }, false);
|
||||
} else if (rview.ptyremoteid) {
|
||||
this.remotesModalModel.openModal(rview.ptyremoteid);
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ class SimpleBlobRendererModel {
|
||||
this.savedHeight = params.savedHeight;
|
||||
this.ptyDataSource = params.ptyDataSource;
|
||||
if (this.isClosed) {
|
||||
this.dataBlob = new Blob();
|
||||
this.dataBlob = (new Blob() as T.ExtBlob);
|
||||
this.dataBlob.notFound = false; // TODO
|
||||
} else {
|
||||
if (this.isDone.get()) {
|
||||
|
||||
@@ -309,6 +309,8 @@ type RemoteEditType = {
|
||||
infostr?: string;
|
||||
keystr?: string;
|
||||
haspassword?: boolean;
|
||||
// @TODO: this is a hack to determine which create modal to show
|
||||
old?: boolean;
|
||||
};
|
||||
|
||||
type InfoType = {
|
||||
|
||||
Reference in New Issue
Block a user