WebUI: improve style for readonly fields

Signed-off-by: Nicola Murino <[email protected]>

templates/common/base.html

@@ -330,6 +330,12 @@ explicit grant from the SFTPGo Team ([email protected]).
         font-weight: 600 !important;
         font-size: 1.3rem !important;
     }
+
+    .readonly-input {
+        color: var(--bs-text-gray-800);
+        font-weight: 500 !important;
+        font-size: 1.1rem !important;
+    }
 </style>
 {{- end}}
 

templates/webadmin/folder.html

@@ -91,8 +91,8 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="idFolderName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                 <div class="col-md-9">
-                    <input id="idFolderName" type="text" class="form-control" placeholder="" name="name" value="{{.Folder.Name}}"
-                        maxlength="255" autocomplete="off" spellcheck="false" required {{if ge .Mode 2}}readonly{{end}} />
+                    <input id="idFolderName" type="text" placeholder="" name="name" value="{{.Folder.Name}}" maxlength="255" autocomplete="off"
+                        spellcheck="false" required {{if ge .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                 </div>
             </div>
             {{- end}}

templates/webadmin/group.html

@@ -27,8 +27,8 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="idGroupName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                 <div class="col-md-9">
-                    <input id="idGroupName" type="text" class="form-control" placeholder="" name="name" value="{{.Group.Name}}"
-                        maxlength="255" autocomplete="off" spellcheck="false" required {{if eq .Mode 2}}readonly{{end}} />
+                    <input id="idGroupName" type="text" placeholder="" name="name" value="{{.Group.Name}}" maxlength="255" autocomplete="off"
+                        spellcheck="false" required {{if eq .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                 </div>
             </div>
 

templates/webadmin/role.html

@@ -27,8 +27,8 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="idRoleName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                 <div class="col-md-9">
-                    <input id="idRoleName" type="text" class="form-control" placeholder="" name="name" value="{{.Role.Name}}"
-                        maxlength="255" autocomplete="off" spellcheck="false" required {{if eq .Mode 2}}readonly{{end}} />
+                    <input id="idRoleName" type="text" placeholder="" name="name" value="{{.Role.Name}}" maxlength="255" autocomplete="off"
+                        spellcheck="false" required {{if eq .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                 </div>
             </div>
 

templates/webadmin/user.html

@@ -99,8 +99,8 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="idUsername" data-i18n="login.username" class="col-md-3 col-form-label">Username</label>
                 <div class="col-md-9">
-                    <input id="idUsername" type="text" class="form-control" placeholder="" name="username" value="{{.User.Username}}"
-                        maxlength="255" autocomplete="off" spellcheck="false" required {{if ge .Mode 2}}readonly{{end}} />
+                    <input id="idUsername" type="text" placeholder="" name="username" value="{{.User.Username}}" maxlength="255" autocomplete="off"
+                        spellcheck="false" required {{if ge .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                 </div>
             </div>
             {{- end}}

templates/webclient/profile.html

@@ -26,16 +26,16 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="idEmail" data-i18n="general.email" class="col-md-3 col-form-label">Email</label>
                 <div class="col-md-9">
-                    <input type="text" class="form-control" id="idEmail" name="email" placeholder="" spellcheck="false"
-                        value="{{.Email}}" maxlength="255" autocomplete="off" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
+                    <input type="text" id="idEmail" name="email" placeholder="" spellcheck="false" value="{{.Email}}" maxlength="255"
+                        autocomplete="off" {{if not .LoggedUser.CanChangeInfo}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}}>
                 </div>
             </div>
 
             <div class="form-group row mt-10">
                 <label for="idDescription" data-i18n="general.description" class="col-md-3 col-form-label">Description</label>
                 <div class="col-md-9">
-                    <input type="text" class="form-control" id="idDescription" name="description" placeholder=""
-                        value="{{.Description}}" maxlength="255" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
+                    <input type="text" id="idDescription" name="description" placeholder="" value="{{.Description}}" maxlength="255"
+                        {{if not .LoggedUser.CanChangeInfo}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}}>
                 </div>
             </div>
 

templates/webclient/share.html

@@ -26,8 +26,8 @@ explicit grant from the SFTPGo Team ([email protected]).
             <div class="form-group row">
                 <label for="name" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                 <div class="col-md-9">
-                    <input id="name" type="text" class="form-control" placeholder="" name="name" value="{{.Share.Name}}"
-                        maxlength="255" autocomplete="off" required {{if not .IsAdd}}readonly{{end}} />
+                    <input id="name" type="text" placeholder="" name="name" value="{{.Share.Name}}" maxlength="255" autocomplete="off"
+                        required {{if not .IsAdd}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                 </div>
             </div>