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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'e68cf1fa',
     'conpherence.pkg.js' => '15191c65',
-    'core.pkg.css' => '9d1148a4',
+    'core.pkg.css' => '47535fd5',
     'core.pkg.js' => 'bd89cb1d',
     'differential.pkg.css' => '06dc617c',
     'differential.pkg.js' => 'ef0b989b',
@@ -151,7 +151,7 @@ return array(
     'rsrc/css/phui/phui-document.css' => 'c4ac41f9',
     'rsrc/css/phui/phui-feed-story.css' => '44a9c8e9',
     'rsrc/css/phui/phui-fontkit.css' => '1320ed01',
-    'rsrc/css/phui/phui-form-view.css' => '2f43fae7',
+    'rsrc/css/phui/phui-form-view.css' => 'b04e08d9',
     'rsrc/css/phui/phui-form.css' => '7aaa04e3',
     'rsrc/css/phui/phui-head-thing.css' => 'fd311e5f',
     'rsrc/css/phui/phui-header-view.css' => '1ba8b707',
@@ -819,7 +819,7 @@ return array(
     'phui-font-icon-base-css' => '870a7360',
     'phui-fontkit-css' => '1320ed01',
     'phui-form-css' => '7aaa04e3',
-    'phui-form-view-css' => '2f43fae7',
+    'phui-form-view-css' => 'b04e08d9',
     'phui-head-thing-view-css' => 'fd311e5f',
     'phui-header-view-css' => '1ba8b707',
     'phui-hovercard' => '1bd28176',

src/__phutil_library_map__.php

@@ -1946,6 +1946,7 @@ phutil_register_library_map(array(
     'PHUIFormInsetView' => 'view/form/PHUIFormInsetView.php',
     'PHUIFormLayoutView' => 'view/form/PHUIFormLayoutView.php',
     'PHUIFormNumberControl' => 'view/form/control/PHUIFormNumberControl.php',
+    'PHUIFormTimerControl' => 'view/form/control/PHUIFormTimerControl.php',
     'PHUIHandleListView' => 'applications/phid/view/PHUIHandleListView.php',
     'PHUIHandleTagListView' => 'applications/phid/view/PHUIHandleTagListView.php',
     'PHUIHandleView' => 'applications/phid/view/PHUIHandleView.php',
@@ -7574,6 +7575,7 @@ phutil_register_library_map(array(
     'PHUIFormInsetView' => 'AphrontView',
     'PHUIFormLayoutView' => 'AphrontView',
     'PHUIFormNumberControl' => 'AphrontFormControl',
+    'PHUIFormTimerControl' => 'AphrontFormControl',
     'PHUIHandleListView' => 'AphrontTagView',
     'PHUIHandleTagListView' => 'AphrontTagView',
     'PHUIHandleView' => 'AphrontView',

src/applications/auth/factor/PhabricatorAuthFactor.php

@@ -190,16 +190,25 @@ abstract class PhabricatorAuthFactor extends Phobject {
 
     $error = $result->getErrorMessage();
 
-    return id(new AphrontFormMarkupControl())
+    $icon = id(new PHUIIconView())
-      ->setValue($error)
+      ->setIcon('fa-clock-o', 'red');
+
+    return id(new PHUIFormTimerControl())
+      ->setIcon($icon)
+      ->appendChild($error)
       ->setError(pht('Wait'));
   }
 
   private function newAnsweredControl(
     PhabricatorAuthFactorResult $result) {
 
-    return id(new AphrontFormMarkupControl())
+    $icon = id(new PHUIIconView())
-      ->setValue(pht('Answered!'));
+      ->setIcon('fa-check-circle-o', 'green');
+
+    return id(new PHUIFormTimerControl())
+      ->setIcon($icon)
+      ->appendChild(
+        pht('You responded to this challenge correctly.'));
   }
 
 

src/infrastructure/internationalization/translation/PhabricatorUSEnglishTranslation.php

@@ -1673,6 +1673,51 @@ final class PhabricatorUSEnglishTranslation
         'pass: %2$s.',
       ),
 
+      'This factor recently issued a challenge to a different login '.
+      'session. Wait %s second(s) for the code to cycle, then try '.
+      'again.' => array(
+        'This factor recently issued a challenge to a different login '.
+        'session. Wait %s second for the code to cycle, then try '.
+        'again.',
+        'This factor recently issued a challenge to a different login '.
+        'session. Wait %s seconds for the code to cycle, then try '.
+        'again.',
+      ),
+
+      'This factor recently issued a challenge for a different '.
+      'workflow. Wait %s second(s) for the code to cycle, then try '.
+      'again.' => array(
+        'This factor recently issued a challenge for a different '.
+        'workflow. Wait %s second for the code to cycle, then try '.
+        'again.',
+        'This factor recently issued a challenge for a different '.
+        'workflow. Wait %s seconds for the code to cycle, then try '.
+        'again.',
+      ),
+
+
+      'This factor recently issued a challenge which has expired. '.
+      'A new challenge can not be issued yet. Wait %s second(s) for '.
+      'the code to cycle, then try again.' => array(
+        'This factor recently issued a challenge which has expired. '.
+        'A new challenge can not be issued yet. Wait %s second for '.
+        'the code to cycle, then try again.',
+        'This factor recently issued a challenge which has expired. '.
+        'A new challenge can not be issued yet. Wait %s seconds for '.
+        'the code to cycle, then try again.',
+      ),
+
+      'You recently provided a response to this factor. Responses '.
+      'may not be reused. Wait %s second(s) for the code to cycle, '.
+      'then try again.' => array(
+        'You recently provided a response to this factor. Responses '.
+        'may not be reused. Wait %s second for the code to cycle, '.
+        'then try again.',
+        'You recently provided a response to this factor. Responses '.
+        'may not be reused. Wait %s seconds for the code to cycle, '.
+        'then try again.',
+      ),
+
     );
   }
 

src/view/form/control/PHUIFormTimerControl.php

@@ -0,0 +1,40 @@
+<?php
+
+final class PHUIFormTimerControl extends AphrontFormControl {
+
+  private $icon;
+
+  public function setIcon(PHUIIconView $icon) {
+    $this->icon = $icon;
+    return $this;
+  }
+
+  public function getIcon() {
+    return $this->icon;
+  }
+
+  protected function getCustomControlClass() {
+    return 'phui-form-timer';
+  }
+
+  protected function renderInput() {
+    $icon_cell = phutil_tag(
+      'td',
+      array(
+        'class' => 'phui-form-timer-icon',
+      ),
+      $this->getIcon());
+
+    $content_cell = phutil_tag(
+      'td',
+      array(
+        'class' => 'phui-form-timer-content',
+      ),
+      $this->renderChildren());
+
+    $row = phutil_tag('tr', array(), array($icon_cell, $content_cell));
+
+    return phutil_tag('table', array(), $row);
+  }
+
+}

webroot/rsrc/css/phui/phui-form-view.css

@@ -556,3 +556,21 @@ properly, and submit values. */
 .phuix-form-checkbox-label {
   margin-left: 4px;
 }
+
+.phui-form-timer-icon {
+  width: 28px;
+  height: 28px;
+  padding: 4px;
+  font-size: 18px;
+  background: {$greybackground};
+  border-radius: 4px;
+  text-align: center;
+  vertical-align: middle;
+  text-shadow: 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.phui-form-timer-content {
+  padding: 4px 8px;
+  color: {$darkgreytext};
+  vertical-align: middle;
+}