Add change password option for admins

api/src/resolvers/users.js

@@ -104,6 +104,26 @@ const Mutation = {
 
     return neo4jgraphql(root, args, ctx, info)
   },
+  async changeUserPassword(root, args, ctx, info) {
+    const { newPassword, id } = args
+
+    const session = ctx.driver.session()
+
+    await session.run(
+      `MATCH (u:User { id: {id} }) SET u.password = {newPassword}`,
+      {
+        id,
+        newPassword,
+      }
+    )
+
+    session.close
+
+    return {
+      success: true,
+      errorMessage: null,
+    }
+  },
 }
 
 export const registerUser = Mutation.registerUser

api/src/schema.graphql

@@ -112,6 +112,9 @@ type Mutation {
   createUser(id: ID, username: String, rootPath: String, admin: Boolean): User
     @hasRole(roles: [admin])
   deleteUser(id: ID!): User @hasRole(roles: [admin])
+
+  changeUserPassword(id: ID!, newPassword: String!): Result
+    @hasRole(roles: [admin])
 }
 
 type Query {

docker-compose.example.yml

@@ -20,6 +20,9 @@ services:
     - neo4j
     environment:
       - NEO4J_URI=bolt://neo4j:7687
+    volumes:
+      # Change This: Link photo paths from the host machine
+      - ./photos_path:/photos
 
   ui:
     build:

ui/src/Pages/SettingsPage/UserRow.js

@@ -1,6 +1,14 @@
 import React, { useState } from 'react'
 import { Mutation } from 'react-apollo'
-import { Table, Icon, Button, Input, Checkbox, Modal } from 'semantic-ui-react'
+import {
+  Table,
+  Icon,
+  Button,
+  Input,
+  Checkbox,
+  Modal,
+  Form,
+} from 'semantic-ui-react'
 import gql from 'graphql-tag'
 
 const updateUserMutation = gql`
@@ -33,6 +41,65 @@ const deleteUserMutation = gql`
   }
 `
 
+const changeUserPasswordMutation = gql`
+  mutation changeUserPassword($userId: ID!, $password: String!) {
+    changeUserPassword(id: $userId, newPassword: $password) {
+      success
+      errorMessage
+    }
+  }
+`
+
+const ChangePasswordModal = ({ onClose, user, ...props }) => {
+  const [passwordInput, setPasswordInput] = useState('')
+
+  return (
+    <Mutation
+      mutation={changeUserPasswordMutation}
+      onCompleted={() => {
+        onClose()
+      }}
+    >
+      {(changePassword, { data }) => (
+        <Modal {...props}>
+          <Modal.Header>Change password</Modal.Header>
+          <Modal.Content>
+            <p>
+              Change password for <b>{user.username}</b>
+            </p>
+            <Form>
+              <Form.Field>
+                <label>New password</label>
+                <Input
+                  placeholder="password"
+                  onChange={e => setPasswordInput(e.target.value)}
+                  type="password"
+                />
+              </Form.Field>
+            </Form>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={() => onClose()}>Cancel</Button>
+            <Button
+              positive
+              onClick={() => {
+                changePassword({
+                  variables: {
+                    userId: user.id,
+                    password: passwordInput,
+                  },
+                })
+              }}
+            >
+              Change password
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      )}
+    </Mutation>
+  )
+}
+
 const UserRow = ({ user, refetchUsers }) => {
   const [state, setState] = useState({
     ...user,
@@ -40,6 +107,7 @@ const UserRow = ({ user, refetchUsers }) => {
   })
 
   const [showComfirmDelete, setConfirmDelete] = useState(false)
+  const [showChangePassword, setChangePassword] = useState(false)
 
   function updateInput(event, key) {
     setState({
@@ -149,6 +217,15 @@ const UserRow = ({ user, refetchUsers }) => {
                 <Icon name="edit" />
                 Edit
               </Button>
+              <Button onClick={() => setChangePassword(true)}>
+                <Icon name="key" />
+                Change password
+              </Button>
+              <ChangePasswordModal
+                user={user}
+                open={showChangePassword}
+                onClose={() => setChangePassword(false)}
+              />
               <Button
                 negative
                 onClick={() => {

ui/src/Pages/SettingsPage/UsersTable.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Table, Loader, Button } from 'semantic-ui-react'
+import { Table, Loader, Button, Icon } from 'semantic-ui-react'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 import UserRow from './UserRow'
@@ -61,9 +61,11 @@ const UsersTable = () => {
                   <Table.HeaderCell colSpan="4">
                     <Button
                       positive
+                      disabled={showAddUser}
                       floated="right"
                       onClick={e => setShowAddUser(true)}
                     >
+                      <Icon name="add" />
                       New user
                     </Button>
                   </Table.HeaderCell>