File : dialogs/apiKeysDialog/ApiKeyControlRow.js

1
/*
2
Copyright - 2017 2023 - wwwouaiebe - Contact: https://www.ouaie.be/
3
4
This  program is free software;
5
you can redistribute it and/or modify it under the terms of the
6
GNU General Public License as published by the Free Software Foundation;
7
either version 3 of the License, or any later version.
8
9
This program is distributed in the hope that it will be useful,
10
but WITHOUT ANY WARRANTY; without even the implied warranty of
11
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
GNU General Public License for more details.
13
14
You should have received a copy of the GNU General Public License
15
along with this program; if not, write to the Free Software
16
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
17
*/
18
/*
19
Changes:
20
    - v4.0.0:
21
        - created from v3.6.0
22
Doc reviewed 202208
23
 */
24
25
import theTranslator from '../../core/uiLib/Translator.js';
26
import theConfig from '../../data/Config.js';
27
import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js';
28
import ApiKey from '../../containers/ApiKey.js';
29
import ObjId from '../../data/ObjId.js';
30
31
/* ------------------------------------------------------------------------------------------------------------------------- */
32
/**
33
 the ApiKey control row for the ApiKeysDialog. Display  HTML input elements for the providerName and the providerKey
34
and a button to remove the ApiKey from the dialog
35
*/
36
/* ------------------------------------------------------------------------------------------------------------------------- */
37
38
class ApiKeyControlRow {
39
40
    /**
41
    The root HTML element of the control
42
    @type {HTMLElement}
43
    */
44
45
    #rowHTMLElement;
46
47
    /**
48
    The providerName HTML input element
49
    @type {HTMLElement}
50
    */
51
52
    #providerNameInput;
53
54
    /**
55
    The providerKey HTML input element
56
    @type {HTMLElement}
57
    */
58
59
    #providerKeyInput;
60
61
    /**
62
    A unique ObjId given to the control
63
    @type {Number}
64
    */
65
66
    #objId;
67
68
    /**
69
    The event listener for the delete button
70
    @type {deleteApiKeyButtonClickEL}
71
    */
72
73
    #deleteApiKeyButtonClickEL;
74
75
    /**
76
    The delete button
77
    @type {HTMLElement}
78
    */
79
80
    #deleteButtonHTMLElement;
81
82
    /**
83
    The constructor
84
    @param {ApiKey} apiKey The ApiKey to display in the control
85
    @param {DeleteApiKeyButtonClickEL} deleteApiKeyButtonClickEL The event listener to use for the delete button
86
    */
87
88
    constructor ( apiKey, deleteApiKeyButtonClickEL ) {
89
        Object.freeze ( this );
90
        this.#deleteApiKeyButtonClickEL = deleteApiKeyButtonClickEL;
91
        this.#objId = ObjId.nextObjId;
92
        this.#rowHTMLElement = theHTMLElementsFactory.create (
93
            'div',
94
            {
95
                className : 'TravelNotes-BaseDialog-FlexRow'
96
            }
97
        );
98
        this.#providerNameInput = theHTMLElementsFactory.create (
99
            'input',
100
            {
101
                className : 'TravelNotes-ApiKeysDialog-ApiKeyName TravelNotes-ApiKeysDialog-Input',
102
                value : apiKey.providerName,
103
                placeholder : theTranslator.getText ( 'ApiKeyControlRow - provider name' )
104
            },
105
            this.#rowHTMLElement
106
        );
107
        this.#providerKeyInput = theHTMLElementsFactory.create (
108
            'input',
109
            {
110
                className : 'TravelNotes-ApiKeysDialog-ApiKeyValue TravelNotes-ApiKeysDialog-Input',
111
                value : apiKey.providerKey,
112
                placeholder : theTranslator.getText ( 'ApiKeyControlRow - api key' ),
113
                type : theConfig.ApiKeysDialog.showApiKeys ? 'text' : 'password'
114
            },
115
            this.#rowHTMLElement
116
        );
117
        this.#deleteButtonHTMLElement = theHTMLElementsFactory.create (
118
            'div',
119
            {
120
                className :
121
                    'TravelNotes-BaseDialog-Button TravelNotes-ApiKeysDialog-AtRightButton',
122
                title : theTranslator.getText ( 'ApiKeyControlRow - delete api key' ),
123
                textContent : '❌',
124
                dataset : { ObjId : this.#objId }
125
            },
126
            this.#rowHTMLElement
127
        );
128
        this.#deleteButtonHTMLElement.addEventListener ( 'click', this.#deleteApiKeyButtonClickEL, false );
129
    }
130
131
    /**
132
    The destructor
133
    */
134
135
    destructor ( ) {
136
        this.#deleteButtonHTMLElement.removeEventListener ( 'click', this.#deleteApiKeyButtonClickEL, false );
137
    }
138
139
    /**
140
    The ObjId of the control
141
    @type {Number}
142
    */
143
144
    get objId ( ) { return this.#objId; }
145
146
    /**
147
    The root HTML element of row
148
    @type {Array.<HTMLElement>}
149
    */
150
151
    get HTMLElement ( ) { return this.#rowHTMLElement; }
152
153
    /**
154
    The providerName
155
    @type {String}
156
    */
157
158
    get providerName ( ) { return this.#providerNameInput.value; }
159
160
    /**
161
    The providerKey
162
    @type {String}
163
    */
164
165
    get providerKey ( ) { return this.#providerKeyInput.value; }
166
167
    /**
168
    The ApiKey
169
    @type {ApiKey}
170
    */
171
172
    get apiKey ( ) {
173
        return new ApiKey ( this.#providerNameInput.value, this.#providerKeyInput.value );
174
    }
175
}
176
177
export default ApiKeyControlRow;
178
179
/* --- End of file --------------------------------------------------------------------------------------------------------- */
180