User Accounts

Author: dr-dimitru

demo/client/file.coffee demo/client/file/file.coffee

@@ -10,16 +10,29 @@ Template.index.onCreated ->
         self.filesLength.set length
       return
     return
-  @getFilesLenght()
 
-  @autorun -> 
+  observers =
+    added: ->
+      self.getFilesLenght()
+      return
+    removed: ->
+      self.getFilesLenght()
+      return
+
+  self.data.latest.observe observers
+  self.data.userFiles.observe observers
+
+  @autorun ->
     _app.subs.subscribe 'latest', self.take.get()
     return
 
 Template.index.helpers
   take:        -> Template.instance().take.get()
   uploads:     -> _app.uploads.get()
   filesLength: -> Template.instance().filesLength.get()
+  shownFiles:  ->
+    data = Template.instance().data
+    return data.latest.count() + data.userFiles.count()
 
 Template.index.events
   'click #loadMore': (e, template) ->

demo/client/file.jade demo/client/file/file.jade

@@ -1,12 +1,14 @@
 template(name="index")
   .col-50.sm-row
-    if compare latest.count 'or' uploads
+    if compare latest.count 'or' uploads 'or' userFiles.count
       .listing: table.table: tbody
         each uploads
           +uploadRow
+        each userFiles
+          +listingRow
         each latest
           +listingRow
-        if compare latest.count 'and' filesLength '>' latest.count
+        if compare filesLength '>' shownFiles
           tr: td#loadMore(colspan="2"): h3.no-margin.center Load More
     else
       h3.files-note Be the first to upload a file

demo/client/index.coffee

@@ -2,13 +2,12 @@ Template.listingRow.helpers
   removedIn: -> moment(@meta.expireAt).fromNow()
 
 Template.listingRow.events
-  # Remove example, won't work with allowClientCode: false
   'click #remove': (e, template) ->
+    e.stopPropagation()
+    e.preventDefault()
     Collections.files.remove @_id, (error) ->
       if error
         console.log error
-      else
-        template.getFilesLenght()
       return
     return
   'click #showFile': (e, template) ->

demo/client/index.jade

@@ -24,6 +24,15 @@ template(name="listingRow")
         .file-name #{name}
         br
         .file-info
+          if compare userId 'is' currentUser._id
+            span.file-isOwner(title="You owns this file"): i.fa.fa-fw.fa-user
+            |  
+            | ·
+            |  
+            a.file-remove#remove(href="#" title="Remove file"): i.fa.fa-fw.fa-trash-o
+            |  
+            | ·
+            |  
           span.file-size(title="File size") {{filesize size}}
           |  
           | ·

demo/client/listing-row.coffee demo/client/listing/listing-row.coffee

@@ -1,13 +1,22 @@
 FlowRouter.route '/',
   name: 'index'
-  action: (params, queryParams, latest) ->
-    @render '_layout', 'index', {latest}
+  action: (params, queryParams, data) ->
+    @render '_layout', 'index', data
     return
   waitOn: (params) -> [_app.subs.subscribe('latest', 10)]
   whileWaiting: ->
     @render '_layout', '_loading'
     return
-  data: -> Collections.files.collection.find {}, sort: 'meta.created_at': -1
+  data: ->
+    latest: Collections.files.collection.find {userId: $ne: Meteor.userId()}, sort: 'meta.created_at': -1
+    userFiles: Collections.files.collection.find {userId: Meteor.userId()}, sort: 'meta.created_at': -1
+
+FlowRouter.route '/login',
+  name: 'login'
+  title: -> 'Login into Meteor Files'
+  action: ->
+    @render '_layout', 'login'
+    return
 
 FlowRouter.route '/:_id',
   name: 'file'

demo/client/listing-row.jade demo/client/listing/listing-row.jade

@@ -1,6 +1,6 @@
 @import url(https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700)
 
-html, body, span, div, p, table, tr, button, video, audio, img, picture
+html, body, span, div, p, table, tr, button, video, audio, img, picture, i.fa
   animation: newElement 350ms ease-in-out 1
 
 @keyframes newElement
@@ -48,6 +48,9 @@ a, picture, img, video, button, input, pre, i, select, option, label, tr, td, p
     tap-highlight-color: rgba(0,0,0,0)
     tap-highlight-color: transparent
 
