Customizando a tela de login


#1

Bom dia,

Eu gostaria de inserir uma imagem como plano de fundo na minha tela de login e também centralizar nessa imagem os campos login e senha, alguém tem alguma idéia de qual arquivo é necessário alterar para inserir esses itens ?

Grato.


#2

Olá Rafael,

começando agora também, mas pelo que eu entendi você terá de fazer os seguintes passos:

abre a pasta webapps sob scadaBr e aí vai ter outra pasta ScadaBr. Abre a pasta WEB-INF e sob a pasta jsp, você vai encontrar o arquivo login.jsp. Aí você edita de acordo como quer.


#3

Obrigado João… Consegui colocar o plano de fundo alterando o arquivo C:\Program Files\ScadaBR\webapps\ScadaBR\WEB-INF\jsp\ogin.jsp.

Vou deixar registrado o código abaixo para quem precisar… No caso eu apenas criei uma div style… não sei se é a melhor solução mas funcionou…rs

        <spring:bind path="login.password">
          <tr>
            <td class="formLabelRequired"><fmt:message key="login.password"/></td>
            <td class="formField">
              <input id="password" type="password" name="password" value="${status.value}" maxlength="20"/>
            </td>
            <td class="formError">${status.errorMessage}</td>
          </tr>
        </spring:bind>
            
        <spring:bind path="login">
          <c:if test="${status.error}">
            <td colspan="3" class="formError">
              <c:forEach items="${status.errorMessages}" var="error">
                <c:out value="${error}"/><br/>
              </c:forEach>
            </td>
          </c:if>
        </spring:bind>
        
        <tr>
          <td colspan="2" align="center">
            <input type="submit" value="<fmt:message key="login.loginButton"/>"/>
            <tag:help id="welcomeToMango"/>
          </td>
          <td></td>
        </tr>
      </table>
    </form>
    <br/>
  </td>
  <td valign="top">
    <table>
      <tr>
        <td valign="top"><img id="browserImg" src="images/magnifier.png"/></td>
        <td><b><span id="browser"><fmt:message key="login.unknownBrowser"/></span></b></td>
      </tr>
      <tr>
        <td valign="top" colspan="2">
          <span id="okMsg" style="display:none"><fmt:message key="login.supportedBrowser"/></span>
          <span id="warnMsg" style="display:none"><fmt:message key="login.unsupportedBrowser"/></span>
        </td>
      </tr>
    </table>
    <br/><br/>
  </td>
</tr>
${status.errorMessage}

#5

Olá pessoal, vou disponibilizar aqui um arquivo login.jsp com um css embutido que deixa a tela de login responsiva para o ScadaBR 1.1. Para utilizar é só substituir o arquivo login.jsp na pasta jsp dentro da WEB-INF.
https://drive.google.com/file/d/1D8e8zgCM3ZIAHJRwW9GzNpb8GgQXUNsF/view?usp=sharing