From 3b67f510b9eb90db7ea2562d5855d1ddfe4a5c05 Mon Sep 17 00:00:00 2001
From: bksahu <bablusahoo16@gmail.com>
Date: Tue, 2 Jan 2018 20:59:17 +0530
Subject: Additional OSes/software added to the list

---
 .../addons/onboardingapp/static/mitmproxy.css      |   2 -
 .../addons/onboardingapp/templates/index.html      | 158 +++++++++++++++------
 .../addons/onboardingapp/templates/layout.html     |   4 +-
 3 files changed, 120 insertions(+), 44 deletions(-)

diff --git a/mitmproxy/addons/onboardingapp/static/mitmproxy.css b/mitmproxy/addons/onboardingapp/static/mitmproxy.css
index b390976a..4f70d792 100644
--- a/mitmproxy/addons/onboardingapp/static/mitmproxy.css
+++ b/mitmproxy/addons/onboardingapp/static/mitmproxy.css
@@ -1,8 +1,6 @@
 
 #certbank div {
     text-align: center;
-
-
 }
 
 .fronttable {
diff --git a/mitmproxy/addons/onboardingapp/templates/index.html b/mitmproxy/addons/onboardingapp/templates/index.html
index fc6213ea..7fa4b259 100644
--- a/mitmproxy/addons/onboardingapp/templates/index.html
+++ b/mitmproxy/addons/onboardingapp/templates/index.html
@@ -4,51 +4,129 @@
 <script>
 function changeTo(device) {
     if (device == "apple") {
-        var text = `<h3>Apple: How to install on macOS / OSX</h3>
-                      <ul>
-                        <li>Double-click the PEM file</li>
-                        <li>The "Keychain Access" applications opens</li>
-                        <li>Find the new certificate "mitmproxy" in the list</li>
-                        <li>Double-click the "mitmproxy" entry</li>
-                        <li>A dialog window openes up</li>
-                        <li>Change "Secure Socket Layer (SSL)" to "Always Trust"</li>
-                        <li>Close the dialog window (and enter your password if prompted)</li>
-                        <li>For iOS version 10.3 or up, you need to make sure mitmproxy is enabled in<br>
-                            Certificate Trust Settings, you can check it by going to<br>
-                            Settings > General > About > Certificate Trust Settings</li>
-                        <li>Done!</li>
-                      </ul>`;
+        var text = `<div class = "container">
+                      <div>
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on macOS</h3>
+                            <ul class="left">
+                              <li>Double-click the PEM file</li>
+                              <li>The "Keychain Access" applications opens</li>
+                              <li>Find the new certificate "mitmproxy" in the list</li>
+                              <li>Double-click the "mitmproxy" entry</li>
+                              <li>A dialog window openes up</li>
+                              <li>Change "Secure Socket Layer (SSL)" to "Always Trust"</li>
+                              <li>Close the dialog window (and enter your password if prompted)</li>
+                              <li>Done!</li>
+                            </ul>
+                        </div>
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on browsers</h3>
+                          <ul>
+                            <li>Safari on macOS uses the macOS keychain. So installing our CA in the system is enough.</li>
+                            <li>Chrome on macOS uses the macOS keychain. So installing our CA in the system is enough.</li>
+                            <li>Firefox on macOS has its own CA store and needs to be installed with Firefox-specific instructions that can be found  <a href="https://wiki.mozilla.org/MozillaRootCertificate#Mozilla_Firefox">HERE</a> .</li>
+                          </ul>
+                        </div>
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on iOS v10.3</h3>
+                          <ul>
+                            <li>After certificate installation, open Settings</li>
+                            <li>Navigate to General and then About</li>
+                            <li>Select Certificate Trust Settings</li>
+                            <li>Each root that has been installed via a profile will be listed below the heading Enable Full Trust For Root Certificates. Toggle mitmproxy on</li>
+                            <li>Done!</li>
+                        </div>
+                      </div>
+                    </div>`;
     }
     else if (device == "windows") {
-        var text = `<h3>Windows: How to install on Windows</h3>
-                      <ul>
-                        <li>Double-click the P12 file</li>
-                        <li>Select Store Location for Current User and click Next</li>
-                        <li>Click Next</li>
-                        <li>Leave the Password column blank and click Next</li>
-                        <li>Select Place all certificates in the following store</li>
-                        <li>Click Browse and select Trusted Root Certification Authorities</li>
-                        <li>Click Next and then click Finish</li>
-                        <li>Click Yes if prompted for confirmation</li>
-                        <li>Done!</li>
-                      </ul>`;
+        var text = `<div class = "container">
+                      <div class="row">
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on Windows</h3>
+                          <ul>
+                            <li>Double-click the P12 file</li>
+                            <li>Select Store Location for Current User and click Next</li>
+                            <li>Click Next</li>
+                            <li>Leave the Password column blank and click Next</li>
+                            <li>Select Place all certificates in the following store</li>
+                            <li>Click Browse and select Trusted Root Certification Authorities</li>
+                            <li>Click Next and then click Finish</li>
+                            <li>Click Yes if prompted for confirmation</li>
+                            <li>Done!</li>
+                          </ul>
+                        </div>
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on browsers</h3>
+                          <ul>
+                            <li>Edge and IE use the Windows CA store. So installing our CA in the system is enough.</li>
+                            <li>Chrome on Windows uses the Windows CA store. So installing our CA in the system is enough.</li>
+                            <li>Firefox on Windows has its own CA store and needs to be installed with Firefox-specific instructions that can be found  <a href="https://wiki.mozilla.org/MozillaRootCertificate#Mozilla_Firefox">HERE</a> .</li>
+                          </ul>
+                        </div>
+                        <div class="col-md-4">
+                          <h3 class="text-center">How to install on Windows (Automated)</h3>
+                          <ul>
+                            <li> >>> certutil.exe -importpfx Root mitmproxy-ca-cert.p12 </li>
+                            <li> To know more click <a href="https://technet.microsoft.com/en-us/library/cc732443.aspx">HERE</a> </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>`;
     }
     else if (device == "android") {
-        var text = `<h3>Android: How to install on Android</h3>
-                      <ul>
-                        <li>Open your device's Settings app</li>
-                        <li>Under "Credential storage," tap Install from storage</li>
-                        <li>Under "Open from," tap where you saved the certificate</li>
-                        <li>Tap the file</li>
-                        <li>If prompted, enter the key store password and tap OK</li>
-                        <li>Type a name for the certificate</li>
-                        <li>Pick VPN and apps</li>
-                        <li>Tap OK</li>
-                        <li>Done!</li>
-                      </ul>`;
+        var text = `<div class = "container">
+                      <div class="row">
+                        <div class="col-md-4">
+                      <h3 class="text-center">How to install on Android</h3>
+                        <ul>
+                          <li>Open your device's Settings app</li>
+                          <li>Under "Credential storage," tap Install from storage</li>
+                          <li>Under "Open from," tap where you saved the certificate</li>
+                          <li>Tap the file</li>
+                          <li>If prompted, enter the key store password and tap OK</li>
+                          <li>Type a name for the certificate</li>
+                          <li>Pick VPN and apps</li>
+                          <li>Tap OK</li>
+                          <li>Done!</li>
+                        </ul>
+                        </div>
+                      </div>
+                    </div>`;
     }
     else if (device == "asterisk") {
-        var text = "";
+      var text = `<div class = "container">
+                    <div class="row">
+                      <div class="col-md-4">
+                        <h3 class="text-center">How to install on Chrome on Debian/Ubuntu</h3>
+                        <ul>
+                          <li>Using Chrome, hit a page on your server via HTTPS and continue past the red warning page (assuming you haven't done this already)</li>
+                          <li>Open up Chrome Settings > Show advanced settings > HTTPS/SSL > Manage Certificates</li>
+                          <li>Click the Authorities tab and scroll down to find your certificate under the Organization Name that you gave to the certificate</li>
+                          <li>Select it, click Edit (NOTE: in recent versions of Chrome, the button is now "Advanced" instead of "Edit"), check all the boxes and click OK. You may have to restart Chrome</li>
+                        </ul>
+                      </div>
+                      <div class="col-md-4">
+                        <h3 class="text-center">How to install on Chrome on Linux</h3>
+                        <ul>
+                          <li>Open Developer Tools > Security, and select View certificate</li>
+                          <li>Click the Details tab > Export. Choose PKCS #7, single certificate as the file format</li>
+                          <li>Then follow my original instructions to get to the Manage Certificates page. Click the Authorities tab > Import and choose the file to which you exported the certificate, and make sure to choose PKCS  #7, single certificate as the file type</li>
+                          <li>If prompted certification store, choose Trusted Root Certificate Authorities</li>
+                          <li>Check all boxes and click OK. Restart Chrome</li>
+                        </ul>
+                      </div>
+                      <div class="col-md-4">
+                        <h3 class="text-center">How to install on Ubuntu (Manually)</h3>
+                        <ul>
+                          <li>Create a directory for extra CA certificates in /usr/share/ca-certificates: <div class="text-muted">$ sudo mkdir /usr/share/ca-certificates/extra<div></li>
+                          <li>Copy the CA mitmproxy.crt file to this directory: <div class="text-muted">$ sudo cp mitmproxy.crt /usr/share/ca-certificates/extra/mitmproxy.crt<div></li>
+                          <li>Let Ubuntu add the mitmproxy.crt file's path relative to /usr/share/ca-certificates to /etc/ca-certificates.conf: <div class="text-muted">$ sudo dpkg-reconfigure ca-certificates</div></li>
+                          <li>In case of a .pem file on Ubuntu, it must first be converted to a .crt file: <div class="text-muted">$ openssl x509 -in foo.pem -inform PEM -out foo.crt</div></li>
+                        </ul>
+                      </div>
+                </div>
+                </div>`;
     }
     document.getElementById("dynamic").innerHTML = text;
 }
@@ -83,7 +161,7 @@ function changeTo(device) {
 
 <hr/>
 
-<div class="text-center">
+<div class="text-center text-danger">
     Other mitmproxy users cannot intercept your connection.
 </div>
 <div class="text-center text-muted">
diff --git a/mitmproxy/addons/onboardingapp/templates/layout.html b/mitmproxy/addons/onboardingapp/templates/layout.html
index 8726a788..2d248a9b 100644
--- a/mitmproxy/addons/onboardingapp/templates/layout.html
+++ b/mitmproxy/addons/onboardingapp/templates/layout.html
@@ -24,8 +24,8 @@
 </div>
 
 <div class="container">
-    {% block content %}  
-    {% end %}  
+    {% block content %}
+    {% end %}
 </div>
 
   </body>
-- 
cgit v1.2.3


From fc3edd5d8b05484a8beb25f1fcefc86a8b650f3a Mon Sep 17 00:00:00 2001
From: bksahu <bablusahoo16@gmail.com>
Date: Tue, 2 Jan 2018 22:05:12 +0530
Subject: Added logos to mitm.it

---
 mitmproxy/addons/onboardingapp/static/mitmproxy.css  | 3 +--
 mitmproxy/addons/onboardingapp/templates/index.html  | 4 +---
 mitmproxy/addons/onboardingapp/templates/layout.html | 5 ++++-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/mitmproxy/addons/onboardingapp/static/mitmproxy.css b/mitmproxy/addons/onboardingapp/static/mitmproxy.css
index 4f70d792..969bd62b 100644
--- a/mitmproxy/addons/onboardingapp/static/mitmproxy.css
+++ b/mitmproxy/addons/onboardingapp/static/mitmproxy.css
@@ -1,6 +1,6 @@
-
 #certbank div {
     text-align: center;
+    padding-top: 20px;
 }
 
 .fronttable {
@@ -38,7 +38,6 @@ section {
 .masthead {
     padding: 50px 0 60px;
     text-align: center;
-
 }
 
 .header {
diff --git a/mitmproxy/addons/onboardingapp/templates/index.html b/mitmproxy/addons/onboardingapp/templates/index.html
index 7fa4b259..2b4328ab 100644
--- a/mitmproxy/addons/onboardingapp/templates/index.html
+++ b/mitmproxy/addons/onboardingapp/templates/index.html
@@ -132,9 +132,7 @@ function changeTo(device) {
 }
 </script>
 
-<center>
-<h2> Click to install your mitmproxy certificate: </h2>
-</center>
+<h2 class="text-center"> Click to install your mitmproxy certificate </h2>
 <div id="certbank" class="row">
     <div class="col-md-3">
         <a onclick="changeTo('apple')" href="/cert/pem"><i class="fa fa-apple fa-5x"></i></a>
diff --git a/mitmproxy/addons/onboardingapp/templates/layout.html b/mitmproxy/addons/onboardingapp/templates/layout.html
index 2d248a9b..f6e1b286 100644
--- a/mitmproxy/addons/onboardingapp/templates/layout.html
+++ b/mitmproxy/addons/onboardingapp/templates/layout.html
@@ -12,13 +12,16 @@
     <link href="/static/bootstrap.min.css" rel="stylesheet">
     <link href="/static/mitmproxy.css" rel="stylesheet">
     <link href="/static/fontawesome/css/font-awesome.min.css" rel="stylesheet">
+    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon"/>
   </head>
 
   <body>
 <div class="navbar navbar-default" role="navigation">
     <div class="container">
         <div class="navbar-header">
-            <a class="navbar-brand" href="#">mitmproxy</a>
+          <a class="navbar-brand" href="#">
+                       <img height="20px" src="static/images/mitmproxy-long.png"/>
+          </a>
         </div>
     </div>
 </div>
-- 
cgit v1.2.3


From 94d2741b6f17a373c47999d61350b3f1e1b5e598 Mon Sep 17 00:00:00 2001
From: bksahu <bablusahoo16@gmail.com>
Date: Tue, 2 Jan 2018 22:17:23 +0530
Subject: Added favicon and logos in /static/images

---
 .../addons/onboardingapp/static/images/favicon.ico     | Bin 0 -> 5430 bytes
 .../onboardingapp/static/images/mitmproxy-long.png     | Bin 0 -> 123829 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 mitmproxy/addons/onboardingapp/static/images/favicon.ico
 create mode 100644 mitmproxy/addons/onboardingapp/static/images/mitmproxy-long.png

diff --git a/mitmproxy/addons/onboardingapp/static/images/favicon.ico b/mitmproxy/addons/onboardingapp/static/images/favicon.ico
new file mode 100644
index 00000000..3c3b891c
Binary files /dev/null and b/mitmproxy/addons/onboardingapp/static/images/favicon.ico differ
diff --git a/mitmproxy/addons/onboardingapp/static/images/mitmproxy-long.png b/mitmproxy/addons/onboardingapp/static/images/mitmproxy-long.png
new file mode 100644
index 00000000..f9397d1e
Binary files /dev/null and b/mitmproxy/addons/onboardingapp/static/images/mitmproxy-long.png differ
-- 
cgit v1.2.3


From 05816d08cf9c8fc0f7348220d419522a54195a1d Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 4 Jan 2018 13:55:16 +0100
Subject: don't use red text for informational message

---
 mitmproxy/addons/onboardingapp/templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mitmproxy/addons/onboardingapp/templates/index.html b/mitmproxy/addons/onboardingapp/templates/index.html
index 2b4328ab..38aa27ed 100644
--- a/mitmproxy/addons/onboardingapp/templates/index.html
+++ b/mitmproxy/addons/onboardingapp/templates/index.html
@@ -159,7 +159,7 @@ function changeTo(device) {
 
 <hr/>
 
-<div class="text-center text-danger">
+<div class="text-center">
     Other mitmproxy users cannot intercept your connection.
 </div>
 <div class="text-center text-muted">
-- 
cgit v1.2.3