+a
+  transition: color 128ms ease-in-out
+
 a, a:active, a:hover, a:focus
   outline: none
   color: #bbb
@@ -302,6 +305,33 @@ h1, h2, h3, h4, h5, h6, div, form, table, p
   &.right
     left: 8px
     right: initial
+  &.user-account
+    right: 50px
+  &.loggingIn
+    pointer-events: none
+
+.login-options
+  line-height: 3rem
+  a
+    margin: 0px 7px
+    i
+      transition: color 256ms ease-in-out, text-shadow 256ms ease-in-out
+    img
+      max-height: 1.33333333em
+      position: relative
+      bottom: -5px
+      transition: all 256ms ease-in-out
+      filter: grayscale(100%)
+    &:hover
+      img
+        filter: grayscale(0%)
+      i.fa-github
+        color: #000
+        text-shadow: 0 0 3px #fff
+      i.fa-twitter
+        color: #00aced
+      i.fa-facebook-official
+        color: #3b5998
 
 .upload-form
   position: relative
@@ -384,10 +414,6 @@ h1, h2, h3, h4, h5, h6, div, form, table, p
   -webkit-overflow-scrolling: touch
   max-height: 100%
   min-height: 455px
-  .btn
-    border-color: #aebad2
-    color: #aebad2
-    font-size: 1.1em
 
 .files-note
   text-align: center
@@ -476,6 +502,8 @@ h1, h2, h3, h4, h5, h6, div, form, table, p
 .file-info
   color: #606c80
   font-size: 0.9rem
+  .file-remove:hover
+    color: #bd362f
 
 .file-name, .file-info
   padding: 0px

demo/client/router.coffee demo/client/router/router.coffee

