From 769ff074cae45c493bcb9fc088345264d0e4bad9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Toborek?= <kontakt@toborek.info>
Date: Mon, 5 Sep 2016 11:20:22 +0200
Subject: [PATCH] EZP-26037: As an user, I want to be able to register

https://jira.ez.no/browse/EZP-26037
---
 app/Resources/views/pagelayout.html.twig      |   5 +-
 .../views/pagelayout_header.html.twig         |   4 +
 .../views/pagelayout_styles.html.twig         |   1 +
 .../views/pagelayout_user_menu.html.twig      |  33 +++++
 .../user/registration_confirmation.html.twig  |  25 ++++
 .../user/registration_content_form.html.twig  |  47 +++++++
 .../views/user/registration_form.html.twig    |  20 +++
 app/config/views.yml                          |   5 +
 .../Resources/installer/sql/app_data.sql      |   1 +
 web/assets/css/style.css                      | 116 ++++++++++++++++++
 10 files changed, 256 insertions(+), 1 deletion(-)
 create mode 100644 app/Resources/views/pagelayout_user_menu.html.twig
 create mode 100644 app/Resources/views/user/registration_confirmation.html.twig
 create mode 100644 app/Resources/views/user/registration_content_form.html.twig
 create mode 100644 app/Resources/views/user/registration_form.html.twig

diff --git a/app/Resources/views/pagelayout.html.twig b/app/Resources/views/pagelayout.html.twig
index 74744508..27b78f68 100644
--- a/app/Resources/views/pagelayout.html.twig
+++ b/app/Resources/views/pagelayout.html.twig
@@ -4,7 +4,10 @@
         {% if content is defined and title is not defined %}
             {% set title = ez_content_name(content) %}
         {% endif %}
-        <title>{{ title|default('Home')|trans }} - {{ 'eZ Platform Demo' }}</title>
+
+        {% block page_head %}
+            <title>{{ title|default('Home')|trans }} - eZ Platform Demo</title>
+        {% endblock %}
 
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
diff --git a/app/Resources/views/pagelayout_header.html.twig b/app/Resources/views/pagelayout_header.html.twig
index 1e21778d..2b60a643 100644
--- a/app/Resources/views/pagelayout_header.html.twig
+++ b/app/Resources/views/pagelayout_header.html.twig
@@ -11,6 +11,10 @@
         </div>
 
         <div class="collapse navbar-collapse" id="navbar-collapse">
+            {% block user_menu %}
+                {% include 'pagelayout_user_menu.html.twig' %}
+            {% endblock %}
+
             <ul class="nav navbar-nav navbar-right">
                 <li class="hidden"><a href="#page-top"></a></li>
 
diff --git a/app/Resources/views/pagelayout_styles.html.twig b/app/Resources/views/pagelayout_styles.html.twig
index 2ef32535..7431dd48 100644
--- a/app/Resources/views/pagelayout_styles.html.twig
+++ b/app/Resources/views/pagelayout_styles.html.twig
@@ -12,3 +12,4 @@
 <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet" type="text/css" />
 <link href="//fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css" />
 <link href="//fonts.googleapis.com/css?family=PT+Serif:700italic" rel="stylesheet" type="text/css" />
