Added Account Settings page to change password

public/theme/src/components/Dashboard/Layout/TopNavbar.vue

@@ -16,6 +16,9 @@
             <div class="collapse navbar-collapse justify-content-end">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
+                        <a href="#/ucp/settings" class="nav-link">
+                            Account Settings
+                        </a>
                         <a href="#" v-on:click="logout" class="nav-link">
                             Log out
                         </a>

public/theme/src/components/ReCast/AccountSettings.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="content">
+        <div class="container-fluid">
+            <card>
+                <h4>Change Password</h4>
+
+                <form @submit="changePassword">
+                    <fg-input label="Current Password" v-model="resetPassword.currentPassword" type="password" required="required"></fg-input>
+                    <fg-input label="New Password" v-model="resetPassword.newPassword" pattern=".{6,}" type="password" required="required"></fg-input>
+                    <small>Passwords must have at minimum 6 characters</small>
+                    <fg-input label="New Password Repeat" v-model="resetPassword.newPassword2" pattern=".{6,}" type="password" required="required"></fg-input>
+
+                    <button class="btn btn-primary">Change Password</button>
+                </form>
+            </card>
+        </div>
+    </div>
+</template>
+<script>
+    import Card from "../UIComponents/Cards/Card";
+
+    export default {
+        components: {
+            Card
+        },
+        data() {
+            return {
+                resetPassword: {
+                    currentPassword: '',
+                    newPassword: '',
+                    newPassword2: '',
+                }
+            }
+        },
+        methods: {
+            changePassword: function (e) {
+                e.preventDefault();
+
+                if (this.resetPassword.newPassword !== this.resetPassword.newPassword2) {
+                    const notification = {
+                        template: `<span>New Passwords are not equal</span>`
+                    };
+
+                    this.$notify(
+                        {
+                            component: notification,
+                            icon: 'fa fa-exclamation-triangle',
+                            horizontalAlign: 'right',
+                            verticalAlign: 'top',
+                            type: 'danger'
+                        });
+                } else {
+                    this.axios.post('/auth/changePassword', {currentPassword: this.resetPassword.currentPassword, newPassword: this.resetPassword.newPassword}).then(response => {
+                        this.$auth.logout({
+                            redirect: {name: 'login'}
+                        })
+                    }).catch(error => {
+                        const notification = {
+                            template: `<span>${error.response.data.message}</span>`
+                        };
+
+                        this.$notify(
+                            {
+                                component: notification,
+                                icon: 'fa fa-exclamation-triangle',
+                                horizontalAlign: 'right',
+                                verticalAlign: 'top',
+                                type: 'danger'
+                            });
+                    })
+                }
+            }
+        }
+    }
+</script>
+<style>
+    h4 {
+        margin-top: 0;
+    }
+</style>

public/theme/src/components/UIComponents/Inputs/Checkbox.vue

@@ -54,4 +54,10 @@
   .form-check {
     padding: 0;
   }
+  .form-check .form-check-label {
+    padding-left: 25px;
+  }
+  .form-check .form-check-sign::before, .form-check .form-check-sign::after {
+    margin-top: -17px;
+  }
 </style>

public/theme/src/routes/routes.js

@@ -14,6 +14,8 @@ import EditStream from 'src/components/ReCast/Streams/EditStream.vue'
 import SetupStream from 'src/components/ReCast/Streams/SetupStream.vue'
 import EditEndpoint from 'src/components/ReCast/Endpoints/EditEndpoint.vue'
 
+import AccountSettings from 'src/components/ReCast/AccountSettings.vue'
+
 const routes = [
     {
         path: '/',
@@ -36,6 +38,11 @@ const routes = [
                 component: Overview,
                 meta: {auth: true},
             },
+            {
+                path: 'settings',
+                component: AccountSettings,
+                meta: {auth: true},
+            },
             {
                 path: 'streams',
                 name: 'My Streams',

src/Controller/User.php

@@ -5,15 +5,18 @@ namespace App\Controller;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;
 
 /**
+ * @Route("/api/auth")
  * Class User
  * @author Soner Sayakci <shyim@posteo.de>
  */
 class User extends Controller
 {
     /**
-     * @Route(path="/api/auth/user")
+     * @Route(path="/user")
      * @author Soner Sayakci <shyim@posteo.de>
      */
     public function me()
@@ -22,11 +25,41 @@ class User extends Controller
     }
 
     /**
-     * @Route(path="/api/auth/refresh")
+     * @Route(path="/refresh")
      * @author Soner Sayakci <shyim@posteo.de>
      */
     public function refresh()
     {
         return new JsonResponse(['success' => true]);
     }
+
+    /**
+     * @Route(path="/changePassword")
+     * @author Soner Sayakci <shyim@posteo.de>
+     * @param Request $request
+     * @param UserPasswordEncoderInterface $userPasswordEncoder
+     * @return JsonResponse
+     * @throws \Doctrine\ORM\ORMException
+     */
+    public function changePassword(Request $request, UserPasswordEncoderInterface $userPasswordEncoder) : JsonResponse
+    {
+        $currentPassword = $request->request->get('currentPassword');
+        $newPassword = $request->request->get('newPassword');
+        /** @var \App\Entity\User $user */
+        $user = $this->getUser();
+
+        if (!$userPasswordEncoder->isPasswordValid($user, $currentPassword)) {
+            return new JsonResponse(['message' => 'Current password does not match'], 500);
+        }
+
+        $encodedPassword = $userPasswordEncoder->encodePassword($user, $newPassword);
+
+        $user->setPassword($encodedPassword);
+
+        $manager = $this->get('doctrine.orm.default_entity_manager');
+        $manager->persist($user);
+        $manager->flush();
+
+        return new JsonResponse();
+    }
 }