All files / src/methods/profile index.js

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
2x
 
 
 
2x
2x
2x
2x
2x
2x
2x
 
2x
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
2x
 
 
2x
2x
2x
2x
1x
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
import { manageError, cleanError } from '../../errorManager';
import { isVoid } from '../../validation';
import Method from '../Method';
 
const formModel = {
    editNicknameButton: 'edit_nickname',
    setUsernameButton: 'set_username',
    cancelEditButton: 'cancel_edit',
    editNicknameForm: 'edit_nickname_status_form',
    nicknameStatusForm: 'nickname_status_form',
    nicknameStatus: 'nickname_status',
    nicknameInput: 'name'
};
 
/**
 * @memberOf Useris
 * @function profile
 *
 * @description Validate and expose function for profile editing
 *
 * It must be used with the **newtonsmartstatusprofile** template.
 * CallbackSuccess must be called inside onSaveNickname to update the form,
 * passing the newNickname value provided by useris or your call.
 *
 * @param {Object} options Options object
 * @param {Object} [options.element=false] The div element where the html's tmpl will be injected
 * @param {String} [options.acccess_token=''] **Optionals** if true,
 * the tmpl calls will be called with the params access_token filled
 * @param {Boolean} [options.doNotLoad=false] **Optionals** if true,
 * this params will tell useris to not load the template (It doesn't make the apicalls)
 * @param {Object} callbackObject Manage the success and error callback
 * @param {function} [callbackObject.onSaveNickname='no-default']
 * Success callback (code managed by the app)
 * @param {function} [callbackObject.onError='no-default'] Error callback (code managed by the app)
 * @param {function} [callbackObject.onTemplateLoaded='no-default']
 * Callback executed when the template has been loaded.
 *
 * @example
 *  Useris.profile({
 *      element: document.getElementById('elementId'),
 *      access_token: 'abcdefgh1234567890'
 *  }, {
 *      onSaveNickname: function(userCredentials){
 *          console.log(userCredentials);
 *          updateUserProps(userCredentials);
 *      },
 *      onError: function(error){
 *          console.log('Error:', error);
 *          manageError(error);
 *      },
 *      onTemplateLoaded: function(tmplInfo){
 *          console.log('Template loaded', tmplInfo);
 *      }
 *  });
 *
 *  @returns {object}
 *  <pre>
 *      {
 *          newNickname: string,
 *          oldNickname: string,
 *          callbackSuccess: function(newNickname),
 *      }
 *  </pre>
 */
 
export default class Profile extends Method {
    init = (options) => {
        this.smartsectionObj = {
            subsection: 'newtonsmartstatusprofile',
            loadForm: options.element ? options.element : false,
            access_token: options.access_token ? options.access_token : '',
            doNotLoad: options.doNotLoad ? options.doNotLoad : false
        };
        this.initUserView();
    };
 
    attachEvents = () => {
        const editNicknameButton = this.UserViewInstance.getElement(formModel.editNicknameButton);
        const cancelEditButton = this.UserViewInstance.getElement(formModel.cancelEditButton);
        const setUsernameButton = this.UserViewInstance.getElement(formModel.setUsernameButton);
        const nicknameStatusForm = this.UserViewInstance.getElement(formModel.nicknameStatusForm);
        const editNicknameForm = this.UserViewInstance.getElement(formModel.editNicknameForm);
        const nicknameInput = this.UserViewInstance.getElement(formModel.nicknameInput);
        const nicknameStatus = this.UserViewInstance.getElement(formModel.nicknameStatus);
 
        let oldNickname = '';
 
        Eif (editNicknameButton) {
            this.UserViewInstance.attachEvent(editNicknameButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    if (editNicknameForm && nicknameStatusForm) {
                        oldNickname = nicknameInput.value;
                        editNicknameForm.style.display = 'block';
                        nicknameStatusForm.style.display = 'none';
                    }
                }
            });
        }
 
        Eif (cancelEditButton) {
            this.UserViewInstance.attachEvent(cancelEditButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    if (editNicknameForm && nicknameStatusForm) {
                        nicknameInput.value = oldNickname;
                        editNicknameForm.style.display = 'none';
                        nicknameStatusForm.style.display = 'block';
                    }
                }
            });
        }
 
        Eif (setUsernameButton) {
            this.UserViewInstance.attachEvent(setUsernameButton, {
                eventName: 'click',
                event: (e) => {
                    e.preventDefault();
                    cleanError();
                    const newNicknameTemp = nicknameInput.value;
                    if (isVoid(nicknameInput.value)) {
                        manageError('useris-username-error');
                        return;
                    }
 
                    this.callback('onSaveNickname', {
                        oldNickname,
                        newNickname: newNicknameTemp,
                        callbackSuccess: (newNickname) => {
                            nicknameStatus.innerText = newNickname;
                            editNicknameForm.style.display = 'none';
                            nicknameStatusForm.style.display = 'block';
                        }
                    });
                }
            });
        }
    }
}