QQ regarding the development activity

[sreekrishna]

Prateek,

thanks for your contributions on the project. i am wondering if you have made any more progress on the dev of the CMS as i have a similar need. this is eerily similar to what i was thinking of developing. let me know..

Sorry for barging in. i couldn't find any other way to contact.

[prateekjadhwani]

Hey, thanks for dropping by. I haven't made any progress on the project in past few weeks due to some architectural problems in the pages module. Once I have figured out a solution, i will start working on it again.

In either case, you are more than welcome to contribute by either opening issues for me suggestions or participating in the development. Or if you want to move it in other direction, feel free to fork the project.

[sreekrishna]

not sure i would be of much help not knowing your approach but i was thinking the page designer would like dropping components on to canvas. components range from text, img, graphs or generic JS renders. that would mean no static pages per user and dependency on data store to fetch the content. these pages will be linked via navigation designer. does that make sense? just to help visualize, page designer would be similar to tabbie.io .

is that similar to what u r thinking?

[prateekjadhwani]

Yes, that is definitely what i had in my mind plus some aspects of content workflows

[sreekrishna]

sounds good. if you dont mind, me asking, whats the architecture problem that you mentioned? i would like to get a brain dump and see how i can help. would you be available for quick chat over the weekend?

On Sat, Dec 17, 2016 at 10:06 AM Prateek Jadhwani notifications@github.com wrote:

Yes, that is definitely what i had in my mind plus some aspects of content workflows

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Pancake-CMS/developer-console/issues/2#issuecomment-267767447, or mute the thread https://github.com/notifications/unsubscribe-auth/AE8xHHwjlgyjEhwfBnJ8Nub10B7xseMhks5rI_ptgaJpZM4LPvSv .

[prateekjadhwani]

So right now, the dev-console works in the following way.

1. It lets users login
2. Once you are logged in, you can add web-components by providing bower package name, git url, etc. This will also show the readme files from those added components in the dev console
3. Then it lets you create templates, which is like a page, but you can only edit the properties of those components. A good usecase of this would be, lets say you have a text component, and one of the properties is text-alignment, so here in templates, you can edit this property to use left, right or center as options.
4. Then on page templates, you can fork these templates to pages, which can let users edit the content, as in by localization aspect. Which is where I am stuck at.

The problem statement is, if I fork the template, should I refer the properties from the parent template or should I copy the nodes into this page node. And If it do that, what if someone updates the template by adding another component, how will i know what pages to modify. or what nodes to remove. etc etc.

All sorts of node management in firebase.

[sreekrishna]

thanks for taking time to explain.

let me download and try running locally based on instructions in dev console. i assume it would be simple as bower install and serving with polyserve.

coming to templates, i was thinking they are more like layouts with app grids/elements and the corresponding data/props for will be stored per user. if admin/user updates the templates, new sections will be blank as their corresponding data by id would not be found at user layout instance. one caveat would be if the grids or elements are deleted, there will be zombie data dangling in user layout instance. in that instance we can recommend creating new template vs updating one.

On Saturday, December 17, 2016, Prateek Jadhwani notifications@github.com wrote:

So right now, the dev-console works in the following way.

1. It lets users login
2. Once you are logged in, you can add web-components by providing bower package name, git url, etc. This will also show the readme files from those added components in the dev console
3. Then it lets you create templates, which is like a page, but you can only edit the properties of those components. A good usecase of this would be, lets say you have a text component, and one of the properties is text-alignment, so here in templates, you can edit this property to use left, right or center as options.
4. Then on page templates, you can fork these templates to pages, which can let users edit the content, as in by localization aspect. Which is where I am stuck at.

The problem statement is, if I fork the template, should I refer the properties from the parent template or should I copy the nodes into this page node. And If it do that, what if someone updates the template by adding another component, how will i know what pages to modify. or what nodes to remove. etc etc.

All sorts of node management in firebase.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Pancake-CMS/developer-console/issues/2#issuecomment-267775543, or mute the thread https://github.com/notifications/unsubscribe-auth/AE8xHKNpQWZjt5uuHAl6DR3ThyNwqdp6ks5rJB1OgaJpZM4LPvSv .

--

Sree krishna Vadde

[sreekrishna]

Prateek,

