Fix max length for texts in poll creation

src/components/inputField.ts

@@ -1,4 +1,4 @@
-const InputField = (placeholder: string, label: string, name: string) => {
+const InputField = (placeholder: string, label: string, name: string, maxLength?: number, showLengthOn: number = maxLength ? maxLength / 3 : 0) => {
   const div = document.createElement('div');
   div.classList.add('input-field');
 
@@ -7,6 +7,26 @@ const InputField = (placeholder: string, label: string, name: string) => {
   <label for="input-${name}">${label}</label>
   `;
 
+  if(maxLength) {
+    const input = div.firstElementChild as HTMLInputElement;
+    const labelEl = div.lastElementChild as HTMLLabelElement;
+    let showingLength = false;
+    input.addEventListener('input', (e) => {
+      const wasError = input.classList.contains('error');
+      const diff = maxLength - input.value.length;
+      const isError = diff < 0;
+      input.classList.toggle('error', isError);
+
+      if(isError || diff <= showLengthOn) {
+        labelEl.innerText = label + ` (${maxLength - input.value.length})`;
+        if(!showingLength) showingLength = true;
+      } else if((wasError && !isError) || showingLength) {
+        labelEl.innerText = label;
+        showingLength = false;
+      }
+    });
+  }
+
   return div;
 };
 

src/components/popupCreatePoll.ts

@@ -10,6 +10,10 @@ import RadioField from "./radioField";
 import Scrollable from "./scrollable";
 import { toast } from "./toast";
 
+const MAX_LENGTH_QUESTION = 255;
+const MAX_LENGTH_OPTION = 100;
+const MAX_LENGTH_SOLUTION = 200;
+
 export default class PopupCreatePoll extends PopupElement {
   private questionInput: HTMLInputElement;
   private questions: HTMLElement;
@@ -28,7 +32,7 @@ export default class PopupCreatePoll extends PopupElement {
 
     this.title.innerText = 'New Poll';
 
-    const questionField = InputField('Ask a Question', 'Ask a Question', 'question');
+    const questionField = InputField('Ask a Question', 'Ask a Question', 'question', MAX_LENGTH_QUESTION);
     this.questionInput = questionField.firstElementChild as HTMLInputElement;
 
     this.header.append(questionField);
@@ -89,7 +93,7 @@ export default class PopupCreatePoll extends PopupElement {
     const quizSolutionContainer = document.createElement('div');
     quizSolutionContainer.classList.add('poll-create-questions');
 
-    const quizSolutionField = InputField('Add a Comment (Optional)', 'Add a Comment (Optional)', 'solution');
+    const quizSolutionField = InputField('Add a Comment (Optional)', 'Add a Comment (Optional)', 'solution', MAX_LENGTH_SOLUTION);
     this.quizSolutionInput = quizSolutionField.firstElementChild as HTMLInputElement;
 
     const quizSolutionSubtitle = document.createElement('div');
@@ -124,13 +128,18 @@ export default class PopupCreatePoll extends PopupElement {
   }
 
   onSubmitClick = (e: MouseEvent) => {
-    const question = this.questionInput.value;
+    const question = this.questionInput.value.trim();
 
-    if(!question.trim()) {
+    if(!question) {
       toast('Please enter a question.');
       return;
     }
 
+    if(question.length > MAX_LENGTH_QUESTION) {
+      toast('Question is too long.');
+      return;
+    }
+
     if(this.quizCheckboxField.input.checked && !this.correctAnswers?.length) {
       toast('Please choose the correct answer.');
       return;
@@ -143,6 +152,18 @@ export default class PopupCreatePoll extends PopupElement {
       return;
     }
 
+    const tooLongOption = answers.find(a => a.length > MAX_LENGTH_OPTION);
+    if(tooLongOption) {
+      toast('Option is too long.');
+      return;
+    }
+
+    const quizSolution = this.quizSolutionInput.value.trim() || undefined;
+    if(quizSolution.length > MAX_LENGTH_SOLUTION) {
+      toast('Explanation is too long.');
+      return;
+    }
+
     this.closeBtn.click();
     this.confirmBtn.removeEventListener('click', this.onSubmitClick);
 
@@ -178,7 +199,7 @@ export default class PopupCreatePoll extends PopupElement {
     };
     //poll.id = randomIDS;
 
-    const inputMediaPoll = appPollsManager.getInputMediaPoll(poll, this.correctAnswers, this.quizSolutionInput.value || undefined);
+    const inputMediaPoll = appPollsManager.getInputMediaPoll(poll, this.correctAnswers, quizSolution);
 
     //console.log('Will try to create poll:', inputMediaPoll);
 
@@ -214,7 +235,7 @@ export default class PopupCreatePoll extends PopupElement {
   private appendMoreField() {
     const tempID = this.tempID++;
     const idx = this.questions.childElementCount + 1;
-    const questionField = InputField('Add an Option', 'Option ' + idx, 'question-' + tempID);
+    const questionField = InputField('Add an Option', 'Option ' + idx, 'question-' + tempID, MAX_LENGTH_OPTION);
     (questionField.firstElementChild as HTMLInputElement).addEventListener('input', this.onInput);
 
     const radioField = RadioField('', 'question');

src/scss/partials/_chatlist.scss

@@ -43,7 +43,7 @@
       &:focus {
         --border-width: 2px;
         background-color: transparent;
-        border: 2px solid $button-primary-background;
+        border-color: $button-primary-background;
 
         & + .tgico {
           color: $button-primary-background;

src/scss/partials/popups/_mediaAttacher.scss

@@ -135,12 +135,7 @@
     input {
       //height: 54px;
       font-size: 1rem;
-      padding: 0 15px;
       border-radius: $border-radius-medium;
-
-      &:focus {
-        padding: 0 14.5px;
-      }
     }
 
     label {

src/scss/style.scss

@@ -626,9 +626,11 @@ hr {
   }
   
   input {
-    border: 1px solid #DADCE0;
+    --border-width: 1px;
+    border: var(--border-width) solid #DADCE0;
     border-radius: $border-radius-medium;
-    padding: 0 1rem;
+    //padding: 0 1rem;
+    padding: 0 calc(1rem - var(--border-width));
     box-sizing: border-box;
     width: 100%;
     height: 54px;
@@ -637,7 +639,7 @@ hr {
     z-index: 1;
 
     html.no-touch & {
-      &:hover {
+      &:hover:not(:focus):not(.error):not(.valid) {
         border-color: var(--color-gray);
       }
     }
@@ -652,9 +654,9 @@ hr {
     } */
     
     &:focus {
-      border-color: $button-primary-background !important;
-      border-width: 2px;
-      padding: 0 calc(1rem - 1px);
+      --border-width: 2px;
+      border-color: $button-primary-background;
+      //padding: 0 calc(1rem - 1px);
     }
     
     &:disabled {