add basic design to userbundle && refactor

2016-11-06 21:27:12 +01:00
parent c936f4c643
commit 3f3605fbd8
10 changed files with 745 additions and 80 deletions
--- a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
@@ -0,0 +1,201 @@
+main {
+    background: #34495e;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+main .form {
+    border-top: 2px solid #3498db;
+}
+
+main .checkbox {
+    color: #FFFFFF;
+}
+
+.facebook {
+    border-top: 2px solid #3498db;
+    padding: 40px;
+    margin: 20px;
+}
+
+.fb-login {
+    background: #3498db;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    padding: 15px 20px;
+    margin: 20px;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+.fb-login:hover {
+    background: #FFFFFF;
+    text-decoration: none;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+/** input */
+
+.input {
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    max-width: 350px;
+    width: calc(100% - 2em);
+    vertical-align: top;
+}
+
+.input__field {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 0.8em;
+    width: 60%;
+    border: none;
+    border-radius: 0;
+    background: #f0f0f0;
+    color: #aaa;
+    font-weight: 400;
+    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-appearance: none; /* for box shadows to show on iOS */
+}
+
+.input__field:focus {
+    outline: none;
+}
+
+.input__label {
+    display: inline-block;
+    float: right;
+    padding: 0 1em;
+    width: 40%;
+    color: #696969;
+    font-weight: bold;
+    font-size: 70.25%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.input__label-content {
+    position: relative;
+    display: block;
+    padding: 1.6em 0;
+    width: 100%;
+}
+
+.graphic {
+    position: absolute;
+    top: 0;
+    left: 0;
+    fill: none;
+}
+
+.icon {
+    color: #ddd;
+    font-size: 150%;
+}
+
+/* Kozakura */
+.input--kozakura {
+    overflow: hidden;
+}
+
+.input__field--kozakura {
+    padding: 0.25em 0.5em;
+    margin-top: 1.25em;
+    width: 100%;
+    background: transparent;
+    color: #2F3238;
+    font-size: 1.55em;
+    opacity: 0;
+}
+
+.input__label--kozakura {
+    width: 100%;
+    text-align: left;
+    position: absolute;
+    top: 1em;
+    pointer-events: none;
+    overflow: hidden;
+    padding: 0 0.25em;
+    -webkit-transform: translate3d(1em, 2.75em, 0);
+    transform: translate3d(1em, 2.75em, 0);
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.input__label-content--kozakura {
+    color: #FFFFFF;
+    padding: 0.4em 0 0.25em;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: transform 0.3s;
+}
+
+.input__label-content--kozakura::after {
+    content: attr(data-content);
+    position: absolute;
+    font-weight: 800;
+    top: 100%;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    color: #fff;
+    padding: 0.25em 0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.85em;
+}
+
+.graphic--kozakura {
+    fill: #3498db;
+    pointer-events: none;
+    top: 1em;
+    bottom: 0;
+    height: 4.5em;
+    z-index: -1;
+    -webkit-transition: -webkit-transform 0.7s, fill 0.7s;
+    transition: transform 0.7s, fill 0.7s;
+    -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+.input__field--kozakura:focus,
+.input--filled .input__field--kozakura {
+    -webkit-transition: opacity 0s 0.35s;
+    transition: opacity 0s 0.35s;
+    opacity: 1;
+}
+
+.input__field--kozakura:focus + .input__label--kozakura,
+.input--filled .input__label--kozakura {
+    -webkit-transition-delay: 0.15s;
+    transition-delay: 0.15s;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+}
+
+.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
+.input--filled .input__label-content--kozakura {
+    -webkit-transition-delay: 0.15s;
+    transition-delay: 0.15s;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+}
+
+.input__field--kozakura:focus ~ .graphic--kozakura,
+.input--filled .graphic--kozakura {
+    fill: #fff;
+    -webkit-transform: translate3d(-66.6%, 0, 0);
+    transform: translate3d(-66.6%, 0, 0);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/css/login.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/login.css
@@ -0,0 +1,42 @@
+main .login {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main .login h1 {
+    display: block;
+    font: normal 40px 'Gloria Hallelujah', cursive;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+main .login .form .input {
+    display: block;
+    margin: 0 auto;
+}
+
+main .login .form .submit {
+    background: #3498db;
+    display: block;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    border: 0;
+    padding: 10px 20px;
+    margin: 20px auto 0 auto;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+main .login .form .submit:hover {
+    background: #FFFFFF;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/css/register.css
+++ b/src/Jotunheimr/UserBundle/Resources/public/css/register.css
@@ -0,0 +1,42 @@
+main .register {
+    position: fixed;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main .register h1 {
+    display: block;
+    font: normal 40px 'Gloria Hallelujah', cursive;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+main .register .form .input {
+    display: block;
+    margin: 0 auto;
+}
+
+main .register .form .submit {
+    background: #3498db;
+    display: block;
+    font: bold 22px 'Gloria Hallelujah', cursive;
+    color: #FFFFFF;
+    border: 0;
+    padding: 10px 20px;
+    margin: 20px auto 0 auto;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
+
+main .register .form .submit:hover {
+    background: #FFFFFF;
+    color: #3498db;
+
+    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+}
--- a/src/Jotunheimr/UserBundle/Resources/public/js/circle.js
+++ b/src/Jotunheimr/UserBundle/Resources/public/js/circle.js
@@ -0,0 +1,126 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function () {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
+            || window[vendors[x] + 'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function (callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function () {
+                    callback(currTime + timeToCall);
+                },
+                timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function (id) {
+            clearTimeout(id);
+        };
+}());
+
+(function () {
+
+    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
+
+    // Main
+    initHeader();
+    addListeners();
+
+    function initHeader() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        target = {x: 0, y: height};
+
+        // largeHeader = document.getElementById('large-header');
+        // largeHeader.style.height = height + 'px';
+
+        canvas = document.getElementById('demo-canvas');
+        canvas.width = width;
+        canvas.height = height;
+        ctx = canvas.getContext('2d');
+
+        // create particles
+        circles = [];
+        for (var x = 0; x < width * 0.5; x++) {
+            var c = new Circle();
+            circles.push(c);
+        }
+        animate();
+    }
+
+    // Event handling
+    function addListeners() {
+        window.addEventListener('scroll', scrollCheck);
+        window.addEventListener('resize', resize);
+    }
+
+    function scrollCheck() {
+        if (document.body.scrollTop > height) animateHeader = false;
+        else animateHeader = true;
+    }
+
+    function resize() {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        // largeHeader.style.height = height + 'px';
+        canvas.width = width;
+        canvas.height = height;
+    }
+
+    function animate() {
+        if (animateHeader) {
+            ctx.clearRect(0, 0, width, height);
+            for (var i in circles) {
+                circles[i].draw();
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
+    // Canvas manipulation
+    function Circle() {
+        var _this = this;
+
+        // constructor
+        (function () {
+            _this.pos = {};
+            init();
+            // console.log(_this);
+        })();
+
+        function init() {
+            _this.pos.x = Math.random() * width;
+            _this.pos.y = height + Math.random() * 100;
+            _this.alpha = 0.1 + Math.random() * 0.3;
+            _this.scale = 0.1 + Math.random() * 0.3;
+            _this.velocity = Math.random();
+        }
+
+        this.draw = function () {
+            if (_this.alpha <= 0) {
+                init();
+            }
+            _this.pos.y -= _this.velocity;
+            _this.alpha -= 0.0005;
+            ctx.beginPath();
+            ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
+            ctx.fillStyle = 'rgba(255,255,255,' + _this.alpha + ')';
+            ctx.fill();
+        };
+    }
+
+})();
--- a/src/Jotunheimr/UserBundle/Resources/public/js/register.js
+++ b/src/Jotunheimr/UserBundle/Resources/public/js/register.js
@@ -0,0 +1,114 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ *
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+(function (window) {
+
+    'use strict';
+
+    // class helper functions from bonzo https://github.com/ded/bonzo
+
+    function classReg(className) {
+        return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+    }
+
+    // classList support for class management
+    // altho to be fair, the api sucks because it won't accept multiple classes at once
+    var hasClass, addClass, removeClass;
+
+    if ('classList' in document.documentElement) {
+        hasClass = function (elem, c) {
+            return elem.classList.contains(c);
+        };
+        addClass = function (elem, c) {
+            elem.classList.add(c);
+        };
+        removeClass = function (elem, c) {
+            elem.classList.remove(c);
+        };
+    }
+    else {
+        hasClass = function (elem, c) {
+            return classReg(c).test(elem.className);
+        };
+        addClass = function (elem, c) {
+            if (!hasClass(elem, c)) {
+                elem.className = elem.className + ' ' + c;
+            }
+        };
+        removeClass = function (elem, c) {
+            elem.className = elem.className.replace(classReg(c), ' ');
+        };
+    }
+
+    function toggleClass(elem, c) {
+        var fn = hasClass(elem, c) ? removeClass : addClass;
+        fn(elem, c);
+    }
+
+    var classie = {
+        // full names
+        hasClass: hasClass,
+        addClass: addClass,
+        removeClass: removeClass,
+        toggleClass: toggleClass,
+        // short names
+        has: hasClass,
+        add: addClass,
+        remove: removeClass,
+        toggle: toggleClass
+    };
+
+    // transport
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define(classie);
+    } else {
+        // browser global
+        window.classie = classie;
+    }
+
+})(window);
+
+(function () {
+    // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
+    if (!String.prototype.trim) {
+        (function () {
+            // Make sure we trim BOM and NBSP
+            var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+            String.prototype.trim = function () {
+                return this.replace(rtrim, '');
+            };
+        })();
+    }
+
+    [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
+        // in case the input is already filled..
+        if (inputEl.value.trim() !== '') {
+            classie.add(inputEl.parentNode, 'input--filled');
+        }
+
+        // events:
+        inputEl.addEventListener('focus', onInputFocus);
+        inputEl.addEventListener('blur', onInputBlur);
+    });
+
+    function onInputFocus(ev) {
+        classie.add(ev.target.parentNode, 'input--filled');
+    }
+
+    function onInputBlur(ev) {
+        if (ev.target.value.trim() === '') {
+            classie.remove(ev.target.parentNode, 'input--filled');
+        }
+    }
+})();
--- a/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig
@@ -3,26 +3,90 @@
 {% trans_default_domain 'FOSUserBundle' %}

 {% block fos_user_content %}
-    {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
+    <div class="register">
+        <h1>
+            Sign up
+        </h1>
+        <div class="form">
+            {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>

-    {{ form_label(form.email) }}
-    {{ form_widget(form.email) }}
-    {{ form_errors(form.email) }}
+            <div class="input input--kozakura">
+                {{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
+                <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                    <span class="input__label-content input__label-content--kozakura" data-content="Email">Email</span>
+                </label>
+                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                     preserveAspectRatio="none">
+                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                </svg>
+                {{ form_errors(form.email) }}
+            </div>

-    {{ form_label(form.username) }}
-    {{ form_widget(form.username) }}
-    {{ form_errors(form.username) }}
+            <div class="input input--kozakura">
+                {{ form_widget(form.username, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
+                <label class="input__label input__label--kozakura" for="fos_user_registration_form_username">
+                <span class="input__label-content input__label-content--kozakura"
+                      data-content="Username">Username</span>
+                </label>
+                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                     preserveAspectRatio="none">
+                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                </svg>
+                {{ form_errors(form.username) }}
+            </div>

-    {{ form_label(form.plainPassword.first) }}
-    {{ form_widget(form.plainPassword.first) }}
-    {{ form_errors(form.plainPassword.first) }}
+            <div class="input input--kozakura">
+                {{ form_widget(form.plainPassword.first, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
+                <label class="input__label input__label--kozakura" for="fos_user_registration_form_plainPassword_first">
+                <span class="input__label-content input__label-content--kozakura"
+                      data-content="Password">Password</span>
+                </label>
+                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                     preserveAspectRatio="none">
+                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                </svg>
+                {{ form_errors(form.plainPassword.first) }}
+            </div>

-    {{ form_label(form.plainPassword.second) }}
-    {{ form_widget(form.plainPassword.second) }}
-    {{ form_errors(form.plainPassword.second) }}
+            <div class="input input--kozakura">
+                {{ form_widget(form.plainPassword.second, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
+                <label class="input__label input__label--kozakura"
+                       for="fos_user_registration_form_plainPassword_second">
+                    <span class="input__label-content input__label-content--kozakura" data-content="Repeat password">Repeat password</span>
+                </label>
+                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                     preserveAspectRatio="none">
+                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                </svg>
+                {{ form_errors(form.plainPassword.second) }}
+            </div>

-    <div>
-        <input type="submit" value="{{ 'registration.submit'|trans }}" />
+            <div class="input-submit">
+                <input class="submit" type="submit" value="{{ 'registration.submit'|trans }}"/>
+            </div>
+            {{ form_end(form) }}
+        </div>
+
+        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
    </div>
-    {{ form_end(form) }}
 {% endblock fos_user_content %}
+
+{% block javascripts %}
+    {{ parent() }}
+
+    {% javascripts
+    '@JotunheimrUserBundle/Resources/public/js/register.js' %}
+    <script type="text/javascript" src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    {% stylesheets filter='cssrewrite'
+    '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css'
+    '@JotunheimrUserBundle/Resources/public/css/register.css' %}
+    <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
+    {% endstylesheets %}
+{% endblock %}
--- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
@@ -3,59 +3,77 @@
 {% trans_default_domain 'FOSUserBundle' %}

 {% block fos_user_content %}
-    <script>
-        window.fbAsyncInit = function() {
-            FB.init({
-                appId      : '320599508311862',
-                xfbml      : true,
-                version    : 'v2.8'
-            });
-        };
-
-        (function(d, s, id){
-            var js, fjs = d.getElementsByTagName(s)[0];
-            if (d.getElementById(id)) {return;}
-            js = d.createElement(s); js.id = id;
-            js.src = "//connect.facebook.net/en_US/sdk.js";
-            fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-
-        function fb_login() {
-            FB.getLoginStatus(function(response) {
-                if (response.status === 'connected') {
-                    document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                } else {
-                    FB.login(function(response) {
-                        if (response.authResponse) {
-                            document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                        }
-                    }, {scope: 'email'});
-                }
-            });
-        }
-    </script>
-
-    <a href="#" onclick="fb_login();">Facebook Connect Button (Dialog)</a>
-
    {% if error %}
        {{ error.messageKey|trans(error.messageData, 'security') }}
    {% endif %}

-    <form action="{{ path("fos_user_security_check") }}" method="post">
-        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
+    <div class="login">
+        <h1>
+            Sign in
+        </h1>

-        <input type="text" id="username" name="_username" value="{{ last_username }}"
-               placeholder="{{ 'security.login.username'|trans }}"
-                autofocus/>
+        <div class="form">
+            <form action="{{ path("fos_user_security_check") }}" method="post">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>

-        <input type="password" id="password" name="_password"
-               placeholder="{{ 'security.login.password'|trans }}"
-               />
+                <div class="input input--kozakura">
+                    <input type="text" id="username" name="_username" value="{{ last_username }}"
+                           class="input__field input__field--kozakura" autofocus/>
+                    <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                        <span class="input__label-content input__label-content--kozakura"
+                              data-content="Username or Email">Username or Email</span>
+                    </label>
+                    <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                         preserveAspectRatio="none">
+                        <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                    </svg>
+                </div>

-        <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
-        <label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
+                <div class="input input--kozakura">
+                    <input type="password" id="password" name="_password"
+                           class="input__field input__field--kozakura"/>
+                    <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                        <span class="input__label-content input__label-content--kozakura" data-content="Password">Password</span>
+                    </label>
+                    <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                         preserveAspectRatio="none">
+                        <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                    </svg>
+                </div>

-        <input type="submit" id="_submit" name="_submit"
-               value="{{ 'security.login.submit'|trans }}"/>
-    </form>
+                <div class="checkbox text-center">
+                    <label for="remember_me">
+                        <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
+                        {{ 'security.login.remember_me'|trans }}
+                    </label>
+                </div>
+
+                <div class="input-submit">
+                    <input class="submit" type="submit" id="_submit" name="_submit"
+                           value="{{ 'security.login.submit'|trans }}"/>
+                </div>
+            </form>
+        </div>
+
+        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
+    </div>
 {% endblock fos_user_content %}
+
+{% block javascripts %}
+    {{ parent() }}
+
+    {% javascripts
+    '@JotunheimrUserBundle/Resources/public/js/register.js' %}
+    <script type="text/javascript" src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+
+    {% stylesheets filter='cssrewrite'
+    '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css'
+    '@JotunheimrUserBundle/Resources/public/css/login.css' %}
+    <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
+    {% endstylesheets %}
+{% endblock %}
--- a/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
@@ -0,0 +1,38 @@
+<div class="facebook">
+    <script>
+        window.fbAsyncInit = function () {
+            FB.init({
+                appId: '320599508311862',
+                xfbml: true,
+                version: 'v2.8'
+            });
+        };
+
+        (function (d, s, id) {
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {
+                return;
+            }
+            js = d.createElement(s);
+            js.id = id;
+            js.src = "//connect.facebook.net/en_US/sdk.js";
+            fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'facebook-jssdk'));
+
+        function fbLogin() {
+            FB.getLoginStatus(function (response) {
+                if (response.status === 'connected') {
+                    document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+                } else {
+                    FB.login(function (response) {
+                        if (response.authResponse) {
+                            document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+                        }
+                    }, {scope: 'email'});
+                }
+            });
+        }
+    </script>
+
+    <a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
+</div>
--- a/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/layout.html.twig
@@ -7,11 +7,13 @@
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    {% block stylesheets %}
        {% stylesheets filter='cssrewrite'
+        '@JotunheimrUserBundle/Resources/public/css/layout.css'
        '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css' %}
        <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
        {% endstylesheets %}
    {% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"/>
+    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
@@ -32,16 +34,18 @@
    {% endfor %}
 {% endif %}

-<div>
+<main>
    {% block fos_user_content %}
    {% endblock fos_user_content %}
-</div>
+    <canvas id="demo-canvas"></canvas>
+</main>

 {% block javascripts %}
    {% javascripts
    '@JotunheimrAdminBundle/Resources/public/js/vendor/plugins/jQuery/jquery-3.0.0.min.js'
    '@JotunheimrAdminBundle/Resources/public/js/vendor/plugins/jQuery/jquery-migrate-3.0.0.min.js'
-    '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/js/bootstrap.min.js' %}
+    '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/js/bootstrap.min.js'
+    '@JotunheimrUserBundle/Resources/public/js/circle.js' %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
 {% endblock %}
--- a/src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php
+++ b/src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php
@@ -46,21 +46,10 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider
        $user = $this->userManager->findUserByEmail($userEmail);

        if (null === $user) {
-            $user = new User();
-
-            $user->setFacebookId($response->getUsername());
-            $user->setEmail($response->getEmail());
-            $user->setEmailCanonical($response->getEmail());
-            $user->setUsername($response->getUsername());
-            $user->setRealName($response->getRealName());
-            $user->setNickName($response->getNickname());
-            $user->setPassword('social-user');
-            $user->setEnabled(true);
-
-            $this->em->persist($user);
-            $this->em->flush();
-
+            $this->createUser($user, $response);
            return $user;
+        } else {
+            $this->createUser($user, $response);
        }

        $serviceName = $response->getResourceOwner()->getName();
@@ -69,4 +58,31 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider

        return $user;
    }
+
+    /**
+     * @param $user
+     * @param $response
+     */
+    private function createUser($user, $response)
+    {
+        $empty = null === $user;
+
+        if ($empty) {
+            $user = new User();
+        }
+
+        $user->setFacebookId($response->getUsername());
+        $user->setEmail($response->getEmail());
+        $user->setEmailCanonical($response->getEmail());
+        $user->setUsername($response->getUsername());
+        $user->setRealName($response->getRealName());
+        $user->setNickName($response->getNickname());
+        if ($empty) {
+            $user->setPassword('social-user');
+        }
+        $user->setEnabled(true);
+
+        $this->em->persist($user);
+        $this->em->flush();
+    }
 }