i tried running the dev console with ploy serve but localhost:8080 is just giving a blnak page. i dont see anything in the console either. initially it said server worker js is missing. not sure if we have it as dependency. i just added one to get past that. still doesnt show anything in browser. i do see traffic registering on firebase. do i need to do anything else other than the ones described in the readme file?

-Sree

On Saturday, December 17, 2016, sreekrishna vadde < sreekrishna.vadde@gmail.com> wrote:

thanks for taking time to explain.

let me download and try running locally based on instructions in dev console. i assume it would be simple as bower install and serving with polyserve.

coming to templates, i was thinking they are more like layouts with app grids/elements and the corresponding data/props for will be stored per user. if admin/user updates the templates, new sections will be blank as their corresponding data by id would not be found at user layout instance. one caveat would be if the grids or elements are deleted, there will be zombie data dangling in user layout instance. in that instance we can recommend creating new template vs updating one.

On Saturday, December 17, 2016, Prateek Jadhwani <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

So right now, the dev-console works in the following way.

1. It lets users login
2. Once you are logged in, you can add web-components by providing bower package name, git url, etc. This will also show the readme files from those added components in the dev console
3. Then it lets you create templates, which is like a page, but you can only edit the properties of those components. A good usecase of this would be, lets say you have a text component, and one of the properties is text-alignment, so here in templates, you can edit this property to use left, right or center as options.
4. Then on page templates, you can fork these templates to pages, which can let users edit the content, as in by localization aspect. Which is where I am stuck at.

The problem statement is, if I fork the template, should I refer the properties from the parent template or should I copy the nodes into this page node. And If it do that, what if someone updates the template by adding another component, how will i know what pages to modify. or what nodes to remove. etc etc.

All sorts of node management in firebase.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Pancake-CMS/developer-console/issues/2#issuecomment-267775543, or mute the thread https://github.com/notifications/unsubscribe-auth/AE8xHKNpQWZjt5uuHAl6DR3ThyNwqdp6ks5rJB1OgaJpZM4LPvSv .

--

Sree krishna Vadde

--

Sree krishna Vadde

[prateekjadhwani]

That's weird. I just created a new workspace with fresh installs of node and bower. (did not do anything in firebase yet). And I see it working.

[prateekjadhwani]

Are you using a browser that doesnt support web-components?

Thanks

[prateekjadhwani]

Components Page

First component is selected by default

Selecting another component will load their readme files

Adding a new component will lets users add bower.json and properties.json file

example https://github.com/Pancake-CMS/demo-image-el and https://github.com/Pancake-CMS/demo-text-el

Download button will show a shell command for bower

Templates page

New template section - Comes with an empty drag and drop container with all the added components

This is what happens when a component is dragged and dropped. If the template name doesnt exist, it will ask you to add a name.

Components can be copied/modified by a toolbar at the top right corner of every component.

It also uses css grid for further layout enhancement

Localization Page (under development)

Users can add new languages here

[sreekrishna]

thanks for detailed explanation. its my bad. i was trying on FF/Linux. i had to add webcomponent.js to get it working. here is how it appears in FF on index page.

[image: Screenshot_2016-12-17_20-17-55.png]

just switched to chrome after your note. it does show the login page but when i click on it, its showing bellow error. i am on chromeos.

[image: Screenshot 2016-12-17 at 8.14.50 PM.png]

On Sat, Dec 17, 2016 at 7:35 PM Prateek Jadhwani notifications@github.com wrote:

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290590/54f5c29e-c48e-11e6-9c78-45fca01e5095.png

Components Page

First component is selected by default

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290591/6ded66f8-c48e-11e6-9a5b-0a7cc7163b70.png Selecting another component will load their readme files

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290592/7e560b80-c48e-11e6-996f-d5aaef19b626.png Adding a new component will lets users add bower.json and properties.json file

