HM-102. Добавление звездочек для обязательных полей (#63)

src/app.html

@@ -433,7 +433,7 @@
     <!-- Шаблон FormControl компонента -->
     <template id="form-control">
         <div class="mb-3">
-            <label class="form-label"></label>
+            <label class="form-label"><span class="FormControl__label"></span><span class="FormControl__star text-danger"></span></label>
             <div class="form-text invalid-feedback"></div>
         </div>
     </template>

src/components/form-control/FormControl.js

@@ -16,6 +16,8 @@ class FormControl extends Component {
         super('#form-control', parentNode);
 
         this.label = this.mainNode.querySelector('.form-label');
+        this.labelText = this.mainNode.querySelector('.FormControl__label');
+        this.star = this.mainNode.querySelector('.FormControl__star');
         this.errorText = this.mainNode.querySelector('.form-text');
         this.input = this.createElement({
             tagName: this.getInputTagName(type),
@@ -33,7 +35,7 @@ class FormControl extends Component {
         this.input.value = initValue;
 
         this.label.insertAdjacentElement('afterend', this.input);
-        this.label.textContent = label;
+        this.labelText.textContent = label;
         this.label.setAttribute('for', id);
 
         this.addEventListener(this.input, EVENTS.FOCUS, this.clearError);
@@ -43,6 +45,10 @@ class FormControl extends Component {
             this.next(EVENTS.INPUT, evt);
         });
 
+        if (required) {
+            this.star.textContent = ' *';
+        }
+
         if (type === FORM_TYPES.SELECT) {
             options.forEach(({value, text}) => {
                 this.createElement({
@@ -64,6 +70,7 @@ class FormControl extends Component {
     }
 
     disabled = (value) => {
+        this.star.style.visibility = value ? 'hidden' : 'visible';
         this.input.disabled = value;
     }
 

src/components/user-view-form/UserViewForm.js

@@ -38,6 +38,7 @@ class UserViewForm extends Component {
             this.password = this.createComponent(FormControl, this.form, {
                 id: 'user-view-form-password',
                 label: 'Пароль',
+                required: true,
                 type: FORM_TYPES.PASSWORD,
             }),
             this.avatar = this.createComponent(FormControl, this.form, {
@@ -151,6 +152,14 @@ class UserViewForm extends Component {
         return this.form.checkValidity();
     }
 
+    clearForm = () => {
+        this.form.classList.remove('was-validated');
+        this.login.setValue('');
+        this.avatar.setValue('');
+        this.password.setValue('');
+        this.isAdmin.setValue(false);
+    }
+
     createUser = () => {
         if (this.validateInputs()) {
             this.next(EVENTS.CREATE_USER, {
@@ -159,6 +168,7 @@ class UserViewForm extends Component {
                 password: this.password.getValue(),
                 is_admin: this.isAdmin.getValue() === TRUE,
             });
+            this.clearForm();
             routeService.pushQuery({}, true);
         }
     }
@@ -170,6 +180,7 @@ class UserViewForm extends Component {
                 avatar: this.avatar.getValue(),
                 is_admin: this.isAdmin.getValue() === TRUE,
             });
+            this.clearForm();
             routeService.pushQuery({}, true);
         }
     }