Accepted_terms checkbox field required in register form and invitation register form

app/coffee/modules/auth.coffee

@@ -243,7 +243,7 @@ class AuthService extends taiga.Service
         user = @.getUser()
         if not user or user.read_new_terms
             return
-        @termsAnnouncementService.show('GDPR', 'General Data Protection Regulation - Read more!')
+        @termsAnnouncementService.show()
 
 module.service("$tgAuth", AuthService)
 

app/locales/taiga/locale-en.json

@@ -1611,7 +1611,10 @@
         "NEW_USER": "{{username}} has joined Taiga"
     },
     "LEGAL": {
-        "TERMS_OF_SERVICE_AND_PRIVACY_POLICY_AD": "<span>When creating a new account, you agree to our <br /></span><a href=\"{{ termsOfServiceUrl }}\" title=\"See terms of service\" target=\"_blank\">terms of service</a><span> and </span><a href=\"{{ privacyPolicyUrl }}\" title=\"See privacy policy\" target=\"_blank\">privacy policy</a>."
+        "TERMS_OF_SERVICE_AND_PRIVACY_POLICY_AD": "<span>When creating a new account, you agree to our </span><a href=\"{{ termsOfServiceUrl }}\" title=\"See terms of service\" target=\"_blank\">terms of service</a><span> and </span><a href=\"{{ privacyPolicyUrl }}\" title=\"See privacy policy\" target=\"_blank\">privacy policy</a>.",
+        "GDPR_ANNOUNCEMENT_TITLE": "General Data Protection Regulation (GDPR)",
+        "GDPR_ANNOUNCEMENT_DESCRIPTION": "Your saw this comming, right?. Updates to our Terms of Service",
+        "GDPR_ANNOUNCEMENT_INFOLINK": "Please read our announcement here"
     },
     "EXTERNAL_APP": {
         "PAGE_TITLE": "An external app requires authentication",

app/modules/components/terms-announcement/terms-announcement.directive.coffee

@@ -23,8 +23,11 @@
 ###
 
 
-TermsAnnouncementDirective = (TermsAnnouncementService, $repo, $auth) ->
+TermsAnnouncementDirective = (TermsAnnouncementService, $repo, $auth, $config) ->
     link = (scope, el, attrs) ->
+        scope.privacyPolicyUrl = $config.get("privacyPolicyUrl")
+        scope.termsOfServiceUrl = $config.get("termsOfServiceUrl")
+        scope.GDPRUrl = $config.get("GDPRUrl")
 
     return {
         restrict: "AE",
@@ -35,7 +38,7 @@ TermsAnnouncementDirective = (TermsAnnouncementService, $repo, $auth) ->
                 TermsAnnouncementService.open = false
                 user = $auth.getUser()
 
-                onSuccess = (data) =>
+                onSuccess = (data) ->
                     $auth.setUser(data)
 
                 user.read_new_terms = true
@@ -44,12 +47,6 @@ TermsAnnouncementDirective = (TermsAnnouncementService, $repo, $auth) ->
             Object.defineProperties(this, {
                 open: {
                     get: () -> return TermsAnnouncementService.open
-                },
-                title: {
-                    get: () -> return TermsAnnouncementService.title
-                },
-                desc: {
-                    get: () -> return TermsAnnouncementService.desc
                 }
             })
         link: link,
@@ -59,7 +56,8 @@ TermsAnnouncementDirective = (TermsAnnouncementService, $repo, $auth) ->
 TermsAnnouncementDirective.$inject = [
     "tgTermsAnnouncementService",
     "$tgRepo",
-    "$tgAuth"
+    "$tgAuth",
+    "$tgConfig"
 ]
 
 angular.module("taigaComponents")

app/modules/components/terms-announcement/terms-announcement.jade

@@ -1,9 +1,14 @@
-.terms-announcement(ng-class="{visible: vm.open}")
+.terms-announcement(ng-class="{visible: vm.open && privacyPolicyUrl && termsOfServiceUrl && GDPRUrl}")
     .terms-announcement-inner
-        img.anouncement-decoration(src="/#{v}/images/notification-decoration.png", alt="Loading...")
+        img.announcement-decoration(src="/#{v}/images/notification-decoration.png", alt="Loading...")
         .text
-            h2.title {{vm.title}}
+            h2.title {{'LEGAL.GDPR_ANNOUNCEMENT_TITLE' | translate}}
-            p.warning(ng-bind-html="vm.desc")
+            p.warning {{ 'LEGAL.GDPR_ANNOUNCEMENT_DESCRIPTION' | translate }}
+            a.gig-title(
+                href="{{ GDPRUrl }}"
+                target="_blank"
+                rel="nofollow"
+            ) {{'LEGAL.GDPR_ANNOUNCEMENT_INFOLINK' | translate}}
             a.close(
               ng-click="vm.close()"
               href=""

app/modules/components/terms-announcement/terms-announcement.scss

@@ -3,7 +3,6 @@
     align-content: center;
     background: $tribe-primary;
     display: flex;
-    height: 0;
     justify-content: center;
     overflow: hidden;
     pointer-events: none;
@@ -19,7 +18,7 @@
         width: 100%;
     }
     &.visible {
-        height: 146px;
+        min-height: 146px;
         pointer-events: auto;
         transition-delay: 0s;
         width: 100%;
@@ -35,6 +34,7 @@
     max-width: 1200px;
     .announcement-decoration {
         align-self: flex-end;
+        height: auto;
         margin-right: 1rem;
     }
     .text {
@@ -58,11 +58,11 @@
     .close {
         display: block;
         position: absolute;
-        right: 0;
+        right: .5rem;
         top: 1rem;
         svg {
             @include svg-size(2rem);
-            fill: lighten($tribe-secondary, 15%);
+            fill: $mass-white;
             pointer-events: none;
             transition: fill .2s;
             &:hover {
@@ -70,4 +70,7 @@
             }
         }
     }
+    a {
+        color: $mass-white;
+    }
 }

app/modules/components/terms-announcement/terms-announcement.service.coffee

@@ -14,18 +14,14 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program. If not, see <http://www.gnu.org/licenses/>.
 #
-# File: notification.service.coffee
+# File: terms-announcement.service.coffee
 ###
 
 class TermsAnnouncementService extends taiga.Service
     constructor: () ->
         @.open = false
-        @.title = ""
-        @.desc = ""
 
-    show: (title, desc) ->
+    show: () ->
         @.open = true
-        @.title = title
-        @.desc = desc
 
 angular.module("taigaComponents").service("tgTermsAnnouncementService", TermsAnnouncementService)

app/modules/components/terms-of-service-and-privacy-policy-notice/terms-of-service-and-privacy-policy-notice.directive.coffee

@@ -27,11 +27,19 @@ TermsOfServiceAndPrivacyPolicyNoticeDirective = ($config) ->
     link = (scope, el, attrs) ->
         scope.privacyPolicyUrl = $config.get("privacyPolicyUrl")
         scope.termsOfServiceUrl = $config.get("termsOfServiceUrl")
+        scope.target = false
+
+        el.on "change", "input[name='accepted_terms']", (event) ->
+            target = angular.element(event.currentTarget)
+            scope.target = target.is(":checked")
+            scope.$apply()
 
     return {
         restrict: "AE",
-        scope: {},
         link: link,
+        scope: {
+            target: "="
+        }
         templateUrl: "components/terms-of-service-and-privacy-policy-notice/terms-of-service-and-privacy-policy-notice.html"
     }
 

app/modules/components/terms-of-service-and-privacy-policy-notice/terms-of-service-and-privacy-policy-notice.jade

@@ -1,5 +1,10 @@
-p.register-text(
+p.register-terms(ng-if="privacyPolicyUrl && termsOfServiceUrl")
-    ng-if="privacyPolicyUrl && termsOfServiceUrl"
+    input.accepted_terms(
+        type="checkbox"
+        data-required="true"
+        name="accepted_terms"
+    )
+    span.register-text(
         translate="LEGAL.TERMS_OF_SERVICE_AND_PRIVACY_POLICY_AD"
         translate-values="{termsOfServiceUrl: termsOfServiceUrl, privacyPolicyUrl: privacyPolicyUrl}"
-)
+    )

app/partials/includes/modules/invitation-register-form.jade

@@ -43,12 +43,13 @@ form.register-form
             placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}"
         )
 
+    //- Only displays terms notice when terms plugin is loaded.
+    tg-terms-of-service-and-privacy-policy-notice(target="dataRegister.accepted_terms")
+
     fieldset
         button.button-register.button-green.submit-button(
             type="submit"
+            ng-disabled="dataRegister.accepted_terms == false"
             title="{{'REGISTER_FORM.ACTION_SIGN_UP' | translate}}"
             translate="REGISTER_FORM.ACTION_SIGN_UP"
         )
-        
-    //- Only displays terms notice when terms plugin is loaded.
-    tg-terms-of-service-and-privacy-policy-notice

app/partials/includes/modules/register-form.jade

@@ -45,9 +45,13 @@ div.register-form-container(tg-register)
                 placeholder="{{'REGISTER_FORM.PLACEHOLDER_PASSWORD' | translate}}"
             )
 