+<link href="//cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.css" rel="stylesheet" type="text/css" />
diff --git a/app/Resources/views/pagelayout_user_menu.html.twig b/app/Resources/views/pagelayout_user_menu.html.twig
new file mode 100644
index 00000000..87bea12e
--- /dev/null
+++ b/app/Resources/views/pagelayout_user_menu.html.twig
@@ -0,0 +1,33 @@
+<div class="user-menu dropdown hidden-xs">
+    {% if app.user %}
+        {% set user = app.user.getAPIUser().content %}
+
+        <button type="button" data-toggle="dropdown">
+            {% if not ez_is_field_empty(user, 'image') %}
+                {% set imageAlias = ez_image_alias(user.getField('image'), user.versionInfo, 'platformui_profileview') %}
+
+                <img src="{{ imageAlias.uri }}" title="{{ ez_content_name(user) }}" class="img-circle avatar" />
+            {% else %}
+                <span class="icon-user avatar"></span>
+            {% endif %}
+
+            <br class="visible-xs" />
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li class="username">{{ ez_content_name(user) }}</li>
+            <li><a href="{{ path('logout') }}" title="{{ 'logout'|trans }}">{{ 'logout'|trans }}</a></li>
+        </ul>
+    {% else %}
+        <button type="button" data-toggle="dropdown">
+            <span class="icon-user avatar"></span>
+            <br class="visible-xs">
+            <span class="caret"></span>
+        </button>
+
+        <ul class="dropdown-menu">
+            <li><a href="{{ path('login') }}" title="{{ 'login'|trans }}">{{ 'login'|trans }}</a></li>
+            <li><a href="{{ path('ez_user_register') }}" title="{{ 'register'|trans }}">{{ 'register'|trans }}</a></li>
+        </ul>
+    {% endif %}
+</div>
diff --git a/app/Resources/views/user/registration_confirmation.html.twig b/app/Resources/views/user/registration_confirmation.html.twig
new file mode 100644
index 00000000..3c9fa760
--- /dev/null
+++ b/app/Resources/views/user/registration_confirmation.html.twig
@@ -0,0 +1,25 @@
+{% extends pagelayout %}
+
+{% block page_head %}
+    {% set title = 'Registerstration complete'|trans %}
+
+    {{ parent() }}
+{% endblock %}
+
+{% block content %}
+    <div class="container">
+        <section class="user-form-confirmation col-md-4 col-md-offset-4">
+            <h2>{{ 'Registration completed'|trans }}</h2>
+
+            <div class="row confirmation-label">
+                {{ 'You are all set up and ready to go'|trans }}
+            </div>
+
+            <div class="row">
+                <div class="col-md-4 col-md-offset-4">
+                    <button type="button" class="btn btn-block btn-primary" onclick="window.location='{{ path('login') }}';">{{ 'Log in'|trans }}</button>
+                </div>
+            </div>
+        </section>
+    </div>
+{% endblock %}
diff --git a/app/Resources/views/user/registration_content_form.html.twig b/app/Resources/views/user/registration_content_form.html.twig
new file mode 100644
index 00000000..5ad278e7
--- /dev/null
+++ b/app/Resources/views/user/registration_content_form.html.twig
@@ -0,0 +1,47 @@
+{% macro display_form(form) %}
+    {{ form_start(form) }}
+
+    {% for fieldForm in form.fieldsData %}
+        {% set fieldIdentifier = fieldForm.vars.data.fieldDefinition.identifier %}
+
+        {% if fieldIdentifier == 'first_name' or fieldIdentifier == 'last_name' %}
+            {% if fieldIdentifier == 'first_name' %}
+                <div class="row">
+            {% endif %}
+            <div class="col-md-6">
+                <div class="field-name">
+                    <label class="required">{{ fieldForm.children.value.vars.label }}:</label>
+                </div>
+                {{ form_errors(fieldForm.value) }}
+                {{ form_widget(fieldForm.value, {
+                    'contentData': form.vars.data
+                }) }}
+            </div>
+            {% if fieldIdentifier == 'last_name' %}
+                </div>
+            {% endif %}
+        {% endif %}
+
+        {% if fieldIdentifier == 'user_account' %}
+            <div class="row">
+                <div class="col-md-6">
+                    {{ form_widget(fieldForm.value, {
+                        'contentData': form.vars.data
+                    }) }}
+                </div>
+            </div>
+        {% endif %}
+
+        {%- do fieldForm.setRendered() -%}
+    {% endfor %}
+
+    <div class="row">
+        <div class="col-md-4 col-md-offset-4">
+            {{ form_widget(form.publish, {'attr': {
+                'class': 'btn btn-block btn-primary'
+            }}) }}
+        </div>
+    </div>
+
+    {{ form_end(form) }}
+{% endmacro %}
diff --git a/app/Resources/views/user/registration_form.html.twig b/app/Resources/views/user/registration_form.html.twig
new file mode 100644
index 00000000..db4611b3
--- /dev/null
+++ b/app/Resources/views/user/registration_form.html.twig
@@ -0,0 +1,20 @@
+{% extends pagelayout %}
+
+{% block page_head %}
+    {% set title = 'Register user'|trans %}
+
+    {{ parent() }}
+{% endblock %}
+
+{% block content %}
+    {% import 'user/registration_content_form.html.twig' as registrationForm %}
+
+    <div class="container">
+        <section class="user-form col-md-6 col-md-offset-3">
+            <h2>{{ 'Member Registration'|trans }}</h2>
+            <div class="legend">* {{ 'All fields are required'|trans }}</div>
+
+            {{ registrationForm.display_form(form) }}
+        </section>
+    </div>
+{% endblock %}
diff --git a/app/config/views.yml b/app/config/views.yml
index 48665d4f..36332cd4 100644
--- a/app/config/views.yml
+++ b/app/config/views.yml
@@ -5,6 +5,11 @@ ezpublish:
             user:
                 layout: pagelayout.html.twig
 
