Bootstrap3 Based UI (Implement #103)

[Zren]

PR is ready. I'm still writing it up and doing a few last commits. There's just a fuck ton to document and I'm a savvy Ctrl+S kinda guy.

This is a Pull Request for Issue #103.

Demo

http://nameless-hollows-5487.herokuapp.com/

Screenshots

Imgur Album: https://imgur.com/a/HKqhs

In order to view the authenticated pages.

Changes

Probably should start with what I didn't change. I tried to stay keep routes the same. Though I made a helper function called app_route that emulates app.route('/').get(controller).post(controller) from Express 4.x. I didn't touch the models at all. Graveyard, Flagged Users/Scripts and the AdminUserList page are still using the old UI.

All CSS/JS libraries are linked from http://cdnjs.com. Javascript is in the footer. CSS is in the header.

Templating

View: https://github.com/Zren/OpenUserJS.org/blob/css/views/pages/_templatePage.html

Controller: https://github.com/Zren/OpenUserJS.org/blob/css/controllers/_template.js

Template Options (options.* )

Eg: options.authedUser

• authedUser The authed user.
• isMod == authedUser.isMod
• isAdmin == authedUser.isAdmin
• isYou script.author == authedUser on scriptPage
• userTools, authorTools, modTools, adminTools are {} or undefined depending on if the user can use those panels. Use the style over isYou etc so we can have admin's have access to script editing tools in the future.
• pageMetaDescription string for <meta name="description"> or null.
• pageMetaKeywords Comma seperated list of keywords for <meta name="keywords"> or null.

Models: Generated fields from Serialized Data

Use libs/modelParser like authedUser = modelParser,parseUser(authedUser) to generate urls like authedUser.userPageUrl. modelParser will strip all model functions like .save() as it does a obj.toObject(). I did this as I wasn't 100% sure if modifying fields not specified in the model's schema would get serialized. I also used toObject as the controllers before my edits were not sending the models into the template (like: options: {username: user.name}), so I followed that pattern.

Controllers

Use libs/modelQuery to build Model.find() queries. It has a bunch of function to apply on a query (eg: scriptListQuery = Script.find() like:

• modelQuery.parseScriptSearchQuery(scriptListQuery, req.query.q)
• modelQuery.parseModelListSort(scriptListQuery, req.query.orderBy, req.query.orderDir, defaultSortCallback)

There's also modelQuery.applyScriptListQueryDefaults(scriptListQuery, options, req) which deals with the parsing of default querystring parameters for you (q, orderBy, orderDir, p, limit), and sets up an object for pagination (url?p=1 for page 1) in options.pagination. To complete the pagination, you have to count the total number of items your query conditions match. When using the apply___ListQueryDefaults functions, it's as easy as using tasks.push(pagination.getCountTask(scriptListQuery));. Lastly, you have to render the paginationTemplate with options.paginationRendered = pagination.renderDefault(req); after the count task has completed (usually right before you do res.render). All that was probably very confusing, so learn by example by reading the index.home, group.list, or any of the other listPage controllers.

All my query building function apply onto an existing query. Have the query get defined in the controller. This way you can do fine tuning on the query on top of using the default query building functions.

var github = require('../libs/githubClient'); will import a pre-setup github client which you can find the docs for here.

Envionment Variables

Since I wanted to setup a demo to live test my changes, I needed to add make a few urls configurable. Namely:

• AUTH_CALLBACK_BASE_URL To allow users to login. Though we might want to fetch the hostname from the request? Using env variables was simpler at the time of writing.
• DEV_AWS_URL defaulting to localhost:10001. I port forwarded my FakeS3 server for my demo.

Views

Root views that are res.rendered are put in views/pages/. Templates that are included in pages are put in views/includes/. Inline scripts that you reuse, but don't feel worthy of an extra request, are put in views/includes/scripts/.

Paragraphs of text, while readable on the body bg color, are easier to read inside a panel (with a white bg). Headings are fine to be placed in the gutter. Here's the bootstrap html for a simple panel. You learn more bootstrap here: http://getbootstrap.com/components/#panels

<div class="panel panel-default">
  <div class="panel-body">

  </div>
</div>

FontAwesome

All icons are from http://fontawesome.io/icons/

Inspiration

All the Discussion/Forum pages are based off Discourse's UI.

Vocab

I preferred the verbose ___List rather than pluralization.

[Zren]

An admin (or greater) should not be able to change their own user role or delete themselves. Only someone with greater privileges should be able to do this.

You can only lower your role. And by delete, do you mean the delete in the user panel? or the mod remove user (which prevents you from removing yourself soooo I guessing the admin one)?

"Root" user in case their is some crazy scenario when its needed (someone demands that their account be permanently deleted?

I'll delete the delete button, and disable the admin user list route as it's redundant now (unless you want to batch delete) =.='

---

Not sure if you saw this @sizzlemctwizzle as you replied right after I edited it in.

TBH, the threshold should be lowered to just 1 flag until it starts getting abused. (edited)

[Zren]

https://github.com/Zren/OpenUserJS.org/blob/ui/controllers/scriptStorage.js#L102

While that's a cool fix, it's not backwards compatible. We could migrate the db, but I've avoided that for this PR.

[sizzlemctwizzle]

You can only lower your role.

So you want to let people step down?

I'll delete the delete button

Sounds good.

disable the admin user list route as it's redundant now

Yeah that makes sense.

(unless you want to batch delete) =.='

Won't be able to thin the herd as easily without my completely random mass user deletion sprees haha

TBH, the threshold should be lowered to just 1 flag until it starts getting abused.

Yeah do that. It's much too high right now and basically makes it useless, but at least we'll be ready for potential future abuse.

[sizzlemctwizzle]

We could migrate the db, but I've avoided that for this PR.

Okay. I'm going to add this to #130 since fixing that issue already entails changes to the database.

[Zren]

Apparently model.flagging wasn't working for me, even with the lower threshold. Had to check model.flags instead. Next thing to do would be to have an "approve/ignore" button for the mods. Which would get reset the next time script gets updated.

So you want to let people step down?

More like quickly test lower roles, but meh.

---

PR is ready.

[jerone]

PR is ready.

Have been following and reading your progress silently from the beginning and it look GREAT!

+1 on merging!

Any other new changes can go into new issues/PR.

[sizzlemctwizzle]

Next thing to do would be to have an "approve/ignore" button for the mods.

#134

More like quickly test lower roles

Can they return to their original role without assistance? This seems like more of a dev thing.

PR is ready.

Reviewing and testing it (locally in the production environment) one last time before I merge and deploy.

[Martii]

One last question for this pr... /add/scripts and /add/lib urls aren't symmetrical in pr, dev, and production... should these be both pluralized since one can import multiple libs? Not blocking but could be confusing for url users at some point... and generate some extra traffic with user error.

[Zren]

Use singular, as the intent is to only make a single script. The batch options are on different routes anyways.

[Zren]

Should probably also be consistent when talking about a specific item.

Either

/users
/user/:username/

/scripts
/script/:username/:scriptname

OR

/users
/users/:username/

/scripts
/scripts/:username/:scriptname

I prefer singluar, but a fair number of sites use plural.

GitHub users plural with a single item. /Zren/OpenUserJS.org/issues/1
StackOverflow uses plural with a single item. /questions/24171594/match-hyphenated-word
Userscripts used plural with a single item. /reviews/46613.html

Discourse uses singluar on a single item. /categories and /category/features

[sizzlemctwizzle]

I prefer the first way you mentioned but we'll figure this out with #135.