Added "Missing API Key" view.

scripts/app/app.js

@@ -19,11 +19,6 @@ var app = (function (win) {
         return !isNullOrEmpty(key) && !regEx.test(key);
     };
 
-    if (!isKeySet(appSettings.everlive.apiKey)) {
-        alert('Backend Services API Key is not set.');
-        return;
-    }
-
     // Initialize Backend Services SDK
     var el = new Everlive({
         apiKey: appSettings.everlive.apiKey,

scripts/app/login.js

@@ -20,6 +20,11 @@ app.Login = (function () {
         var isAnalytics = analytics.isAnalytics();
 
         var init = function () {
+
+            if (!app.isKeySet(appSettings.everlive.apiKey)) {
+                app.mobileApp.navigate('views/noApiKey.html', 'fade');
+            }
+
             $loginUsername = $('#loginUsername');
             $loginPassword = $('#loginPassword');
 
@@ -257,7 +262,7 @@ app.Login = (function () {
         return {
             init: init,
             show: show,
-            getYear: getYear,
+            getYear: app.getYear,
             login: login,
             loginWithFacebook: loginWithFacebook,
             loginWithGoogle: loginWithGoogle,

styles/main.css

@@ -413,6 +413,22 @@
   color: #d4d4d4;
 }
 
+/* No API Key screen */
+
+#friendsApp .noapikey-scrn p {
+    line-height: 1.5;
+    color: #e4e4e4;
+}
+
+#friendsApp .noapikey-scrn p strong,
+#friendsApp .noapikey-scrn p span {
+    color: #fff;
+}
+
+#friendsApp .noapikey-scrn p span {
+    font-weight: 600;
+}
+
 /* Signup */
 
 #friendsApp .signup-view .select-wrp {

views/noApiKey.html

@@ -0,0 +1,9 @@
+<div data-role="view" id="noApiKey" class="noapikey-scrn" data-layout="default">
+    <div data-role="header">
+        <div data-role="navbar">
+            <h3>Backend Services <strong>API Key</strong> is not set</h3>
+        </div>
+    </div>
+    <p><span>API Key</span> links the sample mobile app to a project in Telerik Backend Services.</p>
+  <p>To set the <span>API Key</span> open the <span>/scripts/app/settings.js</span> file and replace <strong>$EVERLIVE_API_KEY$</strong> with the <span>API Key</span> of your 'Friends' project.</p>
+</div>