docs: add README and dex custom theme
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
12fd2f2e70
commit
ad16084d47
11 changed files with 478 additions and 0 deletions
44
dextpl/approval.html
Normal file
44
dextpl/approval.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Grant Access</h2>
|
||||
|
||||
<hr class="dex-separator">
|
||||
<div>
|
||||
{{ if .Scopes }}
|
||||
<div class="dex-subtle-text">{{ .Client }} would like to:</div>
|
||||
<ul class="dex-list">
|
||||
{{ range $scope := .Scopes }}
|
||||
<li>{{ $scope }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ else }}
|
||||
<div class="dex-subtle-text">{{ .Client }} has not requested any personal information</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<hr class="dex-separator">
|
||||
|
||||
<div>
|
||||
<div class="theme-form-row">
|
||||
<form method="post">
|
||||
<input type="hidden" name="req" value="{{ .AuthReqID }}"/>
|
||||
<input type="hidden" name="approval" value="approve">
|
||||
<button type="submit" class="dex-btn theme-btn--success">
|
||||
<span class="dex-btn-text">Grant Access</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="theme-form-row">
|
||||
<form method="post">
|
||||
<input type="hidden" name="req" value="{{ .AuthReqID }}"/>
|
||||
<input type="hidden" name="approval" value="rejected">
|
||||
<button type="submit" class="dex-btn theme-btn-provider">
|
||||
<span class="dex-btn-text">Cancel</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
23
dextpl/device.html
Normal file
23
dextpl/device.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Enter User Code</h2>
|
||||
<form method="post" action="{{ .PostURL }}">
|
||||
<div class="theme-form-row">
|
||||
{{ if( .UserCode )}}
|
||||
<input tabindex="2" required id="user_code" name="user_code" type="text" class="theme-form-input" autocomplete="off" value="{{.UserCode}}" {{ if .Invalid }} autofocus {{ end }}/>
|
||||
{{ else }}
|
||||
<input tabindex="2" required id="user_code" name="user_code" type="text" class="theme-form-input" placeholder="XXXX-XXXX" autocomplete="off" {{ if .Invalid }} autofocus {{ end }}/>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if .Invalid }}
|
||||
<div id="login-error" class="dex-error-box">
|
||||
Invalid or Expired User Code
|
||||
</div>
|
||||
{{ end }}
|
||||
<button tabindex="3" id="submit-login" type="submit" class="dex-btn theme-btn--primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
8
dextpl/device_success.html
Normal file
8
dextpl/device_success.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Login Successful for {{ .ClientName }}</h2>
|
||||
<p>Return to your device to continue</p>
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
8
dextpl/error.html
Normal file
8
dextpl/error.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">{{ .ErrType }}</h2>
|
||||
<p>{{ .ErrMsg }}</p>
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
3
dextpl/footer.html
Normal file
3
dextpl/footer.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
dextpl/header.html
Normal file
20
dextpl/header.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ issuer }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="{{ url .ReqPath "static/main.css" }}" rel="stylesheet">
|
||||
<link href="{{ url .ReqPath "theme/styles.css" }}" rel="stylesheet">
|
||||
<link rel="icon" href="{{ url .ReqPath "theme/favicon.png" }}">
|
||||
</head>
|
||||
|
||||
<body class="theme-body">
|
||||
<div class="theme-navbar">
|
||||
<div class="theme-navbar__logo-wrap">
|
||||
<img class="theme-navbar__logo" src="{{ url .ReqPath logo }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dex-container">
|
||||
19
dextpl/login.html
Normal file
19
dextpl/login.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Log in to {{ issuer }} </h2>
|
||||
<div>
|
||||
{{ range $c := .Connectors }}
|
||||
<div class="theme-form-row">
|
||||
<a href="{{ $c.URL }}" target="_self">
|
||||
<button class="dex-btn theme-btn-provider">
|
||||
<span class="dex-btn-icon dex-btn-icon--{{ $c.Type }}"></span>
|
||||
<span class="dex-btn-text">Log in with {{ $c.Name }}</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
153
dextpl/main.css
Normal file
153
dextpl/main.css
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dex-container {
|
||||
color: #333;
|
||||
margin: 45px auto;
|
||||
max-width: 500px;
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dex-btn {
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dex-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dex-btn:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dex-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dex-btn-icon {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
float: left;
|
||||
height: 36px;
|
||||
margin-right: 5px;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dex-btn-icon--google {
|
||||
background-color: #FFFFFF;
|
||||
background-image: url(../static/img/google-icon.svg);;
|
||||
}
|
||||
|
||||
.dex-btn-icon--local {
|
||||
background-color: #84B6EF;
|
||||
background-image: url(../static/img/email-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--gitea {
|
||||
background-color: #F5F5F5;
|
||||
background-image: url(../static/img/gitea-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--github {
|
||||
background-color: #F5F5F5;
|
||||
background-image: url(../static/img/github-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--gitlab {
|
||||
background-color: #F5F5F5;
|
||||
background-image: url(../static/img/gitlab-icon.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.dex-btn-icon--keystone {
|
||||
background-color: #F5F5F5;
|
||||
background-image: url(../static/img/keystone-icon.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.dex-btn-icon--oidc {
|
||||
background-color: #EBEBEE;
|
||||
background-image: url(../static/img/oidc-icon.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.dex-btn-icon--bitbucket-cloud {
|
||||
background-color: #205081;
|
||||
background-image: url(../static/img/bitbucket-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--atlassian-crowd {
|
||||
background-color: #CFDCEA;
|
||||
background-image: url(../static/img/atlassian-crowd-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--ldap {
|
||||
background-color: #84B6EF;
|
||||
background-image: url(../static/img/ldap-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--saml {
|
||||
background-color: #84B6EF;
|
||||
background-image: url(../static/img/saml-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--linkedin {
|
||||
background-image: url(../static/img/linkedin-icon.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.dex-btn-icon--microsoft {
|
||||
background-image: url(../static/img/microsoft-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-text {
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dex-subtle-text {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dex-separator {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dex-list {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
list-style: circle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dex-error-box {
|
||||
background-color: #DD1327;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
max-width: 320px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.dex-error-box {
|
||||
margin: 20px auto;
|
||||
}
|
||||
9
dextpl/oob.html
Normal file
9
dextpl/oob.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Login Successful</h2>
|
||||
<p>Please copy this code, switch to your application and paste it there:</p>
|
||||
<input type="text" class="theme-form-input" value="{{ .Code }}" />
|
||||
</div>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
43
dextpl/password.html
Normal file
43
dextpl/password.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
{{ template "header.html" . }}
|
||||
|
||||
<div class="theme-panel">
|
||||
<h2 class="theme-heading">Log in to Your Account</h2>
|
||||
<form method="post" action="{{ .PostURL }}">
|
||||
<div class="theme-form-row">
|
||||
<div class="theme-form-label">
|
||||
<label for="login">{{ .UsernamePrompt }}</label>
|
||||
</div>
|
||||
<input tabindex="1" required id="login" name="login" type="text" class="theme-form-input" placeholder="{{ .UsernamePrompt | lower }}" {{ if .Username }} value="{{ .Username }}" {{ else }} autofocus {{ end }}/>
|
||||
</div>
|
||||
<div class="theme-form-row">
|
||||
<div class="theme-form-label">
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
<input tabindex="2" required id="password" name="password" type="password" class="theme-form-input" placeholder="password" {{ if .Invalid }} autofocus {{ end }}/>
|
||||
</div>
|
||||
|
||||
{{ if .Invalid }}
|
||||
<div id="login-error" class="dex-error-box">
|
||||
Invalid {{ .UsernamePrompt }} and password.
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<button tabindex="3" id="submit-login" type="submit" class="dex-btn theme-btn--primary">Login</button>
|
||||
|
||||
</form>
|
||||
{{ if .BackLink }}
|
||||
<div class="theme-link-back">
|
||||
<a class="dex-subtle-text" href="{{ .BackLink }}">Select another login method.</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
document.querySelector('form').onsubmit = function(e) {
|
||||
var el = document.querySelector('#submit-login');
|
||||
el.setAttribute('disabled', 'disabled');
|
||||
};
|
||||
</script>
|
||||
|
||||
{{ template "footer.html" . }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue