feat(ui): validate API form and improve error UX
This commit is contained in:
@@ -30,8 +30,68 @@
|
||||
<div id="parsers-info" class="parsers-info"></div>
|
||||
</div>
|
||||
|
||||
<div id="api-source-placeholder" class="api-placeholder hidden">
|
||||
<p>Подключение по API будет реализовано на следующих шагах.</p>
|
||||
<div id="api-source-content" class="api-placeholder hidden">
|
||||
<form id="api-connect-form" novalidate>
|
||||
<h3>Подключение к BMC API</h3>
|
||||
<div id="api-form-errors" class="form-errors hidden"></div>
|
||||
|
||||
<div class="api-form-grid">
|
||||
<label class="api-form-field" for="api-host">
|
||||
<span>Host</span>
|
||||
<input id="api-host" name="host" type="text" placeholder="10.0.0.10 или bmc.example.local">
|
||||
<span class="field-error" data-error-for="host"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field" for="api-protocol">
|
||||
<span>Протокол</span>
|
||||
<select id="api-protocol" name="protocol">
|
||||
<option value="">Выберите протокол</option>
|
||||
<option value="redfish">Redfish</option>
|
||||
<option value="ipmi">IPMI</option>
|
||||
</select>
|
||||
<span class="field-error" data-error-for="protocol"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field" for="api-port">
|
||||
<span>Порт</span>
|
||||
<input id="api-port" name="port" type="number" min="1" max="65535" placeholder="443">
|
||||
<span class="field-error" data-error-for="port"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field" for="api-username">
|
||||
<span>Username</span>
|
||||
<input id="api-username" name="username" type="text" placeholder="admin">
|
||||
<span class="field-error" data-error-for="username"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field" for="api-auth-type">
|
||||
<span>Тип авторизации</span>
|
||||
<select id="api-auth-type" name="authType">
|
||||
<option value="">Выберите тип</option>
|
||||
<option value="password">Пароль</option>
|
||||
<option value="token">Токен</option>
|
||||
</select>
|
||||
<span class="field-error" data-error-for="authType"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field" id="api-password-field" for="api-password">
|
||||
<span>Пароль</span>
|
||||
<input id="api-password" name="password" type="password" autocomplete="current-password">
|
||||
<span class="field-error" data-error-for="password"></span>
|
||||
</label>
|
||||
|
||||
<label class="api-form-field hidden" id="api-token-field" for="api-token">
|
||||
<span>Токен</span>
|
||||
<input id="api-token" name="token" type="text" autocomplete="off">
|
||||
<span class="field-error" data-error-for="token"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="api-form-actions">
|
||||
<button id="api-connect-btn" type="submit">Подключиться</button>
|
||||
</div>
|
||||
<div id="api-connect-status" class="api-connect-status"></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user