@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Improve UI for "wait" and "answered" MFA challenges
Summary:
Depends on D19906. Ref T13222. This isn't going to win any design awards, but make the "wait" and "answered" elements a little more clear.
Ideally, the icon parts could be animated Google Authenticator-style timers (but I think we'd need to draw them in a `<canvas />` unless there's some clever trick that I don't know) or maybe we could just have the background be like a "water level" that empties out. Not sure I'm going to actually write the JS for either of those, but the UI at least looks a little more intentional.
Test Plan:
{F6070914}
{F6070915}
Reviewers: amckinley
Reviewed By: amckinley
Maniphest Tasks: T13222
Differential Revision: https://secure.phabricator.com/D19908
+121
-7
+3
-3
resources/celerity/map.php
+3
-3
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'e68cf1fa',
11
11
'conpherence.pkg.js' => '15191c65',
12
-
'core.pkg.css' => '9d1148a4',
12
+
'core.pkg.css' => '47535fd5',
13
13
'core.pkg.js' => 'bd89cb1d',
14
14
'differential.pkg.css' => '06dc617c',
15
15
'differential.pkg.js' => 'ef0b989b',
···
151
151
'rsrc/css/phui/phui-document.css' => 'c4ac41f9',
152
152
'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
153
153
'rsrc/css/phui/phui-fontkit.css' => '1320ed01',
154
-
'rsrc/css/phui/phui-form-view.css' => '2f43fae7',
154
+
'rsrc/css/phui/phui-form-view.css' => 'b04e08d9',
155
155
'rsrc/css/phui/phui-form.css' => '7aaa04e3',
156
156
'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
157
157
'rsrc/css/phui/phui-header-view.css' => '1ba8b707',
···
819
819
'phui-font-icon-base-css' => '870a7360',
820
820
'phui-fontkit-css' => '1320ed01',
821
821
'phui-form-css' => '7aaa04e3',
822
-
'phui-form-view-css' => '2f43fae7',
822
+
'phui-form-view-css' => 'b04e08d9',
823
823
'phui-head-thing-view-css' => 'fd311e5f',
824
824
'phui-header-view-css' => '1ba8b707',
825
825
'phui-hovercard' => '1bd28176',
+2
src/__phutil_library_map__.php
+2
src/__phutil_library_map__.php
···
1946
1946
'PHUIFormInsetView' => 'view/form/PHUIFormInsetView.php',
1947
1947
'PHUIFormLayoutView' => 'view/form/PHUIFormLayoutView.php',
1948
1948
'PHUIFormNumberControl' => 'view/form/control/PHUIFormNumberControl.php',
1949
+
'PHUIFormTimerControl' => 'view/form/control/PHUIFormTimerControl.php',
1949
1950
'PHUIHandleListView' => 'applications/phid/view/PHUIHandleListView.php',
1950
1951
'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php',
1951
1952
'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php',
···
7574
7575
'PHUIFormInsetView' => 'AphrontView',
7575
7576
'PHUIFormLayoutView' => 'AphrontView',
7576
7577
'PHUIFormNumberControl' => 'AphrontFormControl',
7578
+
'PHUIFormTimerControl' => 'AphrontFormControl',
7577
7579
'PHUIHandleListView' => 'AphrontTagView',
7578
7580
'PHUIHandleTagListView' => 'AphrontTagView',
7579
7581
'PHUIHandleView' => 'AphrontView',
+13
-4
src/applications/auth/factor/PhabricatorAuthFactor.php
+13
-4
src/applications/auth/factor/PhabricatorAuthFactor.php
···
190
190
191
191
$error = $result->getErrorMessage();
192
192
193
-
return id(new AphrontFormMarkupControl())
194
-
->setValue($error)
193
+
$icon = id(new PHUIIconView())
194
+
->setIcon('fa-clock-o', 'red');
195
+
196
+
return id(new PHUIFormTimerControl())
197
+
->setIcon($icon)
198
+
->appendChild($error)
195
199
->setError(pht('Wait'));
196
200
}
197
201
198
202
private function newAnsweredControl(
199
203
PhabricatorAuthFactorResult $result) {
200
204
201
-
return id(new AphrontFormMarkupControl())
202
-
->setValue(pht('Answered!'));
205
+
$icon = id(new PHUIIconView())
206
+
->setIcon('fa-check-circle-o', 'green');
207
+
208
+
return id(new PHUIFormTimerControl())
209
+
->setIcon($icon)
210
+
->appendChild(
211
+
pht('You responded to this challenge correctly.'));
203
212
}
204
213
205
214
+45
src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php
+45
src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php
···
1673
1673
'pass: %2$s.',
1674
1674
),
1675
1675
1676
+
'This factor recently issued a challenge to a different login '.
1677
+
'session. Wait %s second(s) for the code to cycle, then try '.
1678
+
'again.' => array(
1679
+
'This factor recently issued a challenge to a different login '.
1680
+
'session. Wait %s second for the code to cycle, then try '.
1681
+
'again.',
1682
+
'This factor recently issued a challenge to a different login '.
1683
+
'session. Wait %s seconds for the code to cycle, then try '.
1684
+
'again.',
1685
+
),
1686
+
1687
+
'This factor recently issued a challenge for a different '.
1688
+
'workflow. Wait %s second(s) for the code to cycle, then try '.
1689
+
'again.' => array(
1690
+
'This factor recently issued a challenge for a different '.
1691
+
'workflow. Wait %s second for the code to cycle, then try '.
1692
+
'again.',
1693
+
'This factor recently issued a challenge for a different '.
1694
+
'workflow. Wait %s seconds for the code to cycle, then try '.
1695
+
'again.',
1696
+
),
1697
+
1698
+
1699
+
'This factor recently issued a challenge which has expired. '.
1700
+
'A new challenge can not be issued yet. Wait %s second(s) for '.
1701
+
'the code to cycle, then try again.' => array(
1702
+
'This factor recently issued a challenge which has expired. '.
1703
+
'A new challenge can not be issued yet. Wait %s second for '.
1704
+
'the code to cycle, then try again.',
1705
+
'This factor recently issued a challenge which has expired. '.
1706
+
'A new challenge can not be issued yet. Wait %s seconds for '.
1707
+
'the code to cycle, then try again.',
1708
+
),
1709
+
1710
+
'You recently provided a response to this factor. Responses '.
1711
+
'may not be reused. Wait %s second(s) for the code to cycle, '.
1712
+
'then try again.' => array(
1713
+
'You recently provided a response to this factor. Responses '.
1714
+
'may not be reused. Wait %s second for the code to cycle, '.
1715
+
'then try again.',
1716
+
'You recently provided a response to this factor. Responses '.
1717
+
'may not be reused. Wait %s seconds for the code to cycle, '.
1718
+
'then try again.',
1719
+
),
1720
+
1676
1721
);
1677
1722
}
1678
1723
+40
src/view/form/control/PHUIFormTimerControl.php
+40
src/view/form/control/PHUIFormTimerControl.php
···
1
+
<?php
2
+
3
+
final class PHUIFormTimerControl extends AphrontFormControl {
4
+
5
+
private $icon;
6
+
7
+
public function setIcon(PHUIIconView $icon) {
8
+
$this->icon = $icon;
9
+
return $this;
10
+
}
11
+
12
+
public function getIcon() {
13
+
return $this->icon;
14
+
}
15
+
16
+
protected function getCustomControlClass() {
17
+
return 'phui-form-timer';
18
+
}
19
+
20
+
protected function renderInput() {
21
+
$icon_cell = phutil_tag(
22
+
'td',
23
+
array(
24
+
'class' => 'phui-form-timer-icon',
25
+
),
26
+
$this->getIcon());
27
+
28
+
$content_cell = phutil_tag(
29
+
'td',
30
+
array(
31
+
'class' => 'phui-form-timer-content',
32
+
),
33
+
$this->renderChildren());
34
+
35
+
$row = phutil_tag('tr', array(), array($icon_cell, $content_cell));
36
+
37
+
return phutil_tag('table', array(), $row);
38
+
}
39
+
40
+
}
+18
webroot/rsrc/css/phui/phui-form-view.css
+18
webroot/rsrc/css/phui/phui-form-view.css
···
556
556
.phuix-form-checkbox-label {
557
557
margin-left: 4px;
558
558
}
559
+
560
+
.phui-form-timer-icon {
561
+
width: 28px;
562
+
height: 28px;
563
+
padding: 4px;
564
+
font-size: 18px;
565
+
background: {$greybackground};
566
+
border-radius: 4px;
567
+
text-align: center;
568
+
vertical-align: middle;
569
+
text-shadow: 1px 1px rgba(0, 0, 0, 0.05);
570
+
}
571
+
572
+
.phui-form-timer-content {
573
+
padding: 4px 8px;
574
+
color: {$darkgreytext};
575
+
vertical-align: middle;
576
+
}