Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Social Media</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  <body>
  <div id="app">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">SocMedia</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="messageboard.html">Message Board<span class="sr-only">(current)</span></a></li>
          <li><a href="messages.html">Messages</a></li>
          <li><a href="users.html">People</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user.name }}<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="profile.html">My Profile</a></li>
              <li><a href="myaccount.html">My Account</a></li>
              <li class="active"><a href="change_password.html">Change Password</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="index.html">Logout</a></li>
          </ul>
      </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


<div class="container">


    <section class="login-info">
      <div class="container">
        <div class="row main">
           <div class="content-header">
              <h3 class="text-center">Change Password</h3>
          </div>
          <div class="main-content">

              <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                <input v-model="password" id="oldpassword" type="password" class="form-control" name="oldpassword" placeholder="Enter your Old Password">
            </div>

            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                <input v-model="new_password" id="password" type="password" class="form-control" name="password" placeholder="Enter your New Password">
            </div>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                <input v-model="confirmPassword" id="password2" type="password" class="form-control" name="password2" placeholder="Repeat your New Password">
            </div>
            <div class="form-group ">
                <button @click="changePassword" type="button"  class="btn btn-primary btn-lg btn-block restricted-button">Sign in</button>
                <b><span v-if="success_message != ''">{{success_message}}</span></b>
            </div>
        </div>
    </div>
</div>
</section>


</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
        user: '',
      password: '',
      new_password: '',
      confirmPassword: '',
      errors: { },
      success_message: ''
  },

    created(){
        this.user = JSON.parse(localStorage.getItem('user'));
    },

  methods: {
    validateBeforeSubmit(){
        var flag = true;

        if(this.password.length < 3){
          this.errors.password = "A password must have at least 3 characters";
          flag = false;
        }

        if(this.new_password !== this.confirmPassword){
          this.errors.confirmPassword = "The fields password and confirm password don't match";
          flag = false;
        }

      return flag;
    },
    changePassword(){
        let headers = { headers: { 'Authorization': 'Bearer ' + this.user.token} };
        let data = {'password': this.password, 'new_password': this.new_password};

        axios.put('http://localhost:3000/users/' + this.user._id, data, headers)
          .then(response => {
                this.success_message = response.data.message;
                this.password = '';
                this.new_password = '';
                this.confirmPassword = '';
          })
          .catch(error => {
            console.log(error);
          });
    }
}
});
</script>
</body>
</html>