example https://github.com/Pancake-CMS/demo-image-el and https://github.com/Pancake-CMS/demo-text-el

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290596/9f869d88-c48e-11e6-8759-99405bd8b94a.png Download button will show a shell command for bower

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290603/e39f77ce-c48e-11e6-9ac1-fbf062c32681.png Templates page New template section - Comes with an empty drag and drop container with all the added components

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290607/fcfd4a34-c48e-11e6-9213-c107324fd396.png This is what happens when a component is dragged and dropped. If the template name doesnt exist, it will ask you to add a name.

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290609/3730e378-c48f-11e6-9a7d-f20c09460fa1.png Components can be copied/modified by a toolbar at the top right corner of every component.

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290612/689dd29a-c48f-11e6-8154-ab66bbeca408.png It also uses css grid for further layout enhancement

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290614/7dd238c2-c48f-11e6-8e33-1883613ca02a.png

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290618/b39ee450-c48f-11e6-9d27-234ac1d45fe1.png Localization Page (under development)

Users can add new languages here

[image: image] https://cloud.githubusercontent.com/assets/2219900/21290623/d864ab58-c48f-11e6-8627-3f16a68666d0.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Pancake-CMS/developer-console/issues/2#issuecomment-267796032, or mute the thread https://github.com/notifications/unsubscribe-auth/AE8xHNfT9XRO6iujMl4MBwl4dXZKwgEuks5rJH_GgaJpZM4LPvSv .

[prateekjadhwani]

I dont think the screenshots got attached correctly. Could you please attach them again.

[sreekrishna]

may be cause ma sending from gmail instead of GH. let me try to send it from GH.

[sreekrishna]

FF screenshot

chrome screenshot

[prateekjadhwani]

signInWithPopup error happens when firebase is unable to find the keys. You should be able to fix them by populating the values in https://github.com/Pancake-CMS/developer-console/blob/master/developer-console.html#L15 after getting them from firebase. The first missing icon corresponds to github login and the second one for gmail. So you will need to enable them in firebase in the authentication section.

I hope this helps

[sreekrishna]

i did populate the values in the above mentioned location. i have couple more props than whats in the file. let me remove those and try.

[prateekjadhwani]

Would it be possible for you to confirm the firbase version from the bower_components folder. If its not 0.9.4, then could you install that one.

Other than that even I am not sure what could be going wrong. :(

[sreekrishna]

i think the error was coming cause of extra attributes. after i removed it just says login failed.

just to be sure, we need firebase 0.9.4 or polymerfire to 0.9.4?

this is what i have...

bower install polymerfire#0.9.4

polymerfire#0.9.4 bower_components/polymerfire ├── app-storage#0.9.8 ├── firebase#3.6.4 └── polymer#1.7.1

[prateekjadhwani]

My bad, it was polymerfire#0.9.4.

Out of curiosity, does it give you login failed message for both github and gmail or for only one?

I usually use github login.

[sreekrishna]

same for both. let me try it C9 once and see what it does...

[prateekjadhwani]

One last question, could you confirm if you added yourself as the user in the users page in firebase?

[sreekrishna]

i did. does that look good?

[sreekrishna]

same on c9. looks like something to do with FB. you can access it @ https://ide.c9.io/sreekrishna/pancake-cms-developer-console

[prateekjadhwani]

The provider there is enabled for Email. I would say try switching it to Google or Github

The Github or Google icon will show up as in the screenshot

[sreekrishna]

i dont see any option to add GH user..

[prateekjadhwani]

Yes you are right, it seems firebase is not allowing users with github as providers. Perhaps their team might help.

[prateekjadhwani]

Hi @sreekrishna I have sent out an email to the Firebase team. I will keep you posted.

[sreekrishna]

thanks Prateek. i think we should be able to login without pre registering. i will try to spend sometime to make the chaneg

[prateekjadhwani]

The login was mainly to keep unauthorized users from making changes to your app. So lets say you have an enterprise, you want only pre-registered users to make changes in that.

[sreekrishna]

i understand that.i believe for something like CMS, we would need to support register and use usecase in addition to pre registered.

[prateekjadhwani]

You are right, but my design involved an enterprise adding their contributors in the firebase users and keeping a track of their access rights rather than the cms keeping a track of them.

But who knows, it might change in the future ;)

[sreekrishna]

Prateek,

can you please send me the JSON doc dump from your firebase instance? i am tryting to test few of the components independently.

[prateekjadhwani]

Sure, here you go

