Skip to content
This repository was archived by the owner on Jun 25, 2024. It is now read-only.

Commit 9b54706

Browse files
author
Billy Clark
committed
login UI was a little boring
1 parent 6367d48 commit 9b54706

File tree

8 files changed

+115
-83
lines changed

8 files changed

+115
-83
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ Update `/simplesamlphp/config/config.php`:
2525
'theme.color-scheme' => ['indigo-purple'|'blue_grey-teal'|'red-teal'|'orange-light_blue']
2626
```
2727

28+
The login page will get its images from `/simplesamlphp/www/favicon.ico` and
29+
`/simplesamlphp/www/logo.png` which are **NOT** provided by default.
30+
2831
### Analytics
2932
Update `/simplesamlphp/config/config.php`:
3033

‎dictionaries/login.definition.json‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
"ko": "로그인 계정"
77
},
88
"header": {
9-
"en": "Please enter your username and password",
10-
"es": "por favor introduzca su nombre de usuario y contraseña",
11-
"fr": "Veuillez s'il vous plaît entrer votre nom d'utilisateur et votre mot de passe",
12-
"ko": "사용자 이름과 암호를 입력하십시오."
9+
"en": "Login with your {idpName} account",
10+
"es": "Inicie sesión con su cuenta {idpName}",
11+
"fr": "Connectez-vous avec votre compte {idpName}",
12+
"ko": "{idpName} 계정으로 로그인하십시오."
1313
},
1414
"label_username": {
1515
"en": "Username",
@@ -40,5 +40,11 @@
4040
"es": "¿Olvidaste tu contraseña? Restablecer ahora",
4141
"fr": "Mot de passe oublié? Réinitialisez-le maintenant",
4242
"ko": "비밀번호를 잊어 버렸습니까? 지금 다시 설정하십시오"
43+
},
44+
"logo": {
45+
"en": "{idpName} logo",
46+
"es": "Logotipo de {idpName}",
47+
"fr": "Logo {idpName}",
48+
"ko": "{idpName} 로고"
4349
}
4450
}

‎docker-compose.yml‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,51 @@
11
version: '2'
2-
services:
2+
services:
33
hub:
44
image: silintl/ssp-base:develop
5-
volumes:
5+
volumes:
66
- ./development/hub/cert:/data/vendor/simplesamlphp/simplesamlphp/cert
77
- ./development/hub/authsources.php:/data/vendor/simplesamlphp/simplesamlphp/config/authsources.php
88
- ./development/hub/saml20-idp-remote.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-idp-remote.php
99
- ./development/hub/saml20-idp-hosted.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-idp-hosted.php
1010
- ./:/data/vendor/simplesamlphp/simplesamlphp/modules/material
11-
ports:
11+
ports:
1212
- '80:80'
13-
environment:
13+
environment:
1414
ADMIN_PASS: "abc123"
1515
SECURE_COOKIE: "false"
1616
SHOW_SAML_ERRORS: "true"
1717
THEME_USE: "material:material"
1818
HUB_MODE: "true"
1919
idp1:
2020
image: silintl/ssp-base:develop
21-
volumes:
21+
volumes:
2222
- ./development/idp1/cert:/data/vendor/simplesamlphp/simplesamlphp/cert
2323
- ./development/idp1/authsources.php:/data/vendor/simplesamlphp/simplesamlphp/config/authsources.php
2424
- ./development/idp1/saml20-idp-hosted.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-idp-hosted.php
2525
- ./development/idp1/saml20-sp-remote.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-sp-remote.php
26-
ports:
26+
ports:
2727
- '8085:80'
28-
environment:
28+
environment:
2929
ADMIN_PASS: "a"
3030
SECURE_COOKIE: "false"
3131
SHOW_SAML_ERRORS: "true"
3232
ADMIN_PROTECT_INDEX_PAGE: "false"
3333
THEME_USE: "default:default"
34+
IDP_NAME: "Idp 1"
3435
idp2:
3536
image: silintl/ssp-base:develop
36-
volumes:
37+
volumes:
3738
- ./development/idp2/cert:/data/vendor/simplesamlphp/simplesamlphp/cert
3839
- ./development/idp2/authsources.php:/data/vendor/simplesamlphp/simplesamlphp/config/authsources.php
3940
- ./development/idp2/saml20-idp-hosted.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-idp-hosted.php
4041
- ./development/idp2/saml20-sp-remote.php:/data/vendor/simplesamlphp/simplesamlphp/metadata/saml20-sp-remote.php
4142
- ./:/data/vendor/simplesamlphp/simplesamlphp/modules/material
42-
ports:
43+
ports:
4344
- '8086:80'
44-
environment:
45+
environment:
4546
ADMIN_PASS: "b"
4647
SECURE_COOKIE: "false"
4748
SHOW_SAML_ERRORS: "true"
4849
ADMIN_PROTECT_INDEX_PAGE: "false"
4950
THEME_USE: "material:material"
51+
IDP_NAME: "Idp 2"

‎themes/material/common-announcement.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
if (! empty($announcement)) {
55
?>
6-
<p class="mdl-typography--subhead mdl-typography--text-center alert">
6+
<p class="mdl-typography--subhead mdl-typography--text-center alert margin">
77
<?= $announcement ?>
88
</p>
99
<?php

‎themes/material/common-head-elements.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22
<meta name="robots" content="noindex, nofollow"/>
33
<meta name="viewport" content="width=device-width, initial-scale=1.0">
44

5-
<link rel="shortcut icon" href="/module.php/material/favicon.ico" />
6-
75
<?php
86
$colors = $this->configuration->getValue('theme.color-scheme', 'indigo-purple');
97
?>
108
<link rel="stylesheet" href="/module.php/material/material.<?= $colors ?>.1.2.1.min.css">
11-
<link rel="stylesheet" href="/module.php/material/styles.2.0.0.css">
9+
<link rel="stylesheet" href="/module.php/material/styles.2.1.0.css">
1210

1311
<script async src="/module.php/material/material.1.2.1.min.js"></script>

‎themes/material/core/loginuserpass.php‎

Lines changed: 72 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
$username = $this->data['username'] ?? null;
55
$forgotPasswordUrl = $this->data['forgotPasswordUrl'] ?? null;
66
$csrfToken = $this->data['csrfToken'] ?? null;
7+
$idpName = $this->data['idp_name'] ?? '—';
78

89
$errorCode = $this->data['errorcode'] ?? null;
910
$errorMessageKey = $this->data['errorparams'][1] ?? '{material:login:error_wronguserpass}';
@@ -21,7 +22,7 @@
2122
<script src='https://www.google.com/recaptcha/api.js?onload=onRecaptchaLoad&render=explicit' async defer></script>
2223

2324
<script>
24-
function onSubmit() {
25+
function submitForm() {
2526
document.querySelector('form').submit();
2627
}
2728

@@ -30,7 +31,7 @@ function onRecaptchaLoad() {
3031

3132
grecaptcha.render(loginButton, {
3233
sitekey: '<?= htmlentities($siteKey) ?>',
33-
callback: onSubmit
34+
callback: submitForm
3435
});
3536
}
3637
</script>
@@ -39,77 +40,83 @@ function onRecaptchaLoad() {
3940
?>
4041

4142
</head>
42-
<body>
43+
<body class="gradient-bg">
4344
<div class="mdl-layout mdl-layout--fixed-header fill-viewport">
44-
<header class="mdl-layout__header">
45-
<div class="mdl-layout__header-row">
46-
<span class="mdl-layout-title">
47-
<?= $this->t('{material:login:header}') ?>
48-
</span>
49-
</div>
50-
</header>
45+
<?php include __DIR__ . '/../common-announcement.php' ?>
5146

5247
<main class="mdl-layout__content">
53-
<form method="POST" action="<?= htmlentities($_SERVER['PHP_SELF']) ?>"
54-
layout-children="column">
55-
<?php include __DIR__ . '/../common-announcement.php' ?>
56-
57-
<input type="hidden" name="AuthState"
58-
value="<?= htmlspecialchars($this->data['stateparams']['AuthState']) ?>" />
59-
<input type="hidden" name="csrf-token" value="<?= htmlentities($csrfToken); ?>" />
60-
61-
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
62-
<label for="username" class="mdl-textfield__label">
63-
<?= $this->t('{material:login:label_username}') ?>
64-
</label>
65-
<input type="text" name="username" class="mdl-textfield__input"
66-
value="<?= htmlspecialchars($username) ?>"
67-
<?= empty($username) ? 'autofocus' : '' ?> />
48+
<div class="mdl-card mdl-shadow--8dp unfix-width">
49+
<div class="mdl-card__media white-bg margin">
50+
<img src="/logo.png" alt="<?= $this->t('{material:login:logo}', ['{idpName}' => $idpName]) ?>">
6851
</div>
6952

70-
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
71-
<label for="password" class="mdl-textfield__label">
72-
<?= $this->t('{material:login:label_password}') ?>
73-
</label>
74-
<input type="password" name="password" class="mdl-textfield__input"
75-
<?= ! empty($username) ? 'autofocus' : '' ?> />
53+
54+
<div class="mdl-card__title">
55+
<h1 class="mdl-card__title-text">
56+
<?= $this->t('{material:login:header}', ['{idpName}' => $idpName]) ?>
57+
</h1>
7658
</div>
77-
78-
<?php
79-
if ($errorCode == 'WRONGUSERPASS') {
80-
?>
81-
<p class="mdl-color-text--red" layout-children="row"
82-
child-spacing="space-between">
83-
<i class="material-icons">error</i>
84-
85-
<span class="mdl-textfield mdl-typography--caption margin">
86-
<?= $this->t($errorMessageKey, $errorMessageTokens) ?>
87-
</span>
88-
</p>
89-
<?php
90-
}
91-
?>
92-
93-
<button class="mdl-button mdl-button--colored mdl-button--raised">
94-
<?= $this->t('{material:login:button_login}') ?>
95-
</button>
96-
97-
<?php
98-
if (! empty($forgotPasswordUrl)) {
99-
?>
100-
<p class="mdl-typography--caption margin">
101-
<a href="<?= htmlentities($forgotPasswordUrl) ?>"
102-
target="_blank">
103-
<?= $this->t('{material:login:forgot}') ?>
104-
</a>
105-
<p>
106-
<?php
107-
}
108-
?>
109-
</form>
59+
60+
<form method="POST" action="<?= htmlentities($_SERVER['PHP_SELF']) ?>"
61+
layout-children="column" class="mdl-card__supporting-text" id="loginform">
62+
63+
<input type="hidden" name="AuthState"
64+
value="<?= htmlspecialchars($this->data['stateparams']['AuthState']) ?>" />
65+
<input type="hidden" name="csrf-token" value="<?= htmlentities($csrfToken); ?>" />
66+
67+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
68+
<label for="username" class="mdl-textfield__label">
69+
<?= $this->t('{material:login:label_username}') ?>
70+
</label>
71+
<input type="text" name="username" class="mdl-textfield__input"
72+
value="<?= htmlspecialchars($username) ?>"
73+
<?= empty($username) ? 'autofocus' : '' ?> id="username"/>
74+
</div>
75+
76+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
77+
<label for="password" class="mdl-textfield__label">
78+
<?= $this->t('{material:login:label_password}') ?>
79+
</label>
80+
<input type="password" name="password" class="mdl-textfield__input"
81+
<?= ! empty($username) ? 'autofocus' : '' ?> id="password"/>
82+
</div>
83+
84+
<?php
85+
if ($errorCode == 'WRONGUSERPASS') {
86+
?>
87+
<p class="mdl-color-text--red" layout-children="row" child-spacing="space-between">
88+
<i class="material-icons">error</i>
89+
90+
<span class="mdl-textfield mdl-typography--caption margin">
91+
<?= $this->t($errorMessageKey, $errorMessageTokens) ?>
92+
</span>
93+
</p>
94+
<?php
95+
}
96+
?>
97+
</form>
98+
99+
<div class="mdl-card__actions" layout-children="row">
100+
<?php
101+
if (! empty($forgotPasswordUrl)) {
102+
?>
103+
<a href="<?= htmlentities($forgotPasswordUrl) ?>" target="_blank"
104+
class="mdl-typography--caption margin">
105+
<?= $this->t('{material:login:forgot}') ?>
106+
</a>
107+
<?php
108+
}
109+
?>
110+
111+
<span flex></span>
112+
113+
<button class="mdl-button mdl-button--colored" form="loginform">
114+
<?= $this->t('{material:login:button_login}') ?>
115+
</button>
116+
</div>
117+
</div>
110118
</main>
111119

112-
<?php include __DIR__ . '/../common-footer.php' ?>
113120
</div>
114121
</body>
115122
</html>

‎www/favicon.ico‎

-97.3 KB
Binary file not shown.

www/styles.2.0.0.css renamed to www/styles.2.1.0.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55

66
.mdl-layout__content {
77
padding: 1em;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
811
}
912

1013
[layout-children=row] {
@@ -92,6 +95,19 @@
9295
font-size: 12px
9396
}
9497

98+
.mdl-card.unfix-width {
99+
width: initial;
100+
}
101+
102+
[flex] {
103+
flex: 1;
104+
}
105+
106+
.gradient-bg {
107+
background: linear-gradient(rgba(200,200,200,1) 0%,
108+
rgba(250,250,250,1) 50%,
109+
rgba(200,200,200,1) 100%);
110+
}
95111
/* Material icons */
96112
@font-face {
97113
font-family: 'Material Icons';

0 commit comments

Comments
 (0)