feat(ui): validate API form and improve error UX

This commit is contained in:
Mikhail Chusavitin
2026-02-04 09:46:07 +03:00
parent c8772d97ed
commit 601e21f184
3 changed files with 354 additions and 5 deletions

View File

@@ -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>