1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
var ProfileForm = FormView.extend({
el: "#profile_form",
events: {
"input #profile-newpassword": 'showOldPassword',
"change #profile-avatar": 'changeAvatar',
},
action: "/api/user",
method: "POST",
initialize: function(){
this.__super__.initialize.call(this)
this.template = this.$(".template").html()
},
load: function(username){
this.action = "/api/user/" + username;
"realname location email phone website twitter".split(" ").forEach((field) => {
this.$('[name=' + field + ']').val( sanitize(auth.user[field]) )
})
if (! auth.user.avatar) {
$("#profile-avatar-embed").hide()
} else {
$("#profile-avatar-embed").attr("src", sanitize(auth.user.avatar))
}
$("body").removeClass('loading')
},
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.avatarBlob = dataUriToBlob(dataURI)
this.$("#profile-avatar-embed").show().attr("src", dataURI).css("width", w/2)
},
showOldPassword: function(){
this.$(".oldpassword").css('display', 'flex')
},
serialize: function(){
var fd = this.__super__.serialize.call(this)
var oldpw = this.$("[name=oldpassword]").val()
var pw = this.$("[name=newpassword]").val()
var pw2 = this.$("[name=newpassword2]").val()
fd.delete('avatar')
if (this.avatarBlob) {
fd.append("avatar", this.avatarBlob)
}
return fd
},
validate: function(){
var errors = []
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
},
success: function(data){
if (data.error) {
return alert(data.error)
}
auth.set_user(data.user)
window.location.href = "/profile"
}
})
|
