feat(devices): add devices modal and additional metrics #4131

vladikoff · 2016-09-08T22:51:25Z

Fixes #4124

vladikoff · 2016-09-15T04:47:36Z

@shane-tomlinson @vbudhram

Still WIP but you can play around with the fancy modals:

vladikoff · 2016-09-16T04:25:56Z

@shane-tomlinson @vbudhram r?

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/mixins/floating-placeholder-mixin.js

@@ -30,11 +31,12 @@ define(function (require, exports, module) {
     *
     * @param {object} inputEl - input element whose placeholder
     *        should be shown.
+     * @param {String} text - custom text for the floating label.


Super pedantic nit, can you add [] around text since it's optional?

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/mixins/floating-placeholder-mixin.js

@@ -90,6 +92,18 @@ define(function (require, exports, module) {
      this.focusFloatingPlaceholder($inputEl);
    },

+    /**
+     * The ridiculous name is to avoid collisions with


shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/mixins/floating-placeholder-mixin.js

+    floatingPlaceholderMixinOnSelect: function (event) {
+      var $inputEl = $(event.currentTarget);
+      this.showFloatingPlaceholder($inputEl, $inputEl.find('option:first').text());
+      this.focusFloatingPlaceholder($inputEl);


I realize focusFloatingPlaceholder was already there, but it seems misnamed because the placeholder element itself isn't being focused, only the styles are updated. I also can't think of a better name.

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/mixins/modal-settings-panel-mixin.js

@@ -20,8 +20,9 @@ define(function (require, exports, module) {
    },

    events: {
-      'click .avatar-panel #back': BaseView.preventDefaultThen('_returnToAvatarChange'),
-      'click .cancel': BaseView.preventDefaultThen('_closePanelReturnToSettings')
+      'click .cancel': BaseView.preventDefaultThen('_closePanelReturnToSettings'),


I don't see BaseView referenced anywhere else in this module. Maybe change the BaseView reference on line 13 to preventDefaultThen and use that reference here to make each line slightly more concise.

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/mixins/modal-settings-panel-mixin.js

@@ -45,6 +46,12 @@ define(function (require, exports, module) {
      this.closePanel();
    },

+    _closePanelReturnToClients: function () {
+      this.navigate('settings/clients');


I understand why you did this, and makes sense, but I fear we are going to end up with a generic mixin with a lot of view specific routes and logic. I can easily imagine us adding a #back button to a non-avatar related view in the future and not understanding why clicking the button keeps going to settings/avatar/change. Can we generalize somehow, either by embedding the next screen view as an attribute on the button, or making the back buttons links whose href is set to the next step?

Yea we can do a lot of refactoring here. Follow up issue okay?

Filed here: #4166

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/settings/client_disconnect.js

+          this.reasonHelp = REASON_HELP[selectedValue];
+          if (item.get('isCurrentDevice')) {
+            // if disconnected the current device then sign out
+            this._closePanelReturnToClients();


Calling _closePanelReturnToClients then navigateToSignIn will call this.navigate twice. What happens if you just call this.navigateToSignIn, that should close the panel, shouldn't it?

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/settings/client_disconnect.js

+          this.toDisconnect = false;
+          this.reasonHelp = REASON_HELP[selectedValue];
+          if (item.get('isCurrentDevice')) {
+            // if disconnected the current device then sign out


If the user destroyed the current device, the user model will clear the signed in account and notify the browser. This comment should probably read if disconnected the current device, the user is automatically signed out.

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/settings/client_disconnect.js

+     * Closes the panel if device was disconnected.
+     */
+    closePanelIfDisconnected () {
+      if (! this.toDisconnect) {


I wonder if the logic would be more clear if toDisconnect was renamed to hasDisconnected and the boolean checks reversed?

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/settings/client_disconnect.js

+
+    /**
+     * Called on panel interaction.
+     * Closes the panel if device was disconnected.


I'm a bit confused by how this works, does the user disconnect and then have to click on anything for the panel to close?

See https://github.com/mozilla/fxa/pull/181/files#diff-9d765e5787806afc80bdaa86191886a8R180

There are a few different scenarios

shane-tomlinson · 2016-09-16T11:22:54Z

app/scripts/views/settings/client_disconnect.js

+
+      return this.user.destroyAccountClient(this.user.getSignedInAccount(), item)
+        .then(() => {
+          // user has disconnect the device


Once the client is destroyed, do you need to remove it from the clients collection passed in from the clients view?

No, no you don't, I remembered the Clients collection listens for destroy events and does the right thing.

shane-tomlinson · 2016-09-16T12:15:56Z

app/tests/spec/views/settings/client_disconnect.js

+  const WindowMock = require('../../../mocks/window');
+
+  describe('views/settings/client_disconnect', () => {
+    var metrics;


You can use let on all these! Can you sort them too?

shane-tomlinson · 2016-09-16T12:15:56Z

tests/functional/settings_clients.js

+
+        // test cancel
+        .then(click('.cancel-disconnect'))
+        .then(FunctionalHelpers.pollUntil(function () {


It looks like you are waiting for client-disconnect to go away. I've always looked for a reason to use leadfoot's waitForDeletedByCssSelector. Valid use?

Even if waitForDeletedByCssSelector doesn't work, I see this pattern repeated several times, it's probably worth creating a helper function in lib/helpers.js and using that.

+1 to add a helper, in the past waitForDeletedByCssSelector. did not work well, pollUntil makes more sense.

shane-tomlinson · 2016-09-16T12:15:56Z

tests/functional/settings_clients.js

+        .then(click('.client:nth-child(2) .client-disconnect'))
+        .then(click('select.disconnect-reasons > option[value="lost"]'))
+
+        // wait until button is enabled


is enabled or has gone away? Can waitForDeletedByCssSelector be used here too?

shane-tomlinson · 2016-09-16T12:22:47Z

tests/functional/settings_clients.js

+
+        .then(click('#client-disconnect .primary'))
+
+        .then(click('#client-disconnect .reason-help'))


What should clicking help do here?

https://github.com/mozilla/fxa/pull/181/files#diff-9d765e5787806afc80bdaa86191886a8R175

clicking on anything should close the modal

shane-tomlinson · 2016-09-16T12:22:47Z

app/scripts/views/settings/client_disconnect.js

+        return this.navigate('settings/clients');
+      }
+
+      this.item = clients.get(deviceId);


Instead of this.item, would this.client be easier to follow?

shane-tomlinson · 2016-09-16T12:22:47Z

app/scripts/views/settings/client_disconnect.js

+      // receive the device collection and the item to delete
+      // if deleted the collection will be automatically updated in the settings panel.
+      let clients = this.model.get('clients');
+      let deviceId = this.model.get('itemId');


Niether clients nor itemId are used past this point, would it be simpler to just pass in the expected client from clients.js?

If not, itemId could stand to be renamed to clientId.

"clientId" 👍

shane-tomlinson

Overall this PR is pretty solid, nothing worrying. Most of my comments try to make the code more concise, or easier to understand, or just remove duplicate logic that has already been generalized.

I have not yet tested this manually.

shane-tomlinson · 2016-09-16T12:35:53Z

app/scripts/views/settings/clients.js

+      // if a device then ask for confirmation
+      if (clientType === Constants.CLIENT_TYPE_DEVICE) {
+        this.navigate('settings/clients/disconnect', {
+          clients: this._attachedClients,


This seems to be where it'd be simpler to just pass in the client since neither clients nor the id are used for anything except fetching the client.

Yeah I had it working that away initially, but client must be destroyed from the clients collection. Otherwise it will be calling Backbone sync on destroy and XHR our: http://backbonejs.org/#Model-destroy and also this helps with: https://github.com/mozilla/fxa/pull/181/files#diff-9d765e5787806afc80bdaa86191886a8R199 ( After device removal has been confirmed, the dialog closes and, the row is overtaken by the area beneath it)

shane-tomlinson · 2016-09-16T12:35:53Z

app/scripts/views/settings/client_disconnect.js

+     *
+     * @param {Event} event
+     */
+    selectOption (event) {


Should trying to submit the form print a tooltip if no option has been selected?

We can refine that later if needed IMHO

shane-tomlinson · 2016-09-16T12:35:53Z

app/scripts/views/settings/client_disconnect.js

+     */
+    selectOption (event) {
+      let optionIndex = this.$el.find(event.currentTarget).find(':selected').index();
+      if (optionIndex === 0) {


I think this function and it's attached event could possibly be removed by overriding isValidStart -

isValidStart () { return this.$(':selected').index() > 0; },

My theory is the change form event handler will call enableSubmitIfValid which will call isValidStart and do the right thing.

shane-tomlinson · 2016-09-16T12:58:44Z

Some more questions/comments.

The "disconnect reason" screen is not keyboard accessible. Check out this video:

Can the option elements be styled? Something tells me no and we may have to use some progressive enhancement.

Once a disconnection is successful, if the user is shown "help text" it's not obvious how to close the screen. Keyboard users have no way of doing so.

The second point on the help text, both include "You should change your Firefox Account password" but no easy way to do so is proviced. Should we link to /settings/change_password to make this easy?

Should a user who is currently going through signin confirmation be listed even though they have not yet synced?

It's fun to play with on multiple browsers and see how quickly the user is disconnected!

vladikoff · 2016-09-16T13:04:39Z

Can the option elements be styled? Something tells me no and we may have to use some progressive enhancement.

Maybe later after Phase 1 deploy

Once a disconnection is successful, if the user is shown "help text" it's not obvious how to close the screen. Keyboard users have no way of doing so.

Just following the feature doc here. We can add keyboard close in this version though

The second point on the help text, both include "You should change your Firefox Account password" but no easy way to do so is proviced. Should we link to /settings/change_password to make this easy?

After phase 1 probably

Should a user who is currently going through signin confirmation be listed even though they have not yet synced?

Post phase 1 but there is an issue mozilla/fxa#186

vbudhram

Looks really cool! Just a few minor things from me.

vbudhram · 2016-09-16T14:52:38Z

app/scripts/views/mixins/floating-placeholder-mixin.js

+     * @param {Event} event
+     */
+    floatingPlaceholderMixinOnSelect: function (event) {
+      var $inputEl = $(event.currentTarget);


Should this be const? Noticed file uses var as well, but I think they could be updated to use const. File is not to big, so might be worthwhile to make consistent?

vbudhram · 2016-09-16T14:52:38Z

app/styles/modules/_settings.scss

+      text-align: left;
+    }
+
+    html[dir='rtl'] & {


Was this a problem before with the old panels?

vbudhram · 2016-09-16T14:52:38Z

app/tests/spec/views/settings/client_disconnect.js

+      it('has props', () => {
+        view.beforeRender();
+        assert.ok(view.context().deviceName);
+        assert.ok(view.context().toDisconnect);


Looks like context returns reasonHelp as well, could add a check.

vbudhram · 2016-09-16T14:52:38Z

app/tests/spec/views/settings/client_disconnect.js

+        return view.render().then(() => {
+          assert.ok(view.disableForm.calledOnce);
+          assert.notOk(view.enableForm.calledOnce);
+          assert.ok($(view.el).find('.primary.disabled').length, 'disabled button at first');


nit: disabled button at first wording threw me off a little. Maybe some like submit button disabled or has disabled class?

vbudhram · 2016-09-16T14:52:38Z

app/tests/spec/views/settings/client_disconnect.js

+          return view.submit().then(() => {
+            assert.notOk(view.toDisconnect);
+            assert.ok(view.render.calledOnce, 'not rendered, current device');
+            assert.ok(TestHelpers.isEventLogged(metrics, 'settings.clients.disconnect.submit.suspicious'));


Mind updating the metrics docs with new ones?

Fixes #4124

ryanfeeley · 2016-09-19T15:14:09Z

@vladikoff Don't forget the … after Disconnect… as specificed in the doc.

Now needed as what follows is revocable.

vladikoff · 2016-09-19T15:57:16Z

@vbudhram @shane-tomlinson final r?

vladikoff · 2016-09-19T15:59:04Z

Travis not showing status but it is here: https://travis-ci.org/mozilla/fxa-content-server/pull_requests

vbudhram

@vladikoff Just a couple notes. It was a little jarring when I disconnected only device and got signed out. Almost feel like there should be a prompt Yo dwag, you are disconnecting the current session. You sure?. That shouldn't block PR though.

Otherwise, r+ from me!

vbudhram · 2016-09-19T20:22:56Z

app/scripts/templates/settings/client_disconnect.mustache

+        <label class="label-helper"></label>
+        <div class="select-row">
+          <select class="disconnect-reasons">
+            <option value="reason">{{#t}}Reason for disconnecting...{{/t}}</option>


Placeholder text does not disappear when going back to default option. Is this intended, I can see it either way.

vladikoff · 2016-09-19T20:24:10Z

@vladikoff Just a couple notes. It was a little jarring when I disconnected only device and got signed out. Almost feel like there should be a prompt Yo dwag, you are disconnecting the current session. You sure?. That shouldn't block PR though.

Yea that's a good point. Maybe in the future we can tweak the messaging for 'current' device disconnect.

shane-tomlinson

This is in great shape! Only two changes requested:

Use … to let the font handle ellipsis
Add the suffix possibilities to settings.clients.[clientType].disconnect

Otherwise, looks great, tests well. Can you file follow-on issues for keyboard accessibility, styling of the select, possibly showing a close button on the "help text" to make it obvious what next steps are, and allow users to click on a "change password" link from the help text to make that path simpler?

r+ with minor nits addressed.

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/templates/settings/client_disconnect.mustache

+        <label class="label-helper"></label>
+        <div class="select-row">
+          <select class="disconnect-reasons">
+            <option value="reason">{{#t}}Reason for disconnecting...{{/t}}</option>


@ryanfeeley - should this be ... or …? … will render the font's ellipsis.

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/templates/settings/client_disconnect.mustache

@@ -0,0 +1,40 @@
+<div id="client-disconnect">
+  <section class="modal-panel">
+    {{^hasDisconnected}}


I like the hasDisconnected

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/templates/settings/clients.mustache

@@ -26,7 +26,7 @@
            {{^isCurrentDevice}}
            <div class="last-connected">{{lastAccessTimeFormatted}}</div>
            {{/isCurrentDevice}}
-            <button class="settings-button warning client-disconnect" data-id="{{id}}" data-type="{{clientType}}">{{#t}}Disconnect{{/t}}</button>
+            <button class="settings-button warning client-disconnect" data-id="{{id}}" data-type="{{clientType}}">{{#t}}Disconnect…{{/t}}</button>


It looks like here you've used the unicode ellipsis. Should this be …?

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/views/mixins/floating-placeholder-mixin.js

@@ -63,11 +65,11 @@ define(function (require, exports, module) {
      }
    },

-    focusFloatingPlaceholder: function (inputEl) {
+    focusLabelHelper: function (inputEl) {


👍 - dig the name change.

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/views/settings/client_disconnect.js

+
+  const REASON_SELECTOR = '.disconnect-reasons';
+  const REASON_HELP = {
+    'lost': t('We\'re sorry to hear about this. You should change your Firefox Account password, and look for ' +


Thanks for checking.

shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/views/settings/client_disconnect.js

+     * @returns {Boolean}
+     */
+    isValidStart () {
+      return this.$(':selected').index() > 0;


shane-tomlinson · 2016-09-19T20:26:09Z

app/scripts/views/settings/client_disconnect.js

+     * Closes the panel if device was disconnected.
+     */
+    closePanelAfterDisconnect () {
+      if (this.hasDisconnected) {


The inversion of variable semantics from this.needsDisconnect to this.hasDisconnected makes this much easier to read.

shane-tomlinson · 2016-09-19T20:26:09Z

app/styles/modules/_settings.scss

+      text-align: left;
+    }
+
+    html[dir='rtl'] & {


Was this a problem before with the old panels?

shane-tomlinson · 2016-09-19T20:26:09Z

docs/client-metrics.md

+
+#### settings/clients
+
+* settings.clients.[clientType].disconnect - user is attempting to disconnect a client type


Can you add the suffix's you have above - old, no, lost, suspicious?

shane-tomlinson · 2016-09-19T20:26:09Z

tests/functional/lib/helpers.js

+   * @param {Number} [timeout]
+   *        Timeout to wait until element is gone
+   */
+  function pollUntilGoneByQSA(selector, timeout) {


vladikoff · 2016-09-19T22:58:08Z

Was this a problem before with the old panels?

( I cannot reply to that comment inline the review, sent GitHub a support request).

Anyway, it was used for avatar-modal, I moved it out of avatar css because it is not only used for avatars now.

…ve time

vladikoff added the WIP label Sep 8, 2016

vladikoff added this to the FxA-89: devices view milestone Sep 8, 2016

vladikoff self-assigned this Sep 8, 2016

vladikoff added waffle:active shipit labels Sep 8, 2016

vladikoff force-pushed the i4124 branch from 0f693b5 to eb27c79 Sep 15, 2016

vladikoff force-pushed the i4124 branch from eb27c79 to 896853b Sep 16, 2016

vladikoff removed the WIP label Sep 16, 2016

vladikoff assigned shane-tomlinson and vbudhram Sep 16, 2016

shane-tomlinson reviewed Sep 16, 2016

View changes

shane-tomlinson suggested changes Sep 16, 2016

View changes

vbudhram suggested changes Sep 16, 2016

View changes

vladikoff added the train-70 label Sep 16, 2016

vladikoff added 5 commits Sep 8, 2016

feat(devices): add devices modal and additional metrics

99889b1

Fixes #4124

feat(devices): add new modals and other stuff

2a14556

feat(devices): add tests, clean up everything

85faa19

fix(tests): add functional tests, fix disconnect condition

7b2b787

fix(tests): adjust current device test

4504454

vladikoff mentioned this pull request Sep 19, 2016

Clean up settings panel navigation logic #4166

Closed

feat(devices): address feedback, improve form validation

530863a

vladikoff force-pushed the i4124 branch from d8c5dd3 to 530863a Sep 19, 2016

vbudhram approved these changes Sep 19, 2016

View changes

shane-tomlinson suggested changes Sep 19, 2016

View changes

This was referenced Sep 19, 2016

Cannot use "Disconnect" after pressing ESC in clients_disconnect #4169

Closed

Discuss devices view ux suggestions #4170

Closed

feat(devices): fix up ellipsis, add utm params, hide device last acti…

26d8c6f

…ve time

vladikoff removed the waffle:active label Sep 19, 2016

vladikoff mentioned this pull request Sep 19, 2016

Hide "last active" for devices in the template or with CSS #4168

Closed

shane-tomlinson deleted the i4124 branch Sep 20, 2016


		.then(click('#client-disconnect .primary'))

		.then(click('#client-disconnect .reason-help'))


		#### settings/clients

		* settings.clients.[clientType].disconnect - user is attempting to disconnect a client type

mozilla / fxa-content-server Archived

feat(devices): add devices modal and additional metrics #4131

feat(devices): add devices modal and additional metrics #4131

Conversation

vladikoff commented Sep 8, 2016

vladikoff commented Sep 15, 2016

vladikoff commented Sep 16, 2016

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 • edited Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

vladikoff Sep 19, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 19, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 19, 2016 Author Contributor

shane-tomlinson left a comment

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

This comment has been minimized.

vladikoff Sep 16, 2016 Author Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016 Member

shane-tomlinson commented Sep 16, 2016

vladikoff commented Sep 16, 2016

vbudhram left a comment

This comment has been minimized.

vbudhram Sep 16, 2016 Contributor

This comment has been minimized.

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016 •

edited

Member

vladikoff Sep 16, 2016
Author Contributor

vladikoff Sep 19, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 19, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 19, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vladikoff Sep 16, 2016
Author Contributor

shane-tomlinson Sep 16, 2016
Member

vbudhram Sep 16, 2016
Contributor

vbudhram Sep 16, 2016
Contributor

shane-tomlinson Sep 19, 2016
Member

vbudhram Sep 16, 2016
Contributor

vbudhram Sep 16, 2016
Contributor

vbudhram Sep 16, 2016 •

edited

Contributor

vbudhram Sep 19, 2016 •

edited

Contributor

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

shane-tomlinson Sep 19, 2016
Member

vladikoff Sep 19, 2016
Author Contributor

shane-tomlinson Sep 19, 2016
Member