{
  "approvals" : {
    "components" : [ {
      "name" : "svg2css",
      "repo" : "svg2css",
      "user" : "prateekjadhwani",
      "version" : "0.0.0"
    } ]
  },
  "components" : [ {
    "bower" : "pancake-cms-demo-text-el",
    "name" : "demo-text-el",
    "properties" : [ {
      "name" : "componentProperties",
      "value" : [ {
        "description" : "The alignment of the text",
        "name" : "align",
        "options" : [ "left", "center", "right" ],
        "type" : "dropdown",
        "value" : 0
      } ]
    }, {
      "name" : "display",
      "value" : [ {
        "description" : "The start column location of this component",
        "name" : "gridColumnStart",
        "type" : "text",
        "value" : "1"
      }, {
        "description" : "The end column location of this component",
        "name" : "gridColumnEnd",
        "type" : "text",
        "value" : "12"
      }, {
        "description" : "The start row location of this component",
        "name" : "gridRowStart",
        "type" : "text",
        "value" : ""
      }, {
        "description" : "The end row location of this component",
        "name" : "gridRowEnd",
        "type" : "text",
        "value" : ""
      } ]
    } ],
    "repo" : "demo-text-el",
    "user" : "Pancake-CMS",
    "version" : "0.0.0"
  }, {
    "bower" : "pancake-cms-demo-text-nested-el",
    "components" : [ "css-grid-1", "css-grid-2" ],
    "name" : "demo-text-nested-el",
    "properties" : [ {
      "name" : "componentProperties",
      "value" : [ {
        "description" : "The alignment of the text",
        "name" : "align",
        "options" : [ "left", "center", "right" ],
        "type" : "dropdown",
        "value" : 0
      } ]
    }, {
      "name" : "display",
      "value" : [ {
        "description" : "The start column location of this component",
        "name" : "gridColumnStart",
        "type" : "text",
        "value" : "1"
      }, {
        "description" : "The end column location of this component",
        "name" : "gridColumnEnd",
        "type" : "text",
        "value" : "12"
      }, {
        "description" : "The start row location of this component",
        "name" : "gridRowStart",
        "type" : "text",
        "value" : ""
      }, {
        "description" : "The end row location of this component",
        "name" : "gridRowEnd",
        "type" : "text",
        "value" : ""
      } ]
    } ],
    "repo" : "demo-text-el",
    "user" : "Pancake-CMS",
    "version" : "0.0.0"
  }, {
    "bower" : "pancake-cms-demo-image-el",
    "name" : "demo-image-el",
    "properties" : [ {
      "name" : "componentProperties",
      "value" : [ {
        "description" : "The image src",
        "name" : "src",
        "type" : "text",
        "value" : "http://prateekjadhwani.github.io/images/logo.png"
      } ]
    }, {
      "name" : "display",
      "value" : [ {
        "description" : "The start column location of this component",
        "name" : "gridColumnStart",
        "type" : "text",
        "value" : "1"
      }, {
        "description" : "The end column location of this component",
        "name" : "gridColumnEnd",
        "type" : "text",
        "value" : "12"
      }, {
        "description" : "The start row location of this component",
        "name" : "gridRowStart",
        "type" : "text",
        "value" : ""
      }, {
        "description" : "The end row location of this component",
        "name" : "gridRowEnd",
        "type" : "text",
        "value" : ""
      } ]
    } ],
    "repo" : "demo-image-el",
    "user" : "Pancake-CMS",
    "version" : "0.0.0"
  } ],
  "locales" : [ "1234", "ber", "berwer" ],
  "templates" : {
    "abcd" : {
      "demo-image-el-0" : {
        "name" : "demo-image-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The image src",
            "name" : "src",
            "type" : "text",
            "value" : "http://prateekjadhwani.github.io/images/logo.png"
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-0" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-nested-el-0" : {
        "name" : "demo-text-nested-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      }
    },
    "abcd1" : {
      "demo-text-el-0" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-1" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-nested-el-0" : {
        "components" : {
          "css-grid-1" : {
            "demo-text-el-0" : {
              "name" : "demo-text-el",
              "properties" : [ {
                "name" : "componentProperties",
                "value" : [ {
                  "description" : "The alignment of the text",
                  "name" : "align",
                  "options" : [ "left", "center", "right" ],
                  "type" : "dropdown",
                  "value" : "right"
                } ]
              }, {
                "name" : "display",
                "value" : [ {
                  "description" : "The start column location of this component",
                  "name" : "gridColumnStart",
                  "type" : "text",
                  "value" : "1"
                }, {
                  "description" : "The end column location of this component",
                  "name" : "gridColumnEnd",
                  "type" : "text",
                  "value" : "12"
                }, {
                  "description" : "The start row location of this component",
                  "name" : "gridRowStart",
                  "type" : "text",
                  "value" : ""
                }, {
                  "description" : "The end row location of this component",
                  "name" : "gridRowEnd",
                  "type" : "text",
                  "value" : ""
                } ]
              } ]
            }
          }
        },
        "name" : "demo-text-nested-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : "right"
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "pull-to-action-0" : {
        "name" : "pull-to-action",
        "properties" : {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "A callback function that for which action should be performed",
            "name" : "action",
            "type" : "text",
            "value" : "alert(\"You need to set the action attribute\")"
          }, {
            "description" : "the container element (if identifing with id start with # and . for class)",
            "name" : "container",
            "type" : "text",
            "value" : "body"
          }, {
            "description" : "How far the user has to drag the screen",
            "name" : "distance",
            "type" : "number",
            "value" : 100
          } ]
        }
      }
    },
    "avfd" : {
      "demo-text-nested-el-0" : {
        "name" : "demo-text-nested-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      }
    },
    "avfg" : {
      "demo-text-nested-el-0" : {
        "name" : "demo-text-nested-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      }
    },
    "proct1" : {
      "demo-image-el-0" : {
        "name" : "demo-image-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The image src",
            "name" : "src",
            "type" : "text",
            "value" : "http://prateekjadhwani.github.io/images/logo.png"
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-0" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-1" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-nested-el-0" : {
        "components" : {
          "css-grid-1" : {
            "demo-text-el-0" : {
              "name" : "demo-text-el",
              "properties" : [ {
                "name" : "componentProperties",
                "value" : [ {
                  "description" : "The alignment of the text",
                  "name" : "align",
                  "options" : [ "left", "center", "right" ],
                  "type" : "dropdown",
                  "value" : 0
                } ]
              }, {
                "name" : "display",
                "value" : [ {
                  "description" : "The start column location of this component",
                  "name" : "gridColumnStart",
                  "type" : "text",
                  "value" : "1"
                }, {
                  "description" : "The end column location of this component",
                  "name" : "gridColumnEnd",
                  "type" : "text",
                  "value" : "12"
                }, {
                  "description" : "The start row location of this component",
                  "name" : "gridRowStart",
                  "type" : "text",
                  "value" : ""
                }, {
                  "description" : "The end row location of this component",
                  "name" : "gridRowEnd",
                  "type" : "text",
                  "value" : ""
                } ]
              } ]
            }
          }
        },
        "name" : "demo-text-nested-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      }
    },
    "temp-template" : {
      "demo-image-el-0" : {
        "name" : "demo-image-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The image src",
            "name" : "src",
            "type" : "text",
            "value" : "http://prateekjadhwani.github.io/images/logo.png"
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-0" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      },
      "demo-text-el-1" : {
        "name" : "demo-text-el",
        "properties" : [ {
          "name" : "componentProperties",
          "value" : [ {
            "description" : "The alignment of the text",
            "name" : "align",
            "options" : [ "left", "center", "right" ],
            "type" : "dropdown",
            "value" : 0
          } ]
        }, {
          "name" : "display",
          "value" : [ {
            "description" : "The start column location of this component",
            "name" : "gridColumnStart",
            "type" : "text",
            "value" : "1"
          }, {
            "description" : "The end column location of this component",
            "name" : "gridColumnEnd",
            "type" : "text",
            "value" : "12"
          }, {
            "description" : "The start row location of this component",
            "name" : "gridRowStart",
            "type" : "text",
            "value" : ""
          }, {
            "description" : "The end row location of this component",
            "name" : "gridRowEnd",
            "type" : "text",
            "value" : ""
          } ]
        } ]
      }
    }
  }
}

[prateekjadhwani]

@sreekrishna I added username / password functionality in the authentication-page. Feel free to update the developer-console code by doing a git pull. You will also need to do a bower update to get the updated dependencies.

Closing this issue now.