Skip to content

Commit d5aaf8c

Browse files
jhadvigjhadvig
committed
Bug 1404147 - Prompt error message when create secret with invalid email
1 parent 998521b commit d5aaf8c

File tree

4 files changed

+102
-39
lines changed

4 files changed

+102
-39
lines changed

‎app/styles/_secrets.less

+6
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,9 @@ dl.secret-data {
9797
.create-secret-editor {
9898
height: 150px;
9999
}
100+
101+
.create-secret-form {
102+
.help-block {
103+
margin-bottom: 10px;
104+
}
105+
}

‎app/views/directives/create-secret.html

+53-26
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<alerts alerts="alerts"></alerts>
22

3-
<ng-form name="secretForm">
3+
<ng-form name="secretForm" class="create-secret-form">
44
<div for="secretType" ng-if="!type" class="form-group mar-top-lg">
55
<label>Secret Type</label>
66
<ui-select required ng-model="newSecret.type" search-enabled="false" ng-change="newSecret.authType = secretAuthTypeMap[newSecret.type].authTypes[0].id">
@@ -14,7 +14,7 @@
1414
<div ng-if="newSecret.type">
1515
<div class="form-group">
1616
<label for="secretName" class="required">Secret Name</label>
17-
<span ng-class="{'has-error': nameTaken || (secretForm.secretName.$error.pattern && secretForm.secretName.$touched)}">
17+
<span ng-class="{'has-error': nameTaken || (secretForm.secretName.$invalid && secretForm.secretName.$touched)}">
1818
<input class="form-control"
1919
id="secretName"
2020
name="secretName"
@@ -33,11 +33,14 @@
3333
This name is already in use. Please choose a different name.
3434
</span>
3535
</div>
36-
<div class="has-error" ng-show="secretForm.secretName.$error.pattern && secretForm.secretName.$touched">
37-
<span class="help-block">
36+
<div class="has-error" ng-show="secretForm.secretName.$invalid">
37+
<div ng-show="secretForm.secretName.$error.pattern && secretForm.secretName.$touched" class="help-block">
3838
Secret name must consist of lower-case letters, numbers, periods, and
3939
hyphens. It must start and end with a letter or number.
40-
</span>
40+
</div>
41+
<div ng-show="secretForm.secretName.$error.required && secretForm.secretName.$touched" class="help-block">
42+
Secret name is required.
43+
</div>
4144
</div>
4245
<div class="help-block" id="secret-name-help">
4346
Unique name of the new secret.
@@ -72,25 +75,27 @@
7275
</div>
7376
</div>
7477

75-
<div class="form-group">
78+
<div class="form-group" ng-class="{ 'has-error' : secretForm.passwordToken.$invalid && secretForm.passwordToken.$touched }">
7679
<label ng-class="{ required: !add.cacert && !add.gitconfig }" for="passwordToken">Password or Token</label>
77-
<div>
78-
<input class="form-control"
79-
id="passwordToken"
80-
name="passwordToken"
81-
ng-model="newSecret.data.passwordToken"
82-
autocorrect="off"
83-
autocapitalize="off"
84-
spellcheck="false"
85-
aria-describedby="password-token-help"
86-
type="password"
87-
ng-required="!add.cacert && !add.gitconfig">
88-
</div>
89-
<div class="help-block" id="password-token-help">
90-
Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.
80+
<input class="form-control"
81+
id="passwordToken"
82+
name="passwordToken"
83+
ng-model="newSecret.data.passwordToken"
84+
autocorrect="off"
85+
autocapitalize="off"
86+
spellcheck="false"
87+
aria-describedby="password-token-help"
88+
type="password"
89+
ng-required="!add.cacert && !add.gitconfig">
90+
</div>
91+
<div class="has-error" ng-show="secretForm.passwordToken.$error.required && secretForm.passwordToken.$touched">
92+
<div class="help-block">
93+
Password or token is required.
9194
</div>
9295
</div>
93-
96+
<div class="help-block" id="password-token-help">
97+
Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.
98+
</div>
9499

95100
<div class="form-group">
96101
<div class="checkbox">
@@ -175,7 +180,7 @@
175180
</div>
176181

177182
<div ng-if="newSecret.authType === 'kubernetes.io/dockercfg'">
178-
<div class="form-group">
183+
<div class="form-group" ng-class="{ 'has-error' : secretForm.dockerServer.$invalid && secretForm.dockerServer.$touched }">
179184
<label for="dockerServer" class="required">Image Registry Server Address</label>
180185
<div>
181186
<input class="form-control"
@@ -189,8 +194,13 @@
189194
required>
190195
</div>
191196
</div>
197+
<div ng-show="secretForm.dockerServer.$error.required && secretForm.dockerServer.$touched" class="has-error">
198+
<div class="help-block">
199+
Image registry server address is required.
200+
</div>
201+
</div>
192202

193-
<div class="form-group">
203+
<div class="form-group" ng-class="{ 'has-error' : secretForm.dockerUsername.$invalid && secretForm.dockerUsername.$touched }">
194204
<label for="dockerUsername" class="required">Username</label>
195205
<div>
196206
<input class="form-control"
@@ -204,8 +214,13 @@
204214
required>
205215
</div>
206216
</div>
217+
<div ng-show="secretForm.dockerUsername.$error.required && secretForm.dockerUsername.$touched" class="has-error">
218+
<div class="help-block">
219+
Username is required.
220+
</div>
221+
</div>
207222

208-
<div class="form-group">
223+
<div class="form-group" ng-class="{ 'has-error' : secretForm.dockerPassword.$invalid && secretForm.dockerPassword.$touched }">
209224
<label for="dockerPassword" class="required">Password</label>
210225
<div>
211226
<input class="form-control"
@@ -219,8 +234,12 @@
219234
required>
220235
</div>
221236
</div>
222-
223-
<div class="form-group">
237+
<div ng-show="secretForm.dockerPassword.$error.required && secretForm.dockerPassword.$touched" class="has-error">
238+
<div class="help-block">
239+
Password is required.
240+
</div>
241+
</div>
242+
<div class="form-group" ng-class="{ 'has-error' : secretForm.dockerEmail.$invalid && secretForm.dockerEmail.$touched }">
224243
<label for="dockerEmail" class="required">Email</label>
225244
<div>
226245
<input class="form-control"
@@ -234,6 +253,14 @@
234253
required>
235254
</div>
236255
</div>
256+
<div class="has-error" ng-show="secretForm.dockerEmail.$invalid">
257+
<div ng-show="secretForm.dockerEmail.$error.email && secretForm.dockerEmail.$touched" class="help-block">
258+
Email must be in the form of <var>user@domain</var>.
259+
</div>
260+
<div ng-show="secretForm.dockerEmail.$error.required && secretForm.dockerEmail.$touched" class="help-block">
261+
Email is required.
262+
</div>
263+
</div>
237264
</div>
238265

239266
<div ng-if="newSecret.authType === 'kubernetes.io/dockerconfigjson'">

‎dist/scripts/templates.js

+41-12
Original file line numberDiff line numberDiff line change
@@ -5788,7 +5788,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
57885788

57895789
$templateCache.put('views/directives/create-secret.html',
57905790
"<alerts alerts=\"alerts\"></alerts>\n" +
5791-
"<ng-form name=\"secretForm\">\n" +
5791+
"<ng-form name=\"secretForm\" class=\"create-secret-form\">\n" +
57925792
"<div for=\"secretType\" ng-if=\"!type\" class=\"form-group mar-top-lg\">\n" +
57935793
"<label>Secret Type</label>\n" +
57945794
"<ui-select required ng-model=\"newSecret.type\" search-enabled=\"false\" ng-change=\"newSecret.authType = secretAuthTypeMap[newSecret.type].authTypes[0].id\">\n" +
@@ -5801,18 +5801,21 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
58015801
"<div ng-if=\"newSecret.type\">\n" +
58025802
"<div class=\"form-group\">\n" +
58035803
"<label for=\"secretName\" class=\"required\">Secret Name</label>\n" +
5804-
"<span ng-class=\"{'has-error': nameTaken || (secretForm.secretName.$error.pattern && secretForm.secretName.$touched)}\">\n" +
5804+
"<span ng-class=\"{'has-error': nameTaken || (secretForm.secretName.$invalid && secretForm.secretName.$touched)}\">\n" +
58055805
"<input class=\"form-control\" id=\"secretName\" name=\"secretName\" ng-model=\"newSecret.data.secretName\" type=\"text\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" aria-describedby=\"secret-name-help\" ng-maxlength=\"253\" ng-pattern=\"/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/\" required>\n" +
58065806
"</span>\n" +
58075807
"<div class=\"has-error\" ng-show=\"nameTaken\">\n" +
58085808
"<span class=\"help-block\">\n" +
58095809
"This name is already in use. Please choose a different name.\n" +
58105810
"</span>\n" +
58115811
"</div>\n" +
5812-
"<div class=\"has-error\" ng-show=\"secretForm.secretName.$error.pattern && secretForm.secretName.$touched\">\n" +
5813-
"<span class=\"help-block\">\n" +
5812+
"<div class=\"has-error\" ng-show=\"secretForm.secretName.$invalid\">\n" +
5813+
"<div ng-show=\"secretForm.secretName.$error.pattern && secretForm.secretName.$touched\" class=\"help-block\">\n" +
58145814
"Secret name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or number.\n" +
5815-
"</span>\n" +
5815+
"</div>\n" +
5816+
"<div ng-show=\"secretForm.secretName.$error.required && secretForm.secretName.$touched\" class=\"help-block\">\n" +
5817+
"Secret name is required.\n" +
5818+
"</div>\n" +
58165819
"</div>\n" +
58175820
"<div class=\"help-block\" id=\"secret-name-help\">\n" +
58185821
"Unique name of the new secret.\n" +
@@ -5837,15 +5840,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
58375840
"Optional username for Git authentication.\n" +
58385841
"</div>\n" +
58395842
"</div>\n" +
5840-
"<div class=\"form-group\">\n" +
5843+
"<div class=\"form-group\" ng-class=\"{ 'has-error' : secretForm.passwordToken.$invalid && secretForm.passwordToken.$touched }\">\n" +
58415844
"<label ng-class=\"{ required: !add.cacert && !add.gitconfig }\" for=\"passwordToken\">Password or Token</label>\n" +
5842-
"<div>\n" +
58435845
"<input class=\"form-control\" id=\"passwordToken\" name=\"passwordToken\" ng-model=\"newSecret.data.passwordToken\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" aria-describedby=\"password-token-help\" type=\"password\" ng-required=\"!add.cacert && !add.gitconfig\">\n" +
58445846
"</div>\n" +
5847+
"<div class=\"has-error\" ng-show=\"secretForm.passwordToken.$error.required && secretForm.passwordToken.$touched\">\n" +
5848+
"<div class=\"help-block\">\n" +
5849+
"Password or token is required.\n" +
5850+
"</div>\n" +
5851+
"</div>\n" +
58455852
"<div class=\"help-block\" id=\"password-token-help\">\n" +
58465853
"Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.\n" +
58475854
"</div>\n" +
5848-
"</div>\n" +
58495855
"<div class=\"form-group\">\n" +
58505856
"<div class=\"checkbox\">\n" +
58515857
"<label>\n" +
@@ -5906,30 +5912,53 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
59065912
"</div>\n" +
59075913
"</div>\n" +
59085914
"<div ng-if=\"newSecret.authType === 'kubernetes.io/dockercfg'\">\n" +
5909-
"<div class=\"form-group\">\n" +
5915+
"<div class=\"form-group\" ng-class=\"{ 'has-error' : secretForm.dockerServer.$invalid && secretForm.dockerServer.$touched }\">\n" +
59105916
"<label for=\"dockerServer\" class=\"required\">Image Registry Server Address</label>\n" +
59115917
"<div>\n" +
59125918
"<input class=\"form-control\" id=\"dockerServer\" name=\"dockerServer\" ng-model=\"newSecret.data.dockerServer\" type=\"text\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" required>\n" +
59135919
"</div>\n" +
59145920
"</div>\n" +
5915-
"<div class=\"form-group\">\n" +
5921+
"<div ng-show=\"secretForm.dockerServer.$error.required && secretForm.dockerServer.$touched\" class=\"has-error\">\n" +
5922+
"<div class=\"help-block\">\n" +
5923+
"Image registry server address is required.\n" +
5924+
"</div>\n" +
5925+
"</div>\n" +
5926+
"<div class=\"form-group\" ng-class=\"{ 'has-error' : secretForm.dockerUsername.$invalid && secretForm.dockerUsername.$touched }\">\n" +
59165927
"<label for=\"dockerUsername\" class=\"required\">Username</label>\n" +
59175928
"<div>\n" +
59185929
"<input class=\"form-control\" id=\"dockerUsername\" name=\"dockerUsername\" ng-model=\"newSecret.data.dockerUsername\" type=\"text\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" required>\n" +
59195930
"</div>\n" +
59205931
"</div>\n" +
5921-
"<div class=\"form-group\">\n" +
5932+
"<div ng-show=\"secretForm.dockerUsername.$error.required && secretForm.dockerUsername.$touched\" class=\"has-error\">\n" +
5933+
"<div class=\"help-block\">\n" +
5934+
"Username is required.\n" +
5935+
"</div>\n" +
5936+
"</div>\n" +
5937+
"<div class=\"form-group\" ng-class=\"{ 'has-error' : secretForm.dockerPassword.$invalid && secretForm.dockerPassword.$touched }\">\n" +
59225938
"<label for=\"dockerPassword\" class=\"required\">Password</label>\n" +
59235939
"<div>\n" +
59245940
"<input class=\"form-control\" id=\"dockerPassword\" name=\"dockerPassword\" ng-model=\"newSecret.data.dockerPassword\" type=\"password\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" required>\n" +
59255941
"</div>\n" +
59265942
"</div>\n" +
5927-
"<div class=\"form-group\">\n" +
5943+
"<div ng-show=\"secretForm.dockerPassword.$error.required && secretForm.dockerPassword.$touched\" class=\"has-error\">\n" +
5944+
"<div class=\"help-block\">\n" +
5945+
"Password is required.\n" +
5946+
"</div>\n" +
5947+
"</div>\n" +
5948+
"<div class=\"form-group\" ng-class=\"{ 'has-error' : secretForm.dockerEmail.$invalid && secretForm.dockerEmail.$touched }\">\n" +
59285949
"<label for=\"dockerEmail\" class=\"required\">Email</label>\n" +
59295950
"<div>\n" +
59305951
"<input class=\"form-control\" type=\"email\" id=\"dockerEmail\" name=\"dockerEmail\" ng-model=\"newSecret.data.dockerMail\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" required>\n" +
59315952
"</div>\n" +
59325953
"</div>\n" +
5954+
"<div class=\"has-error\" ng-show=\"secretForm.dockerEmail.$invalid\">\n" +
5955+
"<div ng-show=\"secretForm.dockerEmail.$error.email && secretForm.dockerEmail.$touched\" class=\"help-block\">\n" +
5956+
"Email must be in the form of <var>user@domain</var>.\n" +
5957+
"</div>\n" +
5958+
"<div ng-show=\"secretForm.dockerEmail.$error.required && secretForm.dockerEmail.$touched\" class=\"help-block\">\n" +
5959+
"Email is required.\n" +
5960+
"</div>\n" +
5961+
"</div>\n" +
59335962
"</div>\n" +
59345963
"<div ng-if=\"newSecret.authType === 'kubernetes.io/dockerconfigjson'\">\n" +
59355964
"<div class=\"form-group\" id=\"docker-config\">\n" +

‎dist/styles/main.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -4745,7 +4745,8 @@ td.visible-print,th.visible-print{display:table-cell!important}
47454745
.osc-secrets-form .remove-btn:focus{text-decoration:none}
47464746
dl.secret-data{overflow:hidden}
47474747
dl.secret-data pre{margin-bottom:0}
4748-
dl.secret-data dd{margin-bottom:10px;overflow-x:auto}
4748+
.create-secret-form .help-block,dl.secret-data dd{margin-bottom:10px}
4749+
dl.secret-data dd{overflow-x:auto}
47494750
.events-sidebar .right-content .event .event-details,.events-sidebar .right-content .event .event-details .event-message,.events-sidebar .right-content .event .event-details .event-object,.events-sidebar .right-content .event .event-details .event-reason{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
47504751
@media (min-width:992px){dl.secret-data.left dt{text-align:left}
47514752
dl.secret-data.indent{margin-left:20px}

0 commit comments

Comments
 (0)