Skip to content

Commit

Permalink
feat: Update Dex config
Browse files Browse the repository at this point in the history
  • Loading branch information
@flemzord
flemzord committed Sep 26, 2022
1 parent 3a128a2 commit 8dd398b
Show file tree
Hide file tree
Showing 12 changed files with 177 additions and 283 deletions.
1 change: 0 additions & 1 deletion dex-config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ storage:
frontend:
issuer: Formance
dir: /app/web
theme: formance

web:
http: 0.0.0.0:5556
Expand Down
12 changes: 12 additions & 0 deletions pkg/web/static/img/email-icon-light.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pkg/web/static/img/email-icon.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion pkg/web/themes/formance/black.svg → pkg/web/static/img/formance/favicon.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
209 changes: 116 additions & 93 deletions pkg/web/static/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,140 +4,163 @@

body {
margin: 0;
font-family: Inter, sans-serif;
background-color: #F9F9F9;
height: 100%;
width: 100%;
-webkit-font-smoothing: antialiased;
}

.dex-container {
color: #333;
margin: 45px auto;
max-width: 500px;
min-width: 320px;
h1 {
font-style: normal;
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
font-family: Inter, sans-serif;
}

.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;
a {
text-decoration: none;
}

.dex-btn:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
outline: none;
input {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px 8px 8px 16px;
width: 421px;
height: 40px;
background: #FFFFFF;
border: 1px solid #E3E5EA;
border-radius: 4px;
}

.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;
.container {
display: flex; /* establish flex container */
flex-direction: column; /* make main-axis vertical */
justify-content: center; /* align items vertically, in this case */
align-items: center; /* align items horizontally, in this case */
height: 100%;
width: 100%;
}

.dex-btn-icon--google {
.card {
padding: 40px;
max-width: 500px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
min-width: 200px;
max-height: 355px;
background-color: #FFFFFF;
background-image: url(../static/img/google-icon.svg);;
border-radius: 4px;
font-size: 14px;
}

.dex-btn-icon--local {
background-color: #84B6EF;
background-image: url(../static/img/email-icon.svg);
.box {
margin: 16px 0 16px 0;
display: block;
}

.dex-btn-icon--github {
background-color: #F5F5F5;
background-image: url(../static/img/github-icon.svg);
.button--secondary {
background: #FFFFFF;
border: 1px solid #E3E5EA;
border-radius: 4px;
width: 420px;
height: 40px;
display: flex;
justify-content: center;
}

.dex-btn-icon--gitlab {
background-color: #F5F5F5;
background-image: url(../static/img/gitlab-icon.svg);
background-size: contain;
.button--primary {
background: #161719;
color: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 4px;
width: 420px;
height: 40px;
display: flex;
justify-content: center;
}

.dex-btn-icon--keystone {
background-color: #F5F5F5;
background-image: url(../static/img/keystone-icon.svg);
background-size: contain;
.button--secondary:hover {
cursor: pointer;
background-color: #EEF1F5;
}

.dex-btn-icon--oidc {
background-color: #EBEBEE;
background-image: url(../static/img/oidc-icon.svg);
background-size: contain;
.button--primary:hover {
cursor: pointer;
color: #FFFFFF;
}

.dex-btn-icon--bitbucket-cloud {
background-color: #205081;
background-image: url(../static/img/bitbucket-icon.svg);
.button__icon {
background-position: center;
background-repeat: no-repeat;
background-size: 22px;
height: 28px;
width: 28px;
margin-right: 8px;
margin-top: 4px;
}

.dex-btn-icon--atlassian-crowd {
background-color: #CFDCEA;
background-image: url(../static/img/atlassian-crowd-icon.svg);
.button__text {
font-style: normal;
font-weight: 500;
font-size: 14px;
margin-top: 10px;
display: block;
}

.dex-btn-icon--ldap {
background-color: #84B6EF;
background-image: url(../static/img/ldap-icon.svg);
.button__icon--google {
background-image: url(../static/img/google-icon.svg);;
}

.dex-btn-icon--saml {
background-color: #84B6EF;
background-image: url(../static/img/saml-icon.svg);
.button__icon--local {
background-image: url(../static/img/email-icon.svg);
}

.dex-btn-icon--linkedin {
.button__icon--local-light {
background-image: url(../static/img/email-icon-light.svg);
}
.button__icon--github {
background-image: url(../static/img/github-icon.svg);
}
.button__icon--gitlab {
background-image: url(../static/img/gitlab-icon.svg);
}
/* TODO Fix adminEmail dex config issue to avoid cheating for oidc type as a google icon */
.button__icon--oidc {
background-image: url(../static/img/google-icon.svg);
}
.button__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);
.error_shell {
background-color: #161719;
border-radius: 4px;
color: #79FF4A;
font-family: Roboto Monospace, sans-serif;
padding: 16px;
margin: 24px 0 24px 0;
}

.dex-btn-text {
font-weight: 600;
line-height: 36px;
padding: 6px 12px;
text-align: center;
.error {
font-size: 14px;
color: #C75656;
}

.dex-subtle-text {
color: #999;
font-size: 12px;
.backlink {
font-size: 14px;
}

.dex-separator {
color: #999;
.neutral500 {
color: #808B9D;
}

.dex-list {
color: #999;
display: inline-block;
font-size: 12px;
list-style: circle;
text-align: left;
.neutral300 {
color: #D4D7DE;
}

.dex-error-box {
background-color: #DD1327;
color: #fff;
font-size: 14px;
font-weight: normal;
max-width: 320px;
padding: 4px 0;
.ta--center {
text-align: center;
display: block;
}

.dex-error-box {
margin: 20px auto;
}

13 changes: 10 additions & 3 deletions pkg/web/templates/error.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
{{ template "header.html" . }}

<div class="theme-panel">
<h2 class="theme-heading">{{ .ErrType }}</h2>
<p>{{ .ErrMsg }}</p>
<h1>That's an error</h1>
<div class="card">
<span class="neutral500">
Unfortunately, our machines reported the following error while attempting to sign you in:
</span>
<div class="error_shell">
<p>{{ .ErrType }}</p>
<p>{{ .ErrMsg }}</p>
</div>
<span class="neutral300 ta--center">You can re-attempt to sign in, and should this error persist, contact admin@domain.com</span>
</div>

{{ template "footer.html" . }}
6 changes: 3 additions & 3 deletions pkg/web/templates/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
</div>
</body>
</html>
</div>
</body>
</html>

0 comments on commit 8dd398b

Please sign in to comment.