inital pass at sign in/sign out functionality

8 files changed, 894 insertions, 17 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Auth.pm b/perllib/FixMyStreet/App/Controller/Auth.pm
index c67de692a..3dc25dedf 100644
--- a/perllib/FixMyStreet/App/Controller/Auth.pm
+++ b/perllib/FixMyStreet/App/Controller/Auth.pm
@@ -7,6 +7,7 @@ BEGIN { extends 'Catalyst::Controller'; }
 use Email::Valid;
 use Net::Domain::TLD;
 use mySociety::AuthToken;
+use JSON;
 
 =head1 NAME
 
@@ -250,6 +251,54 @@ sub sign_out : Local {
     $c->logout();
 }
 
+sub ajax_sign_in : Path('ajax/sign_in') {
+    my ( $self, $c ) = @_;
+
+    my $return = {};
+    if ( $c->forward( 'sign_in' ) ) {
+        $return->{name} = $c->user->name;
+    } else {
+        $return->{error} = 1;
+    }
+
+    my $body = JSON->new->utf8(1)->encode( $return );
+    $c->res->content_type('application/json; charset=utf-8');
+    $c->res->body($body);
+
+    return 1;
+}
+
+sub ajax_sign_out : Path('ajax/sign_out') {
+    my ( $self, $c ) = @_;
+
+    $c->logout();
+
+    my $body = JSON->new->utf8(1)->encode( { signed_out => 1 } );
+    $c->res->content_type('application/json; charset=utf-8');
+    $c->res->body($body);
+
+    return 1;
+}
+
+sub ajax_check_auth : Path('ajax/check_auth') {
+    my ( $self, $c ) = @_;
+
+    my $code = 401;
+    my $data = { not_authorized => 1 };
+
+    if ( $c->user ) {
+        $data = { name => $c->user->name };
+        $code = 200;
+    }
+
+    my $body = JSON->new->utf8(1)->encode( $data );
+    $c->res->content_type('application/json; charset=utf-8');
+    $c->res->code($code);
+    $c->res->body($body);
+
+    return 1;
+}
+
 =head2 check_auth
 
 Utility page - returns a simple message 'OK' and a 200 response if the user is
diff --git a/phonegap/www/around.html b/phonegap/www/around.html
index 4768d2f42..d45a24ccf 100644
--- a/phonegap/www/around.html
+++ b/phonegap/www/around.html
@@ -9,7 +9,8 @@
 
         <link rel="stylesheet" href="css/base.css">
         <link rel="stylesheet" href="css/layout.css" media="(min-width:48em)">
-            
+        <link rel="stylesheet" href="css/mobile.css">
+
 <script type="text/javascript" src="js/config.js"></script>
 
 <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
@@ -245,6 +246,7 @@ var fixmystreet = {
                     <img id="photo" src="" width="200" />
                     <input value="Remove Photo" type="button" name="del_photo_button" id="id_del_photo_button" onclick="delPhoto();" class="green-btn">
                 </div>
+
                 <input type="hidden" name="photo" id="form_photo" value="">
                 <label for="form_email" id="email_label">Your email</label>
                 
diff --git a/phonegap/www/css/mobile.css b/phonegap/www/css/mobile.css
index 1aa2cdeae..4c97ea2ba 100644
--- a/phonegap/www/css/mobile.css
+++ b/phonegap/www/css/mobile.css
@@ -12,6 +12,18 @@
     background: black;
 }
 
+.mobile-sign-in-banner {
+    display: none;
+    background: none;
+}
+
+.mobile-sign-in-banner a {
+  position: absolute;
+  left: auto;
+  right: 0.3em;
+  top: 0.8em;
+}
+
 .mobile-info {
     position: fixed;
     bottom: 0px;
@@ -84,4 +96,17 @@ ol.big-numbers > li {
 #multiple li {
     list-style: none;
     margin: auto;
-}
\ No newline at end of file
+}
+
+#nav-link {
+    display: none;
+}
+
+#form_sign_in {
+    margin-top: 1em;
+}
+
+#sign_out,
+#sign_in {
+    display: none;
+}
diff --git a/phonegap/www/index.html b/phonegap/www/index.html
index cf32ea071..3ba7dc77a 100644
--- a/phonegap/www/index.html
+++ b/phonegap/www/index.html
@@ -48,13 +48,7 @@
                         <a href="/" id="site-logo">FixMyStreet</a>
                     </div>
                 </header>
