Adding withChangePassword to mutations and plugins API, styles

client/coral-framework/graphql/fragments.js

@@ -25,6 +25,7 @@ export default {
     'UnsuspendUserResponse',
     'UpdateAssetSettingsResponse',
     'UpdateAssetStatusResponse',
-    'UpdateSettingsResponse'
+    'UpdateSettingsResponse',
+    'ChangePasswordResponse'
   ),
 };

client/coral-framework/graphql/mutations.js

@@ -623,6 +623,27 @@ export const withUpdateSettings = withMutation(
   }
 );
 
+export const withChangePassword = withMutation(
+  gql`
+    mutation ChangePassword($input: ChangePasswordInput!) {
+      changePassword(input: $input) {
+        ...ChangePasswordResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      changePassword: input => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      },
+    }),
+  }
+);
+
 export const withUpdateAssetSettings = withMutation(
   gql`
     mutation UpdateAssetSettings($id: ID!, $input: AssetSettingsInput!) {

plugin-api/beta/client/hocs/index.js

@@ -25,5 +25,6 @@ export {
   withUnbanUser,
   withStopIgnoringUser,
   withSetCommentStatus,
+  withChangePassword,
 } from 'coral-framework/graphql/mutations';
 export { compose } from 'recompose';

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css

@@ -23,6 +23,10 @@
   align-items: center;
   padding-left: 2px;
   padding-top: 16px;
+
+  .warningIcon, .checkIcon {
+    font-size: 17px;
+  }
 }
 
 .actions {
@@ -36,6 +40,7 @@
 
 .title {
   color: #202020;
+  margin: 0 0 20px;
 }
   
 .detailList {
@@ -81,6 +86,7 @@
 .detailLink {
   color: #00538A;  
   text-decoration: none;
+  font-size: 0.9em;
   &:hover {
     cursor: pointer;
   }
@@ -88,9 +94,6 @@
 
 .checkIcon {
   color: #00CD73;
-  & > i {
-    font-size: 16px;
-  }
 }
 
 .warningIcon {
@@ -104,16 +107,21 @@
 }
 
 .button {
-  border: solid 1px #787D80;
+  border: 1px solid #787d80;
   background-color: transparent;
   height: 30px;
-  font-size: 0.9em;
+  font-size: 1em;
+  line-height: normal;
 }
 
 .saveButton {
   background-color: #3498DB;
   border-color: #3498DB;
   color: white;
+
+  > i {
+    font-size: 17px;
+  }
     
   &:hover {
     background-color: #399ee2;

plugins/talk-plugin-auth/client/profile-settings/containers/ChangePassword.js

@@ -0,0 +1,5 @@
+import { compose } from 'recompose';
+import { withChangePassword } from 'plugin-api/beta/client/hocs';
+import ChangePassword from '../components/ChangePassword';
+
+export default compose(withChangePassword)(ChangePassword);