Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modify sign in window #148

Closed
Tazovsky opened this issue May 15, 2019 · 2 comments
Closed

Modify sign in window #148

Tazovsky opened this issue May 15, 2019 · 2 comments

Comments

@Tazovsky
Copy link

File templates/login.html is missing in newest version of ShinyProxy, so how can I modify style of sign in page?

image
@kuzmenkov111
Copy link

kuzmenkov111 commented Jul 4, 2019 •
edited

There is an answer on ShinyProxy Community Support Website https://support.openanalytics.eu/t/login-page-customization/727

And here an example of the login.html

<!--

    ContainerProxy

    Copyright (C) 2016-2019 Open Analytics

    ===========================================================================

    This program is free software: you can redistribute it and/or modify
    it under the terms of the Apache License as published by
    The Apache Software Foundation, either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    Apache License for more details.

    You should have received a copy of the Apache License
    along with this program.  If not, see <http://www.apache.org/licenses/>

-->
<!DOCTYPE html>
<html
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head lang="en">
	<title th:text="${title}"></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" media="screen" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
	<link rel="stylesheet" media="screen" th:href="@{/css/login.css}"/>
	<link rel="stylesheet" media="screen" type="text/css" href="https://cdn.jsdelivr.net/bootstrap-social/5.1.1/bootstrap-social.css"/>
	<link rel="stylesheet" media="screen" type="text/css" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css"/>
	<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
	<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</head>

<body>
	<div class="container">
		
		<div th:if="${@authenticationBackend.name != 'social'}">
			<form class="form-signin" action="login" method="POST">
				<h2 class="form-signin-heading">Please sign in:</h2>
				<div class="alert alert-danger" th:if="${error}">
	  				<strong>Could not sign in!</strong><br/><span th:text="${error}"></span>.
				</div>
				<label for="username" class="sr-only">Email address</label> 
				<input name="username" id="username" class="form-control" placeholder="User name" required="required" autofocus="autofocus"></input> 
				<label for="password" class="sr-only">Password</label>
				<input name="password" type="password" id="password" class="form-control" placeholder="Password" required="required"></input>
				<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			</form>
		</div>
		
		<div th:if="${@authenticationBackend.name == 'social'}">
			<br/>
			<h2 class="form-signin form-signin-heading">Please sign in:</h2>
			<form th:each="provider : ${@socialProviders}" class="form-signin" method="POST" th:action="@{/signin/__${provider}__}">
				<button th:class="@{btn btn-block btn-social btn-__${provider}__}" type="submit">
					<span th:class="@{fa fa-__${provider}__}"></span> Sign in with <span th:text="${provider.label()}"></span>
				</button>
			</form>
		</div>
		
	</div>
</body>

</html>

If you want to add css style, you should add an appropriate link in html section.
For exampe <link rel="stylesheet" media="screen" th:href="@{/assets/css/login.css}"/>, where login.css path on file system is /2col/assets/css/login.css or /1col/assets/css/login.css

@kuzmenkov111 kuzmenkov111 mentioned this issue Jul 10, 2019
Closed
@LEDfan
Copy link
Member

LEDfan commented Mar 3, 2021

Hi, as pointed out by @kuzmenkov111 the login template is part of ContainerProxy.
I updated our documentation with direct links to all templates: https://github.com/openanalytics/shinyproxy-config-examples/tree/master/04-custom-html-template#where-to-find-the-original-template-files

@LEDfan LEDfan closed this as completed Mar 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@LEDfan @kuzmenkov111 @Tazovsky