Skip to content

Commit 50ce895

Browse files
amulet1amulet1
committed
feat: Redesign login page
 * Redesign code related to $loginParms handling in login.inc template * Move mode selector and most other hardcoded parameters from the template to login.php * Add support for extra properties via optional 'extra' parameter * Add support for optional div wrapper via 'div' parameter * Add autocomplete=off for OTP (second factor) input
1 parent 073669f commit 50ce895

File tree

2 files changed

+146
-45
lines changed

2 files changed

+146
-45
lines changed

‎login.php‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,21 @@ function _addAnchor($url, $type, $vars, $url_anchor = null)
245245
if (!empty($GLOBALS['conf']['user']['select_view'])) {
246246
$js_code['HordeLogin.pre_sel'] = $vars->get('horde_select_view', $_COOKIE['default_horde_view'] ?? 'auto');
247247
$loginparams['horde_select_view'] = [
248-
'type' => 'horde_select_view',
248+
'type' => 'select',
249+
'label' => _("Mode"),
250+
'value' => [
251+
'auto' => [ 'name' => _("Automatic") ],
252+
'disabled' => null,
253+
'basic' => [ 'name' => _("Basic") ],
254+
'dynamic' => [ 'name' => _("Dynamic") ],
255+
'smartmobile' => [ 'name' => _("Mobile (Smartphone/Tablet)") ],
256+
'mobile' => [ 'name' => _("Mobile (Minimal)") ],
257+
'mobile_nojs' => [ 'name' => _("Mobile (No JavaScript)") ],
258+
],
259+
'div' => [
260+
'id' => 'horde_select_view_div',
261+
'style' => 'display:none',
262+
],
249263
];
250264
}
251265

‎templates/login/login.inc‎

Lines changed: 131 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,50 +12,137 @@
1212
<input type="hidden" name="url" value="<?php echo htmlspecialchars((string)$vars->url) ?>" />
1313
<input type="hidden" name="anchor_string" id="anchor_string" value="<?php echo htmlspecialchars((string)$vars->anchor_string) ?>" />
1414

