Bootstrap styling for IDP pages
This commit is contained in:
parent
cd61f7d3cf
commit
3e393e0adc
6 changed files with 102 additions and 35 deletions
|
@ -1 +1,61 @@
|
|||
@import "~bootstrap/scss/bootstrap";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
$dimmed_white: #f5f5f5;
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: $dimmed_white;
|
||||
}
|
||||
|
||||
body.idp {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
// -ms-flex-align: center;
|
||||
// align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.form-consent {
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.form-signin, .form-consent {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
BIN
frontend_src/images/favicon.ico
Normal file
BIN
frontend_src/images/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
|
@ -12,6 +12,7 @@
|
|||
<link rel="icon" href="/images/favicon-128.png" sizes="128x128">
|
||||
<link rel="icon" href="/images/favicon-192.png" sizes="192x192">
|
||||
<link rel="icon" href="/images/favicon-228.png" sizes="228x228">
|
||||
<link rel="icon" href="/images/favicon.ico">
|
||||
|
||||
<!-- Android -->
|
||||
<link rel="shortcut icon" sizes="196x196" href="/images/favicon-196.png">
|
||||
|
@ -22,11 +23,10 @@
|
|||
<link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
|
||||
|
||||
<link rel="stylesheet" href="/css/cacert.bundle.css">
|
||||
<meta name="theme-color" content="#11568c">
|
||||
<title>{{ .Title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<img src="/images/CAcert-logo.svg" width="510" height="116" alt="CAcert">
|
||||
<body class="text-center idp">
|
||||
{{ template "content" . }}
|
||||
<script type="text/javascript" src="/js/cacert.bundle.js"></script>
|
||||
</body>
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
{{ define "content" }}
|
||||
<p>{{ .IntroText }}</p>
|
||||
<ul>
|
||||
{{ range .emails }}
|
||||
<li>{{ . }}</li>{{ end }}
|
||||
</ul>
|
||||
<p>{{ .RequestText }}</p>
|
||||
<form method="post">
|
||||
<form class="form-signin" method="post">
|
||||
<img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
|
||||
<h1 class="h3 mb-3">{{ .Title }}</h1>
|
||||
<p class="text-left">{{ .IntroText }}</p>
|
||||
<ul class="text-left">
|
||||
{{ range .emails }}
|
||||
<li>{{ . }}</li>{{ end }}
|
||||
</ul>
|
||||
<p class="text-left">{{ .RequestText }}</p>
|
||||
{{ .csrfField }}
|
||||
<input type="hidden" name="action" value="cert-login"/>
|
||||
<button type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
|
||||
<button type="submit">{{ .RejectLabel }}</button>
|
||||
<button class="btn btn-lg btn-block btn-primary" type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
|
||||
<button class="btn btn-block btn-outline-secondary" type="submit">{{ .RejectLabel }}</button>
|
||||
</form>
|
||||
{{ end }}
|
|
@ -1,24 +1,27 @@
|
|||
{{ define "content" }}
|
||||
<p>{{ .IntroConsentRequested }}</p>
|
||||
{{ if .client.LogoURI }}
|
||||
<p>
|
||||
<img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
|
||||
</p>
|
||||
{{ end }}
|
||||
<p>{{ .IntroMoreInformation }}</p>
|
||||
<form method="post">
|
||||
{{ .csrfField }}
|
||||
<ul>
|
||||
<form class="form-consent" method="post">
|
||||
<img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
|
||||
<h1 class="h3 mb-3">{{ .Title }}</h1>
|
||||
<p class="text-left">{{ .IntroConsentRequested }}</p>
|
||||
{{ if .client.LogoURI }}
|
||||
<p>
|
||||
<img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
|
||||
</p>
|
||||
{{ end }}
|
||||
<ul class="list-group text-left small mb-3">
|
||||
{{ range .requestedScope }}
|
||||
<li>{{ .Label }}</li>
|
||||
<li class="list-group-item">{{ .Label }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<p class="text-left">{{ .IntroMoreInformation }}</p>
|
||||
|
||||
<p>
|
||||
<input type="checkbox" name="consent" id="consent" value="true"/> <label
|
||||
for="consent">{{ .LabelConsent }}</label>
|
||||
</p>
|
||||
{{ .csrfField }}
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" name="consent" id="consent" value="true"/>
|
||||
{{ .LabelConsent }}</label>
|
||||
</div>
|
||||
|
||||
<button type="submit">{{ .LabelSubmit }}</button>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelSubmit }}</button>
|
||||
</form>
|
||||
{{ end }}
|
|
@ -1,14 +1,16 @@
|
|||
{{ define "content" }}
|
||||
<form method="post">
|
||||
<form class="form-signin" method="post">
|
||||
<img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
|
||||
<h1 class="h3 mb-3">{{ .Title }}</h1>
|
||||
{{ .csrfField }}
|
||||
<input type="hidden" name="action" value="password-login"/>
|
||||
{{ if .errors.Form}}<p>{{ .errors.Form }}</p>{{ end }}
|
||||
{{ if .errors.Email }}<p>{{ .errors.Email }}</p>{{ end }}
|
||||
<label for="email">{{ .LabelEmail }}</label>
|
||||
<input type="text" id="email" name="email" value="{{ .Email }}"/><br/>
|
||||
<label for="email" class="sr-only">{{ .LabelEmail }}</label>
|
||||
<input type="email" id="email" class="form-control" placeholder="{{ .LabelEmail }}" required autofocus name="email" value="{{ .Email }}"/><br/>
|
||||
{{ if .errors.Password }}<p>{{ .errors.Password }}</p>{{ end }}
|
||||
<label for="password">{{ .LabelPassword }}</label>
|
||||
<input type="password" id="password" name="password" value=""/><br/>
|
||||
<button type="submit">{{ .LabelLogin }}</button>
|
||||
<label for="password" class="sr-only">{{ .LabelPassword }}</label>
|
||||
<input type="password" id="password" class="form-control" placeholder="{{ .LabelPassword }}" name="password" value=""/><br/>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelLogin }}</button>
|
||||
</form>
|
||||
{{ end }}
|
Reference in a new issue