@@ -39,11 +39,12 @@ Template.uploadForm.onCreated ->
     _.each files, (file) ->
       Collections.files.insert(
         file: file
-        meta: 
-          expireAt: new Date(created_at + _app.storeTTL)
-          created_at: created_at
-          downloads: 0
+        meta:
           blamed: 0
+          expireAt: new Date(created_at + (if Meteor.userId() then _app.storeTTLUser else _app.storeTTL))
+          unlisted: if Meteor.userId() then true else false
+          downloads: 0
+          created_at: created_at
         streams: 'dynamic'
         chunkSize: 'dynamic'
         transport: transport

demo/client/routes.coffee demo/client/router/routes.coffee

@@ -2,6 +2,8 @@ template(name="uploadForm")
   form.col-50.upload-form#uploadFile: .sm-row
     unless uploads
       input.invisible#userfile(type="file" name="userfile" required multiple)
+      unless compare showProjectInfo 'or' showSettings
+        +accounts
       unless showProjectInfo
         a.info-link.show-settings#showSettings(href="#" class="{{#if showSettings}}active{{/if}}"): i.fa.fa-fw.fa-gear
       unless showSettings

demo/client/moz-styles.css demo/client/styles/moz-styles.css

@@ -0,0 +1,8 @@
+template(name="accounts")
+  if currentUser
+    a.info-link.user-account(href="{{#if isActiveRoute 'login'}}{{pathFor 'index'}}{{else}}{{pathFor 'login'}}{{/if}}" class="{{#if isActiveRoute 'login'}}active{{/if}}"): i.fa.fa-fw.fa-user
+  else
+    if loggingIn
+      a.info-link.user-account.loggingIn(href="#"): i.fa.fa-fw.fa-spin.fa-spinner
+    else
+      a.info-link.user-account(href="{{#if isActiveRoute 'login'}}{{pathFor 'index'}}{{else}}{{pathFor 'login'}}{{/if}}" class="{{#if isActiveRoute 'login'}}active{{/if}}"): i.fa.fa-fw.fa-sign-in

demo/client/styles.css demo/client/styles/styles.css

@@ -0,0 +1,35 @@
+Template.login.onCreated ->
+  self = @
+  @serviceConfiguration = new ReactiveVar {}
+  Meteor.call 'getServiceConfiguration', (error, serviceConfiguration) ->
+    if error
+      console.error error
+    else
+      self.serviceConfiguration.set serviceConfiguration
+    return
+  return
+
+Template.login.helpers
+  serviceConfiguration: -> Template.instance().serviceConfiguration.get()
+
+Template.login.events
+  'click #logout': (e) ->
+    e.preventDefault()
+    Meteor.logout()
+    return
+  'click #withMeteor': (e) ->
+    e.preventDefault()
+    Meteor.loginWithMeteorDeveloperAccount()
+    return
+  'click #withGitHub': (e) ->
+    e.preventDefault()
+    Meteor.loginWithGithub()
+    return
+  'click #withTwitter': (e) ->
+    e.preventDefault()
+    Meteor.loginWithTwitter({}) # Won't work without argument
+    return
+  'click #withFacebook': (e) ->
+    e.preventDefault()
+    Meteor.loginWithFacebook({}) # Whoot?! Docs?
+    return

demo/client/styles.sass demo/client/styles/styles.sass

@@ -0,0 +1,21 @@
+template(name="login")
+  if currentUser
+    .col-50._login: .sm-row
+      h1.files-note {{currentUser.profile.name}}
+      h1.files-note
+        +logout
+  else
+    if loggingIn
+      +_loading
+    else
+      .col-50._login: .sm-row
+        h1.files-note Login via:
+        h1.files-note.login-options
+          if serviceConfiguration.meteor
+            a#withMeteor(href="#"): img(src="https://worldvectorlogo.com/logos/meteor-icon.svg")
+          if serviceConfiguration.github
+            a#withGitHub(href="#"): i.fa.fa-lg.fa-fw.fa-github
+          if serviceConfiguration.twitter
+            a#withTwitter(href="#"): i.fa.fa-lg.fa-fw.fa-twitter
+          if serviceConfiguration.facebook
+            a#withFacebook(href="#"): i.fa.fa-lg.fa-fw.fa-facebook-official

demo/client/upload-form.coffee demo/client/upload/upload-form.coffee

@@ -0,0 +1,5 @@
+Template.logout.events
+  'click #logout': (e) ->
+    e.preventDefault()
+    Meteor.logout()
+    return

demo/client/upload-form.jade demo/client/upload/upload-form.jade

@@ -0,0 +1,2 @@
+template(name="logout")
+  a#logout(href="#"): i.fa.fa-fw.fa-sign-out

demo/client/upload-row.coffee demo/client/upload/upload-row.coffee

@@ -0,0 +1,46 @@
+_sc = {}
+ServiceConfiguration.configurations.remove {}
+
+if process.env['ACCOUNTS_METEOR_ID'] and process.env['ACCOUNTS_METEOR_SEC']
+  _sc.meteor = true
+  ServiceConfiguration.configurations.upsert
+    service: 'meteor-developer'
+  ,
+    $set:
+      secret: process.env['ACCOUNTS_METEOR_SEC']
+      clientId: process.env['ACCOUNTS_METEOR_ID']
+      loginStyle: 'popup'
+
+if process.env['ACCOUNTS_GITHUB_ID'] and process.env['ACCOUNTS_GITHUB_SEC']
+  _sc.github = true
+  ServiceConfiguration.configurations.upsert
+    service: 'github'
+  ,
+    $set:
+      secret: process.env['ACCOUNTS_GITHUB_SEC']
+      clientId: process.env['ACCOUNTS_GITHUB_ID']
+      loginStyle: 'popup'
+
+if process.env['ACCOUNTS_TWITTER_ID'] and process.env['ACCOUNTS_TWITTER_SEC']
+  _sc.twitter = true
+  ServiceConfiguration.configurations.upsert
+    service: 'twitter'
+  ,
+    $set:
+      loginStyle: 'popup'
+      secret: process.env['ACCOUNTS_TWITTER_SEC']
+      consumerKey: process.env['ACCOUNTS_TWITTER_ID'] # consumerKey, really?! F*** this should be in docs
+
+if process.env['ACCOUNTS_FACEBOOK_ID'] and process.env['ACCOUNTS_FACEBOOK_SEC']
+  _sc.facebook = true
+  ServiceConfiguration.configurations.upsert
+    service: 'facebook'
+  ,
+    $set:
+      secret: process.env['ACCOUNTS_FACEBOOK_SEC']
+      appId: process.env['ACCOUNTS_FACEBOOK_ID'] # appId, really?! F*** this should be in docs
+      loginStyle: 'popup'
+
+Meteor.methods
+  'getServiceConfiguration': ->
+    return _sc