misso/templates/consent.tmpl

187 lines
5.7 KiB
Cheetah

{{ define "consent.tmpl" }}
<html lang="zh">
<head>
<title>Confirm authorization</title>
{{ template "head.tmpl" }}
<style>
ul.scopes,
ul.app-terms {
list-style: none;
padding-left: 0;
}
ul.scopes {
text-align: left;
width: 100%;
max-height: 30vh;
overflow-y: auto;
}
ul.scopes > li {
padding: 6px 12px;
margin: 6px 0;
border-radius: 6px;
background-color: #282c34;
}
ul.scopes > li > * {
cursor: pointer;
}
ul.app-terms {
display: inline-flex;
gap: 0;
}
ul.app-terms > li {
padding: 0 6px;
margin: 0;
}
ul.app-terms > li:not(:last-child) {
border-right: 1px solid white;
}
ul.app-terms > li > a {
color: #62b6e7;
}
.consent-notice {
width: 100%;
border-radius: 6px;
background-color: #282c34;
}
p.remember {
display: flex;
justify-content: center;
}
p.remember, p.remember > * {
cursor: pointer;
}
input#remember {
height: 16px;
width: 16px;
color: #62b6e7;
border-radius: 6px;
}
p.buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: .5rem
}
@media (min-width: 640px) {
p.buttons {
flex-direction: row;
gap: 2rem;
}
}
button {
display: flex;
flex-grow: 1;
padding: 8px 24px;
cursor: pointer;
border-radius: 8px;
border: none;
font-size: 1.2rem;
color: white;
justify-content: center;
transition: background-color .2s;
}
button.reject {
background: #dc2626;
}
button.reject:hover {
background: #b91c1c;
}
button.accept {
background: #16a34a;
}
button.accept:hover {
background: #15803d;
}
.app-name, .user-name {
color: #62b6e7;
}
</style>
</head>
<body>
<form id="main" action="/consent" method="POST">
<input type="hidden" name="_csrf" value="{{ .csrf }}" />
<input type="hidden" name="challenge" value="{{ .challenge }}" />
<div class="logo">
{{ if .logo }}
<img src="{{ .logo }}" alt="{{ .clientName }}" width="120" height="120" />
{{ else }}
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 48 48">
<g>
<circle fill="#EFD358" cx="24" cy="24" r="24"></circle>
<path fill="#FFFFFF" d="M24,28c0.55225,0,1-0.44775,1-1V14c0-0.55225-0.44775-1-1-1s-1,0.44775-1,1v13 C23,27.55225,23.44775,28,24,28z"></path>
<circle fill="#FFFFFF" cx="24" cy="33" r="2"></circle>
</g>
</svg>
{{ end }}
</div>
<div>
<p>
Application
<span class="app-name">{{ .clientName }}</span>
is requesting
<br />
access to account
<span class="user-name">{{ .user.name }}</span>
with the following scopes:
</p>
<ul class="scopes">
{{ $user := .user }}
{{ range $scope := .scopes }}
<li>
<details>
<summary>{{ $scope }}</summary>
<pre>{{ index $user $scope }}</pre>
</details>
</li>
{{ end }}
</ul>
{{ if or .clientPolicy .clientTos }}
<ul class="app-terms">
{{ if .clientPolicy }}
<li><a href="{{ .clientPolicy }}" target="_blank" referrerpolicy="no-referrer">Client Usage Policy</a></li>
{{ end }}
{{ if .clientTos }}
<li><a href="{{ .clientTos }}" target="_blank" referrerpolicy="no-referrer">Terms of Service</a></li>
{{ end }}
</ul>
{{ end }}
</div>
<div class="consent-notice">
<p>Accept the request?</p>
<p class="remember">
<input type="checkbox" id="remember" name="remember" value="true" />
<label for="remember">Remember my choice</label>
</p>
</div>
<p class="buttons">
<button type="submit" name="action" value="reject" class="reject">Reject</button>
<button type="submit" name="action" value="accept" class="accept">Accept</button>
</p>
</form>
</body>
</html>
{{ end }}