252 password input type (#268)

* Added 'password' input type in template.

* added field with  type password for inputs

---------

Co-authored-by: Vadim Zabolotniy <[email protected]>
Co-authored-by: ATomkivEX <[email protected]>

application/constants/templates.py

@@ -10,6 +10,7 @@ class InputTypes(StrEnum):
     """
     checkbox = 'checkbox'
     number = 'number'
+    password = 'password'
     radio_select = 'radio_select'
     select = 'select'
     slider = 'slider'

application/schemas/templates/inputs.py

@@ -132,7 +132,7 @@ def ensure_default_in_range(cls, values: dict) -> dict:
 
 class TextualInput(BaseInput):
     """
-    User inputs where user can choose one or more option from predefined set.
+    User inputs with one of the text kind widget.
     """
     type: Literal[InputTypes.text] | Literal[InputTypes.textarea] = Field(
         description='Type of form input.', example=Literal[InputTypes.text]
@@ -190,24 +190,32 @@ class SliderInput(NumericInput):
 
 class TextInput(TextualInput):
     """
-    User inputs where user can choose one or more option from predefined set.
+    User inputs with simple one line textfield.
     """
     type: Literal[InputTypes.text] = Field(description='Type of form input.', example=InputTypes.text)
 
 
 class TextareaInput(TextualInput):
     """
-    User inputs where user can choose one or more option from predefined set.
+    User inputs with multiline textbox.
     """
     type: Literal[InputTypes.textarea] = Field(description='Type of form input.', example=InputTypes.textarea)
 
 
+class PasswordInput(TextualInput):
+    """
+    User inputs with password textfield which hides entered text.
+    """
+    type: Literal[InputTypes.password] = Field(description='Type of form input.', example=InputTypes.password)
+
+
 Input = Annotated[CheckboxInput |
                   NumberInputs |
                   RadioSelectInput |
                   SelectInput |
                   SliderInput |
                   SwitchInput |
                   TextareaInput |
-                  TextInput,
+                  TextInput |
+                  PasswordInput,
                   Field(discriminator='type')]

frontend/src/app/main/applications/TemplateInputs/TemplateInputs.js

@@ -7,6 +7,7 @@ import { selectTemplates } from 'app/store/templatesSlice';
 
 import TypeCheckbox from './TypeCheckbox';
 import TypeNumber from './TypeNumber';
+import TypePassword from './TypePassword';
 import TypeRadio from './TypeRadio';
 import TypeSelect from './TypeSelect';
 import TypeSlider from './TypeSlider';
@@ -67,6 +68,9 @@ const TemplateInputs = ({ setTemplateFormData, clearMessages, templateFromCatalo
       case 'text':
         newItem = { ...item, default: e.target.value };
         break;
+      case 'password':
+        newItem = { ...item, default: e.target.value };
+        break;
       case 'textarea':
         newItem = { ...item, default: e.target.value };
         break;
@@ -127,6 +131,8 @@ const TemplateInputs = ({ setTemplateFormData, clearMessages, templateFromCatalo
           switch (item.type) {
             case 'text':
               return <TypeText key={item.name} item={item} onChangeInputs={onChangeInputs} />;
+            case 'password':
+              return <TypePassword key={item.name} item={item} onChangeInputs={onChangeInputs} />;
             case 'textarea':
               return <TypeTextarea key={item.name} item={item} onChangeInputs={onChangeInputs} />;
             case 'select':

frontend/src/app/main/applications/TemplateInputs/TypePassword.js

@@ -0,0 +1,42 @@
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { FormHelperText } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import { useState } from 'react';
+
+const TypePassword = ({ item, onChangeInputs }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+  const handleMouseDownPassword = () => setShowPassword(!showPassword);
+
+  return (
+    <FormControl fullWidth margin='normal'>
+      <TextField
+        type={showPassword ? 'text' : 'password'}
+        name='password'
+        required
+        label={item.label}
+        value={item.default}
+        onChange={(e) => onChangeInputs(e, item)}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position='end'>
+              <IconButton
+                aria-label='toggle password visibility'
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+              >
+                {showPassword ? <Visibility /> : <VisibilityOff />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+      <FormHelperText>{item?.description}</FormHelperText>
+    </FormControl>
+  );
+};
+
+export default TypePassword;

frontend/src/app/main/templates/TemplateModal/TemplateBuilder/InputsBuilder/InputFields/InputTypes.js

@@ -1,7 +1,17 @@
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { useEffect, useState } from 'react';
 
-const TYPE_VALUES = ['text', 'textarea', 'select', 'radio_select', 'switch', 'checkbox', 'slider', 'number'];
+const TYPE_VALUES = [
+  'text',
+  'password',
+  'textarea',
+  'select',
+  'radio_select',
+  'switch',
+  'checkbox',
+  'slider',
+  'number',
+];
 
 const InputTypes = ({ typeValue, index, handleOnChangeInput, infoIsYamlValid }) => {
   const [type, setType] = useState('');

frontend/src/app/main/templates/TemplateModal/TemplateBuilder/InputsBuilder/InputItem.js

@@ -59,7 +59,14 @@ const InputItem = ({ input, index, infoIsYamlValid }) => {
             infoIsYamlValid={infoIsYamlValid}
           />
         )}
-
+        {input.type === 'password' && (
+          <InputTypeText
+            input={input}
+            handleOnChangeInput={handleOnChangeInput}
+            index={index}
+            infoIsYamlValid={infoIsYamlValid}
+          />
+        )}
         {input.type === 'textarea' && (
           <InputTypeText
             input={input}