[GDPR] Adjusted TOS/Privacy acceptance (#1445)

* updated tos/privacy policy acceptance

* Removed variables/logic now found in superclass

* update jslib (d84d6da -> 5e50aa1)

* Added content-row UI

jslib

@@ -1 +1 @@
-Subproject commit d84d6da7f77ec89ba69299b1ff982f083fd77203
+Subproject commit 5e50aa1a195bde11fdc14e9bdf71542766fdbb8d

src/_locales/en/messages.json

@@ -1353,5 +1353,17 @@
   },
   "masterPasswordPolicyRequirementsNotMet": {
     "message": "Your new master password does not meet the policy requirements."
+  },
+  "acceptPolicies": {
+    "message": "By checking this box you agree to the following:"
+  },
+  "acceptPoliciesError": {
+    "message": "Terms of Service and Privacy Policy have not been acknowledged."
+  },
+  "termsOfService": {
+    "message": "Terms of Service"
+  },
+  "privacyPolicy": {
+    "message": "Privacy Policy"
   }
 }

src/popup/accounts/register.component.html

@@ -54,7 +54,7 @@
                 {{'masterPassDesc' | i18n}}
             </div>
         </div>
-        <div class="box last">
+        <div class="box">
             <div class="box-content">
                 <div class="box-content-row box-content-row-flex" appBoxRow>
                     <div class="row-main">
@@ -80,5 +80,19 @@
                 {{'masterPassHintDesc' | i18n}}
             </div>
         </div>
+        <div class="box last" *ngIf="showTerms">
+            <div class="box-content">
+                <div class="box-footer box-content-row checkbox">
+                    <input type="checkbox" id="acceptPolicies" [(ngModel)]="acceptPolicies" name="AcceptPolicies">
+                    <label for="acceptPolicies">
+                        {{'acceptPolicies' | i18n}}<br>
+                        <a href="https://bitwarden.com/terms/" target="_blank"
+                            rel="noopener">{{'termsOfService' | i18n}}</a>,
+                        <a href="https://bitwarden.com/privacy/" target="_blank"
+                            rel="noopener">{{'privacyPolicy' | i18n}}</a>
+                    </label>
+                </div>
+            </div>
+        </div>
     </content>
 </form>

src/popup/scss/misc.scss

@@ -307,3 +307,19 @@ app-vault-icon {
 input[type="password"]::-ms-reveal {
     display: none;
 }
+
+.checkbox {
+        position: relative;
+        display: block;
+        padding-left: 18px;
+
+        label {
+            margin-bottom: 0;
+        }
+
+        input[type="checkbox"] {
+            position: absolute;
+            margin-top: 4px;
+            margin-left: -18px;
+        }
+    }