v0.78

"DANGER" data loss warning to bigger text.
- Fix scroll board when opening cardDetails
2026-11-05 21:44:59 -05:00 · 2018-03-17 09:34:57 +02:00 · 2018-03-17 09:20:12 +02:00 · 2018-03-17 09:18:31 +02:00 · 2018-03-17 08:49:22 +02:00 · 2018-03-17 08:48:55 +02:00
266 changed files with 33733 additions and 3793 deletions
@@ -0,0 +1,10 @@
+# EditorConfig is awesome: http://EditorConfig.org
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
@@ -1,158 +0,0 @@
-ecmaFeatures:
-  experimentalObjectRestSpread: true
-rules:
-  indent:
-    - 2
-    - 2
-  semi:
-    - 2
-    - always
-  comma-dangle:
-    - 2
-    - always-multiline
-  no-inner-declarations:
-    - 0
-  dot-notation:
-    - 2
-  eqeqeq:
-    - 2
-  no-eval:
-    - 2
-  radix:
-    - 2
-
-  # Stylistic Issues
-  camelcase:
-    - 2
-  comma-spacing:
-    - 2
-  comma-style:
-    - 2
-  new-parens:
-    - 2
-  no-lonely-if:
-    - 2
-  no-multiple-empty-lines:
-    - 2
-  no-nested-ternary:
-    - 2
-  linebreak-style:
-    - 2
-    - unix
-  quotes:
-    - 2
-    - single
-  semi-spacing:
-    - 2
-  spaced-comment:
-    - 2
-    - always
-    - markers:
-      - '/'
-  space-unary-ops:
-    - 2
-
-  # ECMAScript 6
-  arrow-parens:
-    - 2
-  arrow-spacing:
-    - 2
-  no-class-assign:
-    - 2
-  no-dupe-class-members:
-    - 2
-  no-var:
-    - 2
-  object-shorthand:
-    - 2
-  prefer-const:
-    - 2
-  prefer-template:
-    - 2
-  prefer-spread:
-    - 2
-globals:
-  # Meteor globals
-  Meteor: false
-  DDP: false
-  Mongo: false
-  Session: false
-  Accounts: false
-  Template: false
-  Blaze: false
-  UI: false
-  Match: false
-  check: false
-  Tracker: false
-  Deps: false
-  ReactiveVar: false
-  EJSON: false
-  HTTP: false
-  Email: false
-  Assets: false
-  Handlebars: false
-  Package: false
-  App: false
-  Npm: false
-  Tinytest: false
-  Random: false
-  HTML: false
-
-  # Exported by packages we use
-  '$': false
-  _: false
-  autosize: false
-  Avatar: true
-  Avatars: true
-  BlazeComponent: false
-  BlazeLayout: false
-  ESSearchResults: false
-  FlowRouter: false
-  FS: false
-  getSlug: false
-  Migrations: false
-  Mousetrap: false
-  Picker: false
-  Presence: true
-  presences: true
-  Ps: true
-  ReactiveTabs: false
-  SimpleSchema: false
-  SubsManager: false
-  T9n: false
-  TAPi18n: false
-
-  # Our collections
-  AccountsTemplates: true
-  Activities: true
-  Attachments: true
-  Boards: true
-  CardComments: true
-  Cards: true
-  Lists: true
-  UnsavedEditCollection: true
-  Users: true
-
-  # Our objects
-  CSSEvents: true
-  EscapeActions: true
-  Filter: true
-  Filter: true
-  Mixins: true
-  Modal: true
-  MultiSelection: true
-  Popup: true
-  Sidebar: true
-  Utils: true
-  InlinedForm: true
-  UnsavedEdits: true
-
-  # XXX Temp, we should remove these
-  allowIsBoardAdmin: true
-  allowIsBoardMember: true
-  Emoji: true
-env:
-  es6: true
-  node: true
-  browser: true
-extends: 'eslint:recommended'
@@ -0,0 +1,136 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "rules": {
+    "strict": 0,
+    "no-undef": 2,
+    "accessor-pairs": 2,
+    "comma-dangle": [2, "always-multiline"],
+    "consistent-return": 2,
+    "dot-notation": 2,
+    "eqeqeq": 2,
+    "indent": [2, 2],
+    "no-cond-assign": 2,
+    "no-constant-condition": 2,
+    "no-eval": 2,
+    "no-inner-declarations": [0],
+    "no-unneeded-ternary": 2,
+    "radix": 2,
+    "semi": [2, "always"],
+    "camelcase": [2, {"properties": "never"}],
+    "comma-spacing": 2,
+    "comma-style": 2,
+    "eol-last": 2,
+    "linebreak-style": [2, "unix"],
+    "new-parens": 2,
+    "no-lonely-if": 2,
+    "no-multiple-empty-lines": 2,
+    "no-nested-ternary": 2,
+    "no-spaced-func": 2,
+    "no-trailing-spaces": 2,
+    "operator-linebreak": 2,
+    "quotes": [2, "single"],
+    "semi-spacing": 2,
+    "space-unary-ops": 2,
+    "arrow-parens": 2,
+    "arrow-spacing": 2,
+    "no-class-assign": 2,
+    "no-dupe-class-members": 2,
+    "no-var": 2,
+    "object-shorthand": 2,
+    "prefer-const": 2,
+    "prefer-spread": 2,
+    "prefer-template": 2,
+    "no-unused-vars" : "warn"
+  },
+  "globals": {
+    "Meteor": false,
+    "Session": false,
+    "HTML": false,
+    "check": false,
+    "Tracker": false,
+    "Blaze": false,
+    "Accounts": false,
+    "Match": false,
+    "Mongo": false,
+    "Random": false,
+    "ReactiveVar": false,
+    "Email": false,
+    "Template": false,
+    "$": false,
+    "_": false,
+    "autosize": false,
+    "Avatar": true,
+    "Avatars": true,
+    "BlazeComponent": false,
+    "BlazeLayout": false,
+    "CollectionHooks": false,
+    "DocHead": false,
+    "ESSearchResults": false,
+    "FastRender": false,
+    "FlowRouter": false,
+    "FS": false,
+    "getSlug": false,
+    "Migrations": false,
+    "moment": false,
+    "Mousetrap": false,
+    "Picker": false,
+    "Presence": true,
+    "presences": true,
+    "Ps": true,
+    "ReactiveTabs": false,
+    "Restivus": false,
+    "SimpleSchema": false,
+    "SubsManager": false,
+    "T9n": false,
+    "TAPi18n": false,
+    "AccountsTemplates": true,
+    "Activities": true,
+    "Attachments": true,
+    "Boards": true,
+    "CardComments": true,
+    "Cards": true,
+    "Lists": true,
+    "UnsavedEditCollection": true,
+    "Users": true,
+    "CSSEvents": true,
+    "EscapeActions": true,
+    "Filter": true,
+    "Mixins": true,
+    "Modal": true,
+    "MultiSelection": true,
+    "Popup": true,
+    "Sidebar": true,
+    "Utils": true,
+    "InlinedForm": true,
+    "UnsavedEdits": true,
+    "Notifications": true,
+    "allowIsBoardAdmin": true,
+    "allowIsBoardMember": true,
+    "allowIsBoardMemberByCard": true,
+    "allowIsBoardMemberNonComment": true,
+    "Emoji": true,
+    "Checklists": true,
+    "Settings": true,
+    "InvitationCodes": true,
+    "JsonRoutes": true,
+    "Authentication": true,
+    "Integrations": true,
+    "HTTP": true,
+    "AccountSettings": true,
+    "Announcements": true,
+    "Swimlanes": true,
+    "Npm": true
+  }
+}
@@ -0,0 +1,16 @@
+## Issue
+**Impacted version**: xxxx
+
+**Server Setup Information**:
+
+* Operating System:
+* Deployment Method(tar/sandstorm/snap/docker/etc /http frontend (nginx, httpd, ...)):
+* Node Version:
+* MongoDB Version:
+* ROOT_URL environment variable (Is there a subfolder?):
+
+**Problem description**:
+- *be as explicit as you can*
+- *describe the problem and its symptoms*
+- *explain how to reproduce*
+- *attach whatever information that can help understanding the context (screen capture, log files)*
@@ -1,6 +1,17 @@
 *~
 *.swp
 .meteor-spk
-.tx/
 *.sublime-workspace
 tmp/
