From 39356e8f347dd92a684f765954114e471e1f0239 Mon Sep 17 00:00:00 2001
From: Ritiek Malhotra <Ritiek@users.noreply.github.com>
Date: Sun, 7 May 2017 02:07:41 +0530
Subject: [PATCH] Add dynamic apple instructions

---
 .../addons/onboardingapp/templates/index.html | 54 ++++++++++++-------
 1 file changed, 35 insertions(+), 19 deletions(-)

diff --git a/mitmproxy/addons/onboardingapp/templates/index.html b/mitmproxy/addons/onboardingapp/templates/index.html
index f2b54b69b..7bd91cc27 100644
--- a/mitmproxy/addons/onboardingapp/templates/index.html
+++ b/mitmproxy/addons/onboardingapp/templates/index.html
@@ -1,47 +1,63 @@
 {% extends "frame.html" %}
 {% block body %}
 
+<script>
+function changeTo(device) {
+    if (device == "apple") {
+        var text = `<h3>Apple: How to install on macOS / OSX</h3>
+                      <ul>
+                        <li>Download PEM file (from above link)</li>
+                        <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>Go to Settings > General > About > Certificate Trust Settings and enable full trust for your certificate</li>
+                        <li>Done!</li>
+                      </ul>`;
+    }
+    else if (device == "windows") {
+        var text = "hi";
+    }
+    else if (device == "android") {
+        var text = "hi";
+    }
+    else if (device == "asterisk") {
+        var text = "hi";
+    }
+    document.getElementById("dynamic").innerHTML = text;
+}
+</script>
+
 <center>
 <h2> Click to install the mitmproxy certificate: </h2>
 </center>
 <div id="certbank" class="row">
     <div class="col-md-3">
-        <a href="/cert/pem"><i class="fa fa-apple fa-5x"></i></a>
+        <a onclick="changeTo('apple')" href="/cert/pem"><i class="fa fa-apple fa-5x"></i></a>
         <p>Apple</p>
     </div>
     <div class="col-md-3">
-        <a href="/cert/p12"><i class="fa fa-windows fa-5x"></i></a>
+        <a onclick="changeTo('windows')" href="/cert/p12"><i class="fa fa-windows fa-5x"></i></a>
         <p>Windows</p>
     </div>
     <div class="col-md-3">
-        <a href="/cert/pem"><i class="fa fa-android fa-5x"></i></a>
+        <a onclick="changeTo('android')" href="/cert/pem"><i class="fa fa-android fa-5x"></i></a>
         <p>Android</p>
     </div>
     <div class="col-md-3">
-        <a href="/cert/pem"><i class="fa fa-asterisk fa-5x"></i></a>
+        <a onclick="changeTo('asterisk')" href="/cert/pem"><i class="fa fa-asterisk fa-5x"></i></a>
         <p>Other</p>
     </div>
 </div>
 
 <hr/>
 
-<div class="text-left">
-  <h3>Apple: How to install on macOS / OSX</h3>
-  <ul>
-    <li>Download PEM file (from above link)</li>
-    <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 class="text-left" id="dynamic">
 </div>
 
-
-
 <hr/>
 
 <div class="text-center">