improve html, add screenshots

Assistant/WebApp/Configurators/Pairing.hs

@@ -18,16 +18,17 @@ import Assistant.DaemonStatus
 import Assistant.Pairing.MakeRemote
 import Assistant.Pairing.Network
 import Assistant.Ssh
-import Assistant.Alert
 import Utility.Verifiable
 #endif
 import Utility.UserInfo
 import Utility.Tor
 import Assistant.WebApp.Pairing
+import Assistant.Alert
 import qualified Utility.MagicWormhole as Wormhole
 import Assistant.MakeRemote
 import Assistant.RemoteControl
 import Assistant.Sync
+import Assistant.WebApp.SideBar
 import Command.P2P (unusedPeerRemoteName, PairingResult(..))
 import P2P.Address
 import Git
@@ -57,7 +58,7 @@ startWormholePairR pairingwith = whenTorInstalled $ whenWormholeInstalled $
 
 getPrepareWormholePairR :: PairingWith -> Handler Html
 getPrepareWormholePairR pairingwith = do
-	enableTor
+	-- enableTor
 	myaddrs <- liftAnnex loadP2PAddresses
 	remotename <- liftAnnex unusedPeerRemoteName
 	h <- liftAssistant $

doc/assistant/share_with_a_friend_walkthrough.mdwn

@@ -16,11 +16,15 @@ Start by opening up your git annex dashboard.
 
 `*click*`
 
-Now you will probably be prompted to enter a password, to configure Tor.
+[[!img enabletor.png alt="Enabling tor hidden service"]]
+
+You will probably be prompted to enter a password, to configure Tor.
 (Depending on how your system is configured, this may be the root password,
 or your user account's password.)
 
-Then, a pairing code will be generated. Tell it to your friend. Ask them
+[[!img wormholepairing.png alt="Pairing with a friend form"]]
+
+A pairing code will be generated. Tell it to your friend. Ask them
 for their pairing code, and enter it in the form.
 
 Once you've exchanged pairing codes, your repositories will be connected

templates/configurators/pairing/wormhole/prompt.hamlet

@@ -20,8 +20,7 @@
     <p>
       $case pairingwith
         $of PairingWithSelf
-          Enter that code into the webapp of the device you want to #
-          pair with.
+          Enter that code into the device you want to pair with. #
         $of PairingWithFriend
           Tell that code to your friend. #
     <p>
@@ -33,3 +32,28 @@
             <div .col-sm-10 .col-sm-offset-2>
               <button .btn .btn-primary type=submit>
                 Finish pairing
+  <div .content-box>
+    <h3 .alert-heading>
+      ^{htmlIcon InfoIcon} Keep pairing codes safe
+    $case pairingwith
+      $of PairingWithSelf
+        <p>
+          Pairing codes can only be used a single time, but if someone #
+          saw the pairing codes before you use them, they could #
+          pair with your devices. So be careful with the pairing codes!
+      $of PairingWithFriend
+        <p>
+          Pairing codes can only be used a single time, but if someone #
+          overhears you exchanging them with your friend, they could #
+          pair with your repositories. #
+        <p>
+          Here are some suggestions for how to exchange the pairing #
+          code with your friend, with the safest ways first:
+          <ul>
+            <li>
+              In person.
+            <li>
+              In an encrypted message #
+              (gpg signed email, Off The Record (OTR) conversation, etc).
+            <li>
+              By a voice phone call.

templates/configurators/pairing/wormhole/start.hamlet

@@ -5,7 +5,7 @@
         $of PairingWithSelf
           Preparing for pairing your devices
         $of PairingWithFriend
-          reparing for pairing with a friend
+          Preparing for pairing with a friend
     <p>
       Pairing will connect two git-annex repositories using #
       <a href="https://torproject.org/">Tor</a>, #