+node_modules/
+.vscode/
+.idea/
+.build/*
+packages/kadira-flow-router/
+packages/meteor-useraccounts-core/
+package-lock.json
+**/parts/
+**/stage
+**/prime
+**/*.snap
+snap/.snapcraft/
@@ -6,3 +6,13 @@ notices-for-0.9.0
 notices-for-0.9.1
 0.9.4-platform-file
 notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.3.5-remove-old-dev-bundle-link
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package
@@ -1 +1,2 @@
+dev_bundle
 local
@@ -1 +0,0 @@
-
@@ -2,54 +2,50 @@
 #
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
-#
-# XXX Should we replace tmeasday:presence by 3stack:presence? Or maybe the
-# packages will merge in the future?

-meteor-base
+meteor-base@1.2.0

 # Build system
-ecmascript
-standard-minifiers
+ecmascript@0.9.0
+stylus@2.513.13
+standard-minifier-css@1.3.5
+standard-minifier-js@2.2.0
 mquandalle:jade
-mquandalle:stylus

 # Polyfills
-es5-shim
+es5-shim@4.6.15

 # Collections
-mongo
 aldeed:collection2
-cfs:gridfs
 cfs:standard-packages
+cottz:publish-relations
 dburles:collection-helpers
 idmontie:migrations
 matb33:collection-hooks
 matteodem:easy-search
-reywood:publish-composite
+mongo@1.3.1
+mquandalle:collection-mutations

 # Account system
-accounts-password
 kenton:accounts-sandstorm
-service-configuration
-useraccounts:core
+service-configuration@1.0.11
 useraccounts:unstyled
 useraccounts:flow-routing

 # Utilities
-check
-jquery
-random
-reactive-dict
-session
-tracker
-underscore
+check@1.2.5
+jquery@1.11.10
+random@1.0.10
+reactive-dict@1.2.0
+session@1.1.7
+tracker@1.1.3
+underscore@1.0.10
 3stack:presence
 alethes:pages
 arillo:flow-router-helpers
-audit-argument-checks
+audit-argument-checks@1.0.7
 kadira:blaze-layout
-kadira:flow-router
+kadira:dochead
 meteorhacks:picker
 meteorhacks:subs-manager
 mquandalle:autofocus
@@ -57,18 +53,32 @@ mquandalle:moment
 ongoworks:speakingurl
 raix:handlebar-helpers
 tap:i18n
+http@1.3.0

 # UI components
 blaze
-reactive-var
+reactive-var@1.0.11
 fortawesome:fontawesome
 mousetrap:mousetrap
 mquandalle:jquery-textcomplete
 mquandalle:jquery-ui-drag-drop-sort
 mquandalle:mousetrap-bindglobal
 mquandalle:perfect-scrollbar
-peerlibrary:blaze-components
+peerlibrary:blaze-components@=0.15.1
 perak:markdown
-seriousm:emoji-continued
 templates:tabs
 verron:autosize
+simple:json-routes
+rajit:bootstrap3-datepicker
+shell-server@0.3.0
+simple:rest-accounts-password
+useraccounts:core
+email@1.2.3
+horka:swipebox
+dynamic-import@0.2.0
+staringatlights:fast-render
+staringatlights:flow-router
+
+mixmax:smart-disconnect
+accounts-password@1.5.0
+cfs:gridfs
@@ -1 +1 @@
-METEOR@1.2-rc.12
+METEOR@1.6.0.1
@@ -1,140 +1,172 @@
-3stack:presence@1.0.3
-accounts-base@1.2.1-rc.2
-accounts-password@1.1.2-rc.1
-aldeed:collection2@2.5.0
-aldeed:simple-schema@1.3.3
-alethes:pages@1.8.4
-arillo:flow-router-helpers@0.4.5
-audit-argument-checks@1.0.4-rc.0
-autoupdate@1.2.3-rc.1
-babel-compiler@5.8.22-rc.1
-babel-runtime@0.1.4-rc.0
-base64@1.0.4-rc.0
-binary-heap@1.0.4-rc.0
-blaze@2.1.3-rc.0
-blaze-tools@1.0.4-rc.0
-boilerplate-generator@1.0.4-rc.1
-caching-compiler@1.0.0-rc.0
-caching-html-compiler@1.0.1-rc.0
-callback-hook@1.0.4-rc.0
+3stack:presence@1.1.2
+accounts-base@1.4.0
+accounts-password@1.5.0
+aldeed:collection2@2.10.0
+aldeed:collection2-core@1.2.0
+aldeed:schema-deny@1.1.0
+aldeed:schema-index@1.1.1
+aldeed:simple-schema@1.5.3
+alethes:pages@1.8.6
+allow-deny@1.1.0
+arillo:flow-router-helpers@0.5.2
+audit-argument-checks@1.0.7
+autoupdate@1.3.12
+babel-compiler@6.24.7
+babel-runtime@1.1.1
+base64@1.0.10
+binary-heap@1.0.10
+blaze@2.3.2
+blaze-tools@1.0.10
+boilerplate-generator@1.3.1
+caching-compiler@1.1.9
+caching-html-compiler@1.1.2
+callback-hook@1.0.10
 cfs:access-point@0.1.49
 cfs:base-package@0.0.30
 cfs:collection@0.5.5
 cfs:collection-filters@0.2.4
 cfs:data-man@0.0.6
 cfs:file@0.1.17
-cfs:gridfs@0.0.33
-cfs:http-methods@0.0.29
+cfs:gridfs@0.0.34
+cfs:http-methods@0.0.32
 cfs:http-publish@0.0.13
 cfs:power-queue@0.9.11
 cfs:reactive-list@0.0.9
 cfs:reactive-property@0.0.4
 cfs:standard-packages@0.5.9
-cfs:storage-adapter@0.2.2
+cfs:storage-adapter@0.2.3
 cfs:tempstore@0.1.5
 cfs:upload-http@0.0.20
 cfs:worker@0.1.4
-check@1.0.6-rc.0
-coffeescript@1.0.8-rc.3
-cosmos:browserify@0.5.0
-dburles:collection-helpers@1.0.3
-ddp@1.2.1-rc.0
-ddp-client@1.2.1-rc.1
-ddp-common@1.2.1-rc.0
-ddp-rate-limiter@1.0.0-rc.0
-ddp-server@1.2.1-rc.1
-deps@1.0.8-rc.0
-diff-sequence@1.0.1-rc.0
-ecmascript@0.1.3-rc.2
-ecmascript-collections@0.1.5-rc.1
-ejson@1.0.7-rc.0
-email@1.0.7-rc.0
-es5-shim@0.1.0-rc.0
-fastclick@1.0.7-rc.0
-fortawesome:fontawesome@4.4.0
-geojson-utils@1.0.4-rc.0
-hot-code-push@1.0.0-rc.0
-html-tools@1.0.5-rc.0
-htmljs@1.0.5-rc.1
-http@1.1.1-rc.1
-id-map@1.0.4-rc.0
-idmontie:migrations@1.0.0
-jquery@1.11.4-rc.0
-kadira:blaze-layout@2.1.0
-kadira:flow-router@2.5.0
-kenton:accounts-sandstorm@0.1.4
-launch-screen@1.0.3-rc.1
-less@2.5.0-rc.3_1
-livedata@1.0.14-rc.0
-localstorage@1.0.4-rc.0
-logging@1.0.8-rc.1
-matb33:collection-hooks@0.8.0
-matteodem:easy-search@1.6.3
-meteor@1.1.7-rc.1
-meteor-base@1.0.1-rc.0
-meteor-platform@1.2.3-rc.0
+check@1.2.5
+chuangbo:cookie@1.1.0
+coffeescript@1.12.7_3
+coffeescript-compiler@1.12.7_3
+cottz:publish-relations@2.0.8
+dburles:collection-helpers@1.1.0
+ddp@1.4.0
+ddp-client@2.2.0
+ddp-common@1.3.0
+ddp-rate-limiter@1.0.7
+ddp-server@2.1.1
+deps@1.0.12
+diff-sequence@1.0.7
+dynamic-import@0.2.1
+ecmascript@0.9.0
+ecmascript-runtime@0.5.0
+ecmascript-runtime-client@0.5.0
+ecmascript-runtime-server@0.5.0
+ejson@1.1.0
+email@1.2.3
+es5-shim@4.6.15
+fastclick@1.0.13
+fortawesome:fontawesome@4.7.0
+geojson-utils@1.0.10
+horka:swipebox@1.0.2
+hot-code-push@1.0.4
+html-tools@1.0.11
+htmljs@1.0.11
+http@1.3.0
+id-map@1.0.9
+idmontie:migrations@1.0.3
+jquery@1.11.10
+kadira:blaze-layout@2.3.0
+kadira:dochead@1.5.0
+kadira:flow-router@2.12.1
+kenton:accounts-sandstorm@0.7.0
+launch-screen@1.1.1
+livedata@1.0.18
+localstorage@1.2.0
+logging@1.1.19
+matb33:collection-hooks@0.8.4
+matteodem:easy-search@1.6.4
+mdg:validation-error@0.5.1
+meteor@1.8.2
+meteor-base@1.2.0
+meteor-platform@1.2.6
 meteorhacks:aggregate@1.3.0
 meteorhacks:collection-utils@1.2.0
+meteorhacks:meteorx@1.4.1
 meteorhacks:picker@1.0.3
-meteorhacks:subs-manager@1.6.2
+meteorhacks:subs-manager@1.6.4
 meteorspark:util@0.2.0
-minifiers@1.1.6-rc.1
-minimongo@1.0.9-rc.0
-mobile-status-bar@1.0.5-rc.1
-mongo@1.1.1-rc.3
-mongo-id@1.0.1-rc.0
-mongo-livedata@1.0.9-rc.0
+minifier-css@1.2.16
+minifier-js@2.2.2
+minifiers@1.1.8-faster-rebuild.0
+minimongo@1.4.3
+mixmax:smart-disconnect@0.0.4
+mobile-status-bar@1.0.14
+modules@0.11.0
+modules-runtime@0.9.1
+mongo@1.3.1
+mongo-dev-server@1.1.0
+mongo-id@1.0.6
+mongo-livedata@1.0.12
 mousetrap:mousetrap@1.4.6_1
 mquandalle:autofocus@1.0.0
-mquandalle:jade@0.4.3_1
-mquandalle:jade-compiler@0.4.3
-mquandalle:jquery-textcomplete@0.3.9_1
-mquandalle:jquery-ui-drag-drop-sort@0.1.0
-mquandalle:moment@1.0.0
+mquandalle:collection-mutations@0.1.0
+mquandalle:jade@0.4.9
+mquandalle:jade-compiler@0.4.5
+mquandalle:jquery-textcomplete@0.8.0_1
+mquandalle:jquery-ui-drag-drop-sort@0.2.0
+mquandalle:moment@1.0.1
 mquandalle:mousetrap-bindglobal@0.0.1
 mquandalle:perfect-scrollbar@0.6.5_2
-mquandalle:stylus@1.1.1
-npm-bcrypt@0.7.8_2
-npm-mongo@1.4.39-rc.0_1
-observe-sequence@1.0.7-rc.0
+npm-bcrypt@0.9.3
+npm-mongo@2.2.33
+observe-sequence@1.0.16
 ongoworks:speakingurl@1.1.0
-ordered-dict@1.0.4-rc.0
+ordered-dict@1.0.9
 peerlibrary:assert@0.2.5
-peerlibrary:base-component@0.10.0
-peerlibrary:blaze-components@0.13.0
+peerlibrary:base-component@0.16.0
+peerlibrary:blaze-components@0.15.1
+peerlibrary:computed-field@0.7.0
+peerlibrary:reactive-field@0.3.0
 perak:markdown@1.0.5
-promise@0.4.8-rc.0
+promise@0.10.0
 raix:eventemitter@0.1.3
-raix:handlebar-helpers@0.2.4
-random@1.0.4-rc.0
-rate-limit@1.0.0-rc.0
-reactive-dict@1.1.1-rc.0
-reactive-var@1.0.6-rc.0
-reload@1.1.4-rc.0
-retry@1.0.4-rc.0
-reywood:publish-composite@1.4.2
-routepolicy@1.0.6-rc.0
-seriousm:emoji-continued@1.4.0
-service-configuration@1.0.5-rc.0
-session@1.1.1-rc.0
-sha@1.0.4-rc.0
-softwarerero:accounts-t9n@1.1.4
-spacebars@1.0.7-rc.0
-spacebars-compiler@1.0.7-rc.0
-srp@1.0.4-rc.0
-standard-minifiers@1.0.0-rc.1
-tap:i18n@1.5.1
-templates:tabs@2.2.0
-templating@1.1.2-rc.4
-templating-tools@1.0.0-rc.0
-tracker@1.0.8-rc.0
-ui@1.0.7-rc.0
-underscore@1.0.4-rc.0
-url@1.0.5-rc.0
-useraccounts:core@1.12.3
-useraccounts:flow-routing@1.12.3
-useraccounts:unstyled@1.12.3
+raix:handlebar-helpers@0.2.5
+rajit:bootstrap3-datepicker@1.7.1
+random@1.0.10
+rate-limit@1.0.8
+reactive-dict@1.2.0
+reactive-var@1.0.11
+reload@1.1.11
+retry@1.0.9
+routepolicy@1.0.12
+service-configuration@1.0.11
+session@1.1.7
+sha@1.0.9
+shell-server@0.3.1
+simple:authenticate-user-by-token@1.0.1
+simple:json-routes@2.1.0
+simple:rest-accounts-password@1.1.2
+simple:rest-bearer-token-parser@1.0.1
+simple:rest-json-error-handler@1.0.1
+softwarerero:accounts-t9n@1.3.11
+spacebars@1.0.15
+spacebars-compiler@1.1.3
+srp@1.0.10
+standard-minifier-css@1.3.5
+standard-minifier-js@2.2.3
+staringatlights:fast-render@2.16.5
+staringatlights:flow-router@2.12.2
+staringatlights:inject-data@2.0.5
+stylus@2.513.13
+tap:i18n@1.8.2
+templates:tabs@2.3.0
+templating@1.3.2
+templating-compiler@1.3.3
+templating-runtime@1.3.2
+templating-tools@1.1.2
+tracker@1.1.3
+ui@1.0.13
+underscore@1.0.10
+url@1.1.0
+useraccounts:core@1.14.2
+useraccounts:flow-routing@1.14.2
+useraccounts:unstyled@1.14.2
 verron:autosize@3.0.8
-webapp@1.2.2-rc.2
-webapp-hashing@1.0.4-rc.0
+webapp@1.4.0
+webapp-hashing@1.0.9
 zimme:active-route@2.3.2
@@ -0,0 +1,32 @@
+dist: trusty
+sudo: required
+
+env:
+  TRAVIS_DOCKER_COMPOSE_VERSION: 1.17.0
+  TRAVIS_NODE_VERSION: 8.9.3
+  TRAVIS_NPM_VERSION: 5.5.1
+
+before_install:
+  - sudo apt-get update -y
+  - npm install -g npm@${TRAVIS_NPM_VERSION}
+  - sudo curl -fsSL https://get.docker.com/ | sh
+  - if [ -e /usr/local/bin/docker-compose ]; then sudo rm /usr/local/bin/docker-compose; fi
+  - sudo curl -L https://github.com/docker/compose/releases/download/${TRAVIS_DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > docker-compose
+  - sudo chmod +x docker-compose
+  - sudo mv docker-compose /usr/local/bin
+  - sudo docker-compose build --no-cache --force-rm
+  - sudo docker-compose up -d wekandb
+  - sudo docker-compose up -d wekan
+  # ^^ Note - need to come up with some way of checking the output from docker run
+  # that it was a success... perhaps the nodejs server can output a success message?
+
+language: node_js
+
+node_js:
+  - "${TRAVIS_NODE_VERSION}"
+
+install:
+  - "npm install"
+
+script:
+  - "npm test"
@@ -0,0 +1,55 @@
+# This is the configuration of the Transifex tool that we use to manage the
+# translations on Wekan. Documentation at: http://docs.transifex.com/client.
+#
+# Push
+# ====
+#
+# It is recommended that contributors use the Transifex web UI to create and
+# edit translated strings. However in case a contributor has directly jumped
+# into the code and made its translations in the corresponding i18n.json file
+# we can push it using
+#
+# > tx push -t -l ar
+#
+# Where `ar` is the language identifier. In addition, the project maintainer
+# should push the English source file to Transifex at least before each release
+# candidate using:
+#
+# > tx push -s
+#
+# Pull
+# ====
+#
+# The set of accepted language is directly managed in Transifex, the only
+# restriction we define to bundle a new language in the application, is that its
+# completion is at least at 75%.
+#
+# We use:
+#
+# > tx pull
+#
+# to download new versions of existing translations, and
+#
+# > tx pull -a --minimum-perc=75
+#
+# to download new sufficiently advanced translations.
+
+[main]
+host = https://www.transifex.com
+# tap:i18n requires us to use `-` separator in the language identifiers whereas
+# Transifex uses a `_` separator, without an option to customize it on one side
+# or the other, so we need to do a Manual mapping.
+lang_map = bg_BG:bg, en_GB:en-GB, es_AR:es-AR, el_GR:el, fi_FI:fi, hu_HU:hu, id_ID:id, mn_MN:mn, no:nb, lv_LV:lv, pt_BR:pt-BR, ro_RO:ro, zh_CN:zh-CN, zh_TW:zh-TW
+
+[wekan.application]
+file_filter = i18n/<lang>.i18n.json
+source_lang = en
+type = KEYVALUEJSON
+
+# We might have a dedicated second resource later to translate the “Welcome
+# Board” data.
+#
+# [wekan.welcomeBoard]
+# file_filter = private/welcomeBoard/<lang>.json
+# source_lang = en
+# type = KEYVALUEJSON
@@ -0,0 +1,12 @@
+{
+  "editor.tabSize": 2,
+  "editor.rulers": [80],
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "node_modules": true,
+    ".meteor/local": true
+  }
+}
@@ -1,56 +1,5 @@
 # Contributing

-We’re glad you’re interested in helping the Wekan project! We welcome bug
-reports, enhancement ideas, and pull requests, in our GitHub bug tracker. Before
-opening a new thread please verify that your issue hasn’t already been reported.
+Please see wiki for all documentation:

-<https://github.com/wekan/wekan>
-
-## Translations
-
-You are encouraged to translate (or improve the translation of) Wekan in your
-locale language. For that purpose we rely on
-[Transifex](https://www.transifex.com/projects/p/wekan). So the first step is to
-create a Transifex account if you don’t have one already. You can then send a
-request to join one of the translation teams. If there we will create a new one.
-
-Once you are in a team you can start translating the application. Please take a
-look at the glossary so you can agree with other (present and future)
-contributors on words to use to translate key concepts in the application like
-“boards” and “cards”.
-
-The original application is written in English, and if you want to contribute to
-the application itself, you are asked to fill the `i18n/en.i18n.json` file. When
-you do that the new strings of text to translate automatically appears on
-Transifex to be translated (the refresh may take a few hours).
-
-We pull all translations from Transifex before every new Wekan release
-candidate, ask the translators to review the app, and pull all translations
-again for the final release.
-
-## Installation
-
-Wekan is made with [Meteor](https://www.meteor.com). Thus the easiest way to
-start hacking is by installing the framework, cloning the git repository, and
-launching the application:
-
-```bash
-$ curl https://install.meteor.com/ | sh # On Mac or Linux
-$ git clone https://github.com/wekan/wekan.git
-$ cd wekan
-$ meteor
-```
-
-As for any Meteor application, Wekan is automatically refreshed when you change
-any file of the source code, just play with it to see how it behaves!
-
-## Style guide
-
-We follow the
-[meteor style guide](https://github.com/meteor/meteor/wiki/Meteor-Style-Guide).
-
-Please read the meteor style guide before making any significant contribution.
-
-## Code organisation
-
-TODO
+<https://github.com/wekan/wekan/wiki>
@@ -1,7 +1,134 @@
-FROM meteorhacks/meteord:onbuild
-MAINTAINER Maxime Quandalle <maxime@quandalle.com>
+FROM debian:buster-slim
+MAINTAINER wekan

-# Run as you wish!
-# docker run -d --name wekan-db mongo
-# docker run -d --link "wekan-db:db" -e "MONGO_URL=mongodb://db" \
-#   -e "ROOT_URL=http://example.com" -p 8080:80 mquandalle/wekan
+# Declare Arguments
+ARG NODE_VERSION
+ARG METEOR_RELEASE
+ARG METEOR_EDGE
+ARG USE_EDGE
+ARG NPM_VERSION
+ARG FIBERS_VERSION
+ARG ARCHITECTURE
+ARG SRC_PATH
+
+# Set the environment variables (defaults where required)
+# paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
+ENV BUILD_DEPS="apt-utils gnupg gosu wget curl bzip2 build-essential python git ca-certificates gcc-7 paxctl"
+ENV NODE_VERSION ${NODE_VERSION:-v8.9.3}
+ENV METEOR_RELEASE ${METEOR_RELEASE:-1.6.0.1}
+ENV USE_EDGE ${USE_EDGE:-false}
+ENV METEOR_EDGE ${METEOR_EDGE:-1.5-beta.17}
+ENV NPM_VERSION ${NPM_VERSION:-5.5.1}
+ENV FIBERS_VERSION ${FIBERS_VERSION:-2.0.0}
+ENV ARCHITECTURE ${ARCHITECTURE:-linux-x64}
+ENV SRC_PATH ${SRC_PATH:-./}
+
+# Copy the app to the image
+COPY ${SRC_PATH} /home/wekan/app
+
+RUN \
+    # Add non-root user wekan
+    useradd --user-group --system --home-dir /home/wekan wekan && \
+    \
+    # OS dependencies
+    apt-get update -y && apt-get install -y --no-install-recommends ${BUILD_DEPS} && \
+    \
+    # Download nodejs
+    wget https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    wget https://nodejs.org/dist/${NODE_VERSION}/SHASUMS256.txt.asc && \
+    \
+    # Verify nodejs authenticity
+    grep ${NODE_VERSION}-${ARCHITECTURE}.tar.gz SHASUMS256.txt.asc | shasum -a 256 -c - && \
+    export GNUPGHOME="$(mktemp -d)" && \
+    \
+    # Try other key servers if ha.pool.sks-keyservers.net is unreachable
+    # Code from https://github.com/chorrell/docker-node/commit/2b673e17547c34f17f24553db02beefbac98d23c
+    # gpg keys listed at https://github.com/nodejs/node#release-team
+    # and keys listed here from previous version of this Dockerfile
+    for key in \
+    9554F04D7259F04124DE6B476D5A82AC7E37093B \
+    94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
+    FD3A5288F042B6850C66B31F09FE44734EB7990E \
+    71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
+    DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
+    C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
+    B9AE9905FFD7803F25714661B63B535A4C206CA9 \
+    ; do \
+    gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key" || \
+    gpg --keyserver pgp.mit.edu --recv-keys "$key" || \
+    gpg --keyserver keyserver.pgp.com --recv-keys "$key" ; \
+    done && \
+    gpg --verify SHASUMS256.txt.asc && \
+    # Ignore socket files then delete files then delete directories
+    find "$GNUPGHOME" -type f | xargs rm -f && \
+    find "$GNUPGHOME" -type d | xargs rm -fR && \
+    rm -f SHASUMS256.txt.asc && \
+    \
+    # Install Node
+    tar xvzf node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    rm node-${NODE_VERSION}-${ARCHITECTURE}.tar.gz && \
+    mv node-${NODE_VERSION}-${ARCHITECTURE} /opt/nodejs && \
+    ln -s /opt/nodejs/bin/node /usr/bin/node && \
+    ln -s /opt/nodejs/bin/npm /usr/bin/npm && \
+    \
+    # paxctl fix for alpine linux: https://github.com/wekan/wekan/issues/1303
+    paxctl -mC `which node` && \
+    \
+    # Install Node dependencies
+    npm install -g npm@${NPM_VERSION} && \
+    npm install -g node-gyp && \
+    npm install -g fibers@${FIBERS_VERSION} && \
+    \
+    # Change user to wekan and install meteor
+    cd /home/wekan/ && \
+    chown wekan:wekan --recursive /home/wekan && \
+    curl https://install.meteor.com -o /home/wekan/install_meteor.sh && \
+    sed -i "s|RELEASE=.*|RELEASE=${METEOR_RELEASE}\"\"|g" ./install_meteor.sh && \
+    echo "Starting meteor ${METEOR_RELEASE} installation...   \n" && \
+    chown wekan:wekan /home/wekan/install_meteor.sh && \
+    \
+    # Check if opting for a release candidate instead of major release
+    if [ "$USE_EDGE" = false ]; then \
+      gosu wekan:wekan sh /home/wekan/install_meteor.sh; \
+    else \
+      gosu wekan:wekan git clone --recursive --depth 1 -b release/METEOR@${METEOR_EDGE} git://github.com/meteor/meteor.git /home/wekan/.meteor; \
+    fi; \
+    \
+    # Get additional packages
+    mkdir -p /home/wekan/app/packages && \
+    chown wekan:wekan --recursive /home/wekan && \
+    cd /home/wekan/app/packages && \
+    gosu wekan:wekan git clone --depth 1 -b master git://github.com/wekan/flow-router.git kadira-flow-router && \
+    gosu wekan:wekan git clone --depth 1 -b master git://github.com/meteor-useraccounts/core.git meteor-useraccounts-core && \
+    sed -i 's/api\.versionsFrom/\/\/api.versionsFrom/' /home/wekan/app/packages/meteor-useraccounts-core/package.js && \
+    cd /home/wekan/.meteor && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor -- help; \
+    \
+    # Build app
+    cd /home/wekan/app && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor add standard-minifier-js && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor npm install && \
+    gosu wekan:wekan /home/wekan/.meteor/meteor build --directory /home/wekan/app_build && \
+    cp /home/wekan/app/fix-download-unicode/cfs_access-point.txt /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
+    chown wekan:wekan /home/wekan/app_build/bundle/programs/server/packages/cfs_access-point.js && \
+    cd /home/wekan/app_build/bundle/programs/server/npm/node_modules/meteor/npm-bcrypt && \
+    gosu wekan:wekan rm -rf node_modules/bcrypt && \
+    gosu wekan:wekan npm install bcrypt && \
+    cd /home/wekan/app_build/bundle/programs/server/ && \
+    gosu wekan:wekan npm install && \
+    gosu wekan:wekan npm install bcrypt && \
+    mv /home/wekan/app_build/bundle /build && \
+    \
+    # Cleanup
+    apt-get remove --purge -y ${BUILD_DEPS} && \
+    apt-get autoremove -y && \
+    rm -R /var/lib/apt/lists/* && \
+    rm -R /home/wekan/.meteor && \
+    rm -R /home/wekan/app && \
+    rm -R /home/wekan/app_build && \
+    rm /home/wekan/install_meteor.sh
+
+ENV PORT=80
+EXPOSE $PORT
+
+CMD ["node", "/build/main.js"]
@@ -1,79 +0,0 @@
-# NEXT — v0.9
-
-This release is a large re-write of the previous code base. Despite being
-relatively similar to v0.8 feature-wise, this release marks the beginning of our
-new user interface and continues to improve the overall performance and
-security. It also features the following improvements:
-
-* A new user account system, including the possibility to reset a forgotten
-  password, to change the password, or to enable email confirmation (all of
-  which were previously impossible);
-* Avatar customization, including the possibility to upload images and to choose
-  one from Gravatar or the user initials (on Sandstrom we use the avatar exposed
-  by Sandstorm);
-* Cards multi-selection to facilitate batch actions such as moving all the cards
-  of selection, or attaching a label or a member to them;
-* Automatic drafts saving synced with the server;
-* Keyboard navigation, press `?` to read the list of available shortcuts;
-* The possibility to restore archived boards, lists, and cards.
-
-Starting from this release we will also distribute official docker images on
-both the [GitHub release page](https://github.com/wekan/wekan/releases) and on
-the [DockerHub](https://hub.docker.com/r/mquandalle/wekan). We also configured
-Heroku one-click install and improved Sandstorm integration with the integration
-of its build-in sharing model.
-
-New languages supported: Chinese, Finnish, Spanish, Korean, and Russian.
-
-Special thanks to GitHub users ePirat, nata-goddanti, ocdtrekkie, and others who
-have supportive during this *traversée du desert*, and to neynah for the Wekan
-icons.
-
-# v0.8
-
-This release continues the implementation of basic features of a “kanban”
-software, especially:
-
-* Basic card attachments. If the attached file is an image we generate and
-  display a thumbnail that can be used as a card “cover” (visible in the board
-  general view);
-* User names mentions and auto-completion in card description and comments
-  (though we don’t have any notification system for now, making this feature a
-  less useful that it should);
-* Filter views, current filtering options are based on labels and assigned
-  members;
-* Labels creation and suppression at the board level (previously we had a fixed
-  list of labels);
-* Customization of the board background color.
-
-This release is also the first one to introduce localization of the user
-interface.
-
-New languages supported: French, German, Japanese, Portuguese, and Turkish.
-
-# v0.7.1
-
-This release fixes the following bugs:
-
-* Unexpected lost of the card sorting on the server side;
-* Fix a bug during board creation;
-* Focus the new list form if the board is empty.
-
-# v0.7
-
-This release starts the transition from a toy project to something useful. Along
-with some security and performance improvements (for instance, opening a card
-used to take a long time because it was re-generated the entire DOM whereas only
-the popover was new). New features includes:
-
-* Add and remove labels to cards;
-* Assign and unassign members to cards;
-* Archive cards (though restoration is not yet possible);
-* Board stars;
-* Markdown and emojies support in comments and card description;
-* Emojies auto-completion in the text editor;
-* Some keyboard shortcuts (eg `Ctrl`+`Enter` to submit a multi-line input).
-
-We also introduced basic support for the [Sandstorm](https://sandstorm.io)
-platform, and distribute a `spk` (Sandstorm PacKage) for this release and
-subsequent.
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2014-2015 Yasar Icli, Maxime Quandalle
+Copyright (c) 2014-2018 The Wekan Team

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -1,8 +1,24 @@
 # Wekan

-[![Join the chat][gitter_badge]][gitter_chat]
+[![Docker Repository on Quay](https://quay.io/repository/wekan/wekan/status "Docker Repository on Quay")](https://quay.io/repository/wekan/wekan)

-Wekan is an open-source and collaborative kanban board application.
+<!--
+[![Wekan Build Status][travis_badge]][travis_status]
+-->
+
+Freenode IRC #wekan
+
+[![Wekan chat][vanila_badge]][vanila_chat]
+
+[Translate Wekan at Transifex][translate_wekan]
+
+[Open Hub analysis of Wekan code](https://www.openhub.net/p/wekan)
+
+Please read [FAQ](https://github.com/wekan/wekan/wiki/FAQ).
+Please don't feed the trolls and spammers that are mentioned in the FAQ :)
+
+Wekan is an completely [Open Source][open_source] and [Free software][free_software]
+collaborative kanban board application with MIT license.

 Whether you’re maintaining a personal todo list, planning your holidays with
 some friends, or working in a team on your next revolutionary idea, Kanban
@@ -10,29 +26,77 @@ boards are an unbeatable tool to keep your things organized. They give you a
 visual overview of the current state of your project, and make you productive by
 allowing you to focus on the few items that matter the most.

-[![Our roadmap is self-hosted on Wekan][screenshot]][roadmap]
+Wekan has real-time user interface. Not all features are implemented.

-Wekan supports most features you would expect of it including a real-time user
-interface, cards comments, member assignations, customizable labels, filtered
-views, and more.
+[Features][features]

-Since it is a free software, you don’t have to trust us with your data and can
+Wekan supports many [Platforms][platforms], and plan is to add more.
+
+[Integrations][integrations]
+
+[Team](https://github.com/wekan/wekan/wiki/Team)
+
+You don’t have to trust us with your data and can install Wekan on your own
+computer or server. In fact we encourage you to do that by providing
+one-click installation on various platforms.
+
+## Roadmap
+
+[Roadmap](https://github.com/wekan/wekan/wiki/Roadmap)
+
+Upcoming Wekan App Development Platform will make possible
+many use cases. If you don't find your feature or integration in
+GitHub issues and [Features][features] or [Integrations][integrations]
+page at wiki, please add them.
+
+We are very welcoming to new developers and teams to submit new pull
+requests to devel branch to make this Wekan App Development Platform possible
+faster. Please see [Developer Documentation][dev_docs] to get started.
+We also welcome sponsors for features, although we don't have any yet.
+By working directly with Wekan you get the benefit of active maintenance
+and new features added by growing Wekan developer community.
+
+Actual work happens at [Wekan GitHub issues][wekan_issues].
+
+See [Development links on Wekan
+wiki](https://github.com/wekan/wekan/wiki#Development)
+bottom of the page for more info.
+
+## Demo
+
+[Wekan demo][roadmap_wefork]
+
+## Screenshot
+
+[More screenshots at Features page](https://github.com/wekan/wekan/wiki/Features)
+
+[![Screenshot of Wekan][screenshot_wefork]][roadmap_wefork]
+
+Since Wekan is a free software, you don’t have to trust us with your data and can
 install Wekan on your own computer or server. In fact we encourage you to do
-that by providing one-click installation on Heroku or [Sandstorm]
-[sandstorm_market] platforms and verified [Docker][docker_image] images.
+that by providing one-click installation on various platforms.

-[![Deploy][heroku_button]][heroku_deploy]
+## License

 Wekan is released under the very permissive [MIT license](LICENSE), and made
 with [Meteor](https://www.meteor.com).

-[Our roadmap is self-hosted on Wekan][roadmap]
-
-[screenshot]: http://i.imgur.com/cI4jW2h.png
-[gitter_badge]: https://badges.gitter.im/Join%20Chat.svg
-[gitter_chat]: https://gitter.im/wekan/wekan
-[roadmap]: http://try.wekan.io/b/MeSsFJaSqeuo9M6bs/wekan-roadmap
-[sandstorm_market]: https://oasis.sandstorm.io/appdemo/m86q05rdvj14yvn78ghaxynqz7u2svw6rnttptxx49g1785cdv1h
-[docker_image]: https://hub.docker.com/r/mquandalle/wekan/
-[heroku_button]: https://www.herokucdn.com/deploy/button.png
-[heroku_deploy]: https://heroku.com/deploy?template=https://github.com/wekan/wekan/tree/master
+[platforms]: https://github.com/wekan/wekan/wiki/Platforms
+[dev_docs]: https://github.com/wekan/wekan/wiki/Developer-Documentation
+[screenshot_wekan]: http://i.imgur.com/cI4jW2h.png
+[screenshot_wefork]: https://wekan.github.io/wekan-markdown.png
+[features]: https://github.com/wekan/wekan/wiki/Features
+[integrations]: https://github.com/wekan/wekan/wiki/Integrations
+[roadmap_wekan]: http://try.wekan.io/b/MeSsFJaSqeuo9M6bs/wekan-roadmap
+[roadmap_wefork]: https://wekan.indie.host/b/t2YaGmyXgNkppcFBq/wekan-fork-roadmap
+[wekan_issues]: https://github.com/wekan/wekan/issues
+[wefork_issues]: https://github.com/wefork/wekan/issues
+[docker_image]: https://hub.docker.com/r/wekanteam/wekan/
+[travis_badge]: https://travis-ci.org/wekan/wekan.svg?branch=devel
+[travis_status]: https://travis-ci.org/wekan/wekan
+[wekan_wiki]: https://github.com/wekan/wekan/wiki
+[translate_wekan]: https://www.transifex.com/wekan/wekan/
+[open_source]: https://en.wikipedia.org/wiki/Open-source_software
+[free_software]: https://en.wikipedia.org/wiki/Free_software
+[vanila_badge]: https://vanila.io/img/join-chat-button2.png
+[vanila_chat]: https://chat.vanila.io/channel/wekan
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+export PACKAGE_DIRS="$(pwd)/packages"
@@ -4,7 +4,7 @@
  "repository": "https://github.com/wekan/wekan",
  "logo": "https://raw.githubusercontent.com/wekan/wekan/master/meta/icons/wekan-150.png",
  "keywords": ["productivity", "tool", "team", "kanban"],
-  "website": "http://wekan.io",
+  "website": "https://wekan.github.io",
  "env": {
    "BUILDPACK_URL": "https://github.com/AdmitHub/meteor-buildpack-horse.git",
    "ROOT_URL": {
@@ -14,55 +14,85 @@ template(name="boardActivities")
      p.activity-desc
        +memberName(user=user)

-        if($eq activityType 'createBoard')
-          | {{_ 'activity-created' boardLabel}}.
-
-        if($eq activityType 'createList')
-          | {{_ 'activity-added' list.title boardLabel}}.
-
-        if($eq activityType 'archivedList')
-          | {{_ 'activity-archived' list.title}}.
-
-        if($eq activityType 'createCard')
-          | {{{_ 'activity-added' cardLink boardLabel}}}.
-
-        if($eq activityType 'archivedCard')
-          | {{{_ 'activity-archived' cardLink}}}.
-
-        if($eq activityType 'restoredCard')
-          | {{{_ 'activity-sent' cardLink boardLabel}}}.
-
-        if($eq activityType 'moveCard')
-          | {{{_ 'activity-moved' cardLink oldList.title list.title}}}.
+        if($eq activityType 'addAttachment')
+          | {{{_ 'activity-attached' attachmentLink cardLink}}}.

        if($eq activityType 'addBoardMember')
          | {{{_ 'activity-added' memberLink boardLabel}}}.

-        if($eq activityType 'removeBoardMember')
-          | {{{_ 'activity-excluded' memberLink boardLabel}}}.
-
-        if($eq activityType 'joinMember')
-          if($eq currentUser._id member._id)
-            | {{{_ 'activity-joined' cardLink}}}.
-          else
-            | {{{_ 'activity-added' memberLink cardLink}}}.
-
-        if($eq activityType 'unjoinMember')
-          if($eq currentUser._id member._id)
-            | {{{_ 'activity-unjoined' cardLink}}}.
-          else
-            | {{{_ 'activity-removed' memberLink cardLink}}}.
-
        if($eq activityType 'addComment')
          | {{{_ 'activity-on' cardLink}}}
          a.activity-comment(href="{{ card.absoluteUrl }}")
            +viewer
              = comment.text

-        if($eq activityType 'addAttachment')
-          | {{{_ 'activity-attached' attachmentLink cardLink}}}.
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklist.title

-        span.activity-meta {{ moment createdAt }}
+        if($eq activityType 'addChecklistItem')
+          | {{{_ 'activity-checklist-item-added' checklist.title cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklistItem.title
+
+        if($eq activityType 'archivedCard')
+          | {{{_ 'activity-archived' cardLink}}}.
+
+        if($eq activityType 'archivedList')
+          | {{_ 'activity-archived' list.title}}.
+
+        if($eq activityType 'archivedSwimlane')
+          | {{_ 'activity-archived' swimlane.title}}.
+
+        if($eq activityType 'createBoard')
+          | {{_ 'activity-created' boardLabel}}.
+
+        if($eq activityType 'createCard')
+          | {{{_ 'activity-added' cardLink boardLabel}}}.
+
+        if($eq activityType 'createList')
+          | {{_ 'activity-added' list.title boardLabel}}.
+
+        if($eq activityType 'createSwimlane')
+          | {{_ 'activity-added' swimlane.title boardLabel}}.
+
+        if($eq activityType 'removeList')
+          | {{_ 'activity-removed' title boardLabel}}.
+
+        if($eq activityType 'importBoard')
+          | {{{_ 'activity-imported-board' boardLabel sourceLink}}}.
+
+        if($eq activityType 'importCard')
+          | {{{_ 'activity-imported' cardLink boardLabel sourceLink}}}.
+
+        if($eq activityType 'importList')
+          | {{{_ 'activity-imported' listLabel boardLabel sourceLink}}}.
+
+        if($eq activityType 'joinMember')
+          if($eq user._id member._id)
+            | {{{_ 'activity-joined' cardLink}}}.
+          else
+            | {{{_ 'activity-added' memberLink cardLink}}}.
+
+        if($eq activityType 'moveCard')
+          | {{{_ 'activity-moved' cardLink oldList.title list.title}}}.
+
+        if($eq activityType 'removeBoardMember')
+          | {{{_ 'activity-excluded' memberLink boardLabel}}}.
+
+        if($eq activityType 'restoredCard')
+          | {{{_ 'activity-sent' cardLink boardLabel}}}.
+
+        if($eq activityType 'unjoinMember')
+          if($eq user._id member._id)
+            | {{{_ 'activity-unjoined' cardLink}}}.
+          else
+            | {{{_ 'activity-removed' memberLink cardLink}}}.
+
+        span(title=createdAt).activity-meta {{ moment createdAt }}

 template(name="cardActivities")
  each currentCard.activities
@@ -72,13 +102,15 @@ template(name="cardActivities")
        +memberName(user=user)
        if($eq activityType 'createCard')
          | {{_ 'activity-added' cardLabel list.title}}.
+        if($eq activityType 'importCard')
+          | {{{_ 'activity-imported' cardLabel list.title sourceLink}}}.
        if($eq activityType 'joinMember')
-          if($eq currentUser._id member._id)
+          if($eq user._id member._id)
            | {{_ 'activity-joined' cardLabel}}.
          else
-            | {{{_ 'activity-added' cardLabel memberLink}}}.
+            | {{{_ 'activity-added' memberLink cardLabel}}}.
        if($eq activityType 'unjoinMember')
-          if($eq currentUser._id member._id)
+          if($eq user._id member._id)
            | {{_ 'activity-unjoined' cardLabel}}.
          else
            | {{{_ 'activity-removed' cardLabel memberLink}}}.
@@ -92,6 +124,16 @@ template(name="cardActivities")
          | {{{_ 'activity-attached' attachmentLink cardLabel}}}.
          if attachment.isImage
            img.attachment-image-preview(src=attachment.url)
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLabel}}}.
+          .activity-checklist
+            +viewer
+              = checklist.title
+        if($eq activityType 'addChecklistItem')
+          | {{{_ 'activity-checklist-item-added' checklist.title cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklistItem.title

        if($eq activityType 'addComment')
          +inlinedForm(classNames='js-edit-comment')
@@ -103,7 +145,7 @@ template(name="cardActivities")
            .activity-comment
              +viewer
                = comment.text
-            span.activity-meta {{ moment createdAt }}
+            span(title=createdAt).activity-meta {{ moment createdAt }}
              if ($eq currentUser._id comment.userId)
                = ' - '
                a.js-open-inlined-form {{_ "edit"}}
@@ -111,4 +153,4 @@ template(name="cardActivities")
                a.js-delete-comment {{_ "delete"}}

        else
-          span.activity-meta {{ moment createdAt }}
+          span(title=createdAt).activity-meta {{ moment createdAt }}
@@ -1,25 +1,23 @@
 const activitiesPerPage = 20;

 BlazeComponent.extendComponent({
-  template() {
-    return 'activities';
-  },
-
  onCreated() {
    // XXX Should we use ReactiveNumber?
    this.page = new ReactiveVar(1);
    this.loadNextPageLocked = false;
-    const sidebar = this.componentParent(); // XXX for some reason not working
+    const sidebar = this.parentComponent(); // XXX for some reason not working
    sidebar.callFirstWith(null, 'resetNextPeak');
    this.autorun(() => {
      const mode = this.data().mode;
      const capitalizedMode = Utils.capitalize(mode);
      const id = Session.get(`current${capitalizedMode}`);
      const limit = this.page.get() * activitiesPerPage;
+      const user = Meteor.user();
+      const hideSystem = user ? user.hasHiddenSystemMessages() : false;
      if (id === null)
        return;

-      this.subscribe('activities', mode, id, limit, () => {
+      this.subscribe('activities', mode, id, limit, hideSystem, () => {
        this.loadNextPageLocked = false;

        // If the sibear peak hasn't increased, that mean that there are no more
@@ -60,6 +58,24 @@ BlazeComponent.extendComponent({
    }, card.title));
  },

+  listLabel() {
+    return this.currentData().list().title;
+  },
+
+  sourceLink() {
+    const source = this.currentData().source;
+    if(source) {
+      if(source.url) {
+        return Blaze.toHTML(HTML.A({
+          href: source.url,
+        }, source.system));
+      } else {
+        return source.system;
+      }
+    }
+    return null;
+  },
+
  memberLink() {
    return Blaze.toHTMLWithData(Template.memberName, {
      user: this.currentData().member(),
@@ -68,7 +84,8 @@ BlazeComponent.extendComponent({

  attachmentLink() {
    const attachment = this.currentData().attachment();
-    return attachment && Blaze.toHTML(HTML.A({
+    // trying to display url before file is stored generates js errors
+    return attachment && attachment.url({ download: true }) && Blaze.toHTML(HTML.A({
      href: attachment.url({ download: true }),
      target: '_blank',
    }, attachment.name()));
@@ -83,9 +100,9 @@ BlazeComponent.extendComponent({
      },
      'submit .js-edit-comment'(evt) {
        evt.preventDefault();
-        const commentText = this.currentComponent().getValue();
+        const commentText = this.currentComponent().getValue().trim();
        const commentId = Template.parentData().commentId;
-        if ($.trim(commentText)) {
+        if (commentText) {
          CardComments.update(commentId, {
            $set: {
              text: commentText,
@@ -1,3 +1,10 @@
+@import 'nib'
+
+.activity-title
+  margin: 0 0.5em 0.8em
+  display: flex
+  justify-content:space-between
+
 .activities
  clear: both

@@ -10,10 +17,14 @@
      height: @width

    .activity-desc
+      word-wrap: break-word
+      overflow: hidden
      flex: 1
      align-self: center
      margin: 0
      margin-left: 3px
+      overflow: hidden;
+      word-break: break-word;

      .activity-comment
        display: block
@@ -24,6 +35,14 @@
        margin-top: 5px
        padding: 5px

+      .activity-checklist
+        display: block
+        border-radius: 3px
+        background: white
+        text-decoration: none
+        box-shadow: 0 1px 2px rgba(0,0,0,.2)
+        margin-top: 5px
+        padding: 5px
      .activity-meta
        font-size: 0.8em
        color: darken(white, 40%)
@@ -1,10 +1,6 @@
 const commentFormIsOpen = new ReactiveVar(false);

 BlazeComponent.extendComponent({
-  template() {
-    return 'commentForm';
-  },
-
  onDestroyed() {
    commentFormIsOpen.set(false);
  },
@@ -24,11 +20,12 @@ BlazeComponent.extendComponent({
      },
      'submit .js-new-comment-form'(evt) {
        const input = this.getInput();
-        if ($.trim(input.val())) {
+        const text = input.val().trim();
+        if (text) {
          CardComments.insert({
+            text,
            boardId: this.currentData().boardId,
            cardId: this.currentData()._id,
-            text: input.val(),
          });
          resetCommentInput(input);
          Tracker.flush();
@@ -72,8 +69,9 @@ EscapeActions.register('inlinedForm',
      docId: Session.get('currentCard'),
    };
    const commentInput = $('.js-new-comment-input');
-    if ($.trim(commentInput.val())) {
-      UnsavedEdits.set(draftKey, commentInput.val());
+    const draft = commentInput.val().trim();
+    if (draft) {
+      UnsavedEdits.set(draftKey, draft);
    } else {
      UnsavedEdits.reset(draftKey);
    }
@@ -1,3 +1,5 @@
+@import 'nib'
+
 .new-comment
  position: relative
  margin: 0 0 20px 38px
@@ -1,14 +1,14 @@
 template(name="archivedBoards")
  h2
    i.fa.fa-archive
-    | Archived boards
+    | {{_ 'archived-boards'}}

  ul.archived-lists
    each archivedBoards
      li.archived-lists-item
        button.js-restore-board
          i.fa.fa-undo
-          | Restore board
+          | {{_ 'restore-board'}}
        = title
    else
-      li.no-items-message No archived board.
+      li.no-items-message {{_ 'no-archived-boards'}}
@@ -1,14 +1,10 @@
-Template.headerTitle.events({
+Template.boardListHeaderBar.events({
  'click .js-open-archived-board'() {
    Modal.open('archivedBoards');
  },
 });

 BlazeComponent.extendComponent({
-  template() {
-    return 'archivedBoards';
-  },
-
  onCreated() {
    this.subscribe('archivedBoards');
  },
@@ -22,13 +18,16 @@ BlazeComponent.extendComponent({
  events() {
    return [{
      'click .js-restore-board'() {
-        const boardId = this.currentData()._id;
-        Boards.update(boardId, {
-          $set: {
-            archived: false,
-          },
-        });
-        Utils.goBoardId(boardId);
+        // TODO : Make isSandstorm variable global
+        const isSandstorm = Meteor.settings && Meteor.settings.public &&
+          Meteor.settings.public.sandstorm;
+        if (isSandstorm && Session.get('currentBoard')) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          currentBoard.archive();
+        }
+        const board = this.currentData();
+        board.restore();
+        Utils.goBoardId(board._id);
      },
    }];
  },
@@ -1,7 +1,10 @@
 template(name="board")
  if isBoardReady.get
    if currentBoard
-      +boardBody
+      if onlyShowCurrentCard
+        +cardDetails(currentCard)
+      else
+        +boardBody
    else
      //- XXX We need a better error message in case the board has been archived
      +message(label="board-not-found")
@@ -11,30 +14,14 @@ template(name="board")
 template(name="boardBody")
  .board-wrapper(class=currentBoard.colorClass)
    +sidebar
-    .board-canvas(
+    .board-canvas.js-swimlanes.js-perfect-scrollbar(
      class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
      class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
      class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
      if showOverlay.get
        .board-overlay
-      .lists.js-lists
-        each currentBoard.lists
-          +list(this)
-          if currentCardIsInThisList
-            +cardDetails(currentCard)
-        if currentUser.isBoardMember
-          +addListForm
-
-template(name="addListForm")
-  .list.js-list.list-composer.js-list-composer
-    .list-header
-      +inlinedForm(autoclose=false)
-        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
-          autocomplete="off" autofocus)
-        .edit-controls.clearfix
-          button.primary.confirm(type="submit") {{_ 'save'}}
-          a.fa.fa-times-thin.js-close-inlined-form
-      else
-        a.open-list-composer.js-open-inlined-form
-          i.fa.fa-plus
-          | {{_ 'add-list'}}
+      if isViewSwimlanes
+        each currentBoard.swimlanes
+          +swimlane(this)
+      if isViewLists
+        +listsGroup
@@ -1,13 +1,8 @@
 const subManager = new SubsManager();
+const { calculateIndex } = Utils;

 BlazeComponent.extendComponent({
-  template() {
-    return 'board';
-  },
-
  onCreated() {
-    this.draggingActive = new ReactiveVar(false);
-    this.showOverlay = new ReactiveVar(false);
    this.isBoardReady = new ReactiveVar(false);

    // The pattern we use to manually handle data loading is described here:
@@ -25,35 +20,92 @@ BlazeComponent.extendComponent({
        });
      });
    });
+  },

+  onlyShowCurrentCard() {
+    return Utils.isMiniScreen() && Session.get('currentCard');
+  },
+
+}).register('board');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.showOverlay = new ReactiveVar(false);
+    this.draggingActive = new ReactiveVar(false);
    this._isDragging = false;
-    this._lastDragPositionX = 0;
-
    // Used to set the overlay
    this.mouseHasEnterCardDetails = false;
  },
+  onRendered() {
+    const boardComponent = this;
+    const $swimlanesDom = boardComponent.$('.js-swimlanes');
+
+    $swimlanesDom.sortable({
+      tolerance: 'pointer',
+      appendTo: '.board-canvas',
+      helper: 'clone',
+      handle: '.js-swimlane-header',
+      items: '.js-swimlane:not(.placeholder)',
+      placeholder: 'swimlane placeholder',
+      distance: 7,
+      start(evt, ui) {
+        ui.placeholder.height(ui.helper.height());
+        EscapeActions.executeUpTo('popup-close');
+        boardComponent.setIsDragging(true);
+      },
+      stop(evt, ui) {
+        // To attribute the new index number, we need to get the DOM element
+        // of the previous and the following card -- if any.
+        const prevSwimlaneDom = ui.item.prev('.js-swimlane').get(0);
+        const nextSwimlaneDom = ui.item.next('.js-swimlane').get(0);
+        const sortIndex = calculateIndex(prevSwimlaneDom, nextSwimlaneDom, 1);
+
+        $swimlanesDom.sortable('cancel');
+        const swimlaneDomElement = ui.item.get(0);
+        const swimlane = Blaze.getData(swimlaneDomElement);
+
+        Swimlanes.update(swimlane._id, {
+          $set: {
+            sort: sortIndex.base,
+          },
+        });
+
+        boardComponent.setIsDragging(false);
+      },
+    });
+
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+    }
+
+    // If there is no data in the board (ie, no lists) we autofocus the list
+    // creation form by clicking on the corresponding element.
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    if (userIsMember() && currentBoard.lists().count() === 0) {
+      boardComponent.openNewListForm();
+    }
+  },
+
+  isViewSwimlanes() {
+    const currentBoardId = Session.get('currentBoard');
+    const board = Boards.findOne(currentBoardId);
+    return (board.view === 'board-view-swimlanes');
+  },
+
+  isViewLists() {
+    const currentBoardId = Session.get('currentBoard');
+    const board = Boards.findOne(currentBoardId);
+    return (board.view === 'board-view-lists');
+  },

  openNewListForm() {
-    this.componentChildren('addListForm')[0].open();
-  },
-
-  // XXX Flow components allow us to avoid creating these two setter methods by
-  // exposing a public API to modify the component state. We need to investigate
-  // best practices here.
-  setIsDragging(bool) {
-    this.draggingActive.set(bool);
-  },
-
-  scrollLeft(position = 0) {
-    this.$('.js-lists').animate({
-      scrollLeft: position,
-    });
-  },
-
-  currentCardIsInThisList() {
-    const currentCard = Cards.findOne(Session.get('currentCard'));
-    const listId = this.currentData()._id;
-    return currentCard && currentCard.listId === listId;
+    if (this.isViewSwimlanes()) {
+      this.childComponents('swimlane')[0]
+        .childComponents('addListAndSwimlaneForm')[0].open();
+    } else if (this.isViewLists()) {
+      this.childComponents('listsGroup')[0]
+        .childComponents('addListForm')[0].open();
+    }
  },

  events() {
@@ -65,138 +117,26 @@ BlazeComponent.extendComponent({
          this.showOverlay.set(false);
        }
      },
-
-      // Click-and-drag action
-      'mousedown .board-canvas'(evt) {
-        // Translating the board canvas using the click-and-drag action can
-        // conflict with the build-in browser mechanism to select text. We
-        // define a list of elements in which we disable the dragging because
-        // the user will legitimately expect to be able to select some text with
-        // his mouse.
-        const noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header'];
-        if ($(evt.target).closest(noDragInside.join(',')).length === 0) {
-          this._isDragging = true;
-          this._lastDragPositionX = evt.clientX;
-        }
-      },
      'mouseup'() {
        if (this._isDragging) {
          this._isDragging = false;
        }
      },
-      'mousemove'(evt) {
-        if (this._isDragging) {
-          // Update the canvas position
-          this.listsDom.scrollLeft -= evt.clientX - this._lastDragPositionX;
-          this._lastDragPositionX = evt.clientX;
-          // Disable browser text selection while dragging
-          evt.stopPropagation();
-          evt.preventDefault();
-          // Don't close opened card or inlined form at the end of the
-          // click-and-drag.
-          EscapeActions.executeUpTo('popup-close');
-          EscapeActions.preventNextClick();
-        }
-      },
    }];
  },
-}).register('board');

-Template.boardBody.onRendered(function() {
-  const self = BlazeComponent.getComponentForElement(this.firstNode);
-
-  self.listsDom = this.find('.js-lists');
-
-  if (!Session.get('currentCard')) {
-    self.scrollLeft();
-  }
-
-  // We want to animate the card details window closing. We rely on CSS
-  // transition for the actual animation.
-  self.listsDom._uihooks = {
-    removeElement(node) {
-      const removeNode = _.once(() => {
-        node.parentNode.removeChild(node);
-      });
-      if ($(node).hasClass('js-card-details')) {
-        $(node).css({
-          flexBasis: 0,
-          padding: 0,
-        });
-        $(self.listsDom).one(CSSEvents.transitionend, removeNode);
-      } else {
-        removeNode();
-      }
-    },
-  };
-
-  if (!Meteor.user() || !Meteor.user().isBoardMember())
-    return;
-
-  self.$(self.listsDom).sortable({
-    tolerance: 'pointer',
-    helper: 'clone',
-    handle: '.js-list-header',
-    items: '.js-list:not(.js-list-composer)',
-    placeholder: 'list placeholder',
-    distance: 7,
-    start(evt, ui) {
-      ui.placeholder.height(ui.helper.height());
-      Popup.close();
-    },
-    stop() {
-      self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
-        (i, list) => {
-          const data = Blaze.getData(list);
-          Lists.update(data._id, {
-            $set: {
-              sort: i,
-            },
-          });
-        }
-      );
-    },
-  });
-
-  // Disable drag-dropping while in multi-selection mode
-  self.autorun(() => {
-    self.$(self.listsDom).sortable('option', 'disabled',
-      MultiSelection.isActive());
-  });
-
-  // If there is no data in the board (ie, no lists) we autofocus the list
-  // creation form by clicking on the corresponding element.
-  const currentBoard = Boards.findOne(Session.get('currentBoard'));
-  if (currentBoard.lists().count() === 0) {
-    self.openNewListForm();
-  }
-});
-
-BlazeComponent.extendComponent({
-  template() {
-    return 'addListForm';
+  // XXX Flow components allow us to avoid creating these two setter methods by
+  // exposing a public API to modify the component state. We need to investigate
+  // best practices here.
+  setIsDragging(bool) {
+    this.draggingActive.set(bool);
  },

-  // Proxy
-  open() {
-    this.componentChildren('inlinedForm')[0].open();
+  scrollLeft(position = 0) {
+    const swimlanes = this.$('.js-swimlanes');
+    swimlanes && swimlanes.animate({
+      scrollLeft: position,
+    });
  },

-  events() {
-    return [{
-      submit(evt) {
-        evt.preventDefault();
-        const title = this.find('.list-name-input');
-        if ($.trim(title.value)) {
-          Lists.insert({
-            title: title.value,
-            boardId: Session.get('currentBoard'),
-            sort: $('.list').length,
-          });
-
-          title.value = '';
-        }
-      },
-    }];
-  },
-}).register('addListForm');
+}).register('boardBody');
@@ -1,8 +1,11 @@
@import 'nib'

 position()
-  if arguments[0] == cover
-    position: absolute
+  if arguments[0] == cover || arguments[0] == fixed-cover
+    if arguments[0] == cover
+      position: absolute
+    else
+      position: fixed
    left: 0
    right: 0
    top: 0
@@ -12,26 +15,18 @@ position()

 .board-wrapper
  position: cover
+  overflow-y: hidden;

  .board-canvas
    position: cover
    transition: margin .1s
+    overflow-y: auto;

    &.is-sibling-sidebar-open
      margin-right: 248px

-    .lists
-      align-items: flex-start
-      display: flex
-      flex-direction: row
-      margin: 0 0 10px
-      padding: 0 40px 5px 0
-      overflow-x: auto
-      overflow-y: hidden
-      position: cover
-
    .board-overlay
-      position: cover
+      position: fixed-cover
      top: -100px
      right: -400px
      background: black
@@ -43,3 +38,17 @@ position()
      .open-minicard-composer,
      .minicard-wrapper.is-checked
        display: none
+
+@media screen and (max-width: 800px)
+  .board-wrapper
+
+    .board-canvas
+
+      .swimlane
+        border-bottom: 1px solid #CCC
+        display: flex
+        flex-direction: column
+        margin: 0
+        padding: 0 40px 0px 0
+        overflow-x: hidden
+        overflow-y: auto
@@ -23,9 +23,13 @@ setBoardColor(color)
  .sidebar-list li a:hover
    background-color: lighten(color, 10%)

-  &#header #header-quick-access ul li.current
+  &#header ul li.current, &#header-quick-access ul li.current
    border-bottom: 2px solid lighten(color, 10%)

+  &#header-quick-access
+    background: darken(color, 10%)
+    color: white
+
  &#header #header-main-bar .board-header-btn.emphasis
    background: complement(color)

@@ -47,6 +51,25 @@ setBoardColor(color)
    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
      background: lighten(color, 97%)

+  .toggle-label
+
+    &:after
+      background-color: darken(color, 20%)
+
+  .toggle-switch:checked ~ .toggle-label
+    background-color: lighten(color, 20%)
+
+    &:after
+      background-color: darken(color, 20%)
+
+  @media screen and (max-width: 800px)
+    &.pop-over .header
+      background: color
+      color: white
+
+   &#header ul li.current, &#header-quick-access ul li.current
+      border-bottom: 4px solid lighten(color, 20%)
+
 .board-color-nephritis
  setBoardColor(#27AE60)

@@ -1,45 +1,114 @@
-template(name="headerBoard")
+template(name="boardHeaderBar")
  h1.header-board-menu
    with currentBoard
      a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
        = title

  .board-header-btns.left
-    unless isSandstorm
-      if currentUser
-        a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-          title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-          i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-          if showStarCounter
-            span {{_ 'board-nb-stars' currentBoard.stars}}
+    unless isMiniScreen
+      unless isSandstorm
+        if currentBoard
+          if currentUser
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              if showStarCounter
+                span
+                  = currentBoard.stars

-      a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}")
-        i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-        span {{_ currentBoard.permission}}
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              span {{_ currentBoard.permission}}
+
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+              span {{_ watchLevel}}
+
+          else
+            a.board-header-btn.js-log-in(
+              title="{{_ 'log-in'}}")
+              i.fa.fa-sign-in
+              span {{_ 'log-in'}}

  .board-header-btns.right
-    a.board-header-btn.js-open-filter-view(
-        title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{/if}}"
-        class="{{#if Filter.isActive}}emphasis{{/if}}")
-      i.fa.fa-filter
-      span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
-      if Filter.isActive
-        a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
-          i.fa.fa-times-thin
+    if currentBoard
+      if isMiniScreen
+        unless isSandstorm
+          if currentUser
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              if showStarCounter
+                span
+                  = currentBoard.stars

-    if currentUser.isBoardMember
-      a.board-header-btn.js-multiselection-activate(
-          title="{{#if MultiSelection.isActive}}{{_ 'filter-on-desc'}}{{/if}}"
-          class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
-        i.fa.fa-check-square-o
-        span Multi-Selection {{#if MultiSelection.isActive}}is on{{/if}}
-        if MultiSelection.isActive
-          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+            a.board-header-btn(
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              title="{{_ currentBoard.permission}}")
+              i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              span {{_ currentBoard.permission}}
+
+            a.board-header-btn.js-watch-board(
+              title="{{_ watchLevel }}")
+              if $eq watchLevel "watching"
+                i.fa.fa-eye
+              if $eq watchLevel "tracking"
+                i.fa.fa-bell
+              if $eq watchLevel "muted"
+                i.fa.fa-bell-slash
+              span {{_ watchLevel}}
+
+          else
+            a.board-header-btn.js-log-in(
+              title="{{_ 'log-in'}}")
+              i.fa.fa-sign-in
+              span {{_ 'log-in'}}
+              
+      if isSandstorm
+        if currentUser
+          a.board-header-btn.js-open-archived-board
+            i.fa.fa-archive
+            span {{_ 'archives'}}
+
+      a.board-header-btn.js-open-filter-view(
+          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
+          class="{{#if Filter.isActive}}emphasis{{/if}}")
+        i.fa.fa-filter
+        span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
+        if Filter.isActive
+          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
            i.fa.fa-times-thin

-    .separator
-    a.board-header-btn.js-open-board-menu
-      i.board-header-btn-icon.fa.fa-cog
+      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
+        i.fa.fa-search
+        span {{_ 'search'}}
+
+      a.board-header-btn.js-toggle-board-view(
+        title="{{_ 'board-view'}}")
+        i.fa.fa-th-large
+        span {{_ currentBoard.view}}
+
+      if canModifyBoard
+        a.board-header-btn.js-multiselection-activate(
+            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
+            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
+          i.fa.fa-check-square-o
+          span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
+          if MultiSelection.isActive
+            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+              i.fa.fa-times-thin
+
+      .separator
+      a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}")
+        i.board-header-btn-icon.fa.fa-navicon

 template(name="boardMenuPopup")
  ul.pop-over-list
@@ -56,7 +125,14 @@ template(name="boardMenuPopup")
    if currentUser.isBoardAdmin
      hr
      ul.pop-over-list
+        li: a(href="{{exportUrl}}", download="{{exportFilename}}") {{_ 'export-board'}}
        li: a.js-archive-board {{_ 'archive-board'}}
+        li: a.js-outgoing-webhooks {{_ 'outgoing-webhooks'}}
+  if isSandstorm
+    hr
+    ul.pop-over-list
+      li: a(href="{{exportUrl}}", download="{{exportFilename}}") {{_ 'export-board'}}
+      li: a.js-import-board {{_ 'import-board-c'}}

 template(name="boardVisibilityList")
  ul.pop-over-list
@@ -80,6 +156,33 @@ template(name="boardVisibilityList")
 template(name="boardChangeVisibilityPopup")
  +boardVisibilityList

+template(name="boardChangeWatchPopup")
+  ul.pop-over-list
+    li
+      with "watching"
+        a.js-select-watch
+          i.fa.fa-eye.colorful
+          | {{_ 'watching'}}
+          if watchCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'watching-info'}}
+    li
+      with "tracking"
+        a.js-select-watch
+          i.fa.fa-bell.colorful
+          | {{_ 'tracking'}}
+          if watchCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'tracking-info'}}
+    li
+      with "muted"
+        a.js-select-watch
+          i.fa.fa-bell-slash.colorful
+          | {{_ 'muted'}}
+          if watchCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'muted-info'}}
+
 template(name="boardChangeColorPopup")
  .board-backgrounds-list.clearfix
    each backgroundColors
@@ -88,7 +191,7 @@ template(name="boardChangeColorPopup")
          if isSelected
            i.fa.fa-check

-template(name="createBoardPopup")
+template(name="createBoard")
  form
    label
      | {{_ 'title'}}
@@ -105,17 +208,49 @@ template(name="createBoardPopup")
          span.fa.fa-lock.colorful
          = " "
          | {{{_ 'board-private-info'}}}
-        a.js-change-visibility Change.
+        a.js-change-visibility {{_ 'change'}}.
    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import-board'}}

+template(name="chooseBoardSource")
+  ul.pop-over-list
+    li
+      a(href="{{pathFor '/import/trello'}}") {{_ 'from-trello'}}
+    li
+      a(href="{{pathFor '/import/wekan'}}") {{_ 'from-wekan'}}

 template(name="boardChangeTitlePopup")
  form
    label
      | {{_ 'title'}}
      input.js-board-name(type="text" value=title autofocus)
+    label
+      | {{_ 'description'}}
+      textarea.js-board-desc= description
    input.primary.wide(type="submit" value="{{_ 'rename'}}")

 template(name="archiveBoardPopup")
  p {{_ 'close-board-pop'}}
-  button.js-confirm.negate.full(type="submit") {{_ 'close'}}
+  button.js-confirm.negate.full(type="submit") {{_ 'archive'}}
+
+template(name="outgoingWebhooksPopup")
+  each integrations
+    form.integration-form
+      if title
+        h4 {{title}}
+      else
+        h4 {{_ 'no-name'}}
+      label
+        | URL
+        input.js-outgoing-webhooks-url(type="text" name="url" value=url)
+        input(type="hidden" value=_id name="id")
+      input.primary.wide(type="submit" value="{{_ 'save'}}")
+  form.integration-form
+    h4
+      | {{_ 'new-outgoing-webhook'}}
+    label
+      | URL
+      input.js-outgoing-webhooks-url(type="text" name="url" autofocus)
+    input.primary.wide(type="submit" value="{{_ 'save'}}")
@@ -6,24 +6,40 @@ Template.boardMenuPopup.events({
  },
  'click .js-change-board-color': Popup.open('boardChangeColor'),
  'click .js-change-language': Popup.open('changeLanguage'),
-  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', () => {
-    const boardId = Session.get('currentBoard');
-    Boards.update(boardId, { $set: { archived: true }});
+  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    currentBoard.archive();
    // XXX We should have some kind of notification on top of the page to
    // confirm that the board was successfully archived.
    FlowRouter.go('home');
  }),
+  'click .js-outgoing-webhooks': Popup.open('outgoingWebhooks'),
+  'click .js-import-board': Popup.open('chooseBoardSource'),
+});
+
+Template.boardMenuPopup.helpers({
+  exportUrl() {
+    const params = {
+      boardId: Session.get('currentBoard'),
+    };
+    const queryParams = {
+      authToken: Accounts._storedLoginToken(),
+    };
+    return FlowRouter.path('/api/boards/:boardId/export', params, queryParams);
+  },
+  exportFilename() {
+    const boardId = Session.get('currentBoard');
+    return `wekan-export-board-${boardId}.json`;
+  },
 });

 Template.boardChangeTitlePopup.events({
  submit(evt, tpl) {
-    const title = tpl.$('.js-board-name').val().trim();
-    if (title) {
-      Boards.update(this._id, {
-        $set: {
-          title,
-        },
-      });
+    const newTitle = tpl.$('.js-board-name').val().trim();
+    const newDesc = tpl.$('.js-board-desc').val().trim();
+    if (newTitle) {
+      this.rename(newTitle);
+      this.setDescription(newDesc);
      Popup.close();
    }
    evt.preventDefault();
@@ -31,8 +47,9 @@ Template.boardChangeTitlePopup.events({
 });

 BlazeComponent.extendComponent({
-  template() {
-    return 'headerBoard';
+  watchLevel() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard && currentBoard.getWatchLevel(Meteor.userId());
  },

  isStarred() {
@@ -55,6 +72,26 @@ BlazeComponent.extendComponent({
      },
      'click .js-open-board-menu': Popup.open('boardMenu'),
      'click .js-change-visibility': Popup.open('boardChangeVisibility'),
+      'click .js-watch-board': Popup.open('boardChangeWatch'),
+      'click .js-open-archived-board'() {
+        Modal.open('archivedBoards');
+      },
+      'click .js-toggle-board-view'() {
+        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        if (currentBoard.view === 'board-view-swimlanes') {
+          Boards.update(currentBoard._id, {
+            $set: {
+              view: 'board-view-lists',
+            },
+          });
+        } else if (currentBoard.view === 'board-view-lists') {
+          Boards.update(currentBoard._id, {
+            $set: {
+              view: 'board-view-swimlanes',
+            },
+          });
+        }
+      },
      'click .js-open-filter-view'() {
        Sidebar.setView('filter');
      },
@@ -63,6 +100,9 @@ BlazeComponent.extendComponent({
        Sidebar.setView();
        Filter.reset();
      },
+      'click .js-open-search-view'() {
+        Sidebar.setView('search');
+      },
      'click .js-multiselection-activate'() {
        const currentCard = Session.get('currentCard');
        MultiSelection.activate();
@@ -74,15 +114,20 @@ BlazeComponent.extendComponent({
        evt.stopPropagation();
        MultiSelection.disable();
      },
+      'click .js-log-in'() {
+        FlowRouter.go('atSignIn');
+      },
    }];
  },
-}).register('headerBoard');
+}).register('boardHeaderBar');
+
+Template.boardHeaderBar.helpers({
+  canModifyBoard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});

 BlazeComponent.extendComponent({
-  template() {
-    return 'boardChangeColorPopup';
-  },
-
  backgroundColors() {
    return Boards.simpleSchema()._schema.color.allowedValues;
  },
@@ -95,26 +140,24 @@ BlazeComponent.extendComponent({
  events() {
    return [{
      'click .js-select-background'(evt) {
-        const currentBoardId = Session.get('currentBoard');
-        Boards.update(currentBoardId, {
-          $set: {
-            color: this.currentData().toString(),
-          },
-        });
+        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        const newColor = this.currentData().toString();
+        currentBoard.setColor(newColor);
        evt.preventDefault();
      },
    }];
  },
 }).register('boardChangeColorPopup');

-BlazeComponent.extendComponent({
+const CreateBoard = BlazeComponent.extendComponent({
  template() {
-    return 'createBoardPopup';
+    return 'createBoard';
  },

  onCreated() {
    this.visibilityMenuIsOpen = new ReactiveVar(false);
    this.visibility = new ReactiveVar('private');
+    this.boardId = new ReactiveVar('');
  },

  visibilityCheck() {
@@ -135,15 +178,17 @@ BlazeComponent.extendComponent({
    const title = this.find('.js-new-board-title').value;
    const visibility = this.visibility.get();

-    const boardId = Boards.insert({
+    this.boardId.set(Boards.insert({
      title,
      permission: visibility,
+    }));
+
+    Swimlanes.insert({
+      title: 'Default',
+      boardId: this.boardId.get(),
    });

-    Utils.goBoardId(boardId);
-
-    // Immediately star boards crated with the headerbar popup.
-    Meteor.user().toggleBoardStar(boardId);
+    Utils.goBoardId(this.boardId.get());
  },

  events() {
@@ -152,27 +197,37 @@ BlazeComponent.extendComponent({
        this.setVisibility(this.currentData());
      },
      'click .js-change-visibility': this.toggleVisibilityMenu,
+      'click .js-import': Popup.open('boardImportBoard'),
      submit: this.onSubmit,
+      'click .js-import-board': Popup.open('chooseBoardSource'),
    }];
  },
 }).register('createBoardPopup');

 BlazeComponent.extendComponent({
  template() {
-    return 'boardChangeVisibilityPopup';
+    return 'chooseBoardSource';
  },
+}).register('chooseBoardSourcePopup');

+(class HeaderBarCreateBoard extends CreateBoard {
+  onSubmit(evt) {
+    super.onSubmit(evt);
+    // Immediately star boards crated with the headerbar popup.
+    Meteor.user().toggleBoardStar(this.boardId.get());
+  }
+}).register('headerBarCreateBoardPopup');
+
+BlazeComponent.extendComponent({
  visibilityCheck() {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
    return this.currentData() === currentBoard.permission;
  },

  selectBoardVisibility() {
-    Boards.update(Session.get('currentBoard'), {
-      $set: {
-        permission: this.currentData(),
-      },
-    });
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    const visibility = this.currentData();
+    currentBoard.setVisibility(visibility);
    Popup.close();
  },

@@ -182,3 +237,72 @@ BlazeComponent.extendComponent({
    }];
  },
 }).register('boardChangeVisibilityPopup');
+
+BlazeComponent.extendComponent({
+  watchLevel() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard.getWatchLevel(Meteor.userId());
+  },
+
+  watchCheck() {
+    return this.currentData() === this.watchLevel();
+  },
+
+  events() {
+    return [{
+      'click .js-select-watch'() {
+        const level = this.currentData();
+        Meteor.call('watch', 'board', Session.get('currentBoard'), level, (err, ret) => {
+          if (!err && ret) Popup.close();
+        });
+      },
+    }];
+  },
+}).register('boardChangeWatchPopup');
+
+BlazeComponent.extendComponent({
+  integrations() {
+    const boardId = Session.get('currentBoard');
+    return Integrations.find({ boardId: `${boardId}` }).fetch();
+  },
+
+  integration(id) {
+    const boardId = Session.get('currentBoard');
+    return Integrations.findOne({ _id: id, boardId: `${boardId}` });
+  },
+
+  events() {
+    return [{
+      'submit'(evt) {
+        evt.preventDefault();
+        const url = evt.target.url.value;
+        const boardId = Session.get('currentBoard');
+        let id = null;
+        let integration = null;
+        if (evt.target.id) {
+          id = evt.target.id.value;
+          integration = this.integration(id);
+          if (url) {
+            Integrations.update(integration._id, {
+              $set: {
+                url: `${url}`,
+              },
+            });
+          } else {
+            Integrations.remove(integration._id);
+          }
+        } else if (url) {
+          Integrations.insert({
+            userId: Meteor.userId(),
+            enabled: true,
+            type: 'outgoing-webhooks',
+            url: `${url}`,
+            boardId: `${boardId}`,
+            activities: ['all'],
+          });
+        }
+        Popup.close();
+      },
+    }];
+  },
+}).register('outgoingWebhooksPopup');
@@ -0,0 +1,3 @@
+.integration-form
+  padding: 5px
+  border-bottom: 1px solid #ccc
@@ -3,11 +3,37 @@ template(name="boardList")
    ul.board-list.clearfix
      each boards
        li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
-          a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
-            span.details
-              span.board-list-item-name= title
-              i.fa.js-star-board(
-                class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                title="{{_ 'star-board-title'}}")
+          if isInvited
+            .board-list-item
+              span.details
+                span.board-list-item-name= title
+                i.fa.js-star-board(
+                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                  title="{{_ 'star-board-title'}}")
+                p.board-list-item-desc {{_ 'just-invited'}}
+                button.js-accept-invite.primary {{_ 'accept'}}
+                button.js-decline-invite {{_ 'decline'}}
+          else
+            a.js-open-board.board-list-item(href="{{pathFor 'board' id=_id slug=slug}}")
+              span.details
+                span.board-list-item-name= title
+                i.fa.js-star-board(
+                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                  title="{{_ 'star-board-title'}}")
+
+                if hasSpentTimeCards
+                  i.fa.js-has-spenttime-cards(
+                    class="fa-circle{{#if hasOvertimeCards}} has-overtime-card-active{{else}} no-overtime-card-active{{/if}}"
+                    title="{{#if hasOvertimeCards}}{{_ 'has-overtime-cards'}}{{else}}{{_ 'has-spenttime-cards'}}{{/if}}")
+
+                p.board-list-item-desc= description
      li.js-add-board
-        a.label {{_ 'add-board'}}
+        a.board-list-item.label {{_ 'add-board'}}
+
+
+template(name="boardListHeaderBar")
+  h1 {{_ 'my-boards'}}
+  .board-header-btns.right
+    a.board-header-btn.js-open-archived-board
+      i.fa.fa-archive
+      span {{_ 'archives'}}
@@ -1,6 +1,8 @@
+const subManager = new SubsManager();
+
 BlazeComponent.extendComponent({
-  template() {
-    return 'boardList';
+  onCreated() {
+    Meteor.subscribe('setting');
  },

  boards() {
@@ -17,6 +19,21 @@ BlazeComponent.extendComponent({
    return user && user.hasStarred(this.currentData()._id);
  },

+  hasOvertimeCards() {
+    subManager.subscribe('board', this.currentData()._id);
+    return this.currentData().hasOvertimeCards();
+  },
+
+  hasSpentTimeCards() {
+    subManager.subscribe('board', this.currentData()._id);
+    return this.currentData().hasSpentTimeCards();
+  },
+
+  isInvited() {
+    const user = Meteor.user();
+    return user && user.isInvitedTo(this.currentData()._id);
+  },
+
  events() {
    return [{
      'click .js-add-board': Popup.open('createBoard'),
@@ -25,6 +42,19 @@ BlazeComponent.extendComponent({
        Meteor.user().toggleBoardStar(boardId);
        evt.preventDefault();
      },
+      'click .js-accept-invite'() {
+        const boardId = this.currentData()._id;
+        Meteor.user().removeInvite(boardId);
+      },
+      'click .js-decline-invite'() {
+        const boardId = this.currentData()._id;
+        Meteor.call('quitBoard', boardId, (err, ret) => {
+          if (!err && ret) {
+            Meteor.user().removeInvite(boardId);
+            FlowRouter.go('home');
+          }
+        });
+      },
    }];
  },
 }).register('boardList');
@@ -1,7 +1,9 @@
+@import 'nib'
+
 $spaceBetweenTiles = 16px

 .board-list
-  margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0
+  margin: 0 ($spaceBetweenTiles/2)

  li
    float: left
@@ -14,7 +16,8 @@ $spaceBetweenTiles = 16px
      .fa-star-o
        opacity: 1

-  a
+  .board-list-item
+    overflow: hidden;
    background-color: #999
    color: #f6f6f6
    height: 90px
@@ -24,8 +27,8 @@ $spaceBetweenTiles = 16px
    display: block
    font-weight: 700
    min-height: 18px
-    padding: 8px 12px 8px 12px
-    margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles
+    padding: 8px
+    margin: ($spaceBetweenTiles/2)
    position: relative
    text-decoration: none

@@ -40,6 +43,13 @@ $spaceBetweenTiles = 16px
    font-weight: 400
    line-height: 22px

+  .board-list-item-desc
+    color: rgba(255, 255, 255, .5)
+    display: block
+    font-size: 10px
+    font-weight: 400
+    line-height: 18px
+
  .js-add-board
    text-align:center

@@ -64,6 +74,23 @@ $spaceBetweenTiles = 16px
    transition-duration: .15s
    transition-property: color, font-size, background

+  .fa-circle
+    bottom: 0;
+    font-size: 10px;
+    height: 10px;
+    line-height: 10px;
+    padding: 9px 9px;
+    position: absolute;
+    right: 0;
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  .has-overtime-card-active
+    color: #eb4646 !important
+
+  .no-overtime-card-active
+    color: #3cb500 !important
+
  .is-star-active
    color: white

@@ -121,3 +148,22 @@ $spaceBetweenTiles = 16px
        font-size: 25px
        color: white

+@media screen and (max-width: 800px)
+  .board-list
+    height: 100%
+    overflow: scroll
+
+    li
+      width: 33.3%
+
+    .board-list-item
+      overflow: hidden
+
+    .board-list-item-sub-name
+      position: relative
+      top: -100px
+      left: -100px
+
+@media screen and (max-width: 360px)
+    li
+      width: 50%
@@ -3,6 +3,16 @@ template(name="cardAttachmentsPopup")
    li
      input.js-attach-file.hide(type="file" name="file" multiple)
      a.js-computer-upload {{_ 'computer'}}
+    li
+      a.js-upload-clipboard-image {{_ 'clipboard'}}
+
+template(name="previewClipboardImagePopup")
+  p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
+  img.preview-clipboard-image()
+  button.primary.js-upload-pasted-image {{_ 'upload'}}
+
+template(name="previewAttachedImagePopup")
+  img.preview-large-image.js-large-image-clicked(src="{{url}}")

 template(name="attachmentDeletePopup")
  p {{_ "attachment-delete-pop"}}
@@ -11,11 +21,11 @@ template(name="attachmentDeletePopup")
 template(name="attachmentsGalery")
  .attachments-galery
    each attachments
-      a.attachment-item.js-open-viewer(title="{{_ 'added'}} {{ moment uploadedAt }}")
-        .attachment-thumbnail
+      .attachment-item
+        a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
          if isUploaded
            if isImage
-              img.attachment-thumbnail-img(src=url)
+              img.attachment-thumbnail-img(src="{{url}}")
            else
              span.attachment-thumbnail-ext= extension
          else
@@ -39,4 +49,5 @@ template(name="attachmentsGalery")
                | {{_ 'delete'}}

    if currentUser.isBoardMember
-      a.attachment-item.add-attachment.js-add-attachment {{_ 'add-attachment' }}
+      li.attachment-item.add-attachment
+        a.js-add-attachment {{_ 'add-attachment' }}
@@ -1,7 +1,7 @@
 Template.attachmentsGalery.events({
  'click .js-add-attachment': Popup.open('cardAttachments'),
  'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete',
-    () => {
+    function() {
      Attachments.remove(this._id);
      Popup.close();
    }
@@ -11,14 +11,44 @@ Template.attachmentsGalery.events({
  'click .js-download'(event) {
    event.stopPropagation();
  },
-  'click .js-open-viewer'() {
-    // XXX Not implemented!
-  },
  'click .js-add-cover'() {
-    Cards.update(this.cardId, { $set: { coverId: this._id } });
+    Cards.findOne(this.cardId).setCover(this._id);
  },
  'click .js-remove-cover'() {
-    Cards.update(this.cardId, { $unset: { coverId: '' } });
+    Cards.findOne(this.cardId).unsetCover();
+  },
+  'click .js-preview-image'(evt) {
+    Popup.open('previewAttachedImage').call(this, evt);
+    // when multiple thumbnails, if click one then another very fast,
+    // we might get a wrong width from previous img.
+    // when popup reused, onRendered() won't be called, so we cannot get there.
+    // here make sure to get correct size when this img fully loaded.
+    const img = $('img.preview-large-image')[0];
+    if (!img) return;
+    const rePosPopup = () => {
+      const w = img.width;
+      const h = img.height;
+      // if the image is too large, we resize & center the popup.
+      if (w > 300) {
+        $('div.pop-over').css({
+          width: (w + 20),
+          position: 'absolute',
+          left: (window.innerWidth - w)/2,
+          top: (window.innerHeight - h)/2,
+        });
+      }
+    };
+    const url = $(evt.currentTarget).attr('src');
+    if (img.src === url && img.complete)
+      rePosPopup();
+    else
+      img.onload = rePosPopup;
+  },
+});
+
+Template.previewAttachedImagePopup.events({
+  'click .js-large-image-clicked'(){
+    Popup.close();
  },
 });

@@ -28,9 +58,15 @@ Template.cardAttachmentsPopup.events({
    FS.Utility.eachFile(evt, (f) => {
      const file = new FS.File(f);
      file.boardId = card.boardId;
-      file.cardId  = card._id;
+      file.cardId = card._id;
+      file.userId = Meteor.userId();
+
+      const attachment = Attachments.insert(file);
+
+      if (attachment && attachment._id && attachment.isImage()) {
+        card.setCover(attachment._id);
+      }

-      Attachments.insert(file);
      Popup.close();
    });
  },
@@ -38,4 +74,54 @@ Template.cardAttachmentsPopup.events({
    tpl.find('.js-attach-file').click();
    evt.preventDefault();
  },
+  'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
+});
+
+let pastedResults = null;
+
+Template.previewClipboardImagePopup.onRendered(() => {
+  // we can paste image from clipboard
+  $(document.body).pasteImageReader((results) => {
+    if (results.dataURL.startsWith('data:image/')) {
+      $('img.preview-clipboard-image').attr('src', results.dataURL);
+      pastedResults = results;
+    }
+  });
+
+  // we can also drag & drop image file to it
+  $(document.body).dropImageReader((results) => {
+    if (results.dataURL.startsWith('data:image/')) {
+      $('img.preview-clipboard-image').attr('src', results.dataURL);
+      pastedResults = results;
+    }
+  });
+});
+
+Template.previewClipboardImagePopup.events({
+  'click .js-upload-pasted-image'() {
+    const results = pastedResults;
+    if (results && results.file) {
+      const card = this;
+      const file = new FS.File(results.file);
+      if (!results.name) {
+        // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
+        if (typeof results.file.type === 'string') {
+          file.name(results.file.type.replace('image/', 'clipboard.'));
+        }
+      }
+      file.updatedAt(new Date());
+      file.boardId = card.boardId;
+      file.cardId = card._id;
+      file.userId = Meteor.userId();
+      const attachment = Attachments.insert(file);
+
+      if (attachment && attachment._id && attachment.isImage()) {
+        card.setCover(attachment._id);
+      }
+
+      pastedResults = null;
+      $(document.body).pasteImageReader(() => {});
+      Popup.close();
+    }
+  },
 });
@@ -1,3 +1,5 @@
+@import 'nib'
+
 .attachments-galery
  display: flex
  flex-wrap: wrap
@@ -18,6 +20,10 @@
      display: flex
      align-items: center

+      a
+        display: block
+        margin: auto
+
    .attachment-thumbnail
      height: 80px
      display: flex
@@ -26,8 +32,8 @@
      position: relative

      .attachment-thumbnail-img
-        height: 100%
-        width: 100%
+        max-height: 100%
+        max-width: 100%

      .attachment-thumbnail-ext
        text-transform: uppercase
@@ -37,7 +43,7 @@
      font-size: 0.75em
      margin: 3px

-      .attachment-details-actions
+      .attachment-details-actions a
        display: block

 .attachment-image-preview
@@ -45,3 +51,35 @@
  display: block
  box-shadow: 0 1px 2px rgba(0,0,0,.2)

+.preview-large-image
+  max-width: 1000px
+  display: block
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+.preview-clipboard-image
+  width: 280px
+  max-width: 100%;
+  height: 200px
+  display: block
+  border: 1px solid black
+  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+@media screen and (max-width: 800px)
+  .attachments-galery
+    flex-direction
+      row
+    .attachment-item
+      width: 50% - 2%
+
+      .attachment-thumbnail
+        height: 130px
+      .attachment-details
+        font-size: 1.1em
+
+@media screen and (max-width: 360px)
+  .attachments-galery
+    .attachment-item
+      width: 100%
+
+      .attachment-thumbnail
+        height: 200px
@@ -0,0 +1,26 @@
+template(name="editCardDate")
+  .edit-card-date
+    form.edit-date
+      .fields
+        .left
+          label(for="date") {{_ 'date'}}
+          input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
+        .right
+          label(for="time") {{_ 'time'}}
+          input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
+      .js-datepicker
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
+      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
+
+template(name="dateBadge")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+  else
+    a.card-date(title="{{showTitle}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+
@@ -0,0 +1,236 @@
+// Edit start & due dates
+const EditCardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'editCardDate';
+  },
+
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+    this.date = new ReactiveVar(moment.invalid());
+  },
+
+  onRendered() {
+    const $picker = this.$('.js-datepicker').datepicker({
+      todayHighlight: true,
+      todayBtn: 'linked',
+      language: TAPi18n.getLanguage(),
+    }).on('changeDate', function(evt) {
+      this.find('#date').value = moment(evt.date).format('L');
+      this.error.set('');
+      this.find('#time').focus();
+    }.bind(this));
+
+    if (this.date.get().isValid()) {
+      $picker.datepicker('update', this.date.get().toDate());
+    }
+  },
+
+  showDate() {
+    if (this.date.get().isValid())
+      return this.date.get().format('L');
+    return '';
+  },
+  showTime() {
+    if (this.date.get().isValid())
+      return this.date.get().format('LT');
+    return '';
+  },
+  dateFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  timeFormat() {
+    return moment.localeData().longDateFormat('LT');
+  },
+
+  events() {
+    return [{
+      'keyup .js-date-field'() {
+        // parse for localized date format in strict mode
+        const dateMoment = moment(this.find('#date').value, 'L', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+          this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
+        }
+      },
+      'keyup .js-time-field'() {
+        // parse for localized time format in strict mode
+        const dateMoment = moment(this.find('#time').value, 'LT', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+        }
+      },
+      'submit .edit-date'(evt) {
+        evt.preventDefault();
+
+        // if no time was given, init with 12:00
+        const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT');
+
+        const dateString = `${evt.target.date.value} ${time}`;
+        const newDate = moment(dateString, 'L LT', true);
+        if (newDate.isValid()) {
+          this._storeDate(newDate.toDate());
+          Popup.close();
+        }
+        else {
+          this.error.set('invalid-date');
+          evt.target.date.focus();
+        }
+      },
+      'click .js-delete-date'(evt) {
+        evt.preventDefault();
+        this._deleteDate();
+        Popup.close();
+      },
+    }];
+  },
+});
+
+Template.dateBadge.helpers({
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
+
+// editCardStartDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super.onCreated();
+    this.data().startAt && this.date.set(moment(this.data().startAt));
+  }
+
+  _storeDate(date) {
+    this.card.setStart(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetStart();
+  }
+}).register('editCardStartDatePopup');
+
+// editCardDueDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super.onCreated();
+    this.data().dueAt && this.date.set(moment(this.data().dueAt));
+  }
+
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.startAt)) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.startAt);
+    }
+  }
+
+  _storeDate(date) {
+    this.card.setDue(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetDue();
+  }
+}).register('editCardDueDatePopup');
+
+
+// Display start & due dates
+const CardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'dateBadge';
+  },
+
+  onCreated() {
+    const self = this;
+    self.date = ReactiveVar();
+    self.now = ReactiveVar(moment());
+    window.setInterval(() => {
+      self.now.set(moment());
+    }, 60000);
+  },
+
+  showDate() {
+    // this will start working once mquandalle:moment
+    // is updated to at least moment.js 2.10.5
+    // until then, the date is displayed in the "L" format
+    return this.date.get().calendar(null, {
+      sameElse: 'llll',
+    });
+  },
+
+  showISODate() {
+    return this.date.get().toISOString();
+  },
+});
+
+class CardStartDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().startAt));
+    });
+  }
+
+  classes() {
+    let classes = 'start-date' + ' ';
+    if (this.date.get().isBefore(this.now.get(), 'minute') &&
+        this.now.get().isBefore(this.data().dueAt)) {
+      classes += 'current';
+    }
+    return classes;
+  }
+
+  showTitle() {
+    return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardStartDate'),
+    });
+  }
+}
+CardStartDate.register('cardStartDate');
+
+class CardDueDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().dueAt));
+    });
+  }
+
+  classes() {
+    let classes = 'due-date' + ' ';
+    if (this.now.get().diff(this.date.get(), 'days') >= 2)
+      classes += 'long-overdue';
+    else if (this.now.get().diff(this.date.get(), 'minute') >= 0)
+      classes += 'due';
+    else if (this.now.get().diff(this.date.get(), 'days') >= -1)
+      classes += 'almost-due';
+    return classes;
+  }
+
+  showTitle() {
+    return `${TAPi18n.__('card-due-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardDueDate'),
+    });
+  }
+}
+CardDueDate.register('cardDueDate');
+
+(class extends CardStartDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardStartDate');
+
+(class extends CardDueDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardDueDate');
@@ -0,0 +1,68 @@
+.edit-card-date
+  .fields
+    .left
+      width: 56%
+    .right
+      width: 38%
+  .datepicker
+    width: 100%
+    table
+      width: 100%
+      border: none
+      border-spacing: 0
+      border-collapse: collapse
+      thead
+        background: none
+      td, th
+        box-sizing: border-box
+
+
+.card-date
+  display: block
+  border-radius: 4px
+  padding: 1px 3px
+  
+  background-color: #dbdbdb
+  &:hover, &.is-active
+    background-color: #b3b3b3
+  
+  &.current, &.almost-due, &.due, &.long-overdue
+    color: #fff
+
+  &.current
+    background-color: #5ba639
+    &:hover, &.is-active
+      background-color: darken(#5ba639, 10)
+  
+  &.almost-due
+    background-color: #edc909
+    &:hover, &.is-active
+      background-color: darken(#edc909, 10)
+  
+  &.due
+    background-color: #fa3f00
+    &:hover, &.is-active
+      background-color: darken(#fa3f00, 10)
+  
+  &.long-overdue
+    background-color: #fd5d47
+    &:hover, &.is-active
+      background-color: darken(#fd5d47, 7)
+
+  &.due-date
+    time
+      &::before
+        content: "\f090"  // symbol: fa-sign-in
+
+  &.start-date
+    time
+      &::before
+        content: "\f08b"  // symbol: fa-sign-out
+
+  time
+    &::before
+      font: normal normal normal 14px/1 FontAwesome
+      font-size: inherit
+      -webkit-font-smoothing: antialiased
+      margin-right: 0.3em
+
@@ -2,17 +2,17 @@ template(name="cardDetails")
  section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas
    .card-details-header
      +inlinedForm(classNames="js-card-details-title")
-        input.full-line(type="text" value=title autofocus)
-        .edit-controls.clearfix
-          button.primary.confirm(type="submit") {{_ 'save'}}
-          a.fa.fa-times-thin.js-close-inlined-form
+        +editCardTitleForm
      else
        a.fa.fa-times-thin.close-card-details.js-close-card-details
        if currentUser.isBoardMember
-          a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu
+          a.fa.fa-navicon.card-details-menu.js-open-card-details-menu
        h2.card-details-title.js-card-title(
-          class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
-            = title
+          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
+            +viewer
+              = title
+              if isWatching
+                i.fa.fa-eye.card-details-watch

    if archived
      p.warning {{_ 'card-archived'}}
@@ -23,21 +23,40 @@ template(name="cardDetails")
        each members
          +userAvatar(userId=this cardId=../_id)
          | {{! XXX Hack to hide syntaxic coloration /// }}
-        if currentUser.isBoardMember
+        if canModifyCard
          a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
            i.fa.fa-plus

      .card-details-item.card-details-item-labels
        h3.card-details-item-title {{_ 'labels'}}
-        a(class="{{#if currentUser.isBoardMember}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
+        a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
          each labels
            span.card-label(class="card-label-{{color}}" title=name)= name
-        if currentUser.isBoardMember
+        if canModifyCard
          a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
            i.fa.fa-plus

+      if startAt
+        .card-details-item.card-details-item-start
+          h3.card-details-item-title {{_ 'card-start'}}
+          +cardStartDate
+
+      if dueAt
+        .card-details-item.card-details-item-due
+          h3.card-details-item-title {{_ 'card-due'}}
+          +cardDueDate
+
+    .card-details-items
+      if spentTime
+        .card-details-item.card-details-item-spent
+          if isOvertime
+            h3.card-details-item-title {{_ 'overtime-hours'}}
+          else
+            h3.card-details-item-title {{_ 'spent-time-hours'}}
+          +cardSpentTime
+
    //- XXX We should use "editable" to avoid repetiting ourselves
-    if currentUser.isBoardMember
+    if canModifyCard
      h3.card-details-item-title {{_ 'description'}}
      +inlinedCardDescription(classNames="card-description js-card-description")
        +editor(autofocus=true)
@@ -62,39 +81,115 @@ template(name="cardDetails")
      h3.card-details-item-title {{_ 'description'}}
      +viewer
        = description
-    if attachments.count
-      hr
-      h2
-        i.fa.fa-paperclip
-        | {{_ 'attachments'}}
-
-      +attachmentsGalery

    hr
-    h2 {{ _ 'activity'}}
+    +checklists(cardId = _id)
+
+    hr
+    h2
+      i.fa.fa-paperclip
+      | {{_ 'attachments'}}
+
+    +attachmentsGalery
+
+    hr
+    .activity-title
+      h2 {{ _ 'activity'}}
+      if currentUser.isBoardMember
+        .material-toggle-switch
+          span.toggle-switch-title {{_ 'hide-system-messages'}}
+          if hiddenSystemMessages
+            input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
+          else
+            input.toggle-switch(type="checkbox" id="toggleButton")
+          label.toggle-label(for="toggleButton")
    if currentUser.isBoardMember
      +commentForm
    if isLoaded.get
      +activities(card=this mode="card")

+template(name="editCardTitleForm")
+  textarea.js-edit-card-title(rows='1' autofocus)
+    = title
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+
 template(name="cardDetailsActionsPopup")
  ul.pop-over-list
-    li: a.js-members {{_ 'card-edit-members'}}
-    li: a.js-labels {{_ 'card-edit-labels'}}
-    li: a.js-attachments {{_ 'card-edit-attachments'}}
-  hr
-  ul.pop-over-list
-    li: a.js-move-card {{_ 'moveCardPopup-title'}}
-    unless archived
-      li: a.js-archive {{_ 'archive-card'}}
-    li: a.js-more {{_ 'cardMorePopup-title'}}
+    li: a.js-toggle-watch-card {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}}
+  if canModifyCard
+    hr
+    ul.pop-over-list
+      li: a.js-members {{_ 'card-edit-members'}}
+      li: a.js-labels {{_ 'card-edit-labels'}}
+      li: a.js-attachments {{_ 'card-edit-attachments'}}
+      li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
+      li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
+      li: a.js-spent-time {{_ 'editCardSpentTimePopup-title'}}
+    hr
+    ul.pop-over-list
+      li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}
+      li: a.js-move-card-to-bottom {{_ 'moveCardToBottom-title'}}
+    hr
+    ul.pop-over-list
+      li: a.js-move-card {{_ 'moveCardPopup-title'}}
+      li: a.js-copy-card {{_ 'copyCardPopup-title'}}
+      li: a.js-copy-checklist-cards {{_ 'copyChecklistToManyCardsPopup-title'}}
+      unless archived
+        li: a.js-archive {{_ 'archive-card'}}
+      li: a.js-more {{_ 'cardMorePopup-title'}}

 template(name="moveCardPopup")
-  +boardLists
+  if isSandstorm
+    +boardLists
+  else
+    +boardsAndLists
+
+template(name="copyCardPopup")
+  label(for='copy-card-title') {{_ 'title'}}:
+  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
+    = title
+  if isSandstorm
+    +boardLists
+  else
+    +boardsAndLists
+
+
+template(name="copyChecklistToManyCardsPopup")
+  label(for='copy-checklist-cards-title') {{_ 'copyChecklistToManyCardsPopup-instructions'}}:
+  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
+    | {{_ 'copyChecklistToManyCardsPopup-format'}}
+  if isSandstorm
+    +boardLists
+  else
+    +boardsAndLists
+
+template(name="boardsAndLists")
+  label {{_ 'boards'}}:
+  select.js-select-boards
+    each boards
+      if $eq _id currentBoard._id
+        option(value="{{_id}}" selected) {{_ 'current'}}
+      else
+        option(value="{{_id}}") {{title}}
+
+  label {{_ 'swimlanes'}}:
+  select.js-select-swimlanes
+    each swimlanes
+      option(value="{{_id}}") {{title}}
+
+  label {{_ 'lists'}}:
+  select.js-select-lists
+    each aBoardLists
+      option(value="{{_id}}") {{title}}
+
+  .edit-controls.clearfix
+    button.primary.confirm.js-done {{_ 'done'}}

 template(name="cardMembersPopup")
  ul.pop-over-list.js-card-member-list
-    each board.members
+    each board.activeMembers
      li.item(class="{{#if isCardMember}}active{{/if}}")
        a.name.js-select-member(href="#")
          +userAvatar(userId=user._id)
@@ -110,7 +205,10 @@ template(name="cardMorePopup")
      span {{_ 'link-card'}}
      = ' '
      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-      input.inline-input(type="text" readonly value="{{ rootUrl }}")
+      input.inline-input(type="text" id="cardURL" readonly value="{{ absoluteUrl }}")
+      button.js-copy-card-link-to-clipboard(class="btn") {{_ 'copy-card-link-to-clipboard'}}
+    span.clearfix
+    br
    | {{_ 'added'}}
    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
    a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}
@@ -1,34 +1,51 @@
-BlazeComponent.extendComponent({
-  template() {
-    return 'cardDetails';
-  },
+const subManager = new SubsManager();

+BlazeComponent.extendComponent({
  mixins() {
    return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  },

  calculateNextPeak() {
-    const altitude = this.find('.js-card-details').scrollHeight;
-    this.callFirstWith(this, 'setNextPeak', altitude);
+    const cardElement = this.find('.js-card-details');
+    if (cardElement) {
+      const altitude = cardElement.scrollHeight;
+      this.callFirstWith(this, 'setNextPeak', altitude);
+    }
  },

  reachNextPeak() {
-    const activitiesComponent = this.componentChildren('activities')[0];
+    const activitiesComponent = this.childComponents('activities')[0];
    activitiesComponent.loadNextPage();
  },

  onCreated() {
    this.isLoaded = new ReactiveVar(false);
-    this.componentParent().showOverlay.set(true);
-    this.componentParent().mouseHasEnterCardDetails = false;
+    this.parentComponent().parentComponent().showOverlay.set(true);
+    this.parentComponent().parentComponent().mouseHasEnterCardDetails = false;
+    this.calculateNextPeak();
+
+    Meteor.subscribe('unsaved-edits');
+  },
+
+  isWatching() {
+    const card = this.currentData();
+    return card.findWatcher(Meteor.userId());
+  },
+
+  hiddenSystemMessages() {
+    return Meteor.user().hasHiddenSystemMessages();
+  },
+
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
  },

  scrollParentContainer() {
    const cardPanelWidth = 510;
-    const bodyBoardComponent = this.componentParent();
+    const bodyBoardComponent = this.parentComponent().parentComponent();

-    const $cardContainer = bodyBoardComponent.$('.js-lists');
    const $cardView = this.$(this.firstNode());
+    const $cardContainer = bodyBoardComponent.$('.js-swimlanes');
    const cardContainerScroll = $cardContainer.scrollLeft();
    const cardContainerWidth = $cardContainer.width();

@@ -38,7 +55,7 @@ BlazeComponent.extendComponent({
    let offset = false;
    if (cardViewStart < 0) {
      offset = cardViewStart;
-    } else if(cardViewEnd > cardContainerWidth) {
+    } else if (cardViewEnd > cardContainerWidth) {
      offset = cardViewEnd - cardContainerWidth;
    }

@@ -48,51 +65,52 @@ BlazeComponent.extendComponent({
  },

  onRendered() {
-    this.scrollParentContainer();
+    if (!Utils.isMiniScreen()) this.scrollParentContainer();
  },

  onDestroyed() {
-    this.componentParent().showOverlay.set(false);
-  },
-
-  updateCard(modifier) {
-    Cards.update(this.data()._id, {
-      $set: modifier,
-    });
+    this.parentComponent().parentComponent().showOverlay.set(false);
  },

  events() {
    const events = {
+      [`${CSSEvents.transitionend} .js-card-details`]() {
+        this.isLoaded.set(true);
+      },
      [`${CSSEvents.animationend} .js-card-details`]() {
        this.isLoaded.set(true);
      },
    };

-    return [_.extend(events, {
-      'click .js-close-card-details'() {
+    return [{
+      ...events,
+      'click .js-close-card-details' () {
        Utils.goBoardId(this.data().boardId);
      },
      'click .js-open-card-details-menu': Popup.open('cardDetailsActions'),
-      'submit .js-card-description'(evt) {
+      'submit .js-card-description' (evt) {
        evt.preventDefault();
        const description = this.currentComponent().getValue();
-        this.updateCard({ description });
+        this.data().setDescription(description);
      },
-      'submit .js-card-details-title'(evt) {
+      'submit .js-card-details-title' (evt) {
        evt.preventDefault();
-        const title = this.currentComponent().getValue();
-        if ($.trim(title)) {
-          this.updateCard({ title });
+        const title = this.currentComponent().getValue().trim();
+        if (title) {
+          this.data().setTitle(title);
        }
      },
      'click .js-member': Popup.open('cardMember'),
      'click .js-add-members': Popup.open('cardMembers'),
      'click .js-add-labels': Popup.open('cardLabels'),
-      'mouseenter .js-card-details'() {
-        this.componentParent().showOverlay.set(true);
-        this.componentParent().mouseHasEnterCardDetails = true;
+      'mouseenter .js-card-details' () {
+        this.parentComponent().parentComponent().showOverlay.set(true);
+        this.parentComponent().parentComponent().mouseHasEnterCardDetails = true;
      },
-    })];
+      'click #toggleButton'() {
+        Meteor.call('toggleSystemMessages');
+      },
+    }];
  },
 }).register('cardDetails');

@@ -111,12 +129,12 @@ BlazeComponent.extendComponent({

  close(isReset = false) {
    if (this.isOpen.get() && !isReset) {
-      const draft = $.trim(this.getValue());
+      const draft = this.getValue().trim();
      if (draft !== Cards.findOne(Session.get('currentCard')).description) {
        UnsavedEdits.set(this._getUnsavedEditKey(), this.getValue());
      }
    }
-    super();
+    super.close();
  }

  reset() {
@@ -133,51 +151,256 @@ BlazeComponent.extendComponent({
  }
 }).register('inlinedCardDescription');

+Template.cardDetailsActionsPopup.helpers({
+  isWatching() {
+    return this.findWatcher(Meteor.userId());
+  },
+
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
+
 Template.cardDetailsActionsPopup.events({
  'click .js-members': Popup.open('cardMembers'),
  'click .js-labels': Popup.open('cardLabels'),
  'click .js-attachments': Popup.open('cardAttachments'),
+  'click .js-start-date': Popup.open('editCardStartDate'),
+  'click .js-due-date': Popup.open('editCardDueDate'),
+  'click .js-spent-time': Popup.open('editCardSpentTime'),
  'click .js-move-card': Popup.open('moveCard'),
-  // 'click .js-copy': Popup.open(),
-  'click .js-archive'(evt) {
+  'click .js-copy-card': Popup.open('copyCard'),
+  'click .js-copy-checklist-cards': Popup.open('copyChecklistToManyCards'),
+  'click .js-move-card-to-top' (evt) {
    evt.preventDefault();
-    Cards.update(this._id, {
-      $set: {
-        archived: true,
-      },
-    });
+    const minOrder = _.min(this.list().cards(this.swimlaneId).map((c) => c.sort));
+    this.move(this.swimlaneId, this.listId, minOrder - 1);
+  },
+  'click .js-move-card-to-bottom' (evt) {
+    evt.preventDefault();
+    const maxOrder = _.max(this.list().cards(this.swimlaneId).map((c) => c.sort));
+    this.move(this.swimlaneId, this.listId, maxOrder + 1);
+  },
+  'click .js-archive' (evt) {
+    evt.preventDefault();
+    this.archive();
    Popup.close();
  },
  'click .js-more': Popup.open('cardMore'),
+  'click .js-toggle-watch-card' () {
+    const currentCard = this;
+    const level = currentCard.findWatcher(Meteor.userId()) ? null : 'watching';
+    Meteor.call('watch', 'card', currentCard._id, level, (err, ret) => {
+      if (!err && ret) Popup.close();
+    });
+  },
+});
+
+Template.editCardTitleForm.onRendered(function () {
+  autosize(this.$('.js-edit-card-title'));
+});
+
+Template.editCardTitleForm.events({
+  'keydown .js-edit-card-title' (evt) {
+    // If enter key was pressed, submit the data
+    // Unless the shift key is also being pressed
+    if (evt.keyCode === 13 && !evt.shiftKey) {
+      $('.js-submit-edit-card-title-form').click();
+    }
+  },
 });

 Template.moveCardPopup.events({
-  'click .js-select-list'() {
+  'click .js-done' () {
    // XXX We should *not* get the currentCard from the global state, but
    // instead from a “component” state.
-    const cardId = Session.get('currentCard');
-    const newListId = this._id;
-    Cards.update(cardId, {
-      $set: {
-        listId: newListId,
-      },
-    });
+    const card = Cards.findOne(Session.get('currentCard'));
+    const lSelect = $('.js-select-lists')[0];
+    const newListId = lSelect.options[lSelect.selectedIndex].value;
+    const slSelect = $('.js-select-swimlanes')[0];
+    card.swimlaneId = slSelect.options[slSelect.selectedIndex].value;
+    card.move(card.swimlaneId, newListId, 0);
    Popup.close();
  },
 });

+BlazeComponent.extendComponent({
+  onCreated() {
+    subManager.subscribe('board', Session.get('currentBoard'));
+    this.selectedBoardId = new ReactiveVar(Session.get('currentBoard'));
+  },
+
+  boards() {
+    const boards = Boards.find({
+      archived: false,
+      'members.userId': Meteor.userId(),
+    }, {
+      sort: ['title'],
+    });
+    return boards;
+  },
+
+  swimlanes() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.swimlanes();
+  },
+
+  aBoardLists() {
+    const board = Boards.findOne(this.selectedBoardId.get());
+    return board.lists();
+  },
+
+  events() {
+    return [{
+      'change .js-select-boards'(evt) {
+        this.selectedBoardId.set($(evt.currentTarget).val());
+        subManager.subscribe('board', this.selectedBoardId.get());
+      },
+    }];
+  },
+}).register('boardsAndLists');
+
+Template.copyCardPopup.events({
+  'click .js-done'() {
+    const card = Cards.findOne(Session.get('currentCard'));
+    const oldId = card._id;
+    card._id = null;
+    const lSelect = $('.js-select-lists')[0];
+    card.listId = lSelect.options[lSelect.selectedIndex].value;
+    const slSelect = $('.js-select-swimlanes')[0];
+    card.swimlaneId = slSelect.options[slSelect.selectedIndex].value;
+    const bSelect = $('.js-select-boards')[0];
+    card.boardId = bSelect.options[bSelect.selectedIndex].value;
+    const textarea = $('#copy-card-title');
+    const title = textarea.val().trim();
+    // insert new card to the bottom of new list
+    card.sort = Lists.findOne(card.listId).cards().count();
+
+    if (title) {
+      card.title = title;
+      card.coverId = '';
+      const _id = Cards.insert(card);
+      // In case the filter is active we need to add the newly inserted card in
+      // the list of exceptions -- cards that are not filtered. Otherwise the
+      // card will disappear instantly.
+      // See https://github.com/wekan/wekan/issues/80
+      Filter.addException(_id);
+
+      // copy checklists
+      let cursor = Checklists.find({cardId: oldId});
+      cursor.forEach(function() {
+        'use strict';
+        const checklist = arguments[0];
+        checklist.cardId = _id;
+        checklist._id = null;
+        Checklists.insert(checklist);
+      });
+
+      // copy card comments
+      cursor = CardComments.find({cardId: oldId});
+      cursor.forEach(function () {
+        'use strict';
+        const comment = arguments[0];
+        comment.cardId = _id;
+        comment._id = null;
+        CardComments.insert(comment);
+      });
+      Popup.close();
+    }
+  },
+});
+
+Template.copyChecklistToManyCardsPopup.events({
+  'click .js-select-list' (evt) {
+    const card = Cards.findOne(Session.get('currentCard'));
+    const oldId = card._id;
+    card._id = null;
+    card.listId = this._id;
+    const list = Lists.findOne(card.listId);
+    card.boardId = list.boardId;
+    const textarea = $(evt.currentTarget).parents('.content').find('textarea');
+    const titleEntry = textarea.val().trim();
+    // insert new card to the bottom of new list
+    card.sort = Lists.findOne(this._id).cards().count();
+
+    if (titleEntry) {
+      const titleList = JSON.parse(titleEntry);
+      for (let i = 0; i < titleList.length; i++){
+        const obj = titleList[i];
+        card.title = obj.title;
+        card.description = obj.description;
+        card.coverId = '';
+        const _id = Cards.insert(card);
+        // In case the filter is active we need to add the newly inserted card in
+        // the list of exceptions -- cards that are not filtered. Otherwise the
+        // card will disappear instantly.
+        // See https://github.com/wekan/wekan/issues/80
+        Filter.addException(_id);
+
+        // copy checklists
+        let cursor = Checklists.find({cardId: oldId});
+        cursor.forEach(function() {
+          'use strict';
+          const checklist = arguments[0];
+          checklist.cardId = _id;
+          checklist._id = null;
+          Checklists.insert(checklist);
+        });
+
+        // copy card comments
+        cursor = CardComments.find({cardId: oldId});
+        cursor.forEach(function () {
+          'use strict';
+          const comment = arguments[0];
+          comment.cardId = _id;
+          comment._id = null;
+          CardComments.insert(comment);
+        });
+      }
+      Popup.close();
+    }
+  },
+});
+
+
 Template.cardMorePopup.events({
-  'click .js-delete': Popup.afterConfirm('cardDelete', () => {
+  'click .js-copy-card-link-to-clipboard' () {
+    // Clipboard code from:
+    // https://stackoverflow.com/questions/6300213/copy-selected-text-to-the-clipboard-without-using-flash-must-be-cross-browser
+    const StringToCopyElement = document.getElementById('cardURL');
+    StringToCopyElement.select();
+    if (document.execCommand('copy')) {
+      StringToCopyElement.blur();
+    } else {
+      document.getElementById('cardURL').selectionStart = 0;
+      document.getElementById('cardURL').selectionEnd = 999;
+      document.execCommand('copy');
+      if (window.getSelection) {
+        if (window.getSelection().empty) { // Chrome
+          window.getSelection().empty();
+        } else if (window.getSelection().removeAllRanges) { // Firefox
+          window.getSelection().removeAllRanges();
+        }
+      } else if (document.selection) { // IE?
+        document.selection.empty();
+      }
+    }
+  },
+  'click .js-delete': Popup.afterConfirm('cardDelete', function () {
    Popup.close();
    Cards.remove(this._id);
-    Utils.goBoardId(this.board()._id);
+    Utils.goBoardId(this.boardId);
  }),
 });

 // Close the card details pane by pressing escape
 EscapeActions.register('detailsPane',
-  () => { Utils.goBoardId(Session.get('currentBoard')); },
-  () => { return !Session.equals('currentCard', null); }, {
+  () => {
+    Utils.goBoardId(Session.get('currentBoard'));
+  },
+  () => {
+    return !Session.equals('currentCard', null);
+  }, {
    noClickEscapeOn: '.js-card-details,.board-sidebar,#header',
  }
 );
@@ -2,7 +2,6 @@

 .card-details
  padding: 0 20px
-  height: 100%
  flex-shrink: 0
  flex-basis: 470px
  will-change: flex-basis
@@ -36,6 +35,11 @@
      font-size: 17px
      padding: 10px

+    .card-details-watch
+      font-size: 17px
+      padding-left: 7px
+      color: #a6a6a6
+
    .card-details-title
      font-weight: bold
      font-size: 1.33em
@@ -68,8 +72,13 @@
    margin: 15px 0

    .card-details-item
+      margin-right: 0.5em
+      &:last-child
+        margin-right: 0
      &.card-details-item-labels,
-      &.card-details-item-members
+      &.card-details-item-members,
+      &.card-details-item-start,
+      &.card-details-item-due
        width: 50%
        flex-shrink: 1

@@ -94,3 +103,20 @@ input[type="submit"].attachment-add-link-submit
  margin: 0 0 8px 4px
  padding: 6px 12px
  width: 18%
+
+@media screen and (max-width: 800px)
+  .card-details
+    width: calc(100% - 40px)
+    padding: 0px 20px 0px 20px
+    margin: 0px
+    transition: none
+
+    .card-details-canvas
+      width: 100%
+
+    .card-details-header
+      .close-card-details
+        margin-right: 0px
+
+      .card-details-menu
+        margin-right: 10px
@@ -0,0 +1,22 @@
+template(name="editCardSpentTime")
+  .edit-card-time
+    form.edit-time
+      .fields
+        label(for="time") {{_ 'time'}}
+        input.js-time-field#time(type="number" step="0.01" name="time" value="{{card.spentTime}}" placeholder=timeFormat autofocus)
+        label(for="overtime") {{_ 'overtime'}}
+        a.js-toggle-overtime
+          .materialCheckBox#overtime(class="{{#if card.isOvertime}}is-checked{{/if}}" name="overtime")
+
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
+      button.js-delete-time.negate.wide.right {{_ 'delete'}}
+
+template(name="timeBadge")
+  if canModifyCard
+    a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if isOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | {{showTime}}
+  else
+    a.card-time(title="{{showTitle}}" class="{{#if isOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | {{showTime}}
@@ -0,0 +1,81 @@
+BlazeComponent.extendComponent({
+  template() {
+    return 'editCardSpentTime';
+  },
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+  },
+  toggleOvertime() {
+    this.card.isOvertime = !this.card.isOvertime;
+    $('#overtime .materialCheckBox').toggleClass('is-checked');
+
+    $('#overtime').toggleClass('is-checked');
+  },
+  storeTime(spentTime, isOvertime) {
+    this.card.setSpentTime(spentTime);
+    this.card.setOvertime(isOvertime);
+  },
+  deleteTime() {
+    this.card.unsetSpentTime();
+  },
+  events() {
+    return [{
+      //TODO : need checking this portion
+      'submit .edit-time'(evt) {
+        evt.preventDefault();
+
+        const spentTime = parseFloat(evt.target.time.value);
+        const isOvertime = this.card.isOvertime;
+
+        if (spentTime >= 0) {
+          this.storeTime(spentTime, isOvertime);
+          Popup.close();
+        } else {
+          this.error.set('invalid-time');
+          evt.target.time.focus();
+        }
+      },
+      'click .js-delete-time'(evt) {
+        evt.preventDefault();
+        this.deleteTime();
+        Popup.close();
+      },
+      'click a.js-toggle-overtime': this.toggleOvertime,
+    }];
+  },
+}).register('editCardSpentTimePopup');
+
+BlazeComponent.extendComponent({
+  template() {
+    return 'timeBadge';
+  },
+  onCreated() {
+    const self = this;
+    self.time = ReactiveVar();
+  },
+  showTitle() {
+    if (this.data().isOvertime) {
+      return `${TAPi18n.__('overtime')} ${this.data().spentTime} ${TAPi18n.__('hours')}`;
+    } else {
+      return `${TAPi18n.__('card-spent')} ${this.data().spentTime} ${TAPi18n.__('hours')}`;
+    }
+  },
+  showTime() {
+    return this.data().spentTime;
+  },
+  isOvertime() {
+    return this.data().isOvertime;
+  },
+  events() {
+    return [{
+      'click .js-edit-time': Popup.open('editCardSpentTime'),
+    }];
+  },
+}).register('cardSpentTime');
+
+Template.timeBadge.helpers({
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
@@ -0,0 +1,17 @@
+.card-time
+  display: block
+  border-radius: 4px
+  padding: 1px 3px
+  color: #fff
+
+  background-color: #dbdbdb
+  &:hover, &.is-active
+    background-color: #b3b3b3
+
+  time
+    &::before
+      font: normal normal normal 14px/1 FontAwesome
+      font-size: inherit
+      -webkit-font-smoothing: antialiased
+      content: "\f017"  // clock symbol
+      margin-right: 0.3em
@@ -0,0 +1,97 @@
+template(name="checklists")
+  h2 {{_ 'checklists'}}
+  if toggleDeleteDialog.get
+    .board-overlay#card-details-overlay
+    +checklistDeleteDialog(checklist = checklistToDelete)
+
+
+  .card-checklist-items
+    each checklist in currentCard.checklists
+      +checklistDetail(checklist = checklist)
+
+  if canModifyCard
+    +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
+      +addChecklistItemForm
+    else
+      a.js-open-inlined-form
+        i.fa.fa-plus
+        | {{_ 'add-checklist'}}...
+
+template(name="checklistDetail")
+  +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
+    +editChecklistItemForm(checklist = checklist)
+  else
+    .checklist-title
+      .checkbox.fa.fa-check-square-o
+      if canModifyCard
+        a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+
+      span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
+      if canModifyCard
+        h2.title.js-open-inlined-form.is-editable
+          +viewer
+            = checklist.title
+      else
+        h2.title
+          +viewer
+              = checklist.title
+  +checklistItems(checklist = checklist)
+
+template(name="checklistDeleteDialog")
+  .js-confirm-checklist-delete
+    p
+      i(class="fa fa-exclamation-triangle" aria-hidden="true")
+    p
+      | {{_ 'confirm-checklist-delete-dialog'}}
+      span {{checklist.title}}
+      | ?
+    .js-checklist-delete-buttons
+      button.confirm-checklist-delete(type="button") {{_ 'delete'}}
+      button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
+
+template(name="addChecklistItemForm")
+  textarea.js-add-checklist-item(rows='1' autofocus)
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+
+template(name="editChecklistItemForm")
+  textarea.js-edit-checklist-item(rows='1' autofocus)
+    if $eq type 'item'
+      = item.title
+    else
+      = checklist.title
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+    span(title=createdAt) {{ moment createdAt }}
+    if canModifyCard
+      a.js-delete-checklist-item {{_ "delete"}}...
+
+template(name="checklistItems")
+  .checklist-items.js-checklist-items
+    each item in checklist.getItemsSorted
+      +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
+        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
+      else
+        +itemDetail(item = item checklist = checklist)
+    if canModifyCard
+      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
+        +addChecklistItemForm
+      else
+        a.add-checklist-item.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-checklist-item'}}...
+
+template(name='itemDetail')
+  .item.js-checklist-item
+    if canModifyCard
+      .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
+        +viewer
+          = item.title
+    else
+      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
+        +viewer
+          = item.title
@@ -0,0 +1,222 @@
+function initSorting(items) {
+  items.sortable({
+    tolerance: 'pointer',
+    helper: 'clone',
+    items: '.js-checklist-item:not(.placeholder)',
+    axis: 'y',
+    distance: 7,
+    placeholder: 'placeholder',
+    scroll: false,
+    start(evt, ui) {
+      ui.placeholder.height(ui.helper.height());
+      EscapeActions.executeUpTo('popup-close');
+    },
+    stop(evt, ui) {
+      const parent = ui.item.parents('.js-checklist-items');
+      const orderedItems = [];
+      parent.find('.js-checklist-item').each(function(i, item) {
+        const checklistItem = Blaze.getData(item).item;
+        orderedItems.push(checklistItem._id);
+      });
+      items.sortable('cancel');
+      const formerParent = ui.item.parents('.js-checklist-items');
+      const checklist = Blaze.getData(parent.get(0)).checklist;
+      const oldChecklist = Blaze.getData(formerParent.get(0)).checklist;
+      if (oldChecklist._id !== checklist._id) {
+        const currentItem = Blaze.getData(ui.item.get(0)).item;
+        for (let i = 0; i < orderedItems.length; i++) {
+          const itemId = orderedItems[i];
+          if (itemId !== currentItem._id) continue;
+          const newItem = {
+            _id: checklist.getNewItemId(),
+            title: currentItem.title,
+            sort: i,
+            isFinished: currentItem.isFinished,
+          };
+          checklist.addFullItem(newItem);
+          orderedItems[i] = currentItem._id;
+          oldChecklist.removeItem(itemId);
+        }
+      } else {
+        checklist.sortItems(orderedItems);
+      }
+    },
+  });
+}
+
+Template.checklists.onRendered(function () {
+  const self = BlazeComponent.getComponentForElement(this.firstNode);
+  self.itemsDom = this.$('.card-checklist-items');
+  initSorting(self.itemsDom);
+  self.itemsDom.mousedown(function(evt) {
+    evt.stopPropagation();
+  });
+
+  function userIsMember() {
+    return Meteor.user() && Meteor.user().isBoardMember();
+  }
+
+  // Disable sorting if the current user is not a board member
+  self.autorun(() => {
+    const $itemsDom = $(self.itemsDom);
+    if ($itemsDom.data('sortable')) {
+      $(self.itemsDom).sortable('option', 'disabled', !userIsMember());
+    }
+  });
+});
+
+BlazeComponent.extendComponent({
+
+  addChecklist(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-add-checklist-item');
+    const title = textarea.value.trim();
+    const cardId = this.currentData().cardId;
+    const card = Cards.findOne(cardId);
+
+    if (title) {
+      Checklists.insert({
+        cardId,
+        title,
+        sort: card.checklists().count(),
+      });
+      setTimeout(() => {
+        this.$('.add-checklist-item').last().click();
+      }, 100);
+    }
+    textarea.value = '';
+    textarea.focus();
+  },
+
+  addChecklistItem(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-add-checklist-item');
+    const title = textarea.value.trim();
+    const checklist = this.currentData().checklist;
+
+    if (title) {
+      checklist.addItem(title);
+    }
+    // We keep the form opened, empty it.
+    textarea.value = '';
+    textarea.focus();
+  },
+
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+
+  deleteChecklist() {
+    const checklist = this.currentData().checklist;
+    if (checklist && checklist._id) {
+      Checklists.remove(checklist._id);
+      this.toggleDeleteDialog.set(false);
+    }
+  },
+
+  deleteItem() {
+    const checklist = this.currentData().checklist;
+    const item = this.currentData().item;
+    if (checklist && item && item._id) {
+      checklist.removeItem(item._id);
+    }
+  },
+
+  editChecklist(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const checklist = this.currentData().checklist;
+    checklist.setTitle(title);
+  },
+
+  editChecklistItem(event) {
+    event.preventDefault();
+
+    const textarea = this.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const itemId = this.currentData().item._id;
+    const checklist = this.currentData().checklist;
+    checklist.editItem(itemId, title);
+  },
+
+  onCreated() {
+    this.toggleDeleteDialog = new ReactiveVar(false);
+    this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
+  },
+
+  pressKey(event) {
+    //If user press enter key inside a form, submit it
+    //Unless the user is also holding down the 'shift' key
+    if (event.keyCode === 13 && !event.shiftKey) {
+      event.preventDefault();
+      const $form = $(event.currentTarget).closest('form');
+      $form.find('button[type=submit]').click();
+    }
+  },
+
+  events() {
+    const events = {
+      'click .toggle-delete-checklist-dialog'(event) {
+        if($(event.target).hasClass('js-delete-checklist')){
+          this.checklistToDelete = this.currentData().checklist; //Store data context
+        }
+        this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
+      },
+    };
+
+    return [{
+      ...events,
+      'submit .js-add-checklist': this.addChecklist,
+      'submit .js-edit-checklist-title': this.editChecklist,
+      'submit .js-add-checklist-item': this.addChecklistItem,
+      'submit .js-edit-checklist-item': this.editChecklistItem,
+      'click .js-delete-checklist-item': this.deleteItem,
+      'click .confirm-checklist-delete': this.deleteChecklist,
+      keydown: this.pressKey,
+    }];
+  },
+}).register('checklists');
+
+Template.checklistDeleteDialog.onCreated(() => {
+  const $cardDetails = this.$('.card-details');
+  this.scrollState = { position: $cardDetails.scrollTop(), //save current scroll position
+    top: false, //required for smooth scroll animation
+  };
+  //Callback's purpose is to only prevent scrolling after animation is complete
+  $cardDetails.animate({ scrollTop: 0 }, 500, () => { this.scrollState.top = true; });
+
+  //Prevent scrolling while dialog is open
+  $cardDetails.on('scroll', () => {
+    if(this.scrollState.top) { //If it's already in position, keep it there. Otherwise let animation scroll
+      $cardDetails.scrollTop(0);
+    }
+  });
+});
+
+Template.checklistDeleteDialog.onDestroyed(() => {
+  const $cardDetails = this.$('.card-details');
+  $cardDetails.off('scroll'); //Reactivate scrolling
+  $cardDetails.animate( { scrollTop: this.scrollState.position });
+});
+
+Template.itemDetail.helpers({
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
+
+BlazeComponent.extendComponent({
+  toggleItem() {
+    const checklist = this.currentData().checklist;
+    const item = this.currentData().item;
+    if (checklist && item && item._id) {
+      checklist.toggleItem(item._id);
+    }
+  },
+  events() {
+    return [{
+      'click .item .check-box': this.toggleItem,
+    }];
+  },
+}).register('itemDetail');
@@ -0,0 +1,111 @@
+.js-add-checklist
+  color: #8c8c8c
+
+textarea.js-add-checklist-item, textarea.js-edit-checklist-item
+  overflow: hidden
+  word-wrap: break-word
+  resize: none
+  height: 34px
+
+.delete-text
+  color: #8c8c8c
+  text-decoration: underline
+  word-wrap: break-word
+  float: right
+  padding-top: 6px
+  &:hover
+    color: inherit
+
+.checklist-title
+  .checkbox
+    float: left
+    width: 30px
+    height 30px
+    font-size: 18px
+    line-height: 30px
+
+  .title
+    font-size: 18px
+    line-height: 30px
+
+  .checklist-stat
+    margin: 0 0.5em
+    float: right
+    padding-top: 6px
+    &.is-finished
+      color: #3cb500
+
+  .js-delete-checklist
+    @extends .delete-text
+
+
+.js-confirm-checklist-delete
+  background-color: darken(white, 3%)
+  position: absolute
+  float: left;
+  width: 60%
+  margin-top: 0
+  margin-left: 13%
+  padding-bottom: 2%
+  padding-left: 3%
+  padding-right: 3%
+  z-index: 17
+  border-radius: 3px
+
+  p
+    position: relative
+    margin-top: 3%
+    width: 100%
+    text-align: center
+    span
+      font-weight: bold
+
+    i
+      font-size: 2em
+
+  .js-checklist-delete-buttons
+    position: relative
+    padding: left 2% right 2%
+    .confirm-checklist-delete
+      margin-left: 12%
+      float: left
+    .toggle-delete-checklist-dialog
+      margin-right: 12%
+      float: right
+
+#card-details-overlay
+  top: 0
+  bottom: -600px
+  right: 0
+
+.checklist-items
+  margin: 0 0 0.5em 1.33em
+
+  .item
+    line-height: 25px
+    font-size: 1.1em
+    margin-top: 3px
+    display: flex
+    &:hover
+      background-color: darken(white, 8%)
+
+    .check-box
+      margin-top: 5px
+      &.is-checked
+        border-bottom: 2px solid #3cb500
+        border-right: 2px solid #3cb500
+
+    .item-title
+      flex: 1
+      padding-left: 10px;
+      &.is-checked
+        color: #8c8c8c
+        font-style: italic
+
+  .js-delete-checklist-item
+    @extends .delete-text
+    padding: 12px 0 0 0
+
+  .add-checklist-item
+    padding-top: 0.5em
+    display: inline-block
@@ -18,7 +18,7 @@ template(name="editLabelPopup")
  form.edit-label
    +formLabel
    button.primary.wide.left(type="submit") {{_ 'save'}}
-    span.right
+    button.js-delete-label.negate.wide.right {{_ 'delete'}}

 template(name="deleteLabelPopup")
  p {{_ "label-delete-pop"}}
@@ -34,4 +34,5 @@ template(name="cardLabelsPopup")
            = name
            if(isLabelSelected ../_id)
              i.card-label-selectable-icon.fa.fa-check
-  a.quiet-button.full.js-add-label {{_ 'label-create'}}
+  if currentUser.isBoardAdmin
+    a.quiet-button.full.js-add-label {{_ 'label-create'}}
@@ -4,18 +4,12 @@ Meteor.startup(() => {
 });

 BlazeComponent.extendComponent({
-  template() {
-    return 'formLabel';
-  },
-
  onCreated() {
    this.currentColor = new ReactiveVar(this.data().color);
  },

  labels() {
-    return _.map(labelColors, (color) => {
-      return { color, name: '' };
-    });
+    return labelColors.map((color) => ({ color, name: '' }));
  },

  isSelected(color) {
@@ -45,19 +39,9 @@ Template.createLabelPopup.helpers({

 Template.cardLabelsPopup.events({
  'click .js-select-label'(evt) {
-    const cardId = Template.parentData(2).data._id;
+    const card = Cards.findOne(Session.get('currentCard'));
    const labelId = this._id;
-    let operation;
-    if (Cards.find({ _id: cardId, labelIds: labelId}).count() === 0)
-      operation = '$addToSet';
-    else
-      operation = '$pull';
-
-    Cards.update(cardId, {
-      [operation]: {
-        labelIds: labelId,
-      },
-    });
+    card.toggleLabel(labelId);
    evt.preventDefault();
  },
  'click .js-edit-label': Popup.open('editLabel'),
@@ -79,52 +63,27 @@ Template.formLabel.events({
 Template.createLabelPopup.events({
  // Create the new label
  'submit .create-label'(evt, tpl) {
-    const name = tpl.$('#labelName').val().trim();
-    const boardId = Session.get('currentBoard');
-    const color = Blaze.getData(tpl.find('.fa-check')).color;
-
-    Boards.update(boardId, {
-      $push: {
-        labels: {
-          name,
-          color,
-          _id: Random.id(6),
-        },
-      },
-    });
-
-    Popup.back();
    evt.preventDefault();
+    const board = Boards.findOne(Session.get('currentBoard'));
+    const name = tpl.$('#labelName').val().trim();
+    const color = Blaze.getData(tpl.find('.fa-check')).color;
+    board.addLabel(name, color);
+    Popup.back();
  },
 });

 Template.editLabelPopup.events({
  'click .js-delete-label': Popup.afterConfirm('deleteLabel', function() {
-    const boardId = Session.get('currentBoard');
-    Boards.update(boardId, {
-      $pull: {
-        labels: {
-          _id: this._id,
-        },
-      },
-    });
-
+    const board = Boards.findOne(Session.get('currentBoard'));
+    board.removeLabel(this._id);
    Popup.back(2);
  }),
  'submit .edit-label'(evt, tpl) {
    evt.preventDefault();
+    const board = Boards.findOne(Session.get('currentBoard'));
    const name = tpl.$('#labelName').val().trim();
-    const boardId = Session.get('currentBoard');
-    const getLabel = Utils.getLabelIndex(boardId, this._id);
    const color = Blaze.getData(tpl.find('.fa-check')).color;
-
-    Boards.update(boardId, {
-      $set: {
-        [getLabel.key('name')]: name,
-        [getLabel.key('color')]: color,
-      },
-    });
-
+    board.editLabel(this._id, name, color);
    Popup.back();
  },
 });
@@ -1,13 +1,25 @@
 template(name="minicard")
  .minicard
    if cover
-      .minicard-cover
-        img(src=cover.url)
+      .minicard-cover(style="background-image: url('{{cover.url}}');")
    if labels
      .minicard-labels
        each labels
          .minicard-label(class="card-label-{{color}}" title="{{name}}")
-    .minicard-title= title
+    .minicard-title
+      +viewer
+        = title
+    .dates
+      if startAt
+        .date
+          +minicardStartDate
+      if dueAt
+        .date
+          +minicardDueDate
+      if spentTime
+        .date
+          +cardSpentTime
+
    if members
      .minicard-members.js-minicard-members
        each members
@@ -15,7 +27,7 @@ template(name="minicard")
    .badges
      if comments.count
        .badge(title="{{_ 'card-comments-title' comments.count }}")
-          span.badge-icon.fa.fa-comment-o
+          span.badge-icon.fa.fa-comment-o.badge-comment
          span.badge-text= comments.count
      if description
        .badge.badge-state-image-only(title=description)
@@ -24,3 +36,7 @@ template(name="minicard")
        .badge
          span.badge-icon.fa.fa-paperclip
          span.badge-text= attachments.count
+      if checklists.count
+        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
+          span.badge-icon.fa.fa-check-square-o
+          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
@@ -1,3 +1,5 @@
+@import 'nib'
+
 .minicard-wrapper
  cursor: pointer
  position: relative
@@ -60,16 +62,11 @@
  .minicard-cover
    background-position: center
    background-repeat: no-repeat
-    background-size: cover
+    background-size: contain
    height: 145px
    user-select: none
    margin: -6px -8px 6px -8px
    border-radius: top 2px
-    position: relative
-
-    img
-      height: 100%
-      width: 100%

  .minicard-labels
    float: right
@@ -80,7 +77,15 @@
      height: @width
      border-radius: 2px
      margin-left: 3px
-
+  .minicard-title
+    p:last-child
+      margin-bottom: 0
+  .dates
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  .date
+    margin-right: 3px
  .badges
    float: left
    margin-top: 7px
@@ -94,15 +99,28 @@
      margin-right: 11px
      margin-bottom: 3px
      font-size: 0.9em
+      &.is-finished
+         background: #3cb500
+         padding: 0px 3px
+         border-radius: 3px
+         color: white
+
+      &:last-of-type
+        margin-right: 0

      .badge-icon,
      .badge-text
-        vertical-align: top
+        vertical-align: middle
+        &.badge-comment
+           margin-bottom: 0.1rem

      .badge-text
        font-size: 0.9em
        padding-left: 2px
        line-height: 14px
+      .check-list-text
+        padding-left: 0px
+        line-height: 12px

  .minicard-members
    float: right
@@ -133,5 +151,15 @@
      margin: 0
      padding: 0
      max-height: 162px
-      min-height: 54px
+      min-height: 36px
+      margin-bottom: 20px
      overflow-y: auto
+
+@media screen and (max-width: 800px)
+  .minicard
+    .is-selected &
+      transform: translateX(0px)
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+      z-index: 15
+      box-shadow: 0 1px 2px rgba(0,0,0,.15)
@@ -617,8 +617,74 @@ button
        margin-right: 5px
        vertical-align: middle

+      .minicard-label
+        width: 11px
+        height: @width
+        border-radius: 2px
+        margin: 2px 7px -2px -2px
+        display: inline-block
+
    &.active
      background: #005377

-      a
+      a, .quiet
        color: white
+
+// Material Design Toggle Switch
+.material-toggle-switch
+  display: flex
+
+.toggle-label
+  position: relative
+  display: block
+  height: 20px
+  width: 44px
+  background-color: #a6a6a6
+  border-radius: 100px
+  cursor: pointer
+  transition: all 0.3s ease
+
+  &:after
+    position: absolute
+    left: -2px
+    top: -3px
+    display: block
+    width: 26px
+    height: 26px
+    border-radius: 100px
+    background-color: #fff
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
+    content: ''
+    transition: all 0.3s ease
+
+  &:active
+    &:after
+      transform: scale(1.15, 0.85)
+
+.toggle-switch:checked ~ .toggle-label
+  background-color: #6fbeb5
+
+  &:after
+    left: 20px
+    background-color: #179588
+
+.toggle-switch:checked:disabled ~ .toggle-label
+  background-color: #d5d5d5
+  pointer-events: none
+
+  &:after
+    background-color: #bcbdbc
+
+.toggle-switch
+  display: none
+
+.toggle-switch-title
+  margin: 0 0.5em
+  display: flex
+
+
+@media screen and (max-width: 800px)
+  .edit-controls,
+  .add-controls
+    .fa-times-thin
+      margin: 3px 20px
@@ -0,0 +1,70 @@
+template(name="importHeaderBar")
+  h1
+    a.back-btn(href="{{pathFor 'home'}}")
+      i.fa.fa-chevron-left
+    | {{_ title}}
+
+template(name="import")
+  .wrapper
+    if error.get
+      .warning {{_ error.get}}
+    +Template.dynamic(template=currentTemplate)
+
+template(name="importTextarea")
+  form
+    p: label(for='import-textarea') {{_ instruction}}
+    textarea.js-import-json(placeholder="{{_ 'import-json-placeholder'}}" autofocus)
+      | {{jsonText}}
+    if isSandstorm
+      h1.warning DANGER !!! THIS DESTROYS YOUR IMPORTED DATA, CAUSES BOARD NOT FOUND ERROR WHEN YOU OPEN THIS GRAIN AGAIN https://github.com/wekan/wekan/issues/1430
+      p.warning {{_ 'import-sandstorm-warning'}}
+    input.primary.wide(type="submit" value="{{_ 'import'}}")
+
+template(name="importMapMembers")
+  h2 {{_ 'import-map-members'}}
+  .map-members
+    p {{_ 'import-members-map'}}
+    .mapping-list
+      each members
+        a.mapping-item.js-select-member(class="{{#if wekanId}}filled{{/if}}")
+          .profile-source
+            .full-name= fullName
+            .username
+              | ({{username}})
+          .wekan
+            if wekanId
+              +userAvatar(userId=wekanId)
+            else
+              a.member.add-member
+                i.fa.fa-plus
+      //-
+        Due to the way the flewbox layout is working, we need to set some
+        invisible items so that the last row items have a consistent width.
+        See http://jsfiddle.net/Ln4h3c4n/ for an minimal example of the issue.
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+    form
+      input.primary.wide(type="submit" value="{{_ 'done'}}")
+
+template(name="importMapMembersAddPopup")
+  .select-member
+    p
+      | {{_ 'import-user-select'}}
+    .js-map-member
+      +esInput(index="users")
+    ul.pop-over-list
+      +esEach(index="users")
+        li.item.js-member-item
+          a.name.js-select-import(title="{{profile.fullname}} ({{username}})" data-id="{{_id}}")
+            +userAvatar(userId=_id esSearch=true)
+            span.full-name
+              = profile.fullname
+              | (<span class="username">{{username}}</span>)
+      +ifEsIsSearching(index='users')
+        +spinner
+      +ifEsHasNoResults(index="users")
+        .manage-member-section
+          p.quiet {{_ 'no-results'}}
@@ -0,0 +1,243 @@
+import trelloMembersMapper from './trelloMembersMapper';
+import wekanMembersMapper from './wekanMembersMapper';
+
+BlazeComponent.extendComponent({
+  title() {
+    return `import-board-title-${Session.get('importSource')}`;
+  },
+}).register('importHeaderBar');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.steps = ['importTextarea', 'importMapMembers'];
+    this._currentStepIndex = new ReactiveVar(0);
+    this.importedData = new ReactiveVar();
+    this.membersToMap = new ReactiveVar([]);
+    this.importSource = Session.get('importSource');
+  },
+
+  currentTemplate() {
+    return this.steps[this._currentStepIndex.get()];
+  },
+
+  nextStep() {
+    const nextStepIndex = this._currentStepIndex.get() + 1;
+    if (nextStepIndex >= this.steps.length) {
+      this.finishImport();
+    } else {
+      this._currentStepIndex.set(nextStepIndex);
+    }
+  },
+
+  importData(evt) {
+    evt.preventDefault();
+    const dataJson = this.find('.js-import-json').value;
+    try {
+      const dataObject = JSON.parse(dataJson);
+      this.setError('');
+      this.importedData.set(dataObject);
+      const membersToMap = this._prepareAdditionalData(dataObject);
+      // store members data and mapping in Session
+      // (we go deep and 2-way, so storing in data context is not a viable option)
+      this.membersToMap.set(membersToMap);
+      this.nextStep();
+    } catch (e) {
+      this.setError('error-json-malformed');
+    }
+  },
+
+  setError(error) {
+    this.error.set(error);
+  },
+
+  finishImport() {
+    const additionalData = {};
+    const membersMapping = this.membersToMap.get();
+    if (membersMapping) {
+      const mappingById = {};
+      membersMapping.forEach((member) => {
+        if (member.wekanId) {
+          mappingById[member.id] = member.wekanId;
+        }
+      });
+      additionalData.membersMapping = mappingById;
+    }
+    this.membersToMap.set([]);
+    Meteor.call('importBoard',
+      this.importedData.get(),
+      additionalData,
+      this.importSource,
+      Session.get('fromBoard'),
+      (err, res) => {
+        if (err) {
+          this.setError(err.error);
+        } else {
+          Session.set('fromBoard', null);
+          Utils.goBoardId(res);
+        }
+      }
+    );
+  },
+
+  _prepareAdditionalData(dataObject) {
+    const importSource = Session.get('importSource');
+    let membersToMap;
+    switch (importSource) {
+    case 'trello':
+      membersToMap = trelloMembersMapper.getMembersToMap(dataObject);
+      break;
+    case 'wekan':
+      membersToMap = wekanMembersMapper.getMembersToMap(dataObject);
+      break;
+    }
+    return membersToMap;
+  },
+
+  _screenAdditionalData() {
+    return 'mapMembers';
+  },
+}).register('import');
+
+BlazeComponent.extendComponent({
+  template() {
+    return 'importTextarea';
+  },
+
+  instruction() {
+    return `import-board-instruction-${Session.get('importSource')}`;
+  },
+
+  events() {
+    return [{
+      submit(evt) {
+        return this.parentComponent().importData(evt);
+      },
+    }];
+  },
+}).register('importTextarea');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.autorun(() => {
+      this.parentComponent().membersToMap.get().forEach(({ wekanId }) => {
+        if (wekanId) {
+          this.subscribe('user-miniprofile', wekanId);
+        }
+      });
+    });
+  },
+
+  members() {
+    return this.parentComponent().membersToMap.get();
+  },
+
+  _refreshMembers(listOfMembers) {
+    return this.parentComponent().membersToMap.set(listOfMembers);
+  },
+
+  /**
+   * Will look into the list of members to import for the specified memberId,
+   * then set its property to the supplied value.
+   * If unset is true, it will remove the property from the rest of the list as well.
+   *
+   * use:
+   * - memberId = null to use selected member
+   * - value = null to unset a property
+   * - unset = true to ensure property is only set on 1 member at a time
+   */
+  _setPropertyForMember(property, value, memberId, unset = false) {
+    const listOfMembers = this.members();
+    let finder = null;
+    if(memberId) {
+      finder = (member) => member.id === memberId;
+    } else {
+      finder = (member) => member.selected;
+    }
+    listOfMembers.forEach((member) => {
+      if(finder(member)) {
+        if(value !== null) {
+          member[property] = value;
+        } else {
+          delete member[property];
+        }
+        if(!unset) {
+          // we shortcut if we don't care about unsetting the others
+          return false;
+        }
+      } else if(unset) {
+        delete member[property];
+      }
+      return true;
+    });
+    // Session.get gives us a copy, we have to set it back so it sticks
+    this._refreshMembers(listOfMembers);
+  },
+
+  setSelectedMember(memberId) {
+    return this._setPropertyForMember('selected', true, memberId, true);
+  },
+
+  /**
+   * returns the member with specified id,
+   * or the selected member if memberId is not specified
+   */
+  getMember(memberId = null) {
+    const allMembers = this.members();
+    let finder = null;
+    if (memberId) {
+      finder = (user) => user.id === memberId;
+    } else {
+      finder = (user) => user.selected;
+    }
+    return allMembers.find(finder);
+  },
+
+  mapSelectedMember(wekanId) {
+    return this._setPropertyForMember('wekanId', wekanId, null);
+  },
+
+  unmapMember(memberId){
+    return this._setPropertyForMember('wekanId', null, memberId);
+  },
+
+  onSubmit(evt) {
+    evt.preventDefault();
+    this.parentComponent().nextStep();
+  },
+
+  onMapMember(evt) {
+    const memberToMap = this.currentData();
+    if(memberToMap.wekan) {
+      // todo xxx ask for confirmation?
+      this.unmapMember(memberToMap.id);
+    } else {
+      this.setSelectedMember(memberToMap.id);
+      Popup.open('importMapMembersAdd')(evt);
+    }
+  },
+
+  events() {
+    return [{
+      'submit': this.onSubmit,
+      'click .js-select-member': this.onMapMember,
+    }];
+  },
+}).register('importMapMembers');
+
+BlazeComponent.extendComponent({
+  onRendered() {
+    this.find('.js-map-member input').focus();
+  },
+
+  onSelectUser(){
+    Popup.getOpenerComponent().mapSelectedMember(this.currentData()._id);
+    Popup.back();
+  },
+
+  events() {
+    return [{
+      'click .js-select-import': this.onSelectUser,
+    }];
+  },
+}).register('importMapMembersAddPopup');
@@ -0,0 +1,49 @@
+@import 'nib'
+
+.map-members
+  &:after
+    content: "";
+    flex: auto;
+
+  .mapping-list
+    display: flex
+    flex-wrap: wrap
+    margin: 0 -4px
+
+    .mapping-item
+      max-width: 300px
+      min-width: 200px
+      padding: 6px
+      margin: 5px
+      flex:1
+      background: white
+      border-radius: 3px
+      box-shadow: 0 1px 2px rgba(0,0,0,.15)
+
+      &:hover
+        background: darken(white, 5%)
+
+      &.filled
+        background: #E0FFE5
+
+        &:hover
+          background: #FFE0E0
+
+      &.ghost-item
+        height: 0
+        visibility: hidden
+        border: none
+
+    .profile-source
+      display: inline-block
+      width: 80%
+
+    .wekan
+      display: inline-block
+      width: 35px
+
+      .member
+        float: none
+
+a.show-mapping
+  text-decoration underline
@@ -0,0 +1,14 @@
+export function getMembersToMap(data) {
+  // we will work on the list itself (an ordered array of objects) when a
+  // mapping is done, we add a 'wekan' field to the object representing the
+  // imported member
+  const membersToMap = data.members;
+  // auto-map based on username
+  membersToMap.forEach((importedMember) => {
+    const wekanUser = Users.findOne({ username: importedMember.username });
+    if (wekanUser) {
+      importedMember.wekanId = wekanUser._id;
+    }
+  });
+  return membersToMap;
+}
@@ -0,0 +1,24 @@
+export function getMembersToMap(data) {
+  // we will work on the list itself (an ordered array of objects) when a
+  // mapping is done, we add a 'wekan' field to the object representing the
+  // imported member
+  const membersToMap = data.members;
+  const users = data.users;
+  // auto-map based on username
+  membersToMap.forEach((importedMember) => {
+    importedMember.id = importedMember.userId;
+    delete importedMember.userId;
+    const user = users.filter((user) => {
+      return user._id === importedMember.id;
+    })[0];
+    if (user.profile && user.profile.fullname) {
+      importedMember.fullName = user.profile.fullname;
+    }
+    importedMember.username = user.username;
+    const wekanUser = Users.findOne({ username: importedMember.username });
+    if (wekanUser) {
+      importedMember.wekanId = wekanUser._id;
+    }
+  });
+  return membersToMap;
+}
@@ -2,3 +2,7 @@ template(name='list')
  .list.js-list(id="js-list-{{_id}}")
    +listHeader
    +listBody
