edit profile backend stuff

2 files changed, 62 insertions, 11 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index a85ac21..aaab3f9 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -875,6 +875,13 @@ header .search_form {
   margin-bottom: 5px;
   max-width: 100px;
 }
+#profile_form input[type=text] {
+  width: 200px;
+}
+#profile_form form > div.oldpassword {
+  margin-top: 12px;
+  display: none;
+}
 
 /* 404 */
 #error_404 {
diff --git a/public/assets/js/lib/views/profile/profile_edit.js b/public/assets/js/lib/views/profile/profile_edit.js
index a6ff211..a887357 100644
--- a/public/assets/js/lib/views/profile/profile_edit.js
+++ b/public/assets/js/lib/views/profile/profile_edit.js
@@ -3,7 +3,8 @@ var ProfileForm = FormView.extend({
   el: "#profile_form",
   
   events: {
-    "change #profile-pic": 'changeProfilePic',
+    "input #profile-newpassword": 'showOldPassword',
+    "change #profile-avatar": 'changeAvatar',
   },
   
   action: "/api/user",
@@ -15,28 +16,71 @@ var ProfileForm = FormView.extend({
   },
   
   load: function(username){
-    console.log('hi')
     this.action = "/api/user/" + username;
-    "realname location email phone website fb twitter".split(" ").forEach((field) => {
+    "realname location email phone website twitter".split(" ").forEach((field) => {
       this.$('[name=' + field + ']').val( sanitize(auth.user[field]) )
     })
-    if (! auth.user.pic) {
-      $("#profile-pic-embed").hide()
+    if (! auth.user.avatar) {
+      $("#profile-avatar-embed").hide()
     } else {
-      $("#profile-pic-embed").attr("src", sanitize(auth.user.pic))
+      $("#profile-avatar-embed").attr("src", sanitize(auth.user.avatar))
     }
     $("body").removeClass('loading')
   },
   
-  changeProfilePic: function(){
-    // $("#profile-pic-embed").show().attr("src", sanitize(auth.user.pic))
+  changeAvatar: function(e){
+    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
+    if (! files.length) return
+    var f = files[0]
+    if ( ! f.type.match('image.*')) {
+      e.preventDefault()
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = (e) => {
+      var img = new Image()
+      img.onload = () => {
+        this.showAvatar(img)
+      }
+      img.src = e.target.result
+    }
+    reader.readAsDataURL(f);
+  },
+  
+  showAvatar: function(img){
+    var canvas = document.createElement("canvas")
+    var ctx = canvas.getContext('2d')
+    var w, h
+    var ratio = img.naturalWidth / img.naturalHeight
+    if (ratio > 1) { // landscape
+      w = 500
+      h = 500 / ratio
+    }
+    else {
+      h = 500
+      w = 500 * ratio
+    }
+    canvas.width = w
+    canvas.height = h
+    ctx.drawImage(img, 0, 0, w, h)
+    var dataURI = canvas.toDataURL('image/jpeg', 0.85)
+    this.$("#profile-avatar-embed").show().attr("src", dataURI).css("width", w/2)
+  },
+  
+  showOldPassword: function(){
+    this.$(".oldpassword").css('display', 'flex')
   },
   
   validate: function(){
     var errors = []
-    var title = this.$("[name=title]").val()
-    if (! title || ! title.length) {
-      errors.push("Please title your post.")
+    var oldpw = this.$("[name=oldpassword]").val()
+    var pw = this.$("[name=newpassword]").val()
+    var pw2 = this.$("[name=newpassword2]").val()
+    if (pw !== pw2) {
+      errors.push("Passwords don't match.")
+    }
+    if (pw && ! oldpw) {
+      errors.push("Please enter your old password.")
     }
     return errors.length ? errors : null
   },