Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html> 
  <head> 
    <meta name="description" content="Update User"> 
    <title>Circuit JS SDK</title>
    <script src="https://unpkg.com/circuit-sdk@beta"></script>
    <script src="https://rawgit.com/circuit/js-sdk/master/jsbin-template.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/circuit/js-sdk/master/jsbin-template.css">
    <style> 
      section {
        padding-bottom: 20px; 
      }
    </style>
  </head>
  <body>
    <div id="template"></div>
    <section id="main" style="display:none">
      <div><input type="text" id="firstname" placeholder="New firstname"/></div>
      <div><input type="text" id="lastname" placeholder="New lastname"/></div>
      <div><input type="email" id="email" placeholder="New emails"/></div>
      <input id="avatar" type="file" placeholder="select new avatar">
      <br>
      <div><button id="update" onclick="update()">Update user</button>
    </section>
</body>
</html>
​
 
/*jshint esnext: true */
 
// Create client instance
const client = new Circuit.Client({
  domain: jsBinTpl.domain,       // read domain from url
  client_id: jsBinTpl.client_id, // get client_id for domain
  scope: 'ALL' 
});   
 
// Template for Circuit JSBin examples. Builds generic part of page incl. login button.
const {logonButton, logoutButton, print} = jsBinTpl.init(client, template, {
  title: 'Circuit JS SDK: Update own user profile',
  description: 'Update firstname, lastname, avatar and email of local user.',
  apiMethods: ['updateUser'],
  prerequisites: ['None']
});
 
​
logonButton.addEventListener('click', () => {
  client.logon()
  .then(user => {
    print(`Successfully authenticated as ${user.displayName}`);
    print('user:', user);
  });
}); 
​
logoutButton.addEventListener('click', () => {
  client.logout()
  .catch(print);
});
    
function update() {
  var avatar = document.getElementById('avatar').files[0];
  
  var req = {
    userId: client.loggedOnUser.userId,
    firstName: firstname.value || undefined,
    lastName: lastname.value || undefined,
    avatarFile: avatar
  }
  if (email.value) {
    req.emailAddresses = [{address:email.value, type: Circuit.Constants.EmailAddressType.WORK}];
  }
​
  client.updateUser(req);
} 
​
client.addEventListener('userUpdated', evt => {
  print('userUpdated', evt);
}); 
  
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rogerupro
0viewers