+        //- Only displays terms notice when terms plugin is loaded.
+        tg-terms-of-service-and-privacy-policy-notice(target="data.accepted_terms")
+
         fieldset
             button.button-register.button-green.submit-button(
                 type="submit"
+                ng-disabled="data.accepted_terms == false"
                 title="{{'REGISTER_FORM.ACTION_SIGN_UP' | translate}}"
                 translate="REGISTER_FORM.ACTION_SIGN_UP"
             )
@@ -60,9 +64,6 @@ div.register-form-container(tg-register)
                 ng-include="plugin.template"
             )
 
-        //- Only displays terms notice when terms plugin is loaded.
-        tg-terms-of-service-and-privacy-policy-notice
-
         a.register-text-top(
             href=""
             title="{{'REGISTER_FORM.TITLE_LINK_LOGIN' | translate}}"

app/styles/layout/auth.scss

@@ -6,6 +6,7 @@
     flex-direction: row;
     justify-content: center;
     left: 0;
+    overflow-y: auto;
     position: fixed;
     right: 0;
     top: 0;
@@ -45,11 +46,18 @@
     }
     .login-text,
     .register-text {
-        text-align: center;
+        margin-left: .5rem;
-        a:hover {
+        padding-bottom: 1rem;
+        a {
+            text-decoration: underline;
+            &:hover {
                 color: $primary-light;
             }
         }
+    }
+    .register-terms {
+        margin: .5rem 0 .75rem;
+    }
     .button {
         color: $white;
         display: block;

app/styles/layout/invitation.scss

@@ -87,6 +87,10 @@
     }
     .register-text {
         color: $white;
+        font-size: .9rem;
+        margin-left: .5rem;
+        padding-bottom: 1rem;
+        text-align: left;
         a {
             color: $primary;
         }

app/styles/modules/auth/register-form.scss

@@ -2,7 +2,7 @@
     display: block;
     .register-text-top {
         display: block;
-        margin-bottom: 1rem;
+        margin: 1rem 0;
         text-align: center;
     }
     .register-text {