W2.3: customizing the accounts-ui configuration.

client/accounts.js

@@ -0,0 +1,72 @@
+// configure the special accounts user interface
+// by setting up some extra fields and specifying constraints
+// see:https://github.com/ianmartorell/meteor-accounts-ui-bootstrap-3/    
+Accounts.ui.config({
+  requestPermissions: {},
+  extraSignupFields: [{
+    fieldName: "first-name",
+    fieldLabel: "First name",
+    inputType: "text",
+    visible: true,
+    validate: function (value, errorFunction) {
+      if (!value) {
+        errorFunction("Please write your first name");
+        return false;
+          } else {
+        return true;
+      }
+    }
+  }, {
+    fieldName: "last-name",
+    fieldLabel: "Last name",
+    inputType: "text",
+    visible: true,
+  }, {
+        fieldName: 'gender',
+        showFieldLabel: false,      // If true, fieldLabel will be shown before radio group
+        fieldLabel: 'Gender',
+        inputType: 'radio',
+        radioLayout: 'vertical',    // It can be 'inline' or 'vertical'
+        data: [{                    // Array of radio options, all properties are required
+            id: 1,                  // id suffix of the radio element
+            label: 'Male',          // label for the radio element
+            value: 'm'              // value of the radio element, this will be saved.
+          }, {
+            id: 2,
+            label: 'Female',
+            value: 'f',
+            checked: 'checked'
+        }],
+        visible: true
+    }, {
+        fieldName: 'country',
+        fieldLabel: 'Country',
+        inputType: 'select',
+        showFieldLabel: true,
+        empty: 'Please select your country of residence',
+        data: [{
+            id: 1,
+            label: 'United States',
+            value: 'us'
+          }, {
+            id: 2,
+            label: 'Spain',
+            value: 'es',
+        }],
+        visible: true
+    }, {
+    fieldName: "terms",
+    fieldLabel: "I accept the terms and conditions <a href=\"\">Some outrageous terms</a>",
+    inputType: "checkbox",
+    visible: true,
+        saveToProfile: false,
+    validate: function (value, errorFunction) {
+      if (value) {
+        return true;
+            } else {
+                errorFunction('You must accept the terms and conditions.');
+        return false;
+      }
+    }
+  }]
+});

textcircle.css

@@ -11,7 +11,4 @@ body {
   resize: both;
   width: 100%; }
 
-.accounts-dialog {
-  background-color: green; }
-
 /*# sourceMappingURL=textcircle.css.map */

textcircle.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA;;;;EAIE;AAIF,WAAY;EACV,UAAU,EAHA,IAAI;;AAMhB,cAAe;EACb,MAAM,EAAE,cAAc;EACtB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;;AAGb,gBAAiB;EACf,gBAAgB,EAAE,KAAK",
+"mappings": "AAAA;;;;EAIE;AAIF,WAAY;EACV,UAAU,EAHA,IAAI;;AAMhB,cAAe;EACb,MAAM,EAAE,cAAc;EACtB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI",
 "sources": ["textcircle.scss"],
 "names": [],
 "file": "textcircle.css"

textcircle.js

@@ -1,3 +1,4 @@
+// This collection stores all the documents.
 // Note: not Documents, but this.Documents, because of the editing package (?)
 this.Documents = new Mongo.Collection("documents");
 
@@ -8,6 +9,7 @@ if (Meteor.isClient) {
       const doc = Documents.findOne();
       return doc ? doc._id : undefined;
     },
+    // Configure the CodeMirror editor.
     config: function () {
       return function (editor) {
         editor.on("change", function (cm_editor, info) {
@@ -15,7 +17,7 @@ if (Meteor.isClient) {
           $preview.contents().find("html").html(cm_editor.getValue());
         });
       };
-    }
+    },
   });
 
 }

textcircle.scss

@@ -15,7 +15,3 @@ $topMargin: 50px;
   resize: both;
   width: 100%;
 }
-
-.accounts-dialog {
-  background-color: green;
-}