Making configuration page look less like an error page and more like …

…an information page

ftum.tmproj

@@ -3,7 +3,7 @@
 <plist version="1.0">
 <dict>
 	<key>currentDocument</key>
-	<string>public/css/site.css</string>
+	<string>README.md</string>
 	<key>documents</key>
 	<array>
 		<dict>
@@ -26,9 +26,9 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>93</integer>
+				<integer>26</integer>
 				<key>line</key>
-				<integer>8</integer>
+				<integer>33</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
@@ -98,14 +98,14 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>165</integer>
+				<integer>14</integer>
 				<key>line</key>
-				<integer>27</integer>
+				<integer>68</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
 			<key>firstVisibleLine</key>
-			<integer>9</integer>
+			<integer>38</integer>
 		</dict>
 		<key>public/js/cmds.js</key>
 		<dict>
@@ -228,9 +228,9 @@
 			<key>caret</key>
 			<dict>
 				<key>column</key>
-				<integer>58</integer>
+				<integer>53</integer>
 				<key>line</key>
-				<integer>58</integer>
+				<integer>35</integer>
 			</dict>
 			<key>firstVisibleColumn</key>
 			<integer>0</integer>
@@ -265,27 +265,41 @@
 			<key>firstVisibleLine</key>
 			<integer>0</integer>
 		</dict>
+		<key>templates/set_session.html</key>
+		<dict>
+			<key>caret</key>
+			<dict>
+				<key>column</key>
+				<integer>75</integer>
+				<key>line</key>
+				<integer>5</integer>
+			</dict>
+			<key>firstVisibleColumn</key>
+			<integer>0</integer>
+			<key>firstVisibleLine</key>
+			<integer>0</integer>
+		</dict>
 	</dict>
 	<key>openDocuments</key>
 	<array>
 		<string>templates/about.html</string>
 		<string>templates/list.html</string>
 		<string>public/js/cmds.js</string>
 		<string>public/css/site.css</string>
+		<string>templates/set_session.html</string>
 		<string>README.md</string>
 		<string>templates/layout.html</string>
 		<string>templates/error.html</string>
 		<string>public/js/jquery.tools.min.js</string>
 		<string>templates/create.html</string>
 		<string>templates/add_friend.html</string>
-		<string>config/config.ini.php</string>
 		<string>public/css/base.css</string>
 		<string>public/css/form.css</string>
 		<string>templates/new.html</string>
 	</array>
 	<key>showFileHierarchyDrawer</key>
 	<true/>
 	<key>windowFrame</key>
-	<string>{{203, 4}, {1077, 774}}</string>
+	<string>{{408, -796}, {1077, 796}}</string>
 </dict>
 </plist>

library/App/Action/Base.php

@@ -74,12 +74,8 @@ public function setIsAjax($isAjax)
     protected function checkTokens()
     {
         if (!\defined('FACEBOOK_APP_ID') || !\defined('FACEBOOK_APP_SECRET')){
-            $e = new \Exception('App ID and Secret not set, please choose an option: <br>
-                <ul id="tokenerr">
-                    <li>rename <strong>config.ini.php.sample</strong> to <strong>config.ini.php</strong> and set the App ID and Secret</li>
-                    <li><a href="set-session">Click here</a> to set App Id and Secret for this session</li>
-                </ul>', 400);
-            $this->redirectToError($e);
+            $configPage = new ConfigAction();
+            $configPage->run();
             return false;
         }
 

library/App/Action/ConfigAction.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Action;
+
+class ConfigAction extends Base
+{
+
+	public function run()
+	{
+		//Render Template
+		$tpl = $this->getTplEngine()->loadTemplate('config.html');
+        $tpl->display(array());
+	}
+
+}
+
+?>

public/css/site.css

@@ -74,6 +74,13 @@ a { color: #3F4959; text-decoration: none;  }
 
 .tooltip{display:none;background:transparent url(../images/tooltip/black_arrow.png);font-size:12px;height:70px;width:160px;padding:25px;color:#fff;}
 
+.config {}
+.config .option { font-size: 16px; padding: 15px 0; }
+.config .instruction { padding: 5px; margin: 10px 0; background-color: #FFE28D;}
+.config .instruction span { font-weight: bold;}
+.config strong { font-weight:bold; }
+.config .instruction a { color: #E39719; text-decoration: underline; }
+
 #tokenerr { margin: 0;	padding: 0;	line-height: 1.8em; }
 #tokenerr li { padding: 0px;	margin-left: 25px; list-style-type: circle; }
 #tokenerr li strong { font-weight: bold; }

templates/config.html

@@ -0,0 +1,20 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<h1 id="configuring_the_app">Configuring the App</h1>
+
+<div class="config">
+	<p>In order to use this application, we need to have your App ID and Secret to make call in your behalf to Facebook. To make this possible you have 2 options depending on where you are:</p>
+
+	<p class="option"><strong>If you are on your local environment</strong></p>
+	<p>In this case you have the choice of setting the configuration in a local file, and never worrying about this again. The downside is you will only be able to access <strong>one</strong> FB App this way, having to alter this config file for every switch</p>
+
+	<p class="instruction"><span>Do this:</span> Rename <strong>config.ini.php.sample</strong> to <strong>config.ini.php</strong> and set the App ID and Secret in there</p>
+
+	<p class="option"><strong>If you are using a hosted version</strong> or want to manage multiple FB Apps</p>
+
+	<p>In this case you can use our sesion manager to define a App ID and Secret in the current session and switch around as needed for other apps.</p>
+
+	<p class="instruction"><span>Do this:</span> <a href="set-session">Click on this link</a> or the "Set/Unset Session Vars" link above</p>
+</div>
+{% endblock %}