From e2376660877ec9fb10d307a5f2ecc85d8de6a1c8 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Fri, 28 Jun 2019 14:21:40 +0800
Subject: [PATCH] [user settings] improved 'edit avatar'

---
 .../user-settings/user-avatar-form.js         | 23 +++++++++++++++++--
 seahub/api2/endpoints/user_avatar.py          |  3 ++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/user-settings/user-avatar-form.js b/frontend/src/components/user-settings/user-avatar-form.js
index ec766bbd34..b3212e1695 100644
--- a/frontend/src/components/user-settings/user-avatar-form.js
+++ b/frontend/src/components/user-settings/user-avatar-form.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { gettext, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
 
 const { avatarURL, csrfToken } = window.app.pageOptions;
@@ -50,7 +51,25 @@ class UserAvatarForm extends React.Component {
       return false;
     }
 
-    this.form.current.submit();
+    //this.form.current.submit();
+    seafileAPI.updateUserAvatar(file, 160).then((res) => {
+      this.setState({
+        avatarSrc: res.data.avatar_url
+      });
+      toaster.success(gettext('Success'));
+    }).catch((error) => {
+      let errorMsg = '';
+      if (error.response) {
+        if (error.response.data && error.response.data['error_msg']) {
+          errorMsg = error.response.data['error_msg'];
+        } else {
+          errorMsg = gettext('Error');
+        }
+      } else {
+        errorMsg = gettext('Please check the network.');
+      }
+      toaster.danger(errorMsg);
+    });
   }
 
   openFileInput = () => {
@@ -75,7 +94,7 @@ class UserAvatarForm extends React.Component {
         <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
         <label className="col-sm-1 col-form-label">{gettext('Avatar:')}</label>
         <div className="col-auto position-relative" onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-          <img src={avatarURL} width="80" height="80" alt="" className="user-avatar" />
+          <img src={this.state.avatarSrc} width="80" height="80" alt="" className="user-avatar" />
           <input type="file" name="avatar" className="d-none" onChange={this.fileInputChange} ref={this.fileInput} />
           <span className={`avatar-edit fas fa-edit ${!this.state.isEditShown && 'd-none'}`} onClick={this.openFileInput}></span>
         </div>
diff --git a/seahub/api2/endpoints/user_avatar.py b/seahub/api2/endpoints/user_avatar.py
index f0a3f896e3..053a0bb3e2 100644
--- a/seahub/api2/endpoints/user_avatar.py
+++ b/seahub/api2/endpoints/user_avatar.py
@@ -2,6 +2,7 @@
 import os
 import logging
 
+from rest_framework.authentication import SessionAuthentication
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
 from rest_framework.views import APIView
@@ -23,7 +24,7 @@ from seahub.avatar.templatetags.avatar_tags import api_avatar_url
 logger = logging.getLogger(__name__)
 
 class UserAvatarView(APIView):
-    authentication_classes = (TokenAuthentication,)
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
     permission_classes = (IsAuthenticated,)
     throttle_classes = (UserRateThrottle,)