jan/hydra_oidc_poc
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Bootstrap styling for IDP pages

Browse source
This commit is contained in:
Jan Dittberner 2021-01-02 11:38:09 +01:00
parent cd61f7d3cf
commit 3e393e0adc
6 changed files with 102 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend_src/_custom.scss
View file

@ -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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

6
templates/idp/base.gohtml
View file

@ -12,6 +12,7 @@
<link rel="icon" href="/images/favicon-128.png" sizes="128x128"> <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-192.png" sizes="192x192">
<link rel="icon" href="/images/favicon-228.png" sizes="228x228"> <link rel="icon" href="/images/favicon-228.png" sizes="228x228">
<link rel="icon" href="/images/favicon.ico">
<!-- Android --> <!-- Android -->
<link rel="shortcut icon" sizes="196x196" href="/images/favicon-196.png"> <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="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
<link rel="stylesheet" href="/css/cacert.bundle.css"> <link rel="stylesheet" href="/css/cacert.bundle.css">
<meta name="theme-color" content="#11568c">
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
</head> </head>
<body> <body class="text-center idp">
<h1>{{ .Title }}</h1>
<img src="/images/CAcert-logo.svg" width="510" height="116" alt="CAcert">
{{ template "content" . }} {{ template "content" . }}
<script type="text/javascript" src="/js/cacert.bundle.js"></script> <script type="text/javascript" src="/js/cacert.bundle.js"></script>
</body> </body>

14
templates/idp/client_certificate.gohtml
View file

@ -1,14 +1,16 @@
{{ define "content" }} {{ define "content" }}
<p>{{ .IntroText }}</p> <form class="form-signin" method="post">
<ul> <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 }} {{ range .emails }}
<li>{{ . }}</li>{{ end }} <li>{{ . }}</li>{{ end }}
</ul> </ul>
<p>{{ .RequestText }}</p> <p class="text-left">{{ .RequestText }}</p>
<form method="post">
{{ .csrfField }} {{ .csrfField }}
<input type="hidden" name="action" value="cert-login"/> <input type="hidden" name="action" value="cert-login"/>
<button type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button> <button class="btn btn-lg btn-block btn-primary" type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
<button type="submit">{{ .RejectLabel }}</button> <button class="btn btn-block btn-outline-secondary" type="submit">{{ .RejectLabel }}</button>
</form> </form>
{{ end }} {{ end }}

25
templates/idp/consent.gohtml
View file

@ -1,24 +1,27 @@
{{ define "content" }} {{ define "content" }}
<p>{{ .IntroConsentRequested }}</p> <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 }} {{ if .client.LogoURI }}
<p> <p>
<img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/> <img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
</p> </p>
{{ end }} {{ end }}
<p>{{ .IntroMoreInformation }}</p> <ul class="list-group text-left small mb-3">
<form method="post">
{{ .csrfField }}
<ul>
{{ range .requestedScope }} {{ range .requestedScope }}
<li>{{ .Label }}</li> <li class="list-group-item">{{ .Label }}</li>
{{ end }} {{ end }}
</ul> </ul>
<p class="text-left">{{ .IntroMoreInformation }}</p>
<p> {{ .csrfField }}
<input type="checkbox" name="consent" id="consent" value="true"/> <label <div class="checkbox mb-3">
for="consent">{{ .LabelConsent }}</label> <label>
</p> <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> </form>
{{ end }} {{ end }}

14
templates/idp/login.gohtml
View file

@ -1,14 +1,16 @@
{{ define "content" }} {{ 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 }} {{ .csrfField }}
<input type="hidden" name="action" value="password-login"/> <input type="hidden" name="action" value="password-login"/>
{{ if .errors.Form}}<p>{{ .errors.Form }}</p>{{ end }} {{ if .errors.Form}}<p>{{ .errors.Form }}</p>{{ end }}
{{ if .errors.Email }}<p>{{ .errors.Email }}</p>{{ end }} {{ if .errors.Email }}<p>{{ .errors.Email }}</p>{{ end }}
<label for="email">{{ .LabelEmail }}</label> <label for="email" class="sr-only">{{ .LabelEmail }}</label>
<input type="text" id="email" name="email" value="{{ .Email }}"/><br/> <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 }} {{ if .errors.Password }}<p>{{ .errors.Password }}</p>{{ end }}
<label for="password">{{ .LabelPassword }}</label> <label for="password" class="sr-only">{{ .LabelPassword }}</label>
<input type="password" id="password" name="password" value=""/><br/> <input type="password" id="password" class="form-control" placeholder="{{ .LabelPassword }}" name="password" value=""/><br/>
<button type="submit">{{ .LabelLogin }}</button> <button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelLogin }}</button>
</form> </form>
{{ end }} {{ end }}