feat: connect to ssh by username/password #3

Signed-off-by: seven <[email protected]>

Author: Blankll

src/store/secretStore.ts

@@ -16,6 +16,7 @@ export type Secret = {
   username?: string;
   password?: string;
 };
+
 export const useSecretStore = defineStore('secretStore', {
   state: (): {
     secrets: Secret[];
@@ -46,5 +47,8 @@ export const useSecretStore = defineStore('secretStore', {
       this.secrets.splice(index, 1);
       await secretDataSource.removeSecret(secret);
     },
+    async getSecret(secretId: string) {
+      return this.secrets.find(({ id }) => id === secretId);
+    },
   },
 });

src/views/secret/components/new-key-dialog.vue

@@ -61,7 +61,7 @@
         <n-tab-pane :name="SecretType.PASSWORD" tab="Username/Password">
           <n-grid cols="8" item-responsive responsive="screen" x-gap="10" y-gap="10">
             <n-grid-item span="8">
-              <n-form-item :label="$t('secret.name')" path="username">
+              <n-form-item :label="$t('secret.username')" path="username">
                 <n-input
                   v-model:value="formData.username"
                   clearable

src/views/ssh/components/ssh-dialog.vue

@@ -45,7 +45,7 @@
             </n-grid-item>
             <n-grid-item span="8">
               <n-form-item :label="$t('ssh.secret')" path="secret">
-                <n-select v-model:value="formData.secret" :options="options" />
+                <n-select v-model:value="formData.secretId" :options="options" />
               </n-form-item>
             </n-grid-item>
           </n-grid>
@@ -132,7 +132,7 @@ const formRules = reactive({
       trigger: ['input', 'blur'],
     },
   ],
-  secret: [
+  secretId: [
     {
       required: true,
       renderMessage: () => lang.t('ssh.formValidation.secretRequired'),

src/views/ssh/components/ssh-list.vue

@@ -20,18 +20,15 @@
         </div>
       </template>
     </n-card>
-    <new-key-dialog ref="editKeyDialogRef" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useLang } from '../../../lang';
 import { Connection, useConnectionStore } from '../../../store';
-import { CustomError } from '../../../common';
-import NewKeyDialog from '../../secret/components/new-key-dialog.vue';
 
-const emits = defineEmits(['edit-connect']);
+const emits = defineEmits(['edit-connect', 'establish-connect']);
 
 const dialog = useDialog();
 const message = useMessage();
@@ -43,7 +40,7 @@ const options = reactive([
   { key: 3, label: lang.t('ssh.operations.remove') },
 ]);
 const connectionStore = useConnectionStore();
-const { fetchConnections, removeConnection, establishConnection } = connectionStore;
+const { fetchConnections, removeConnection } = connectionStore;
 const { connections } = storeToRefs(connectionStore);
 fetchConnections();
 
@@ -62,17 +59,7 @@ const handleSelect = (key: number, connection: Connection) => {
 };
 
 const establishConnect = async (connection: Connection) => {
-  try {
-    await establishConnection(connection);
-  } catch (err) {
-    const error = err as CustomError;
-    message.error(`status: ${error.status}, details: ${error.details}`, {
-      closable: true,
-      keepAliveOnHover: true,
-      duration: 36000000,
-    });
-    // debug('connect error');
-  }
+  emits('establish-connect', connection);
 };
 
 // edit connect info

src/views/ssh/components/ssh-terminal.vue

@@ -7,6 +7,15 @@ import { invoke } from '@tauri-apps/api/tauri';
 import '@xterm/xterm/css/xterm.css';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from 'xterm-addon-fit';
+import { defineProps } from 'vue';
+import { Connection, useSecretStore } from '../../../store';
+
+const props = defineProps({
+  connectRef: Object as Connection,
+});
+
+const secretStore = useSecretStore();
+const { getSecret, loadSecrets } = secretStore;
 
 const terminal = new Terminal({
   cursorBlink: true, // 光标闪烁
@@ -54,7 +63,8 @@ const exec = (command: string) => {
     .catch(e => terminal.writeln(e));
 };
 
-onMounted(() => {
+onMounted(async () => {
+  await loadSecrets();
   terminal.loadAddon(fitAddon);
   // Attach the terminal to the container
   terminal.open(terminalContainer.value);
@@ -68,14 +78,10 @@ onMounted(() => {
   //   terminal.write(data);
   //   console.log('terminal on data', data);
   // });
-
+  const { host, port, secretId } = props.connectRef;
+  const secret = await getSecret(secretId);
   // Invoke the command
-  invoke('connect_ssh', {
-    host: 'xxx',
-    port: 22,
-    username: 'xxxx',
-    password: 'xxxx',
-  })
+  invoke('connect_ssh', { host, port, username: secret?.username, password: secret?.password })
     // eslint-disable-next-line no-console
     .then(res => console.log(`ssh connect res: ${res}`))
     // eslint-disable-next-line no-console

src/views/ssh/index.vue

@@ -10,8 +10,8 @@
   >
     <n-tab-pane v-for="panel in panelsRef" :key="panel" :name="panel">
       <div class="ssh-list">
-        <ssh-terminal v-if="terminalRef" />
-        <ssh-list v-else @edit-connect="editSshHandler" />
+        <ssh-terminal v-if="terminalRef" :connect-ref="connectRef" />
+        <ssh-list v-else @edit-connect="editSshHandler" @establish-connect="establishSshHandler" />
       </div>
     </n-tab-pane>
   </n-tabs>
@@ -24,20 +24,27 @@ import sshModal from './components/ssh-dialog.vue';
 import sshList from './components/ssh-list.vue';
 import sshTerminal from './components/ssh-terminal.vue';
 import SshFloatMenu from './components/ssh-float-menu.vue';
+import { Connection } from '../../store';
 
 // DOM
 const sshModalRef = ref();
 
 const terminalRef = ref(false);
-
+const connectRef = ref({});
 const addSsh = () => sshModalRef.value.showMedal();
 
 const editSshHandler = (row: object) => {
   sshModalRef.value.showMedal(row);
 };
+const establishSshHandler = (row: Connection) => {
+  // eslint-disable-next-line no-console
+  console.log('establish emit', row);
+  connectRef.value = row;
+  terminalRef.value = true;
+};
 
 const valueRef = ref('home');
-const panelsRef = ref(['home', '2', '3', '4', '5']);
+const panelsRef = ref(['home']);
 
 const addableRef = computed(() => {
   return {