1
1
<script setup lang="ts">
2
+ import type sshpk from ' sshpk' ;
2
3
import { generateKeyPair } from ' ./rsa-key-pair-generator.service' ;
3
4
import TextareaCopyable from ' @/components/TextareaCopyable.vue' ;
4
5
import { withDefaultOnErrorAsync } from ' @/utils/defaults' ;
5
6
import { useValidation } from ' @/composable/validation' ;
6
7
import { computedRefreshableAsync } from ' @/composable/computedRefreshable' ;
7
8
8
9
const bits = ref (2048 );
9
- const emptyCerts = { publicKeyPem: ' ' , privateKeyPem: ' ' };
10
+ const comment = ref (' ' );
11
+ const password = ref (' ' );
12
+ const emptyCerts = { publicKey: ' ' , privateKey: ' ' };
13
+
14
+ const format = useStorage (' rsa-key-pair-generator:format' , ' ssh' );
15
+ const formatOptions = [
16
+ { value: ' pem' , label: ' PEM' },
17
+ { value: ' pkcs1' , label: ' PKCS#1' },
18
+ { value: ' pkcs8' , label: ' PKCS#8' },
19
+ { value: ' ssh' , label: ' OpenSSH Standard' },
20
+ { value: ' openssh' , label: ' OpenSSH New' },
21
+ { value: ' putty' , label: ' PuTTY' },
22
+ ];
23
+
24
+ const supportsPassphrase = computed (() => format .value === ' pem' || format .value === ' ssh' );
10
25
11
26
const { attrs : bitsValidationAttrs } = useValidation ({
12
27
source: bits ,
@@ -19,31 +34,67 @@ const { attrs: bitsValidationAttrs } = useValidation({
19
34
});
20
35
21
36
const [certs, refreshCerts] = computedRefreshableAsync (
22
- () => withDefaultOnErrorAsync (() => generateKeyPair ({ bits: bits .value }), emptyCerts ),
37
+ () => withDefaultOnErrorAsync (() => generateKeyPair ({
38
+ bits: bits .value ,
39
+ password: password .value ,
40
+ format: format .value as sshpk .PrivateKeyFormatType ,
41
+ comment: comment .value ,
42
+ }), emptyCerts ),
23
43
emptyCerts ,
24
44
);
25
45
</script >
26
46
27
47
<template >
28
- <div style =" flex : 0 0 100% " >
29
- <div item-style =" flex: 1 1 0" style =" max-width : 600px " mx-auto flex gap-3 >
30
- <n-form-item label =" Bits :" v-bind =" bitsValidationAttrs as any" label-placement =" left" label-width =" 100" >
48
+ <div >
49
+ <n-space justify =" space-between" mb-1 >
50
+ <c-select
51
+ v-model:value =" format"
52
+ label-position =" left"
53
+ label =" Format:"
54
+ :options =" formatOptions"
55
+ placeholder =" Select a key format"
56
+ />
57
+
58
+ <n-form-item label =" Bits :" v-bind =" bitsValidationAttrs as any" label-placement =" left" >
31
59
<n-input-number v-model:value =" bits" min =" 256" max =" 16384" step =" 8" />
32
60
</n-form-item >
61
+ </n-space >
33
62
63
+ <div v-if =" supportsPassphrase" mb-1 >
64
+ <n-form-item label =" Passphrase :" label-placement =" left" >
65
+ <n-input
66
+ v-model:value =" password"
67
+ type =" password"
68
+ show-password-on =" mousedown"
69
+ placeholder =" Passphrase"
70
+ />
71
+ </n-form-item >
72
+ </div >
73
+
74
+ <div mb-1 >
75
+ <n-form-item label =" Comment :" label-placement =" left" >
76
+ <n-input
77
+ v-model:value =" comment"
78
+ type =" text"
79
+ placeholder =" Comment"
80
+ />
81
+ </n-form-item >
82
+ </div >
83
+
84
+ <n-space justify =" center" mb-1 >
34
85
<c-button @click =" refreshCerts" >
35
86
Refresh key-pair
36
87
</c-button >
37
- </div >
38
- </div >
88
+ </n-space >
39
89
40
- <div >
41
- <h3 >Public key</h3 >
42
- <TextareaCopyable :value =" certs.publicKeyPem " />
43
- </div >
90
+ <div >
91
+ <h3 >Public key</h3 >
92
+ <TextareaCopyable :value =" certs.publicKey " :word-wrap = " true " />
93
+ </div >
44
94
45
- <div >
46
- <h3 >Private key</h3 >
47
- <TextareaCopyable :value =" certs.privateKeyPem" />
95
+ <div >
96
+ <h3 >Private key</h3 >
97
+ <TextareaCopyable :value =" certs.privateKey" />
98
+ </div >
48
99
</div >
49
100
</template >
0 commit comments