+            user_registration:
+                templates:
+                    form: user\registration_form.html.twig
+                    confirmation: user\registration_confirmation.html.twig
+
             content_view:
                 full:
                     home_page:
diff --git a/src/AppBundle/Resources/installer/sql/app_data.sql b/src/AppBundle/Resources/installer/sql/app_data.sql
index 73a546ad..54286908 100644
--- a/src/AppBundle/Resources/installer/sql/app_data.sql
+++ b/src/AppBundle/Resources/installer/sql/app_data.sql
@@ -2517,6 +2517,7 @@ INSERT INTO `ezpolicy` VALUES ('pdf',329,'content',0,1);
 INSERT INTO `ezpolicy` VALUES ('*',330,'ezoe',0,3);
 INSERT INTO `ezpolicy` VALUES ('login',331,'user',0,1);
 INSERT INTO `ezpolicy` VALUES ('read',332,'content',0,4);
+INSERT INTO `ezpolicy` VALUES ('register',333,'user',0,1);
 /*!40000 ALTER TABLE `ezpolicy` ENABLE KEYS */;
 UNLOCK TABLES;
 
diff --git a/web/assets/css/style.css b/web/assets/css/style.css
index 5da5dfac..e27b1f67 100644
--- a/web/assets/css/style.css
+++ b/web/assets/css/style.css
@@ -74,6 +74,10 @@ nav:hover {
     margin-top: -15px;
 }
 
+.navbar-nav {
+    margin-right: 50px;
+}
+
 .navbar-brand {
     margin-top: 8px;
 }
@@ -537,3 +541,115 @@ ul {
 .blog-post-body p {
     margin-bottom: 20px;
 }
+
+/* user menu */
+
+*:focus {
+    outline: none;
+}
+
+.user-menu {
+    float: right;
+}
+
+.user-menu .avatar,
+.user-menu .caret {
+    color: #777;
+}
+
+.user-menu button {
+    border: none;
+    background: #f8f8f8;
+    padding: 0;
+}
+
+.user-menu .dropdown-menu {
+    margin: 0;
+    border-radius: 0;
+}
+
+.navbar-brand-scroll .user-menu {
+    margin-top: 7px;
+    height: 50px;
+}
+
+.navbar-brand-scroll .user-menu button {
+    height: 50px;
+}
+
+/* registration and login forms */
+
+.user-form {
+    background: #dedede;
+    border-radius: 4px;
+    margin-top: 120px;
+    margin-bottom: 50px;
+    padding: 10px 30px;
+}
+
+.user-form input {
+    width: 100%;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    padding: 4px 8px;
+    font-family: "Maven Pro", sans-serif;
+    font-size: 17px;
+}
+
+.user-form h2 {
+    margin-bottom: 5px;
+    font-size: 22px;
+}
+
+.legend {
+    color: #a3a3a3;
+    margin-bottom: 25px;
+    font-size: 14px;
+}
+
+.user-form label {
+    color: #000;
+    font-weight: normal;
+    font-family: "Maven Pro", sans-serif;
+    font-size: 17px;
+    margin-bottom: 0;
+}
+
+.user-form label:after {
+    content: '*';
+}
+
+.user-form button {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.user-form-confirmation {
+    background: #dedede;
+    border-radius: 4px;
+    margin-top: 120px;
+    margin-bottom: 50px;
+    padding: 0;
+}
+
+.user-form-confirmation h2 {
+    font-family: "Maven Pro", sans-serif;
+    border-radius: 5px 5px 0 0;
+    padding: 20px 0;
+    text-align: center;
+    margin-top: 0;
+    background: #f05a22;
+    color: #fff;
+    font-size: 20px;
+}
+
+.user-form-confirmation .confirmation-label {
+    text-align: center;
+    margin: 30px 0;
+    font-family: "Maven Pro", sans-serif;
+    font-size: 17px;
+}
+
+.user-form-confirmation button {
+    margin-bottom: 30px;
+}