+
+template(name='miniList')
+  a.mini-list.js-select-list.js-list(id="js-list-{{_id}}")
+    +listHeader
@@ -1,13 +1,9 @@
 const { calculateIndex } = Utils;

 BlazeComponent.extendComponent({
-  template() {
-    return 'list';
-  },
-
  // Proxy
  openForm(options) {
-    this.componentChildren('listBody')[0].openForm(options);
+    this.childComponents('listBody')[0].openForm(options);
  },

  onCreated() {
@@ -22,16 +18,18 @@ BlazeComponent.extendComponent({
  // callback, we basically solve all issues related to reactive updates. A
  // comment below provides further details.
  onRendered() {
-    if (!Meteor.user() || !Meteor.user().isBoardMember())
-      return;
+    const boardComponent = this.parentComponent().parentComponent();
+
+    function userIsMember() {
+      return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+    }

-    const boardComponent = this.componentParent();
    const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
    const $cards = this.$('.js-minicards');
    $cards.sortable({
-      connectWith: '.js-minicards',
+      connectWith: '.js-minicards:not(.js-list-full)',
      tolerance: 'pointer',
-      appendTo: 'body',
+      appendTo: '.board-canvas',
      helper(evt, item) {
        const helper = item.clone();
        if (MultiSelection.isActive()) {
@@ -47,11 +45,10 @@ BlazeComponent.extendComponent({
      },
      distance: 7,
      items: itemsSelector,
-      scroll: false,
      placeholder: 'minicard-wrapper placeholder',
      start(evt, ui) {
        ui.placeholder.height(ui.helper.height());
-        EscapeActions.executeUpTo('popup');
+        EscapeActions.executeUpTo('popup-close');
        boardComponent.setIsDragging(true);
      },
      stop(evt, ui) {
@@ -62,6 +59,7 @@ BlazeComponent.extendComponent({
        const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
        const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
        const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
+        const swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id;

        // Normally the jquery-ui sortable library moves the dragged DOM element
        // to its new position, which disrupts Blaze reactive updates mechanism
@@ -73,28 +71,23 @@ BlazeComponent.extendComponent({
        $cards.sortable('cancel');

        if (MultiSelection.isActive()) {
-          Cards.find(MultiSelection.getMongoSelector()).forEach((c, i) => {
-            Cards.update(c._id, {
-              $set: {
-                listId,
-                sort: sortIndex.base + i * sortIndex.increment,
-              },
-            });
+          Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => {
+            card.move(swimlaneId, listId, sortIndex.base + i * sortIndex.increment);
          });
        } else {
          const cardDomElement = ui.item.get(0);
-          const cardId = Blaze.getData(cardDomElement)._id;
-          Cards.update(cardId, {
-            $set: {
-              listId,
-              sort: sortIndex.base,
-            },
-          });
+          const card = Blaze.getData(cardDomElement);
+          card.move(swimlaneId, listId, sortIndex.base);
        }
        boardComponent.setIsDragging(false);
      },
    });

+    // Disable drag-dropping if the current user is not a board member or is comment only
+    this.autorun(() => {
+      $cards.sortable('option', 'disabled', !userIsMember());
+    });
+
    // We want to re-run this function any time a card is added.
    this.autorun(() => {
      const currentBoardId = Tracker.nonreactive(() => {
@@ -107,19 +100,25 @@ BlazeComponent.extendComponent({
          accept: '.js-member,.js-label',
          drop(event, ui) {
            const cardId = Blaze.getData(this)._id;
-            let addToSet;
+            const card = Cards.findOne(cardId);

            if (ui.draggable.hasClass('js-member')) {
              const memberId = Blaze.getData(ui.draggable.get(0)).userId;
-              addToSet = { members: memberId };
+              card.assignMember(memberId);
            } else {
              const labelId = Blaze.getData(ui.draggable.get(0))._id;
-              addToSet = { labelIds: labelId };
+              card.addLabel(labelId);
            }
-            Cards.update(cardId, { $addToSet: addToSet });
          },
        });
      });
    });
  },
 }).register('list');
+
+Template.miniList.events({
+  'click .js-select-list'() {
+    const listId = this._id;
+    Session.set('currentList', listId);
+  },
+});
@@ -9,8 +9,8 @@
  // Even if this background color is the same as the body we can't leave it
  // transparent, because that won't work during a list drag.
  background: darken(white, 13%)
-  height: 100%
  border-left: 1px solid darken(white, 20%)
+  border-bottom: 1px solid #CCC
  padding: 0
  float: left

@@ -53,6 +53,9 @@
  &.ui-sortable-handle
    cursor: grab

+  .list-header-left-icon
+    display: none
+
  .list-header-name
    display: inline
    font-size: 16px
@@ -65,21 +68,34 @@
    text-overflow: ellipsis
    word-wrap: break-word

-  .list-header-menu-icon
+  .list-header-watch-icon
+    padding-left: 10px
+    color: #a6a6a6
+
+  .list-header-menu
    position: absolute
    padding: 7px
    margin-top: 1px
    top: -@padding
    right: -@padding

+  .list-header-plus-icon
+    color: #a6a6a6
+    margin-right: 10px
+
+  .highlight
+    color: #ce1414
+
 .list-body
-  flex: 1
+  flex: 1 1 auto
+  flex-direction: column
  display: flex
  overflow-y: auto
  padding: 5px 11px

  .minicards
-    flex: 1
+    flex-grow: 1
+    flex-shrink: 0

    form
      margin-bottom: 9px
@@ -103,3 +119,71 @@
      background: #fafafa
      color: #222
      box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+#js-wip-limit-edit
+  padding-top: 2%
+
+  p
+    margin-bottom: 0
+
+  input
+    display: inline-block
+
+  .wip-limit-value
+    width: 20%
+    margin-right: 5%
+
+  .wip-limit-error
+    display: none
+
+  .soft-wip-limit
+    margin-right: 8px
+
+  div
+    float: left
+
+@media screen and (max-width: 800px)
+  .mini-list
+    flex: 0 0 60px
+    height: 60px
+    width: 100%
+    border-left: 0px
+    border-bottom: 1px solid darken(white, 20%)
+
+  .list
+    display: block
+    width: 100%
+    border-left: 0px
+
+    &.ui-sortable-helper
+      flex: 0 0 60px
+      height: 60px
+      width: 100%
+      border-left: 0px
+      border-bottom: 1px solid darken(white, 20%)
+
+      .list-header.ui-sortable-handle
+        cursor: grabbing
+
+    &.placeholder
+      flex: 0 0 60px
+      height: 60px
+      width: 100%
+      border-left: 0px
+      border-bottom: 1px solid darken(white, 20%)
+
+  .list-header
+
+    .list-header-left-icon
+      display: inline
+      padding: 7px
+      padding-right: 27px
+      margin-top: 1px
+      top: -@padding
+      left: -@padding
+
+    .list-header-menu-icon
+      position: absolute
+      padding: 7px
+      top: -@padding
+      right: 17px
@@ -1,10 +1,10 @@
 template(name="listBody")
  .list-body.js-perfect-scrollbar
-    .minicards.clearfix.js-minicards
+    .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
      if cards.count
        +inlinedForm(autoclose=false position="top")
          +addCardForm(listId=_id position="top")
-      each cards
+      each (cards (idOrNull ../../_id))
        a.minicard-wrapper.js-minicard(href=absoluteUrl
          class="{{#if cardIsSelected}}is-selected{{/if}}"
          class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
@@ -12,7 +12,7 @@ template(name="listBody")
            .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
              class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
          +minicard(this)
-      if currentUser.isBoardMember
+      if canSeeAddCard
        +inlinedForm(autoclose=false position="bottom")
          +addCardForm(listId=_id position="bottom")
        else
@@ -22,9 +22,20 @@ template(name="listBody")

 template(name="addCardForm")
  .minicard.minicard-composer.js-composer
-    .minicard-detailss.clearfix
-      textarea.minicard-composer-textarea.js-card-title(autofocus)
+    if getLabels
+      .minicard-labels
+        each getLabels
+          .minicard-label(class="card-label-{{color}}" title="{{name}}")
+    textarea.minicard-composer-textarea.js-card-title(autofocus)
+    if members.get
      .minicard-members.js-minicard-composer-members
+        each members.get
+          +userAvatar(userId=this)
+
  .add-controls.clearfix
    button.primary.confirm(type="submit") {{_ 'add'}}
    a.fa.fa-times-thin.js-close-inlined-form
+
+template(name="autocompleteLabelLine")
+  .minicard-label(class="card-label-{{colorName}}" title=labelName)
+  span(class="{{#if hasNoName}}quiet{{/if}}")= labelName
@@ -1,8 +1,4 @@
 BlazeComponent.extendComponent({
-  template() {
-    return 'listBody';
-  },
-
  mixins() {
    return [Mixins.PerfectScrollbar];
  },
@@ -11,8 +7,8 @@ BlazeComponent.extendComponent({
    options = options || {};
    options.position = options.position || 'top';

-    const forms = this.componentChildren('inlinedForm');
-    let form = _.find(forms, (component) => {
+    const forms = this.childComponents('inlinedForm');
+    let form = forms.find((component) => {
      return component.data().position === options.position;
    });
    if (!form && forms.length > 0) {
@@ -26,8 +22,10 @@ BlazeComponent.extendComponent({
    const firstCardDom = this.find('.js-minicard:first');
    const lastCardDom = this.find('.js-minicard:last');
    const textarea = $(evt.currentTarget).find('textarea');
-    const title = textarea.val();
-    const position = Blaze.getData(evt.currentTarget).position;
+    const position = this.currentData().position;
+    const title = textarea.val().trim();
+
+    const formComponent = this.childComponents('addCardForm')[0];
    let sortIndex;
    if (position === 'top') {
      sortIndex = Utils.calculateIndex(null, firstCardDom).base;
@@ -35,12 +33,26 @@ BlazeComponent.extendComponent({
      sortIndex = Utils.calculateIndex(lastCardDom, null).base;
    }

-    if ($.trim(title)) {
+    const members = formComponent.members.get();
+    const labelIds = formComponent.labels.get();
+
+    const boardId = this.data().board()._id;
+    const board = Boards.findOne(boardId);
+    let swimlaneId = '';
+    if (board.view === 'board-view-swimlanes')
+      swimlaneId = this.parentComponent().parentComponent().data()._id;
+    else
+      swimlaneId = Swimlanes.findOne({boardId})._id;
+
+    if (title) {
      const _id = Cards.insert({
        title,
+        members,
+        labelIds,
        listId: this.data()._id,
        boardId: this.data().board()._id,
        sort: sortIndex,
+        swimlaneId,
      });
      // In case the filter is active we need to add the newly inserted card in
      // the list of exceptions -- cards that are not filtered. Otherwise the
@@ -50,9 +62,12 @@ BlazeComponent.extendComponent({

      // We keep the form opened, empty it, and scroll to it.
      textarea.val('').focus();
+      autosize.update(textarea);
      if (position === 'bottom') {
        this.scrollToBottom();
      }
+
+      formComponent.reset();
    }
  },

@@ -90,6 +105,22 @@ BlazeComponent.extendComponent({
    MultiSelection.toggle(this.currentData()._id);
  },

+  idOrNull(swimlaneId) {
+    const board = Boards.findOne(Session.get('currentBoard'));
+    if (board.view === 'board-view-swimlanes')
+      return swimlaneId;
+    return undefined;
+  },
+
+  canSeeAddCard() {
+    return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+
+  reachedWipLimit() {
+    const list = Template.currentData();
+    return !list.getWipLimit('soft') && list.getWipLimit('enabled') && list.getWipLimit('value') <= list.cards().count();
+  },
+
  events() {
    return [{
      'click .js-minicard': this.clickOnMiniCard,
@@ -100,9 +131,33 @@ BlazeComponent.extendComponent({
  },
 }).register('listBody');

+function toggleValueInReactiveArray(reactiveValue, value) {
+  const array = reactiveValue.get();
+  const valueIndex = array.indexOf(value);
+  if (valueIndex === -1) {
+    array.push(value);
+  } else {
+    array.splice(valueIndex, 1);
+  }
+  reactiveValue.set(array);
+}
+
 BlazeComponent.extendComponent({
-  template() {
-    return 'addCardForm';
+  onCreated() {
+    this.labels = new ReactiveVar([]);
+    this.members = new ReactiveVar([]);
+  },
+
+  reset() {
+    this.labels.set([]);
+    this.members.set([]);
+  },
+
+  getLabels() {
+    const currentBoardId = Session.get('currentBoard');
+    return Boards.findOne(currentBoardId).labels.filter((label) => {
+      return this.labels.get().indexOf(label._id) > -1;
+    });
  },

  pressKey(evt) {
@@ -140,4 +195,72 @@ BlazeComponent.extendComponent({
      keydown: this.pressKey,
    }];
  },
+
+  onRendered() {
+    const editor = this;
+    const $textarea = this.$('textarea');
+
+    autosize($textarea);
+
+    $textarea.escapeableTextComplete([
+      // User mentions
+      {
+        match: /\B@([\w.]*)$/,
+        search(term, callback) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          callback($.map(currentBoard.activeMembers(), (member) => {
+            const user = Users.findOne(member.userId);
+            return user.username.indexOf(term) === 0 ? user : null;
+          }));
+        },
+        template(user) {
+          return user.username;
+        },
+        replace(user) {
+          toggleValueInReactiveArray(editor.members, user._id);
+          return '';
+        },
+        index: 1,
+      },
+
+      // Labels
+      {
+        match: /\B#(\w*)$/,
+        search(term, callback) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          callback($.map(currentBoard.labels, (label) => {
+            if (label.name.indexOf(term) > -1 ||
+                label.color.indexOf(term) > -1) {
+              return label;
+            }
+            return null;
+          }));
+        },
+        template(label) {
+          return Blaze.toHTMLWithData(Template.autocompleteLabelLine, {
+            hasNoName: !label.name,
+            colorName: label.color,
+            labelName: label.name || label.color,
+          });
+        },
+        replace(label) {
+          toggleValueInReactiveArray(editor.labels, label._id);
+          return '';
+        },
+        index: 1,
+      },
+    ], {
+      // When the autocomplete menu is shown we want both a press of both `Tab`
+      // or `Enter` to validation the auto-completion. We also need to stop the
+      // event propagation to prevent the card from submitting (on `Enter`) or
+      // going on the next column (on `Tab`).
+      onKeydown(evt, commands) {
+        if (evt.keyCode === 9 || evt.keyCode === 13) {
+          evt.stopPropagation();
+          return commands.KEY_ENTER;
+        }
+        return null;
+      },
+    });
+  },
 }).register('addCardForm');
@@ -3,11 +3,40 @@ template(name="listHeader")
    +inlinedForm
      +editListTitleForm
    else
+      if isMiniScreen
+        if currentList
+          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
      h2.list-header-name(
        class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
        = title
-      if currentUser.isBoardMember
-        a.list-header-menu-icon.fa.fa-ellipsis-v.js-open-list-menu
+        if wipLimit.enabled
+         |&nbsp;(
+         span(class="{{#if reachedWipLimit}}highlight{{/if}}") {{cards.count}}
+         |/#{wipLimit.value})
+
+        if showCardsCountForList cards.count
+          = cards.count
+          span.lowercase
+            |  {{_ 'cards'}}
+      if isMiniScreen
+        if currentList
+          if isWatching
+            i.list-header-watch-icon.fa.fa-eye
+          div.list-header-menu
+            unless currentUser.isCommentOnly
+              if canSeeAddCard
+                a.js-add-card.fa.fa-plus.list-header-plus-icon
+              a.fa.fa-navicon.js-open-list-menu
+        else
+          a.list-header-menu-icon.fa.fa-angle-right.js-select-list
+      else if currentUser.isBoardMember
+        if isWatching
+          i.list-header-watch-icon.fa.fa-eye
+        div.list-header-menu
+          unless currentUser.isCommentOnly
+            if canSeeAddCard
+              a.js-add-card.fa.fa-plus.list-header-plus-icon
+            a.fa.fa-navicon.js-open-list-menu

 template(name="editListTitleForm")
  .list-composer
@@ -18,17 +47,22 @@ template(name="editListTitleForm")

 template(name="listActionPopup")
  ul.pop-over-list
-    li: a.js-add-card {{_ 'add-card'}}
-    if cards.count
-      li: a.js-select-cards {{_ 'list-select-cards'}}
-      li: a.js-move-cards {{_ 'list-move-cards'}}
-      li: a.js-archive-cards {{_ 'list-archive-cards'}}
-  hr
-  ul.pop-over-list
-    li: a.js-close-list {{_ 'archive-list'}}
-
-template(name="listMoveCardsPopup")
-  +boardLists
+    li: a.js-toggle-watch-list {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}}
+  unless currentUser.isCommentOnly
+    hr
+    ul.pop-over-list
+      if cards.count
+        li: a.js-select-cards {{_ 'list-select-cards'}}
+        hr
+    if currentUser.isBoardAdmin
+      ul.pop-over-list
+        li: a.js-set-wip-limit {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
+      hr
+    ul.pop-over-list
+      li: a.js-close-list {{_ 'archive-list'}}
+    hr
+    ul.pop-over-list
+      li: a.js-more {{_ 'listMorePopup-title'}}

 template(name="boardLists")
  ul.pop-over-list
@@ -39,6 +73,42 @@ template(name="boardLists")
        else
          a.js-select-list= title

-template(name="listArchiveCardsPopup")
-  p {{_ 'list-archive-cards-pop'}}
-  input.js-confirm.negate.full(type="submit" value="{{_ 'archive-all'}}")
+template(name="listMorePopup")
+  p.quiet
+    span.clearfix
+      span {{_ 'link-list'}}
+      = ' '
+      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      input.inline-input(type="text" readonly value="{{ rootUrl }}")
+    | {{_ 'added'}}
+    span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
+    a.js-delete {{_ 'delete'}}
+
+template(name="listDeletePopup")
+  p {{_ "list-delete-pop"}}
+  unless archived
+   p {{_ "list-delete-suggest-archive"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
+
+template(name="setWipLimitPopup")
+  #js-wip-limit-edit
+    label {{_ 'set-wip-limit-value'}}
+    ul.pop-over-list
+      li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
+        if isWipLimitEnabled
+          i.fa.fa-check
+    if isWipLimitEnabled
+      p
+        input.wip-limit-value(type="number" value="{{ wipLimitValue }}" min="1" max="99")
+        input.wip-limit-apply(type="submit" value="{{_ 'apply'}}")
+        input.wip-limit-error
+      p
+        .soft-wip-limit
+          .materialCheckBox(class="{{#if isWipLimitSoft}}is-checked{{/if}}")
+        label {{_ 'soft-wip-limit'}}
+
+template(name="wipLimitErrorPopup")
+  .wip-limit-invalid
+    p {{_ 'wipLimitErrorPopup-dialog-pt1'}}
+    p {{_ 'wipLimitErrorPopup-dialog-pt2'}}
+    button.full.js-back-view(type="submit") {{_ 'cancel'}}
@@ -1,78 +1,145 @@
 BlazeComponent.extendComponent({
-  template() {
-    return 'listHeader';
+  canSeeAddCard() {
+    const list = Template.currentData();
+    return !list.getWipLimit('enabled') || list.getWipLimit('soft') || !this.reachedWipLimit();
  },

  editTitle(evt) {
    evt.preventDefault();
-    const form = this.componentChildren('inlinedForm')[0];
-    const newTitle = form.getValue();
-    if ($.trim(newTitle)) {
-      Lists.update(this.currentData()._id, {
-        $set: {
-          title: newTitle,
-        },
-      });
+    const newTitle = this.childComponents('inlinedForm')[0].getValue().trim();
+    const list = this.currentData();
+    if (newTitle) {
+      list.rename(newTitle.trim());
    }
  },

+  isWatching() {
+    const list = this.currentData();
+    return list.findWatcher(Meteor.userId());
+  },
+
+  limitToShowCardsCount() {
+    return Meteor.user().getLimitToShowCardsCount();
+  },
+
+  reachedWipLimit() {
+    const list = Template.currentData();
+    return list.getWipLimit('enabled') && list.getWipLimit('value') <= list.cards().count();
+  },
+
+  showCardsCountForList(count) {
+    return count > this.limitToShowCardsCount();
+  },
+
  events() {
    return [{
      'click .js-open-list-menu': Popup.open('listAction'),
+      'click .js-add-card' () {
+        const listDom = document.getElementById(`js-list-${this.currentData()._id}`);
+        const listComponent = BlazeComponent.getComponentForElement(listDom);
+        listComponent.openForm({
+          position: 'top',
+        });
+      },
+      'click .js-unselect-list'() {
+        Session.set('currentList', null);
+      },
      submit: this.editTitle,
    }];
  },
 }).register('listHeader');

-Template.listActionPopup.events({
-  'click .js-add-card'() {
-    const listDom = document.getElementById(`js-list-${this._id}`);
-    const listComponent = BlazeComponent.getComponentForElement(listDom);
-    listComponent.openForm({ position: 'top' });
-    Popup.close();
+Template.listActionPopup.helpers({
+  isWipLimitEnabled() {
+    return Template.currentData().getWipLimit('enabled');
  },
-  'click .js-list-subscribe'() {},
-  'click .js-select-cards'() {
-    const cardIds = Cards.find(
-      {listId: this._id},
-      {fields: { _id: 1 }}
-    ).map((card) => card._id);
-    MultiSelection.add(cardIds);
-    Popup.close();
-  },
-  'click .js-move-cards': Popup.open('listMoveCards'),
-  'click .js-archive-cards': Popup.afterConfirm('listArchiveCards', () => {
-    Cards.find({listId: this._id}).forEach((card) => {
-      Cards.update(card._id, {
-        $set: {
-          archived: true,
-        },
-      });
-    });
-    Popup.close();
-  }),
-  'click .js-close-list'(evt) {
-    evt.preventDefault();
-    Lists.update(this._id, {
-      $set: {
-        archived: true,
-      },
-    });
-    Popup.close();
+
+  isWatching() {
+    return this.findWatcher(Meteor.userId());
  },
 });

-Template.listMoveCardsPopup.events({
-  'click .js-select-list'() {
-    const fromList = Template.parentData(2).data._id;
-    const toList = this._id;
-    Cards.find({ listId: fromList }).forEach((card) => {
-      Cards.update(card._id, {
-        $set: {
-          listId: toList,
-        },
-      });
-    });
+Template.listActionPopup.events({
+  'click .js-list-subscribe' () {},
+  'click .js-select-cards' () {
+    const cardIds = this.allCards().map((card) => card._id);
+    MultiSelection.add(cardIds);
    Popup.close();
  },
+  'click .js-toggle-watch-list' () {
+    const currentList = this;
+    const level = currentList.findWatcher(Meteor.userId()) ? null : 'watching';
+    Meteor.call('watch', 'list', currentList._id, level, (err, ret) => {
+      if (!err && ret) Popup.close();
+    });
+  },
+  'click .js-close-list' (evt) {
+    evt.preventDefault();
+    this.archive();
+    Popup.close();
+  },
+  'click .js-set-wip-limit': Popup.open('setWipLimit'),
+  'click .js-more': Popup.open('listMore'),
+});
+
+BlazeComponent.extendComponent({
+  applyWipLimit() {
+    const list = Template.currentData();
+    const limit = parseInt(Template.instance().$('.wip-limit-value').val(), 10);
+
+    if(limit < list.cards().count() && !list.getWipLimit('soft')){
+      Template.instance().$('.wip-limit-error').click();
+    } else {
+      Meteor.call('applyWipLimit', list._id, limit);
+      Popup.back();
+    }
+  },
+
+  enableSoftLimit() {
+    const list = Template.currentData();
+
+    if(list.getWipLimit('soft') && list.getWipLimit('value') < list.cards().count()){
+      list.setWipLimit(list.cards().count());
+    }
+    Meteor.call('enableSoftLimit', Template.currentData()._id);
+  },
+
+  enableWipLimit() {
+    const list = Template.currentData();
+    // Prevent user from using previously stored wipLimit.value if it is less than the current number of cards in the list
+    if(!list.getWipLimit('enabled') && list.getWipLimit('value') < list.cards().count()){
+      list.setWipLimit(list.cards().count());
+    }
+    Meteor.call('enableWipLimit', list._id);
+  },
+
+  isWipLimitSoft() {
+    return Template.currentData().getWipLimit('soft');
+  },
+
+  isWipLimitEnabled() {
+    return Template.currentData().getWipLimit('enabled');
+  },
+
+  wipLimitValue(){
+    return Template.currentData().getWipLimit('value');
+  },
+
+  events() {
+    return [{
+      'click .js-enable-wip-limit': this.enableWipLimit,
+      'click .wip-limit-apply': this.applyWipLimit,
+      'click .wip-limit-error': Popup.open('wipLimitError'),
+      'click .materialCheckBox': this.enableSoftLimit,
+    }];
+  },
+}).register('setWipLimitPopup');
+
+Template.listMorePopup.events({
+  'click .js-delete': Popup.afterConfirm('listDelete', function () {
+    Popup.close();
+    this.allCards().map((card) => Cards.remove(card._id));
+    Lists.remove(this._id);
+    Utils.goBoardId(this.boardId);
+  }),
 });
@@ -0,0 +1,13 @@
+BlazeComponent.extendComponent({
+  currentCardIsInThisList(listId, swimlaneId) {
+    const currentCard = Cards.findOne(Session.get('currentCard'));
+    const currentBoardId = Session.get('currentBoard');
+    const board = Boards.findOne(currentBoardId);
+    if (board.view === 'board-view-lists')
+      return currentCard && currentCard.listId === listId;
+    else if (board.view === 'board-view-swimlanes')
+      return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
+    else
+      return false;
+  },
+}).register('listsGroup');
@@ -9,6 +9,5 @@ template(name="editor")
 template(name="viewer")
  .viewer
    +mentions
-      +emoji
-        +markdown
-          {{> UI.contentBlock }}
+      +markdown
+        {{> UI.contentBlock }}
@@ -1,39 +1,18 @@
-let dropdownMenuIsOpened = false;
-
 Template.editor.onRendered(() => {
  const $textarea = this.$('textarea');

  autosize($textarea);

-  $textarea.textcomplete([
-    // Emojies
-    {
-      match: /\B:([\-+\w]*)$/,
-      search(term, callback) {
-        callback($.map(Emoji.values, (emoji) => {
-          return emoji.indexOf(term) === 0 ? emoji : null;
-        }));
-      },
-      template(value) {
-        const imgSrc = Emoji.baseImagePath + value;
-        const image = `<img src="${imgSrc}.png" />`;
-        return image + value;
-      },
-      replace(value) {
-        return `:${value}:`;
-      },
-      index: 1,
-    },
-
+  $textarea.escapeableTextComplete([
    // User mentions
    {
-      match: /\B@(\w*)$/,
+      match: /\B@([\w.]*)$/,
      search(term, callback) {
        const currentBoard = Boards.findOne(Session.get('currentBoard'));
-        callback($.map(currentBoard.members, (member) => {
+        callback(currentBoard.activeMembers().map((member) => {
          const username = Users.findOne(member.userId).username;
-          return username.indexOf(term) === 0 ? username : null;
-        }));
+          return username.includes(term) ? username : null;
+        }).filter(Boolean));
      },
      template(value) {
        return value;
@@ -44,32 +23,12 @@ Template.editor.onRendered(() => {
      index: 1,
    },
  ]);
-
-  // Since commit d474017 jquery-textComplete automatically closes a potential
-  // opened dropdown menu when the user press Escape. This behavior conflicts
-  // with our EscapeActions system, but it's too complicated and hacky to
-  // monkey-pach textComplete to disable it -- I tried. Instead we listen to
-  // 'open' and 'hide' events, and create a ghost escapeAction when the dropdown
-  // is opened (and rely on textComplete to execute the actual action).
-  $textarea.on({
-    'textComplete:show'() {
-      dropdownMenuIsOpened = true;
-    },
-    'textComplete:hide'() {
-      Tracker.afterFlush(() => {
-        dropdownMenuIsOpened = false;
-      });
-    },
-  });
 });

-EscapeActions.register('textcomplete',
-  () => {},
-  () => dropdownMenuIsOpened
-);
+import sanitizeXss from 'xss';

 // XXX I believe we should compute a HTML rendered field on the server that
-// would handle markdown, emojies and user mentions. We can simply have two
+// would handle markdown and user mentions. We can simply have two
 // fields, one source, and one compiled version (in HTML) and send only the
 // compiled version to most users -- who don't need to edit.
 // In the meantime, all the transformation are done on the client using the
@@ -78,25 +37,27 @@ const at = HTML.CharRef({html: '&commat;', str: '@'});
 Blaze.Template.registerHelper('mentions', new Template('mentions', function() {
  const view = this;
  const currentBoard = Boards.findOne(Session.get('currentBoard'));
-  const knowedUsers = _.map(currentBoard.members, (member) => {
+  const knowedUsers = currentBoard.members.map((member) => {
    member.username = Users.findOne(member.userId).username;
    return member;
  });
-  const mentionRegex = /\B@(\w*)/gi;
+  const mentionRegex = /\B@([\w.]*)/gi;
  let content = Blaze.toHTML(view.templateContentBlock);

-  let currentMention, knowedUser, linkClass, linkValue, link;
-  while (Boolean(currentMention = mentionRegex.exec(content))) {
-
-    knowedUser = _.findWhere(knowedUsers, { username: currentMention[1] });
-    if (!knowedUser)
+  let currentMention;
+  while ((currentMention = mentionRegex.exec(content)) !== null) {
+    const [fullMention, username] = currentMention;
+    const knowedUser = _.findWhere(knowedUsers, { username });
+    if (!knowedUser) {
      continue;
+    }

-    linkValue = [' ', at, knowedUser.username];
-    linkClass = 'atMention js-open-member';
-    if (knowedUser.userId === Meteor.userId())
+    const linkValue = [' ', at, knowedUser.username];
+    let linkClass = 'atMention js-open-member';
+    if (knowedUser.userId === Meteor.userId()) {
      linkClass += ' me';
-    link = HTML.A({
+    }
+    const link = HTML.A({
      'class': linkClass,
      // XXX Hack. Since we stringify this render function result below with
      // `Blaze.toHTML` we can't rely on blaze data contexts to pass the
@@ -105,22 +66,17 @@ Blaze.Template.registerHelper('mentions', new Template('mentions', function() {
      'data-userId': knowedUser.userId,
    }, linkValue);

-    content = content.replace(currentMention[0], Blaze.toHTML(link));
+    content = content.replace(fullMention, Blaze.toHTML(link));
  }

-  return HTML.Raw(content);
+  return HTML.Raw(sanitizeXss(content));
 }));

 Template.viewer.events({
-  'click .js-open-member'(evt, tpl) {
-    const userId = evt.currentTarget.dataset.userid;
-    Popup.open('member').call({ userId }, evt, tpl);
-  },
-
  // Viewer sometimes have click-able wrapper around them (for instance to edit
  // the corresponding text). Clicking a link shouldn't fire these actions, stop
  // we stop these event at the viewer component level.
-  'click a'(evt) {
+  'click a'(evt, tpl) {
    evt.stopPropagation();

    // XXX We hijack the build-in browser action because we currently don't have
@@ -128,9 +84,16 @@ Template.viewer.events({
    // handled by a third party package that we can't configure easily. Fix that
    // by using directly `_blank` attribute in the rendered HTML.
    evt.preventDefault();
-    const href = evt.currentTarget.href;
-    if (href) {
-      window.open(href, '_blank');
+
+    const userId = evt.currentTarget.dataset.userid;
+    if (userId) {
+      Popup.open('member').call({ userId }, evt, tpl);
+    }
+    else {
+      const href = evt.currentTarget.href;
+      if (href) {
+        window.open(href, '_blank');
+      }
    }
  },
 });
@@ -1,13 +1,25 @@
 template(name="header")
-  #header(class=currentBoard.colorClass)
-    //-
-      If the user is connected we display a small "quick-access" top bar that
-      list all starred boards with a link to go there. This is inspired by the
-      Reddit "subreddit" bar.
-      The first link goes to the boards page.
-    unless isSandstorm
-      if currentUser
-        #header-quick-access
+  //-
+    If the user is connected we display a small "quick-access" top bar that
+    list all starred boards with a link to go there. This is inspired by the
+    Reddit "subreddit" bar.
+    The first link goes to the boards page.
+  unless isSandstorm
+    if currentUser
+      #header-quick-access(class=currentBoard.colorClass)
+        if isMiniScreen
+          ul
+            li
+              a(href="{{pathFor 'home'}}")
+                span.fa.fa-home
+
+            if currentList
+              each currentBoard.lists
+                li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
+                  a.js-select-list
+                    = title
+          #header-new-board-icon
+        else
          ul
            li
              a(href="{{pathFor 'home'}}")
@@ -21,37 +33,44 @@ template(name="header")
            else
              li.current {{_ 'quick-access-description'}}

+        a#header-new-board-icon.js-create-board
+          i.fa.fa-plus(title="Create a new board")

-          a#header-new-board-icon.js-create-board
-            i.fa.fa-plus(title="Create a new board")
-
-          +headerUserBar
+        +headerUserBar

+  #header(class=currentBoard.colorClass)
    //-
      The main bar is a colorful bar that provide all the meta-data for the
      current page. This bar is contextual based.
      If the user is not connected we display "sign in" and "log in" buttons.
    #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
-      if $.Session.get 'currentBoard'
-        +headerBoard
-      else if($eq currentRouteName 'home')
-        +headerTitle
+      +Template.dynamic(template=headerBar)

-      //-
-        On sandstorm, the logo shouldn't be clickable, because we only have one
-        page/document on it, and we don't want to see the home page containing
-        the list of all boards.
-      if isSandstorm
-        .wekan-logo
-          img(src="/wekan-logo-header.png" alt="Wekan")
-      else
-        a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
-          img(src="/wekan-logo-header.png" alt="Wekan")
+      unless hideLogo
+        //-
+          On sandstorm, the logo shouldn't be clickable, because we only have one
+          page/document on it, and we don't want to see the home page containing
+          the list of all boards.
+        if isSandstorm
+          .wekan-logo
+            img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
+        else
+          a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
+            img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")

-template(name="headerTitle")
-  h1 {{_ 'my-boards'}}
+  if appIsOffline
+    +offlineWarning

-  .board-header-btns.right
-    a.board-header-btn.js-open-archived-board
-      i.fa.fa-archive
-      span {{_ 'archives'}}
+  if currentUser.isBoardMember
+    if hasAnnouncement
+      .announcement
+        p
+          i.fa.fa-bullhorn
+          | #{announcement}
+          i.fa.fa-times-circle.js-close-announcement
+
+template(name="offlineWarning")
+  .offline-warning
+    p
+      i.fa.fa-warning
+      | {{_ 'app-is-offline'}}
@@ -1,14 +1,38 @@
-Template.header.helpers({
-  // Reactively set the color of the page from the color of the current board.
-  headerTemplate() {
-    return 'headerBoard';
-  },
+Meteor.subscribe('user-admin');
+Meteor.subscribe('boards');

+Template.header.helpers({
  wrappedHeader() {
    return !Session.get('currentBoard');
  },
+
+  hideLogo() {
+    return Utils.isMiniScreen() && Session.get('currentBoard');
+  },
+
+  appIsOffline() {
+    return !Meteor.status().connected;
+  },
+
+  hasAnnouncement() {
+    const announcements =  Announcements.findOne();
+    return announcements && announcements.enabled;
+  },
+
+  announcement() {
+    $('.announcement').show();
+    const announcements =  Announcements.findOne();
+    return announcements && announcements.body;
+  },
 });

 Template.header.events({
-  'click .js-create-board': Popup.open('createBoard'),
+  'click .js-create-board': Popup.open('headerBarCreateBoard'),
+  'click .js-close-announcement'() {
+    $('.announcement').hide();
+  },
+  'click .js-select-list'() {
+    Session.set('currentList', this._id);
+    Session.set('currentCard', null);
+  },
 });
@@ -4,76 +4,10 @@
  color: white
  transition: background-color 0.4s
  background: #2980B9
-
-  #header-quick-access
-    background-color: rgba(0, 0, 0, 0.2)
-    padding: 0px 10px
-    height: 28px
-    font-size: 12px
-    display: flex
-
-    #header-user-bar,
-    #header-new-board-icon,
-    ul li
-      color: darken(white, 17%)
-
-      .fa
-        color: inherit
-
-      a:hover, a.is-active
-        color: white
-
-    ul
-      transition: opacity 0.2s
-      margin: 4px 0 0 5px
-      overflow: hidden
-
-      li
-        display: block
-        float: left
-        width: auto
-        color: darken(white, 15%)
-        padding: 2px 5px 0
-
-        &.current
-          color: darken(white, 5%)
-
-        &:first-child .fa-home
-          margin-right: 5px
-
-        a.js-create-board
-          margin-left: 5px
-
-    #header-user-bar,
-    #header-new-board-icon
-      flex-shrink: 0
-
-    #header-user-bar
-      margin: 2px 0
-
-      .header-user-bar-avatar
-        float: left
-
-        .member
-          width: 24px
-          height: @width
-          margin: 0
-          margin-top: 1px
-
-      .header-user-bar-name
-        margin: 4px 8px 0 0
-        float: left
-
-        i.fa-chevron-down
-          margin-right: 4px
-
-    #header-new-board-icon
-      flex-grow: 1
-      margin: 6px 5px 0
-      width: 12px
+  z-index: 17

  #header-main-bar
-    height: 28px * 1.618034 - 6px
+    height: 40px
    padding: 7px 10px 0

    h1
@@ -85,6 +19,17 @@
      float: left
      border-radius: 3px

+      .board-header-watch-icon
+        padding-left: 7px
+
+      a.fa, a i.fa
+        color: white
+
+      .back-btn
+        font-size: 0.9em
+        margin-right: 10px
+
+
    .wekan-logo
      display: block
      margin: 3px auto 0
@@ -147,3 +92,144 @@
      border-left: 1px solid rgba(255, 255, 255, .3)
      height: 24px
      float: left
+
+#header-quick-access
+  color: white
+  transition: background-color 0.4s
+  background: #2573a7
+  height: 28px
+  font-size: 12px
+  display: flex
+  z-index: 17
+
+  #header-user-bar,
+  #header-new-board-icon,
+  ul li
+    color: darken(white, 17%)
+
+    .fa
+      color: inherit
+
+    a:hover, a.is-active
+      color: white
+
+  ul
+    transition: opacity 0.2s
+    margin: 4px 0 0 5px
+    overflow: hidden
+
+    li
+      display: block
+      float: left
+      width: auto
+      color: darken(white, 15%)
+      padding: 2px 5px 0
+
+      &.current
+        color: darken(white, 5%)
+
+      &:first-child .fa-home
+        margin-right: 5px
+
+      a.js-create-board
+        margin-left: 5px
+
+  #header-user-bar,
+  #header-new-board-icon
+    flex-shrink: 0
+
+  #header-user-bar
+    margin: 2px 0
+
+    .header-user-bar-avatar
+      float: left
+      position: relative
+      top: -5px
+      margin-right: 5px
+
+      .member
+        width: 24px
+        height: @width
+        margin: 0
+        margin-top: 1px
+
+    .header-user-bar-name
+      margin: 4px 8px 0 0
+      float: left
+
+      i.fa-chevron-down
+        margin-right: 4px
+
+  #header-new-board-icon
+    flex-grow: 1
+    margin: 6px 5px 0
+    width: 12px
+
+@media screen and (max-width: 800px)
+  #header
+    #header-main-bar
+      height: 40px
+
+      .board-header-btns
+        margin-top: 0px
+
+      .board-header-btn
+        height: 32px
+        line-height: @height
+        font-size: 16px
+
+        i.fa
+          line-height: 32px
+
+          + span
+            display: none
+
+  #header-quick-access
+    transition: background-color 0.4s
+    width: 100%
+    padding: 10px 0px
+    z-index: 30
+    position: absolute
+    bottom: 0px
+
+    ul
+      width: calc(100% - 60px)
+      overflow: ellipsis
+      padding: 10px
+      margin: -10px
+
+      li
+        height: 100%
+        padding: 12px 0px
+        margin: -10px 0px
+
+        a
+          height: 100%
+          padding: 12px 10px
+          margin: -10px 0px
+
+        .fa-home
+          font-size: 26px
+          margin-top: -2px
+
+    #header-new-board-icon
+      display: none
+
+    #header-user-bar
+      position: absolute
+      right: 0px
+      padding: 10px
+      margin: -10px
+
+.announcement,
+.offline-warning
+  width: 100%
+  text-align: center
+  padding: 0
+  margin: 0
+  background: #F8ECBD
+  clear: both
+
+  p
+    margin: 7px
+    padding: 0
@@ -0,0 +1,19 @@
+template(name="shortcutsHeaderBar")
+  h1
+    a.back-btn(href="{{pathFor 'home'}}")
+      i.fa.fa-chevron-left
+    | {{_ 'keyboard-shortcuts'}}
+
+template(name="shortcutsModalTitle")
+  h2
+    i.fa.fa-keyboard-o
+    | {{_ 'keyboard-shortcuts'}}
+
+template(name="keyboardShortcuts")
+  .wrapper.shortcuts-list
+    each mapping
+      .shortcuts-list-item
+        .shortcuts-list-item-keys
+          each keys
+            kbd= this
+        .shortcuts-list-item-action {{_ action}}
@@ -14,11 +14,6 @@
        padding: 5px 8px
        margin: 5px
        font-size: 18px
-        font-weight: bold
-        background: white
-        border-radius: 3px
-        border: 1px solid darken(white, 10%)
-        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)

    .shortcuts-list-item-action
      font-size: 1.4em
@@ -1,11 +0,0 @@
-.wrapper.shortcuts-list
-  h2
-    i.fa.fa-keyboard-o
-    | {{_ 'keyboard-shortcuts'}}
-
-  each mapping
-    .shortcuts-list-item
-      .shortcuts-list-item-keys
-        each keys
-          kbd= this
-      .shortcuts-list-item-action {{_ action}}
@@ -2,13 +2,28 @@ head
  title Wekan
  meta(name="viewport"
   content="maximum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=0")
+  meta(http-equiv="X-UA-Compatible" content="IE=edge")
+  //- XXX We should use pathFor in the following `href` to support the case
+    where the application is deployed with a path prefix, but it seems to be
+    difficult to do that cleanly with Blaze -- at least without adding extra
+    packages.
  link(rel="shortcut icon" href="/wekan-favicon.png")
+  link(rel="apple-touch-icon" href="/wekan-favicon.png")
+  link(rel="manifest" href="/wekan-manifest.json")

 template(name="userFormsLayout")
  section.auth-layout
    h1.at-form-landing-logo
-      img(src="/wekan-logo.png" alt="Wekan")
-    +Template.dynamic(template=content)
+      img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
+    section.auth-dialog
+      +Template.dynamic(template=content)
+      div.at-form-lang
+        select.select-lang.js-userform-set-language
+          each languages
+            if isCurrentLanguage
+              option(value="{{tag}}" selected="selected") {{name}}
+            else
+              option(value="{{tag}}") {{name}}

 template(name="defaultLayout")
  +header
@@ -20,6 +35,7 @@ template(name="defaultLayout")
      .modal-content
        a.modal-close-btn.js-close-modal
          i.fa.fa-times-thin
+        +Template.dynamic(template=Modal.getHeaderName)
        +Template.dynamic(template=Modal.getTemplateName)

 template(name="notFound")
@@ -28,5 +44,6 @@ template(name="notFound")
 template(name="message")
  .big-message.quiet(class=color)
    h1 {{_ label}}
-    with(pathFor route='atSignIn')
-      p {{{_ 'page-maybe-private' this}}}
+    unless currentUser
+      with(pathFor route='atSignIn')
+        p {{{_ 'page-maybe-private' this}}}
@@ -1,11 +1,54 @@
-Meteor.subscribe('boards');
-
 BlazeLayout.setRoot('body');

+const i18nTagToT9n = (i18nTag) => {
+  // t9n/i18n tags are same now, see: https://github.com/softwarerero/meteor-accounts-t9n/pull/129
+  // but we keep this conversion function here, to be aware that that they are different system.
+  return i18nTag;
+};
+
 Template.userFormsLayout.onRendered(() => {
+  const i18nTag = navigator.language;
+  if (i18nTag) {
+    T9n.setLanguage(i18nTagToT9n(i18nTag));
+  }
  EscapeActions.executeAll();
 });

+Template.userFormsLayout.helpers({
+  languages() {
+    return _.map(TAPi18n.getLanguages(), (lang, code) => {
+      const tag = code;
+      let name = lang.name;
+      if (lang.name === 'br') {
+        name = 'Brezhoneg';
+      } else if (lang.name === 'ig') {
+        name = 'Igbo';
+      }
+      return { tag, name };
+    }).sort(function(a, b) {
+      if (a.name === b.name) {
+        return 0;
+      } else {
+        return a.name > b.name ? 1 : -1;
+      }
+    });
+  },
+
+  isCurrentLanguage() {
+    const t9nTag = i18nTagToT9n(this.tag);
+    const curLang = T9n.getLanguage() || 'en';
+    return t9nTag === curLang;
+  },
+});
+
+Template.userFormsLayout.events({
+  'change .js-userform-set-language'(evt) {
+    const i18nTag = $(evt.currentTarget).val();
+    T9n.setLanguage(i18nTagToT9n(i18nTag));
+    evt.preventDefault();
+  },
+});
+
 Template.defaultLayout.events({
  'click .js-close-modal': () => {
    Modal.close();
@@ -26,11 +26,15 @@ body
 #content
  position: relative
  flex: 1
-  overflow: hidden
+  overflow-x: hidden

  .sk-spinner
    margin-top: 30vh

+  > .wrapper
+    margin-top: 10px
+    padding: 15px
+
 #modal
  position: absolute
  top: 0
@@ -106,6 +110,9 @@ a
    cursor: default
    text-decoration: none

+span a
+  text-decoration: underline
+
 strong
  font-weight: bold

@@ -172,6 +179,15 @@ dl, dt
 dd
  margin: 0 0 16px 24px

+kbd
+  padding: 1px 3px
+  margin: 3px
+  font-weight: bold
+  background: darken(white, 2%)
+  border-radius: 3px
+  border: 1px solid darken(white, 10%)
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
+
 .clear
  clear: both

@@ -254,22 +270,20 @@ dd
 .grabbing
  cursor: grabbing

-.emoji
-  height: 18px
-  width: 18px
-  vertical-align: text-bottom
-
 // Implement a thiner close icon as suggested in
 // https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
 .fa.fa-times-thin:before
  content: '\00d7';

-.fa.fa-globe.colorful
+.fa.fa-globe.colorful, .fa.fa-bell.colorful
  color: #4caf50

-.fa.fa-lock.colorful
+.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
  color: #f44336

+.fa.fa-eye.colorful
+  color: #4336f4
+
 .pop-over .pop-over-list li a:not(.disabled):hover
  .fa, .fa.colorful
    color: white
@@ -316,6 +330,8 @@ a
  margin-left: 38px

 .viewer
+  min-height: 18px
+
  ol
    list-style-type: decimal
    padding-left: 20px
@@ -332,6 +348,11 @@ a
    background: darken(white, 13%)
    overflow-y: auto

+  a
+    text-decoration: underline
+    &:hover
+      color: #333
+
 .basicTabs-container .tabs-content-container
  padding: 0
  padding-top: 15px
@@ -342,4 +363,22 @@ a

@keyframes flexGrowIn
  from
-    flex-basis: 0
+    // Support IE11 https://github.com/wekan/wekan/pull/646
+    height: 100%
+
+@media screen and (max-width: 800px)
+  #content
+    margin: 1px 0px 49px 0px
+    height: calc(100% - 96px)
+
+    > .wrapper
+      margin-top: 0px
+
+  .wrapper
+    height: 100%
+    margin: 0px
+
+.inline-input
+  height: 37px
+  margin: 8px 10px 0 0
+  width: 50px
@@ -17,9 +17,11 @@ $popupWidth = 300px
    margin: 4px -10px
    width: $popupWidth

+  p,
+  textarea,
  input[type="text"],
  input[type="email"],
-  input[type="password"]
+  input[type="password"],
  input[type="file"]
    margin: 4px 0 12px
    width: 100%
@@ -30,8 +32,6 @@ $popupWidth = 300px

  textarea
    height: 72px
-    margin: 4px 0 12px
-    width: 100%

  .header
    height: 36px
@@ -83,7 +83,7 @@ $popupWidth = 300px
    transition: transform 0.2s

    .content
-      width: 300 - 20px
+      width: $popupWidth - 20px
      padding: 0 10px 10px
      float: left

@@ -243,3 +243,88 @@ $popupWidth = 300px

        &:hover
          text-decoration: underline
+
+@media screen and (max-width: 800px)
+  .pop-over
+    width: 100%
+    height: 100%
+    overflow: hidden
+    margin-top: 0px
+    border: 0px solid #dbdbdb
+
+    .header
+      color: white
+      background: #2980B9
+      height: 48px
+      padding: 0px 0px
+      border: 0px
+      margin: 0px 0px
+      width: 100%
+      position: absolute
+      top: 0px
+
+      .header-title
+        font-size: 20px
+        font-weight: normal
+        padding-top: 8px
+
+      .back-btn
+        width: 30px
+        padding: 8px 12px 8px 12px
+
+        i.fa
+          color: white
+
+      .close-btn
+        padding: 10px 12px
+
+        i.fa
+          font-size: 24px
+          color: white
+
+    .content-wrapper
+      width: 100%
+      height: calc(100% - 48px)
+      overflow-y: scroll
+      overflow-x: hidden
+      margin: 48px 0px 0px 0px
+
+    .content-container
+      width: 1000%
+      height: 100%
+      max-height: 100%
+
+      .content
+        width: calc(10% - 20px)
+        height: calc(100% - 20px)
+        padding: 10px
+
+        form
+          margin: 10px 10px
+          width: calc(100% - 20px)
+
+        p,
+        textarea,
+        input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="file"]
+          margin: 4px 0 12px
+          width: 100%
+
+    .pop-over-list
+      li > a
+        width: calc(100% - 20px)
+        padding: 10px 10px
+        margin: 0px 0px
+        border-bottom: 1px solid #eee
+
+    hr
+      width: 100%
+      height: 20px
+      margin: 0px 0px
+      color: #eee
+
+    for depth in (1..6)
+      .popup-container-depth-{depth}
+        transform: translateX(- depth * 10%)
@@ -1,3 +1,5 @@
+@import 'nib'
+
 /*
 * From https://github.com/tobiasahlin/SpinKit
 *
@@ -17,11 +17,6 @@ Mixins.InfiniteScrolling = BlazeComponent.extendComponent({
    this._nextPeak = Infinity;
  },

-  // To be overwritten by consumers of this mixin
-  reachNextPeak() {
-
-  },
-
  events() {
    return [{
      scroll(evt) {
@@ -29,7 +24,7 @@ Mixins.InfiniteScrolling = BlazeComponent.extendComponent({
        let altitude = domElement.scrollTop + domElement.offsetHeight;
        altitude += peakAnticipation;
        if (altitude >= this.callFirstWith(null, 'getNextPeak')) {
-          this.callFirstWith(null, 'reachNextPeak');
+          this.mixinParent().callFirstWith(null, 'reachNextPeak');
        }
      },
    }];
@@ -0,0 +1,51 @@
+template(name='information')
+  .setting-content
+    unless currentUser.isAdmin
+      | {{_ 'error-notAuthorized'}}
+    else
+      .content-title
+        span {{_ 'info'}}
+      .content-body
+        .side-menu
+          ul
+            li.active
+              a.js-setting-menu(data-id="information-display") {{_ 'info'}}
+        .main-body
+          +statistics
+
+template(name='statistics')
+    table
+      tbody
+        tr
+          th {{_ 'Wekan_version'}}
+          td {{statistics.version}}
+        tr
+          th {{_ 'Node_version'}}
+          td {{statistics.process.nodeVersion}}
+        tr
+          th {{_ 'OS_Type'}}
+          td {{statistics.os.type}}
+        tr
+          th {{_ 'OS_Platform'}}
+          td {{statistics.os.platform}}
+        tr
+          th {{_ 'OS_Arch'}}
+          td {{statistics.os.arch}}
+        tr
+          th {{_ 'OS_Release'}}
+          td {{statistics.os.release}}
+        tr
+          th {{_ 'OS_Uptime'}}
+          td {{humanReadableTime statistics.os.uptime}}
+        tr
+          th {{_ 'OS_Loadavg'}}
+          td {{numFormat statistics.os.loadavg.[0]}}, {{numFormat statistics.os.loadavg.[1]}}, {{numFormat statistics.os.loadavg.[2]}}
+        tr
+          th {{_ 'OS_Totalmem'}}
+          td {{bytesToSize statistics.os.totalmem}}
+        tr
+          th {{_ 'OS_Freemem'}}
+          td {{bytesToSize statistics.os.freemem}}
+        tr
+          th {{_ 'OS_Cpus'}}
+          td {{statistics.os.cpus.length}}
@@ -0,0 +1,48 @@
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.info = new ReactiveVar({});
+    Meteor.call('getStatistics', (error, ret) => {
+      if (!error && ret) {
+        this.info.set(ret);
+      }
+    });
+  },
+
+  statistics() {
+    return this.info.get();
+  },
+
+  humanReadableTime(time) {
+    const days = Math.floor(time / 86400);
+    const hours = Math.floor((time % 86400) / 3600);
+    const minutes = Math.floor(((time % 86400) % 3600) / 60);
+    const seconds = Math.floor(((time % 86400) % 3600) % 60);
+    let out = '';
+    if (days > 0) {
+      out += `${days} ${TAPi18n.__('days')}, `;
+    }
+    if (hours > 0) {
+      out += `${hours} ${TAPi18n.__('hours')}, `;
+    }
+    if (minutes > 0) {
+      out += `${minutes} ${TAPi18n.__('minutes')}, `;
+    }
+    if (seconds > 0) {
+      out += `${seconds} ${TAPi18n.__('seconds')}`;
+    }
+    return out;
+  },
+
+  numFormat(number) {
+    return parseFloat(number).toFixed(2);
+  },
+
+  bytesToSize(bytes) {
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    if (bytes === 0) {
+      return '0 Byte';
+    }
+    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+    return `${Math.round(bytes / Math.pow(1024, i), 2)}  ${sizes[i]}`;
+  },
+}).register('statistics');
@@ -0,0 +1,5 @@
+template(name='invitationCode')
+  .at-input#invitationcode
+    label(for='at-field-code') {{_ 'invitation-code'}}
+
+    input#at-field-invitationcode(type="text" name='at-field-invitationcode' placeholder="{{_ 'invitation-code'}}")
@@ -0,0 +1,6 @@
+Template.invitationCode.onRendered(() => {
+  const setting = Settings.findOne();
+  if (setting || setting.disableRegistration) {
+    $('#invitationcode').hide();
+  }
+});
@@ -0,0 +1,90 @@
+template(name="people")
+  .setting-content
+    unless currentUser.isAdmin
+      | {{_ 'error-notAuthorized'}}
+    else
+      .content-title
+        span {{_ 'people'}}
+      .content-body
+        .side-menu
+          ul
+            li.active
+              a.js-setting-menu(data-id="people-setting") {{_ 'people'}}
+        .main-body
+          if loading.get
+            +spinner
+          else if people.get
+            +peopleGeneral
+
+template(name="peopleGeneral")
+  table
+    tbody
+      tr
+        th {{_ 'username'}}
+        th {{_ 'fullname'}}
+        th {{_ 'admin'}}
+        th {{_ 'email'}}
+        th {{_ 'verified'}}
+        th {{_ 'createdAt'}}
+        th {{_ 'active'}}
+        th
+      each user in peopleList
+        +peopleRow(userId=user._id)
+
+template(name="peopleRow")
+  tr
+    td.username {{ userData.username }}
+    td {{ userData.profile.fullname }}
+    td
+      if userData.isAdmin
+        | {{_ 'yes'}}
+      else
+        | {{_ 'no'}}
+    td {{ userData.emails.[0].address }}
+    td
+      if userData.emails.[0].verified
+        | {{_ 'yes'}}
+      else
+        | {{_ 'no'}}
+    td {{ moment userData.createdAt 'LLL' }}
+    td
+      if userData.loginDisabled
+        | {{_ 'no'}}
+      else
+        | {{_ 'yes'}}
+    td
+      a.edit-user
+        | {{_ 'edit'}}
+
+template(name="editUserPopup")
+  form
+    label.hide.userId(type="text" value=user._id)
+    label
+      | {{_ 'fullname'}}
+      input.js-profile-fullname(type="text" value=user.profile.fullname autofocus)
+    label
+      | {{_ 'username'}}
+      span.error.hide.username-taken
+        | {{_ 'error-username-taken'}}
+      input.js-profile-username(type="text" value=user.username)
+    label
+      | {{_ 'email'}}
+      span.error.hide.email-taken
+        | {{_ 'error-email-taken'}}
+      input.js-profile-email(type="email" value="{{user.emails.[0].address}}")
+    label
+      | {{_ 'admin'}}
+      select.select-role.js-profile-isadmin
+        option(value="false") {{_ 'no'}}
+        option(value="true" selected="{{user.isAdmin}}") {{_ 'yes'}}
+    label
+      | {{_ 'active'}}
+      select.select-active.js-profile-isactive
+        option(value="false") {{_ 'yes'}}
+        option(value="true" selected="{{user.loginDisabled}}") {{_ 'no'}}
+    hr
+    label
+      | {{_ 'password'}}
+      input.js-profile-password(type="password")
+
+    input.primary.wide(type="submit" value="{{_ 'save'}}")
@@ -0,0 +1,158 @@
+const usersPerPage = 25;
+
+BlazeComponent.extendComponent({
+  mixins() {
+    return [Mixins.InfiniteScrolling];
+  },
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.loading = new ReactiveVar(false);
+    this.people = new ReactiveVar(true);
+
+    this.page = new ReactiveVar(1);
+    this.loadNextPageLocked = false;
+    this.callFirstWith(null, 'resetNextPeak');
+    this.autorun(() => {
+      const limit = this.page.get() * usersPerPage;
+
+      this.subscribe('people', limit, () => {
+        this.loadNextPageLocked = false;
+        const nextPeakBefore = this.callFirstWith(null, 'getNextPeak');
+        this.calculateNextPeak();
+        const nextPeakAfter = this.callFirstWith(null, 'getNextPeak');
+        if (nextPeakBefore === nextPeakAfter) {
+          this.callFirstWith(null, 'resetNextPeak');
+        }
+      });
+    });
+  },
+  loadNextPage() {
+    if (this.loadNextPageLocked === false) {
+      this.page.set(this.page.get() + 1);
+      this.loadNextPageLocked = true;
+    }
+  },
+  calculateNextPeak() {
+    const element = this.find('.main-body');
+    if (element) {
+      const altitude = element.scrollHeight;
+      this.callFirstWith(this, 'setNextPeak', altitude);
+    }
+  },
+  reachNextPeak() {
+    this.loadNextPage();
+  },
+  setError(error) {
+    this.error.set(error);
+  },
+  setLoading(w) {
+    this.loading.set(w);
+  },
+  peopleList() {
+    return Users.find({}, {
+      fields: {_id: true},
+    });
+  },
+}).register('people');
+
+Template.peopleRow.helpers({
+  userData() {
+    const userCollection = this.esSearch ? ESSearchResults : Users;
+    return userCollection.findOne(this.userId);
+  },
+});
+
+Template.editUserPopup.helpers({
+  user() {
+    return Users.findOne(this.userId);
+  },
+});
+
+BlazeComponent.extendComponent({
+  onCreated() {
+  },
+  user() {
+    return Users.findOne(this.userId);
+  },
+  events() {
+    return [{
+      'click a.edit-user': Popup.open('editUser'),
+    }];
+  },
+}).register('peopleRow');
+
+Template.editUserPopup.events({
+  submit(evt, tpl) {
+    evt.preventDefault();
+    const user = Users.findOne(this.userId);
+    const fullname = tpl.find('.js-profile-fullname').value.trim();
+    const username = tpl.find('.js-profile-username').value.trim();
+    const password = tpl.find('.js-profile-password').value;
+    const isAdmin = tpl.find('.js-profile-isadmin').value.trim();
+    const isActive = tpl.find('.js-profile-isactive').value.trim();
+    const email = tpl.find('.js-profile-email').value.trim();
+
+    const isChangePassword = password.length > 0;
+    const isChangeUserName = username !== user.username;
+    const isChangeEmail = email.toLowerCase() !== user.emails[0].address.toLowerCase();
+
+    Users.update(this.userId, {
+      $set: {
+        'profile.fullname': fullname,
+        'isAdmin': isAdmin === 'true',
+        'loginDisabled': isActive === 'true',
+      },
+    });
+
+    if(isChangePassword){
+      Meteor.call('setPassword', password, this.userId);
+    }
+
+    if (isChangeUserName && isChangeEmail) {
+      Meteor.call('setUsernameAndEmail', username, email.toLowerCase(), this.userId, function (error) {
+        const usernameMessageElement = tpl.$('.username-taken');
+        const emailMessageElement = tpl.$('.email-taken');
+        if (error) {
+          const errorElement = error.error;
+          if (errorElement === 'username-already-taken') {
+            usernameMessageElement.show();
+            emailMessageElement.hide();
+          } else if (errorElement === 'email-already-taken') {
+            usernameMessageElement.hide();
+            emailMessageElement.show();
+          }
+        } else {
+          usernameMessageElement.hide();
+          emailMessageElement.hide();
+          Popup.close();
+        }
+      });
+    } else if (isChangeUserName) {
+      Meteor.call('setUsername', username, this.userId, function (error) {
+        const usernameMessageElement = tpl.$('.username-taken');
+        if (error) {
+          const errorElement = error.error;
+          if (errorElement === 'username-already-taken') {
+            usernameMessageElement.show();
+          }
+        } else {
+          usernameMessageElement.hide();
+          Popup.close();
+        }
+      });
+    } else if (isChangeEmail) {
+      Meteor.call('setEmail', email.toLowerCase(), this.userId, function (error) {
+        const emailMessageElement = tpl.$('.email-taken');
+        if (error) {
+          const errorElement = error.error;
+          if (errorElement === 'email-already-taken') {
+            emailMessageElement.show();
+          }
+        } else {
+          emailMessageElement.hide();
+          Popup.close();
+        }
+      });
+    } else Popup.close();
+  },
+});
@@ -0,0 +1,15 @@
+.main-body
+  overflow: scroll;
+
+table
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+
+  td, th
+    border: 1px solid #d2d0d0;
+    text-align: left;
+    padding: 8px;
+
+  tr:nth-child(even)
+    background-color: #dddddd;
@@ -0,0 +1,121 @@
+template(name="setting")
+  .setting-content
+    unless currentUser.isAdmin
+      | {{_ 'error-notAuthorized'}}
+    else
+      .content-title
+        span {{_ 'settings'}}
+      .content-body
+        .side-menu
+          ul
+            li.active
+              a.js-setting-menu(data-id="registration-setting") {{_ 'registration'}}
+            li
+              a.js-setting-menu(data-id="email-setting") {{_ 'email'}}
+            li
+              a.js-setting-menu(data-id="account-setting") {{_ 'accounts'}}
+            li
+              a.js-setting-menu(data-id="announcement-setting") {{_ 'admin-announcement'}}
+        .main-body
+          if loading.get
+            +spinner
+          else if generalSetting.get
+            +general
+          else if emailSetting.get
+            +email
+          else if accountSetting.get
+            +accountSettings
+          else if announcementSetting.get
+            +announcementSettings
+
+template(name="general")
+  ul#registration-setting.setting-detail
+    li
+      a.flex.js-toggle-registration
+        .materialCheckBox(class="{{#if currentSetting.disableRegistration}}is-checked{{/if}}")
+
+        span {{_ 'disable-self-registration'}}
+    li
+      .invite-people(class="{{#if currentSetting.disableRegistration}}{{else}}hide{{/if}}")
+        ul
+          li
+            .title {{_ 'invite-people'}}
+            textarea#email-to-invite.form-control(rows='5', placeholder="{{_ 'email-addresses'}}")
+          li
+            .title {{_ 'to-boards'}}
+            .bg-white
+              each boards
+                a.option.flex.js-toggle-board-choose(id= _id)
+                  .materialCheckBox(data-id= _id)
+
+                  span= title
+
+          li
+            button.js-email-invite.primary {{_ 'invite'}}
+
+template(name='email')
+  ul#email-setting.setting-detail
+    li.smtp-form
+      .title {{_ 'smtp-host'}}
+      .description {{_ 'smtp-host-description'}}
+      .form-group
+        input.form-control#mail-server-host(type="text", placeholder="smtp.domain.com" value="{{currentSetting.mailServer.host}}")
+    li.smtp-form
+      .title {{_ 'smtp-port'}}
+      .description {{_ 'smtp-port-description'}}
+      .form-group
+        input.form-control#mail-server-port(type="text", placeholder="25" value="{{currentSetting.mailServer.port}}")
+    li.smtp-form
+      .title {{_ 'smtp-username'}}
+      .form-group
+        input.form-control#mail-server-username(type="text", placeholder="{{_ 'username'}}" value="{{currentSetting.mailServer.username}}")
+    li.smtp-form
+      .title {{_ 'smtp-password'}}
+      .form-group
+        input.form-control#mail-server-password(type="text", placeholder="{{_ 'password'}}" value="{{currentSetting.mailServer.password}}")
+    li.smtp-form
+      .title {{_ 'smtp-tls'}}
+      .form-group
+        a.flex.js-toggle-tls
+          .materialCheckBox#mail-server-tls(class="{{#if currentSetting.mailServer.enableTLS}}is-checked{{/if}}")
+
+          span {{_ 'smtp-tls-description'}}
+
+    li.smtp-form
+      .title {{_ 'send-from'}}
+      .form-group
+        input.form-control#mail-server-from(type="email", placeholder="no-reply@domain.com" value="{{currentSetting.mailServer.from}}")
+
+    li
+      button.js-save.primary {{_ 'save'}}
+
+    li
+      button.js-send-smtp-test-email.primary {{_ 'send-smtp-test'}}
+
+template(name='accountSettings')
+  ul#account-setting.setting-detail
+    li.smtp-form
+      .title {{_ 'accounts-allowEmailChange'}}
+      .form-group.flex
+        input.form-control#accounts-allowEmailChange(type="radio" name="allowEmailChange" value="true" checked="{{#if allowEmailChange}}checked{{/if}}")
+        span {{_ 'yes'}}
+        input.form-control#accounts-allowEmailChange(type="radio" name="allowEmailChange" value="false" checked="{{#unless allowEmailChange}}checked{{/unless}}")
+        span {{_ 'no'}}
+    li
+      button.js-accounts-save.primary {{_ 'save'}}
+
+template(name='announcementSettings')
+  ul#announcement-setting.setting-detail
+    li
+      a.flex.js-toggle-activemessage
+        .materialCheckBox(class="{{#if currentSetting.enabled}}is-checked{{/if}}")
+
+        span {{_ 'admin-announcement-active'}}
+    li
+      .admin-announcement(class="{{#if currentSetting.enabled}}{{else}}hide{{/if}}")
+        ul
+          li
+            .title {{_ 'admin-announcement-title'}}
+            textarea#admin-announcement.form-control= currentSetting.body
+          li
+            button.js-announcement-save.primary {{_ 'save'}}
@@ -0,0 +1,215 @@
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.loading = new ReactiveVar(false);
+    this.generalSetting = new ReactiveVar(true);
+    this.emailSetting = new ReactiveVar(false);
+    this.accountSetting = new ReactiveVar(false);
+    this.announcementSetting = new ReactiveVar(false);
+
+    Meteor.subscribe('setting');
+    Meteor.subscribe('mailServer');
+    Meteor.subscribe('accountSettings');
+    Meteor.subscribe('announcements');
+  },
+
+  setError(error) {
+    this.error.set(error);
+  },
+
+  setLoading(w) {
+    this.loading.set(w);
+  },
+
+  checkField(selector) {
+    const value = $(selector).val();
+    if(!value || value.trim() === ''){
+      $(selector).parents('li.smtp-form').addClass('has-error');
+      throw Error('blank field');
+    } else {
+      return value;
+    }
+  },
+
+  currentSetting(){
+    return Settings.findOne();
+  },
+
+  boards() {
+    return Boards.find({
+      archived: false,
+      'members.userId': Meteor.userId(),
+      'members.isAdmin': true,
+    }, {
+      sort: ['title'],
+    });
+  },
+  toggleRegistration(){
+    this.setLoading(true);
+    const registrationClosed = this.currentSetting().disableRegistration;
+    Settings.update(Settings.findOne()._id, {$set:{disableRegistration: !registrationClosed}});
+    this.setLoading(false);
+    if(registrationClosed){
+      $('.invite-people').slideUp();
+    }else{
+      $('.invite-people').slideDown();
+    }
+  },
+  toggleTLS(){
+    $('#mail-server-tls').toggleClass('is-checked');
+  },
+  switchMenu(event){
+    const target = $(event.target);
+    if(!target.hasClass('active')){
+      $('.side-menu li.active').removeClass('active');
+      target.parent().addClass('active');
+      const targetID = target.data('id');
+      this.generalSetting.set('registration-setting' === targetID);
+      this.emailSetting.set('email-setting' === targetID);
+      this.accountSetting.set('account-setting' === targetID);
+      this.announcementSetting.set('announcement-setting' === targetID);
+    }
+  },
+
+  checkBoard(event){
+    let target = $(event.target);
+    if(!target.hasClass('js-toggle-board-choose')){
+      target = target.parent();
+    }
+    const checkboxId = target.attr('id');
+    $(`#${checkboxId} .materialCheckBox`).toggleClass('is-checked');
+    $(`#${checkboxId}`).toggleClass('is-checked');
+  },
+
+  inviteThroughEmail(){
+    const emails = $('#email-to-invite').val().trim().split('\n').join(',').split(',');
+    const boardsToInvite = [];
+    $('.js-toggle-board-choose .materialCheckBox.is-checked').each(function () {
+      boardsToInvite.push($(this).data('id'));
+    });
+    const validEmails = [];
+    emails.forEach((email) => {
+      if (email && SimpleSchema.RegEx.Email.test(email.trim())) {
+        validEmails.push(email.trim());
+      }
+    });
+    if (validEmails.length) {
+      this.setLoading(true);
+      Meteor.call('sendInvitation', validEmails, boardsToInvite, () => {
+        // if (!err) {
+        //   TODO - show more info to user
+        // }
+        this.setLoading(false);
+      });
+    }
+  },
+
+  saveMailServerInfo(){
+    this.setLoading(true);
+    $('li').removeClass('has-error');
+
+    try{
+      const host = this.checkField('#mail-server-host');
+      const port = this.checkField('#mail-server-port');
+      const username = $('#mail-server-username').val().trim();
+      const password = $('#mail-server-password').val().trim();
+      const from = this.checkField('#mail-server-from');
+      const tls = $('#mail-server-tls.is-checked').length > 0;
+      Settings.update(Settings.findOne()._id, {$set:{'mailServer.host':host, 'mailServer.port': port, 'mailServer.username': username,
+        'mailServer.password': password, 'mailServer.enableTLS': tls, 'mailServer.from': from}});
+    } catch (e) {
+      return;
+    } finally {
+      this.setLoading(false);
+    }
+
+  },
+
+  sendSMTPTestEmail() {
+    Meteor.call('sendSMTPTestEmail', (err, ret) => {
+      if (!err && ret) { /* eslint-disable no-console */
+        const message = `${TAPi18n.__(ret.message)}: ${ret.email}`;
+        console.log(message);
+        alert(message);
+      } else {
+        const reason = err.reason || '';
+        const message = `${TAPi18n.__(err.error)}\n${reason}`;
+        console.log(message, err);
+        alert(message);
+      }  /* eslint-enable no-console */
+    });
+  },
+
+  events(){
+    return [{
+      'click a.js-toggle-registration': this.toggleRegistration,
+      'click a.js-toggle-tls': this.toggleTLS,
+      'click a.js-setting-menu': this.switchMenu,
+      'click a.js-toggle-board-choose': this.checkBoard,
+      'click button.js-email-invite': this.inviteThroughEmail,
+      'click button.js-save': this.saveMailServerInfo,
+      'click button.js-send-smtp-test-email': this.sendSMTPTestEmail,
+    }];
+  },
+}).register('setting');
+
+BlazeComponent.extendComponent({
+  saveAllowEmailChange() {
+    const allowEmailChange = ($('input[name=allowEmailChange]:checked').val() === 'true');
+    AccountSettings.update('accounts-allowEmailChange', {
+      $set: { 'booleanValue': allowEmailChange },
+    });
+  },
+
+  allowEmailChange() {
+    return AccountSettings.findOne('accounts-allowEmailChange').booleanValue;
+  },
+
+  events() {
+    return [{
+      'click button.js-accounts-save': this.saveAllowEmailChange,
+    }];
+  },
+}).register('accountSettings');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.loading = new ReactiveVar(false);
+  },
+
+  setLoading(w) {
+    this.loading.set(w);
+  },
+
+  currentSetting(){
+    return Announcements.findOne();
+  },
+
+  saveMessage() {
+    const message = $('#admin-announcement').val().trim();
+    Announcements.update(Announcements.findOne()._id, {
+      $set: { 'body': message },
+    });
+  },
+
+  toggleActive(){
+    this.setLoading(true);
+    const isActive = this.currentSetting().enabled;
+    Announcements.update(Announcements.findOne()._id, {
+      $set:{ 'enabled': !isActive},
+    });
+    this.setLoading(false);
+    if(isActive){
+      $('.admin-announcement').slideUp();
+    }else{
+      $('.admin-announcement').slideDown();
+    }
+  },
+
+  events() {
+    return [{
+      'click a.js-toggle-activemessage': this.toggleActive,
+      'click button.js-announcement-save': this.saveMessage,
+    }];
+  },
+}).register('announcementSettings');
@@ -0,0 +1,113 @@
+.flex
+  display: -webkit-box
+  display: -moz-box
+  display: -webkit-flex
+  display: -moz-flex
+  display: -ms-flexbox
+  display: flex
+
+.setting-content
+  padding 30px
+  color: #727479
+  background: #dedede
+  width 100%
+  height 100%
+  position: absolute;
+
+  .content-title
+    font-size 20px
+
+  .content-body
+    display flex
+    padding-top 15px
+    height 100%
+
+    .side-menu
+      background-color: #f7f7f7;
+      border: 1px solid #f0f0f0;
+      border-radius: 4px;
+      width: 250px;
+      box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);
+
+      ul
+
+        li
+          margin: 0.1rem 0.2rem;
+
+          &.active
+            background #fff
+            box-shadow 0 1px 2px rgba(0,0,0,0.15);
+
+          &:hover
+            background #fff
+            box-shadow 0 1px 2px rgba(0,0,0,0.15);
+          a
+            @extends .flex
+            padding: 1rem 0 1rem 1rem
+            width: 100% - 5rem
+
+
+            span
+              font-size: 13px
+
+    .main-body
+      padding: 0.1em 1em
+
+      ul
+        li
+          padding: 0.5rem 0.5rem;
+
+          a
+            .is-checked
+              border-bottom: 2px solid #2980b9;
+              border-right: 2px solid #2980b9;
+
+            span
+              padding: 0 0.5rem
+
+          .admin-announcement,
+          .invite-people
+            padding-left 20px;
+            li
+              min-width: 500px;
+
+              ul.no-margin-bottom
+                margin-bottom: 0;
+
+              .bg-white
+                a
+                  background  #f7f7f7
+                  &.is-checked
+                    background #fff
+
+
+.option
+  @extends .flex
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: #fff;
+  text-decoration: none;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  margin-top: 5px;
+  padding: 5px;
+
+.title
+  font-weight 700;
+  margin-bottom 0.5rem;
+.description
+  margin-bottom 0.5rem;
+.bg-white
+  background #f9fbfc;
+
+.form-control.has-error
+  border-color: #a94442;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+
+li.has-error
+  color #a94442
+  .form-group
+    .form-control
+      border-color: #a94442;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+
@@ -0,0 +1,25 @@
+template(name="settingHeaderBar")
+  h1.header-setting-menu
+    span {{_ 'admin-panel'}}
+
+  .setting-header-btns.left
+    unless isMiniScreen
+      unless isSandstorm
+        if currentUser
+          a.setting-header-btn.settings(href="{{pathFor 'setting'}}")
+            i.fa(class="fa-cog")
+            span {{_ 'settings'}}
+
+          a.setting-header-btn.people(href="{{pathFor 'people'}}")
+            i.fa(class="fa-users")
+            span {{_ 'people'}}
+
+          a.setting-header-btn.informations(href="{{pathFor 'information'}}")
+            i.fa(class="fa-info-circle")
+            span {{_ 'info'}}
+
+        else
+          a.setting-header-btn.js-log-in(
+            title="{{_ 'log-in'}}")
+            i.fa.fa-sign-in
+            span {{_ 'log-in'}}
@@ -0,0 +1,25 @@
+#header #header-main-bar .setting-header-btn
+  &.active,
+  &:hover:not(.is-disabled)
+    background: rgba(0, 0, 0, .15)
+  color: darken(white, 5%)
+  margin-left: 20px;
+  padding-right: 10px;
+  height: 28px;
+  font-size: 13px;
+  float: left;
+  overflow: hidden;
+  line-height: @height;
+  margin: 0 2px;
+
+  i.fa
+    float: left
+    display: block
+    line-height: 28px
+    color: darken(white, 5%)
+    margin: 0 10px
+
+  + span
+    display: inline-block
+    margin-top: 1px
+    margin-right: 10px
@@ -1,14 +1,22 @@
 template(name="sidebar")
  .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}")
    a.sidebar-tongue.js-toggle-sidebar(
-      class="{{#if isTongueHidden}}is-hidden{{/if}}")
+      class="{{#if isTongueHidden}}is-hidden{{/if}}",
+      title="{{showTongueTitle}}")
      i.fa.fa-angle-left
-    .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
-      unless isDefaultView
-        h2
-          a.fa.fa-chevron-left.js-back-home
-          = getViewTitle
-      +Template.dynamic(template=getViewTemplate)
+    .sidebar-shadow
+      .sidebar-content.sidebar-shortcuts
+        a.board-header-btn.js-shortcuts
+          i.fa.fa-keyboard-o
+          span {{_ 'keyboard-shortcuts' }}
+      .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
+        a.hide-btn.js-hide-sidebar
+          i.fa.fa-angle-right
+        unless isDefaultView
+          h2
+            a.fa.fa-chevron-left.js-back-home
+            = getViewTitle
+        +Template.dynamic(template=getViewTemplate)

 template(name='homeSidebar')
  +membersWidget
@@ -28,11 +36,21 @@ template(name="membersWidget")
    .board-widget-content
      each currentBoard.activeMembers
        +userAvatar(userId=this.userId showStatus=true)
-      unless isSandstorm
-        if currentUser.isBoardAdmin
-          a.member.add-member.js-manage-board-members
+      if isSandstorm
+        if currentUser.isBoardMember
+          a.member.add-member.sandstorm-powerbox-request-identity
            i.fa.fa-plus
+      else if currentUser.isBoardAdmin
+        a.member.add-member.js-manage-board-members
+          i.fa.fa-plus
      .clearfix
+  if isInvited
+    hr
+    p
+      i.fa.fa-exclamation-circle
+      | {{_ 'just-invited'}}
+    button.js-member-invite-accept.primary {{_ 'accept'}}
+    button.js-member-invite-decline {{_ 'decline'}}

 template(name="labelsWidget")
  .board-widget.board-widget-labels
@@ -42,7 +60,7 @@ template(name="labelsWidget")
    .board-widget-content
      each currentBoard.labels
          a.card-label(class="card-label-{{color}}"
-            class="{{#if currentUser.isBoardMember}}js-label{{/if}}")
+            class="{{#if currentUser.isNotCommentOnly}}js-label{{/if}}")
            span.card-label-name= name
      if currentUser.isBoardAdmin
        a.card-label.add-label.js-add-label
@@ -56,51 +74,62 @@ template(name="memberPopup")
        h3
          .js-profile= user.profile.fullname
        p.quiet @#{user.username}
+        if isInvited
+          p
+            i.fa.fa-exclamation-circle
+            | {{_ 'not-accepted-yet'}}

-    if currentUser.isBoardMember
-      ul.pop-over-list
+    ul.pop-over-list
+      li
+        a.js-filter-member {{_ 'filter-cards'}}
+      unless isSandstorm
+        if currentUser.isBoardAdmin
+          li
+            a.js-change-role
+              | {{_ 'change-permissions'}}
+              span.quiet (#{memberType})
        li
-          a.js-filter-member Filter cards
-        unless isSandstorm
-          if currentUser.isBoardAdmin
-            li
-              a.js-change-role
-                | {{_ 'change-permissions'}}
-                span.quiet (#{memberType})
-            li
-              if $eq currentUser._id userId
-                //-
-                  XXX Not implemented!
-                // a.js-leave-member {{_ 'leave-board'}}
-              else
-                a.js-remove-member {{_ 'remove-from-board'}}
+          if $eq currentUser._id userId
+            a.js-leave-member {{_ 'leave-board'}}
+          else if currentUser.isBoardAdmin
+            a.js-remove-member {{_ 'remove-from-board'}}


 template(name="removeMemberPopup")
-  p {{_ 'remove-member-pop' name=user.profile.name username=user.username boardTitle=board.title}}
+  p {{_ 'remove-member-pop' name=user.profile.fullname username=user.username boardTitle=board.title}}
  button.js-confirm.negate.full(type="submit") {{_ 'remove-member'}}

+template(name="leaveBoardPopup")
+  p {{_ 'leave-board-pop' boardTitle=board.title}}
+  button.js-confirm.negate.full(type="submit") {{_ 'leave-board'}}
+
 template(name="addMemberPopup")
  .js-search-member
    +esInput(index="users")

-  ul.pop-over-list
-    +esEach(index="users")
-      li.item.js-member-item(class="{{#if isBoardMember}}disabled{{/if}}")
-        a.name.js-select-member(title="{{profile.name}} ({{username}})")
-          +userAvatar(userId=_id esSearch=true)
-          span.full-name
-            = profile.name
-            | (<span class="username">{{username}}</span>)
-          if isBoardMember
-            .quiet ({{_ 'joined'}})
+  if loading.get
+    +spinner
+  else if error.get
+    .warning {{_ error.get}}
+  else
+    ul.pop-over-list
+      +esEach(index="users")
+        li.item.js-member-item(class="{{#if isBoardMember}}disabled{{/if}}")
+          a.name.js-select-member(title="{{profile.fullname}} ({{username}})")
+            +userAvatar(userId=_id esSearch=true)
+            span.full-name
+              = profile.fullname
+              | (<span class="username">{{username}}</span>)
+            if isBoardMember
+              .quiet ({{_ 'joined'}})

-    +ifEsIsSearching(index='users')
-      +spinner
+      +ifEsIsSearching(index='users')
+        +spinner

-    +ifEsHasNoResults(index="users")
-      .manage-member-section
-        p.quiet {{_ 'no-results'}}
+      +ifEsHasNoResults(index="users")
+        .manage-member-section
+          p.quiet {{_ 'no-results'}}
+    button.js-email-invite.primary.full {{_ 'email-invite'}}

 template(name="changePermissionsPopup")
  ul.pop-over-list
@@ -113,9 +142,15 @@ template(name="changePermissionsPopup")
    li
      a(class="{{#if isLastAdmin}}disabled{{else}}js-set-normal{{/if}}")
        | {{_ 'normal'}}
-        unless isAdmin
+        if isNormal
          i.fa.fa-check
        span.sub-name {{_ 'normal-desc'}}
+    li
+      a(class="{{#if isLastAdmin}}disabled{{else}}js-set-comment-only{{/if}}")
+        | {{_ 'comment-only'}}
+        if isCommentOnly
+          i.fa.fa-check
+        span.sub-name {{_ 'comment-only-desc'}}
  if isLastAdmin
    hr
    p.quiet.bottom {{_ 'last-admin-desc'}}
@@ -4,21 +4,19 @@ const defaultView = 'home';

 const viewTitles = {
  filter: 'filter-cards',
+  search: 'search-cards',
  multiselection: 'multi-selection',
  archives: 'archives',
 };

 BlazeComponent.extendComponent({
-  template() {
-    return 'sidebar';
-  },
-
  mixins() {
    return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
  },

  onCreated() {
-    this._isOpen = new ReactiveVar(!Session.get('currentCard'));
+    const initOpen = Utils.isMiniScreen() ? false : (!Session.get('currentCard'));
+    this._isOpen = new ReactiveVar(initOpen);
    this._view = new ReactiveVar(defaultView);
    Sidebar = this;
  },
@@ -54,7 +52,7 @@ BlazeComponent.extendComponent({
  },

  reachNextPeak() {
-    const activitiesComponent = this.componentChildren('activities')[0];
+    const activitiesComponent = this.childComponents('activities')[0];
    activitiesComponent.loadNextPage();
  },

@@ -92,13 +90,22 @@ BlazeComponent.extendComponent({
    return TAPi18n.__(viewTitles[this.getView()]);
  },

+  showTongueTitle() {
+    if (this.isOpen())
+      return `${TAPi18n.__('sidebar-close')}`;
+    else
+      return `${TAPi18n.__('sidebar-open')}`;
+  },
+
  events() {
-    // XXX Hacky, we need some kind of `super`
-    const mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events();
-    return mixinEvents.concat([{
+    return [{
+      'click .js-hide-sidebar': this.hide,
      'click .js-toggle-sidebar': this.toggle,
      'click .js-back-home': this.setView,
-    }]);
+      'click .js-shortcuts'() {
+        FlowRouter.go('shortcuts');
+      },
+    }];
  },
 }).register('sidebar');

@@ -109,21 +116,26 @@ EscapeActions.register('sidebarView',
  () => { return Sidebar && Sidebar.getView() !== defaultView; }
 );

-function getMemberIndex(board, searchId) {
-  for (let i = 0; i < board.members.length; i++) {
-    if (board.members[i].userId === searchId)
-      return i;
-  }
-  throw new Meteor.Error('Member not found');
-}
-
 Template.memberPopup.helpers({
  user() {
    return Users.findOne(this.userId);
  },
  memberType() {
    const type = Users.findOne(this.userId).isBoardAdmin() ? 'admin' : 'normal';
-    return TAPi18n.__(type).toLowerCase();
+    if(type === 'normal'){
+      const currentBoard = Boards.findOne(Session.get('currentBoard'));
+      const commentOnly = currentBoard.hasCommentOnly(this.userId);
+      if(commentOnly){
+        return TAPi18n.__('comment-only').toLowerCase();
+      } else {
+        return TAPi18n.__(type).toLowerCase();
+      }
+    } else {
+      return TAPi18n.__(type).toLowerCase();
+    }
+  },
+  isInvited() {
+    return Users.findOne(this.userId).isInvitedTo(Session.get('currentBoard'));
  },
 });

@@ -134,25 +146,64 @@ Template.memberPopup.events({
  },
  'click .js-change-role': Popup.open('changePermissions'),
  'click .js-remove-member': Popup.afterConfirm('removeMember', function() {
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    const memberIndex = getMemberIndex(currentBoard, this.userId);
-
-    Boards.update(currentBoard._id, {
-      $set: {
-        [`members.${memberIndex}.isActive`]: false,
-      },
+    const boardId = Session.get('currentBoard');
+    const memberId = this.userId;
+    Cards.find({ boardId, members: memberId }).forEach((card) => {
+      card.unassignMember(memberId);
    });
+    Boards.findOne(boardId).removeMember(memberId);
    Popup.close();
  }),
-  'click .js-leave-member'() {
-    // XXX Not implemented
-    Popup.close();
+  'click .js-leave-member': Popup.afterConfirm('leaveBoard', () => {
+    const boardId = Session.get('currentBoard');
+    Meteor.call('quitBoard', boardId, () => {
+      Popup.close();
+      FlowRouter.go('home');
+    });
+  }),
+});
+
+Template.removeMemberPopup.helpers({
+  user() {
+    return Users.findOne(this.userId);
+  },
+  board() {
+    return Boards.findOne(Session.get('currentBoard'));
+  },
+});
+
+Template.leaveBoardPopup.helpers({
+  board() {
+    return Boards.findOne(Session.get('currentBoard'));
+  },
+});
+
+Template.membersWidget.helpers({
+  isInvited() {
+    const user = Meteor.user();
+    return user && user.isInvitedTo(Session.get('currentBoard'));
  },
 });

 Template.membersWidget.events({
  'click .js-member': Popup.open('member'),
  'click .js-manage-board-members': Popup.open('addMember'),
+  'click .sandstorm-powerbox-request-identity'() {
+    window.sandstormRequestIdentity();
+  },
+  'click .js-member-invite-accept'() {
+    const boardId = Session.get('currentBoard');
+    Meteor.user().removeInvite(boardId);
+  },
+  'click .js-member-invite-decline'() {
+    const boardId = Session.get('currentBoard');
+    Meteor.call('quitBoard', boardId, (err, ret) => {
+      if (!err && ret) {
+        Meteor.user().removeInvite(boardId);
+        FlowRouter.go('home');
+      }
+    });
+  },
 });

 Template.labelsWidget.events({
@@ -166,9 +217,6 @@ Template.labelsWidget.events({
 // autorun function and register a dependency on the both members and labels
 // fields of the current board document.
 function draggableMembersLabelsWidgets() {
-  if (!Meteor.user() || !Meteor.user().isBoardMember())
-    return;
-
  this.autorun(() => {
    const currentBoardId = Tracker.nonreactive(() => {
      return Session.get('currentBoard');
@@ -180,7 +228,8 @@ function draggableMembersLabelsWidgets() {
      },
    });
    Tracker.afterFlush(() => {
-      this.$('.js-member,.js-label').draggable({
+      const $draggables = this.$('.js-member,.js-label');
+      $draggables.draggable({
        appendTo: 'body',
        helper: 'clone',
        revert: 'invalid',
@@ -191,6 +240,14 @@ function draggableMembersLabelsWidgets() {
          EscapeActions.executeUpTo('popup-back');
        },
      });
+
+      function userIsMember() {
+        return Meteor.user() && Meteor.user().isBoardMember();
+      }
+
+      this.autorun(() => {
+        $draggables.draggable('option', 'disabled', !userIsMember());
+      });
    });
  });
 }
@@ -198,72 +255,102 @@ function draggableMembersLabelsWidgets() {
 Template.membersWidget.onRendered(draggableMembersLabelsWidgets);
 Template.labelsWidget.onRendered(draggableMembersLabelsWidgets);

-Template.addMemberPopup.helpers({
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.loading = new ReactiveVar(false);
+  },
+
+  onRendered() {
+    this.find('.js-search-member input').focus();
+    this.setLoading(false);
+  },
+
  isBoardMember() {
-    const user = Users.findOne(this._id);
+    const userId = this.currentData()._id;
+    const user = Users.findOne(userId);
    return user && user.isBoardMember();
  },
-});

-Template.addMemberPopup.events({
-  'click .js-select-member'() {
-    const userId = this._id;
-    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    const currentMembersIds = _.pluck(currentBoard.members, 'userId');
-    if (currentMembersIds.indexOf(userId) === -1) {
-      Boards.update(currentBoard._id, {
-        $push: {
-          members: {
-            userId,
-            isAdmin: false,
-            isActive: true,
-          },
-        },
-      });
-    } else {
-      const memberIndex = getMemberIndex(currentBoard, userId);
-
-      Boards.update(currentBoard._id, {
-        $set: {
-          [`members.${memberIndex}.isActive`]: true,
-        },
-      });
-    }
-    Popup.close();
+  isValidEmail(email) {
+    return SimpleSchema.RegEx.Email.test(email);
  },
-});

-Template.addMemberPopup.onRendered(function() {
-  this.find('.js-search-member input').focus();
-});
+  setError(error) {
+    this.error.set(error);
+  },
+
+  setLoading(w) {
+    this.loading.set(w);
+  },
+
+  isLoading() {
+    return this.loading.get();
+  },
+
+  inviteUser(idNameEmail) {
+    const boardId = Session.get('currentBoard');
+    this.setLoading(true);
+    const self = this;
+    Meteor.call('inviteUserToBoard', idNameEmail, boardId, (err, ret) => {
+      self.setLoading(false);
+      if (err) self.setError(err.error);
+      else if (ret.email) self.setError('email-sent');
+      else Popup.close();
+    });
+  },
+
+  events() {
+    return [{
+      'keyup input'() {
+        this.setError('');
+      },
+      'click .js-select-member'() {
+        const userId = this.currentData()._id;
+        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        if (!currentBoard.hasMember(userId)) {
+          this.inviteUser(userId);
+        }
+      },
+      'click .js-email-invite'() {
+        const idNameEmail = $('.js-search-member input').val();
+        if (idNameEmail.indexOf('@')<0 || this.isValidEmail(idNameEmail)) {
+          this.inviteUser(idNameEmail);
+        } else this.setError('email-invalid');
+      },
+    }];
+  },
+}).register('addMemberPopup');

 Template.changePermissionsPopup.events({
-  'click .js-set-admin, click .js-set-normal'(event) {
+  'click .js-set-admin, click .js-set-normal, click .js-set-comment-only'(event) {
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    const memberIndex = getMemberIndex(currentBoard, this.userId);
+    const memberId = this.userId;
    const isAdmin = $(event.currentTarget).hasClass('js-set-admin');
-
-    Boards.update(currentBoard._id, {
-      $set: {
-        [`members.${memberIndex}.isAdmin`]: isAdmin,
-      },
-    });
+    const isCommentOnly = $(event.currentTarget).hasClass('js-set-comment-only');
+    currentBoard.setMemberPermission(memberId, isAdmin, isCommentOnly);
    Popup.back(1);
  },
 });

 Template.changePermissionsPopup.helpers({
  isAdmin() {
-    const user = Users.findOne(this.userId);
-    return user.isBoardAdmin();
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard.hasAdmin(this.userId);
+  },
+
+  isNormal() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return !currentBoard.hasAdmin(this.userId) && !currentBoard.hasCommentOnly(this.userId);
+  },
+
+  isCommentOnly() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return !currentBoard.hasAdmin(this.userId) && currentBoard.hasCommentOnly(this.userId);
  },

  isLastAdmin() {
-    const user = Users.findOne(this.userId);
-    if (!user.isBoardAdmin())
-      return false;
    const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    const nbAdmins = _.where(currentBoard.members, { isAdmin: true }).length;
-    return nbAdmins === 1;
+    return currentBoard.hasAdmin(this.userId) && (currentBoard.activeAdmins() === 1);
  },
 });