15-
<?php foreach ($loginparams as $key => $val): ?>
16-
<?php if ($val['type'] == 'hidden'): ?>
17-
<input type="hidden" id="<?php echo $key ?>" name="<?php echo $key ?>" value="<?php echo isset($val['value']) ? htmlspecialchars((string)$val['value']) : '' ?>" />
18-
<?php elseif ($val['type'] == 'horde_select_view'): ?>
19-
<div id="horde_select_view_div" style="display:none">
20-
<div><?php echo Horde::label('horde_select_view', _("Mode")) ?></div>
21-
<div>
22-
<select id="horde_select_view" name="horde_select_view">
23-
<option value="auto"><?php echo _("Automatic") ?></option>
24-
<option value="" disabled="disabled">- - - - - - - - - -</option>
25-
<option value="basic"><?php echo _("Basic") ?></option>
26-
<option value="dynamic"><?php echo _("Dynamic") ?></option>
27-
<option value="smartmobile"><?php echo _("Mobile (Smartphone/Tablet)") ?></option>
28-
<option value="mobile"><?php echo _("Mobile (Minimal)") ?></option>
29-
<option value="mobile_nojs" selected="selected"><?php echo _("Mobile (No JavaScript)") ?></option>
30-
</select>
31-
</div>
32-
</div>
33-
<?php else: ?>
34-
<div><?php echo Horde::label($key, $val['label']) ?></div>
35-
<div>
36-
<?php if ($val['type'] == 'text'): ?>
37-
<input type="text" autocapitalize="off" autocorrect="off" id="<?php echo $key ?>" name="<?php echo $key ?>" value="<?php echo isset($val['value']) ? htmlspecialchars($val['value']) : '' ?>" style="direction:ltr" />
38-
<?php elseif ($val['type'] == 'password'): ?>
39-
<input type="password" id="<?php echo $key ?>" name="<?php echo $key ?>" value="" style="direction:ltr" />
40-
<?php if ($key == 'horde_pass'): ?>
41-
</div>
42-
<div id="horde-login-pass-capslock" style="display:none">
43-
<?php echo _("Warning: Your Caps Lock key is on!") ?>
44-
<?php endif; ?>
45-
<?php elseif ($val['type'] == 'select'): ?>
46-
<select id="<?php echo $key ?>" name="<?php echo $key ?>">
47-
<?php foreach ($val['value'] as $k2 => $v2): ?>
48-
<?php if (is_null($v2)): ?>
49-
<option value="" disabled="disabled">- - - - - - - - - -</option>
50-
<?php else: ?>
51-
<option value="<?php echo $k2 ?>"<?php echo !empty($v2['selected']) ?' selected="selected"' : '' ?><?php echo !empty($v2['hidden']) ? ' style="display:none"' : '' ?>><?php echo htmlspecialchars($v2['name']) ?></option>
52-
<?php endif; ?>
53-
<?php endforeach ?>
54-
</select>
55-
<?php endif; ?>
56-
</div>
57-
<?php endif; ?>
58-
<?php endforeach; ?>
15+
<?php
16+
// TODO: Implement supporting functions elsewhere
17+
$addLine = function($value) use (&$lines, &$indent) {
18+
$lines[] = str_repeat(' ', $indent) . $value;
19+
};
20+
21+
$addParm = function($parm, $value = null) use (&$parms) {
22+
if (!is_null($value)) {
23+
$parm .= '="' . htmlspecialchars($value) . '"';
24+
}
25+
$parms[] = $parm;
26+
};
27+
28+
$lines = [];
29+
$indent = 0;
30+
31+
foreach ($loginparams as $key => $val) {
32+
$type = $val['type'] ?? '';
33+
$label = $val['label'] ?? '';
34+
$value = $val['value'] ?? '';
35+
$extra = $val['extra'] ?? '';
36+
37+
switch ($type) {
38+
case 'text':
39+
if (empty($extra)) {
40+
// default
41+
$extra = [
42+
'autocapitalize' => 'off',
43+
'autocorrect' => 'off',
44+
];
45+
}
46+
break;
47+
case 'password':
48+
$value = '';
49+
break;
50+
}
51+
52+
$div = $val['div'] ?? '';
53+
if (!empty($div)) {
54+
$parms = [ 'div' ];
55+
if (!is_array($div)) {
56+
$div = [ $div ];
57+
}
58+
foreach ($div as $k => $v) {
59+
$addParm($k, $v);
60+
}
61+
$div = $parms;
62+
}
63+
64+
$parms = [];
65+
66+
if ($type == 'select') {
67+
$addParm($type);
68+
} else {
69+
$addParm('input');
70+
$addParm('type' , $type);
71+
}
72+
73+
if (!empty($extra)) {
74+
if (!is_array($extra)) {
75+
$extra = [ $extra ];
76+
}
77+
foreach ($extra as $k => $v) {
78+
$addParm($k, $v);
79+
}
80+
}
81+
82+
$addParm('id', $key);
83+
$addParm('name', $key);
84+
85+
if (is_string($value)) {
86+
$addParm('value', htmlspecialchars($value));;
87+
}
88+
89+
if (!empty($div)) {
90+
$addLine('<' . implode(' ', $div) . '>');
91+
++$indent;
92+
}
93+
94+
if ($label != '') {
95+
$addLine('<div>' . Horde::label($key, $label) . '</div>');
96+
}
97+
98+
$addLine('<div>');
99+
++$indent;
100+
101+
if ($type == 'select') {
102+
$addLine('<' . implode(' ', $parms) . '>');
103+
++$indent;
104+
foreach ($value as $k2 => $v2) {
105+
$parms = [];
106+
$addParm('option');;
107+
if (is_null($v2)) {
108+
$addParm('value', '');
109+
$addParm('disabled', 'disabled');
110+
$value = '- - - - - - - - - -';
111+
} else {
112+
$addParm('value', $k2);
113+
if (!empty($v2['selected'])) {
114+
$addParm('selected', 'selected');
115+
}
116+
if (!empty($v2['hidden'])) {
117+
$addParm('style', 'display:none');
118+
}
119+
$value = $v2['name'];
120+
}
121+
$addLine('<' . implode(' ', $parms) . '>' . htmlspecialchars($value) . '</option>');
122+
}
123+
--$indent;
124+
$addLine('</select>');
125+
} else {
126+
if ($type != 'hidden') {
127+
$addParm('style' , 'direction:ltr');
128+
}
129+
$addLine('<' . implode(' ', $parms) . ' />');
130+
}
131+
132+
--$indent;
133+
$addLine('</div>');
134+
135+
if ($key == 'horde_pass') {
136+
$addLine('<div id="horde-login-pass-capslock" style="display:none">' . _("Warning: Your Caps Lock key is on!") . '</div>');
137+
}
138+
139+
if (!empty($div)) {
140+
--$indent;
141+
$addLine('</div>');
142+
}
143+
}
144+
print implode("\n", $lines);
145+
?>
59146

60147
<?php if (!$is_auth && !$prefs->isLocked('language')): ?>
61148
<div><?php echo Horde::label('new_lang', _("Language")) ?></div>

0 commit comments

Comments
 (0)