-                
-                <div id="user-meta">
-                    
-                    <!-- <a href="/auth">Sign in</a> -->
-                    
-                </div>
-                
+
                 <div class="container">
                     <div class="content" role="main">                        
                         <div id="front-main">
@@ -68,7 +62,7 @@
                                 </form>
                             </div>
                         </div>
-                        
+
                         <div class="tablewrapper">
                             <div id="front-howto">
                                 <h2>How to report a problem</h2>
@@ -85,14 +79,14 @@
                     </div><!-- .content role=main -->
                 </div><!-- .container -->
             </div><!-- .table-cell -->
-            
+
             <div class="mobile-info">
                 <a href="about.html">i</a>
             </div>
-            
-            <!-- 
-             
-             -->
+
+            <div class="big-green-banner mobile-map-banner mobile-sign-in-banner">
+                <a id="sign_in" href="sign_in.html">Sign In</a><a id="sign_out" href="#" onclick="sign_out(); return false;">Sign Out</a>
+            </div>
         </div> <!-- .wrapper -->
     </body>
 </html>
diff --git a/phonegap/www/js/json2.js b/phonegap/www/js/json2.js
new file mode 100644
index 000000000..3b0c872d1
--- /dev/null
+++ b/phonegap/www/js/json2.js
@@ -0,0 +1,487 @@
+/*
+    json2.js
+    2011-10-19
+
+    Public Domain.
+
+    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+    See http://www.JSON.org/js.html
+
+
+    This code should be minified before deployment.
+    See http://javascript.crockford.com/jsmin.html
+
+    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+    NOT CONTROL.
+
+
+    This file creates a global JSON object containing two methods: stringify
+    and parse.
+
+        JSON.stringify(value, replacer, space)
+            value       any JavaScript value, usually an object or array.
+
+            replacer    an optional parameter that determines how object
+                        values are stringified for objects. It can be a
+                        function or an array of strings.
+
+            space       an optional parameter that specifies the indentation
+                        of nested structures. If it is omitted, the text will
+                        be packed without extra whitespace. If it is a number,
+                        it will specify the number of spaces to indent at each
+                        level. If it is a string (such as '\t' or '&nbsp;'),
+                        it contains the characters used to indent at each level.
+
+            This method produces a JSON text from a JavaScript value.
+
+            When an object value is found, if the object contains a toJSON
+            method, its toJSON method will be called and the result will be
+            stringified. A toJSON method does not serialize: it returns the
+            value represented by the name/value pair that should be serialized,
+            or undefined if nothing should be serialized. The toJSON method
+            will be passed the key associated with the value, and this will be
+            bound to the value
+
+            For example, this would serialize Dates as ISO strings.
+
+                Date.prototype.toJSON = function (key) {
+                    function f(n) {
+                        // Format integers to have at least two digits.
+                        return n < 10 ? '0' + n : n;
+                    }
+
+                    return this.getUTCFullYear()   + '-' +
+                         f(this.getUTCMonth() + 1) + '-' +
+                         f(this.getUTCDate())      + 'T' +
+                         f(this.getUTCHours())     + ':' +
+                         f(this.getUTCMinutes())   + ':' +
+                         f(this.getUTCSeconds())   + 'Z';
+                };
+
+            You can provide an optional replacer method. It will be passed the
+            key and value of each member, with this bound to the containing
+            object. The value that is returned from your method will be
+            serialized. If your method returns undefined, then the member will
+            be excluded from the serialization.
+
+            If the replacer parameter is an array of strings, then it will be
+            used to select the members to be serialized. It filters the results
+            such that only members with keys listed in the replacer array are
+            stringified.
+
+            Values that do not have JSON representations, such as undefined or
+            functions, will not be serialized. Such values in objects will be
+            dropped; in arrays they will be replaced with null. You can use
+            a replacer function to replace those with JSON values.
+            JSON.stringify(undefined) returns undefined.
+
+            The optional space parameter produces a stringification of the
+            value that is filled with line breaks and indentation to make it
+            easier to read.
+
+            If the space parameter is a non-empty string, then that string will
+            be used for indentation. If the space parameter is a number, then
+            the indentation will be that many spaces.
+
+            Example:
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}]);
+            // text is '["e",{"pluribus":"unum"}]'
+
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+            // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+            text = JSON.stringify([new Date()], function (key, value) {
+                return this[key] instanceof Date ?
+                    'Date(' + this[key] + ')' : value;
+            });
+            // text is '["Date(---current time---)"]'
+
+
+        JSON.parse(text, reviver)
+            This method parses a JSON text to produce an object or array.
+            It can throw a SyntaxError exception.
+
+            The optional reviver parameter is a function that can filter and
+            transform the results. It receives each of the keys and values,
+            and its return value is used instead of the original value.
+            If it returns what it received, then the structure is not modified.
+            If it returns undefined then the member is deleted.
+
+            Example:
+
+            // Parse the text. Values that look like ISO date strings will
+            // be converted to Date objects.
+
+            myData = JSON.parse(text, function (key, value) {
+                var a;
+                if (typeof value === 'string') {
+                    a =
+/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+                    if (a) {
+                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+                            +a[5], +a[6]));
+                    }
+                }
+                return value;
+            });
+
+            myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+                var d;
+                if (typeof value === 'string' &&
+                        value.slice(0, 5) === 'Date(' &&
+                        value.slice(-1) === ')') {
+                    d = new Date(value.slice(5, -1));
+                    if (d) {
+                        return d;
+                    }
+                }
+                return value;
+            });
+
+
+    This is a reference implementation. You are free to copy, modify, or
+    redistribute.
+*/
+
+/*jslint evil: true, regexp: true */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+    call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+var JSON;
+if (!JSON) {
+    JSON = {};
+}
+
+(function () {
+    'use strict';
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf())
+                ? this.getUTCFullYear()     + '-' +
+                    f(this.getUTCMonth() + 1) + '-' +
+                    f(this.getUTCDate())      + 'T' +
+                    f(this.getUTCHours())     + ':' +
+                    f(this.getUTCMinutes())   + ':' +
+                    f(this.getUTCSeconds())   + 'Z'
+                : null;
+        };
+
+        String.prototype.toJSON      =
+            Number.prototype.toJSON  =
+            Boolean.prototype.toJSON = function (key) {
+                return this.valueOf();
+            };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ? '"' + string.replace(escapable, function (a) {
+            var c = meta[a];
+            return typeof c === 'string'
+                ? c
+                : '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+        }) + '"' : '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0
+                    ? '[]'
+                    : gap
+                    ? '[\n' + gap + partial.join(',\n' + gap) + '\n' + mind + ']'
+                    : '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    if (typeof rep[i] === 'string') {
+                        k = rep[i];
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0
+                ? '{}'
+                : gap
+                ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + mind + '}'
+                : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                    typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.prototype.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            text = String(text);
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/
+                    .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                        .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                        .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function'
+                    ? walk({'': j}, '')
+                    : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());
diff --git a/phonegap/www/js/mobile.js b/phonegap/www/js/mobile.js
index f580ee0bf..adf5e86cf 100644
--- a/phonegap/www/js/mobile.js
+++ b/phonegap/www/js/mobile.js
@@ -195,8 +195,10 @@ function check_name( name, msg ) {
     $('#password_surround').hide();
     $('#providing_password').hide();
     $('#form_name').val( name );
-    $('#form_name').focus();
-    $('#form_name').before('<div class="form-error">' + msg + '</div>' );
+    if ( msg ) {
+        $('#form_name').focus();
+        $('#form_name').before('<div class="form-error">' + msg + '</div>' );
+    }
 }
 
 function fileUploadSuccess(r) {
@@ -305,10 +307,95 @@ function postReport(e) {
     return false;
 }
 
+function sign_in() {
+    jQuery.ajax( {
+        url: CONFIG.FMS_URL + "auth/ajax/sign_in",
+        type: 'POST',
+        data: {
+            email: $('#form_email').val(),
+            password_sign_in: $('#password_sign_in').val(),
+            remember_me: 1
+        },
+        success: function(data) {
+            if ( data.name ) {
+                localStorage.name = data.name;
+                window.location = 'signed_in.html';
+                $('#sign_out').show();
+                $('#sign_in').hide();
+            } else {
+                alert('Sign in Failed :(');
+            }
+        }
+    } );
+
+}
+
+function display_signed_out_msg() {
+    if ( localStorage.signed_out == 1 ) {
+        $('#user-meta').html('<p>You&rsquo;ve been signed out.</p>');
+        localStorage.signed_out = null;
+    }
+}
+
+function sign_out() {
+    jQuery.ajax( {
+        url: CONFIG.FMS_URL + "auth/ajax/sign_out",
+        type: 'GET',
+        success: function(data) {
+            if ( data.signed_out ) {
+                localStorage.signed_out = 1;
+                localStorage.name = null;
+                document.location = 'sign_in.html';
+            }
+        }
+    } );
+}
+
+function check_auth() {
+    if ( $('#user-meta').length ) {
+        jQuery.ajax( {
+            url: CONFIG.FMS_URL + "auth/ajax/check_auth",
+            type: 'GET',
+            statusCode: {
+                200: function(data) {
+                    localStorage.name = data.name;
+                    $('#user-meta').html('<p>Hi ' + localStorage.name + '<a href="#" onclick="sign_out(); return false;">Sign out</a></p>');
+                    $('.mobile-sign-in-banner').show();
+                    $('#sign_in').hide();
+                    $('#sign_out').show();
+                },
+                401: function() {
+                    $('#user-meta').html('');
+                    localStorage.name = '';
+                    $('.mobile-sign-in-banner').show();
+                    $('#sign_out').hide();
+                    $('#sign_in').show();
+                    $('#user-meta').html('');
+                }
+            }
+        } );
+    }
+}
+
+function signed_in() {
+    if ( $('body').hasClass('signed-in-page') ) {
+        $('#user-meta').html('<p>Hi ' + localStorage.name + '<a href="#" onclick="sign_out(); return false;">Sign out</a></p>');
+    }
+
+    if ( $('#form_sign_in').length ) {
+        ('form sign in exists');
+        check_name( localStorage.name );
+        $('.form-focus-hidden').show();
+    }
+}
+
 $(function(){
     $('#postcodeForm').submit(locate);
     $('#mapForm').submit(postReport);
+    $('#signInForm').submit(sign_in);
     $('#ffo').click(getPosition);
     $('#mapForm :input[type=submit]').on('click', function() { submit_clicked = $(this); });
+    check_auth();
+    signed_in();
 });
 
diff --git a/phonegap/www/sign_in.html b/phonegap/www/sign_in.html
new file mode 100644
index 000000000..1cbce75b6
--- /dev/null
+++ b/phonegap/www/sign_in.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html class="no-js" lang="en-gb">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+        <meta name="HandHeldFriendly" content="true">
+        <meta name="mobileoptimized" content="0">
+
+        <link rel="stylesheet" href="css/base.css">
+        <link rel="stylesheet" href="css/mobile.css">
+        <link rel="stylesheet" href="css/layout.css" media="(min-width:48em)">
+
+<script type="text/javascript" src="js/config.js"></script>
+
+<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
+
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+
+<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
+
+<script type="text/javascript" src="js/json2.js"></script>
+<script type="text/javascript" src="js/geo.min.js"></script>
+<script type="text/javascript" src="js/fixmystreet.js"></script>
+<script type="text/javascript" src="js/mobile.js"></script>
+
+    <script type="text/javascript">
+        validation_strings = {
+            update: 'Please enter a message',
+            title: 'Please enter a subject',
+            detail: 'Please enter some details',
+            name: {
+                required: 'Please enter your name',
+                validName: 'Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below'
+            },
+            category: 'Please choose a category',
+            rznvy: {
+                required: 'Please enter your email',
+                email: 'Please enter a valid email'
+            },
+            email: {
+                required: 'Please enter your email',
+                email: 'Please enter a valid email'
+            }
+        };
+        </script>
+<title>
+    Viewing a location :: FixMyStreet
+</title>
+
+
+    </head>
+
+    <body class="mobile-header" id="container" onload="display_signed_out_msg();">
+
+    <div class="wrapper">
+        <div class="table-cell">
+            <header id="site-header" role="banner">
+                <div class="container">
+                    <a href="/" id="site-logo">FixMyStreet</a>
+                    <a href="#main-nav" id="nav-link">Main Navigation</a>
+                </div>
+            </header>
+
+            <div id="user-meta">
+
+            </div>
+
+            <div class="container">
+                <div class="content" role="main">
+
+<form action="" method="post" name="signInForm" id="signInForm" enctype="multipart/form-data" class="validate">
+
+                <div id="form_sign_in_only">
+                    <div id="form_sign_in_yes" class="form-box">
+
+                        <label for="form_email" id="email_label">Your email</label>
+                        <input type="email" value="" name="email" id="form_email" placeholder="Please enter your email address" required>
+
+                        <div class="form-txt-submit-box">
+                            <input type="password" name="password_sign_in" id="password_sign_in" placeholder="Your password" value="">
+                            <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="Submit">
+                        </div>
+                        <div class="checkbox-group">
+                            <input type="checkbox" id="remember_me" name="remember_me" value='1'>
+                            <label class="n inline" for="remember_me">Keep me signed in on this computer</label>
+                        </div>
+                    </div>
+
+                    <!--
+                    <div id="form_sign_in_no" class="form-box">
+                        <h5 id="let_me_confirm"><strong>No</strong> Let me confirm my report by email</h5>
+
+                        <label for="form_may_show_nameme">Name</label>
+
+                        <input type="text" class="form-focus-trigger validName" value="" name="name" id="form_name" placeholder="Your name">
+
+
+                        <div class="checkbox-group">
+                            <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1" checked>
+                            <label class="inline" for="form_may_show_name">Show my name publicly</label>
+                        </div>
+
+                        <div class="general-sidebar-notes form-focus-hidden">
+                            <p class="dark">We never show your email address or phone number.</p>
+                            <p id="providing_password">Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.</p>
+                        </div>
+
+                        <label class="form-focus-hidden" for="form_phone">Phone number</label>
+                        <input class="form-focus-hidden" type="text" value="" name="phone" id="form_phone" placeholder="Your phone number (optional)">
+
+                        <div id="password_surround">
+                        <label class="form-focus-hidden" for="password_register" id="password_label">Password</label>
+                        </div>
+
+                        <div class="form-txt-submit-box form-focus-hidden">
+                            <input type="password" name="password_register" id="password_register" value="" placeholder="Enter a password (optional)">
+                            <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="Submit">
+                        </div>
+                    </div>
+                </div>
+                -->
+    </fieldset>
+
+</div>
+
+    </div>
+</form>
+
+
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
+
+        <div class="big-green-banner mobile-map-banner mobile-nav-banner">
+            <a href="index.html">home</a>
+            Sign In
+        </div>
+
+    </div> <!-- .wrapper -->
+</body>
+</html>
diff --git a/phonegap/www/signed_in.html b/phonegap/www/signed_in.html
new file mode 100644
index 000000000..5c3e626a4
--- /dev/null
+++ b/phonegap/www/signed_in.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html class="no-js" lang="en-gb">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+        <meta name="HandHeldFriendly" content="true">
+        <meta name="mobileoptimized" content="0">
+
+        <link rel="stylesheet" href="css/base.css">
+        <link rel="stylesheet" href="css/mobile.css">
+        <link rel="stylesheet" href="css/layout.css" media="(min-width:48em)">
+
+<script type="text/javascript" src="js/config.js"></script>
+
+<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
+
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+
+<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
+
+<script type="text/javascript" src="js/json2.js"></script>
+<script type="text/javascript" src="js/geo.min.js"></script>
+<script type="text/javascript" src="js/fixmystreet.js"></script>
+<script type="text/javascript" src="js/mobile.js"></script>
+<script type="text/javascript" src="js/OpenLayers.fixmystreet.js"></script>
+<script type="text/javascript" src="js/map-OpenLayers.js"></script>
+<script type="text/javascript" src="js/map-bing-ol.js"></script>
+<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
+
+    <script type="text/javascript">
+        validation_strings = {
+            update: 'Please enter a message',
+            title: 'Please enter a subject',
+            detail: 'Please enter some details',
+            name: {
+                required: 'Please enter your name',
+                validName: 'Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below'
+            },
+            category: 'Please choose a category',
+            rznvy: {
+                required: 'Please enter your email',
+                email: 'Please enter a valid email'
+            },
+            email: {
+                required: 'Please enter your email',
+                email: 'Please enter a valid email'
+            }
+        };
+        </script>
+<title>
+    Viewing a location :: FixMyStreet
+</title>
+
+
+    </head>
+
+    <body class="mobile-header signed-in-page" id="container">
+
+    <div class="wrapper">
+        <div class="table-cell">
+            <header id="site-header" role="banner">
+                <div class="container">
+                    <a href="/" id="site-logo">FixMyStreet</a>
+                    <a href="#main-nav" id="nav-link">Main Navigation</a>
+                </div>
+            </header>
+
+            <div id="user-meta">
+
+            </div>
+
+            <div class="container">
+                <div class="content" role="main">
+
+
+
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
+
+        <div class="big-green-banner mobile-map-banner mobile-nav-banner">
+            <a href="index.html">home</a>
+            Signed In
+        </div>
+
+    </div> <!-- .wrapper -->
+</body>
+</html>