Merge branch 'develop' into patch-1

Author: DaneEveritt

resources/scripts/api/server/createServerDatabase.ts

@@ -0,0 +1,15 @@
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
+import http from '@/api/http';
+
+export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/databases`, {
+            database: data.databaseName,
+            remote: data.connectionsFrom,
+        }, {
+            params: { include: 'password' },
+        })
+            .then(response => resolve(rawDataToServerDatabase(response.data.attributes)))
+            .catch(reject);
+    });
+};

resources/scripts/api/server/deleteServerDatabase.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (uuid: string, database: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.delete(`/api/client/servers/${uuid}/databases/${database}`)
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/api/server/getServerDatabases.ts

@@ -0,0 +1,31 @@
+import http from '@/api/http';
+
+export interface ServerDatabase {
+    id: string;
+    name: string;
+    username: string;
+    connectionString: string;
+    allowConnectionsFrom: string;
+    password?: string;
+}
+
+export const rawDataToServerDatabase = (data: any): ServerDatabase => ({
+    id: data.id,
+    name: data.name,
+    username: data.username,
+    connectionString: `${data.host.address}:${data.host.port}`,
+    allowConnectionsFrom: data.connections_from,
+    password: data.relationships && data.relationships.password ? data.relationships.password.attributes.password : undefined,
+});
+
+export default (uuid: string, includePassword: boolean = true): Promise<ServerDatabase[]> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/databases`, {
+            params: includePassword ? { include: 'password' } : undefined,
+        })
+            .then(response => resolve(
+                (response.data.data || []).map((item: any) => rawDataToServerDatabase(item.attributes))
+            ))
+            .catch(reject);
+    });
+};

resources/scripts/components/FlashMessageRender.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import MessageBox from '@/components/MessageBox';
 import { State, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 type Props = Readonly<{
     byKey?: string;
     spacerClass?: string;
-    withBottomSpace?: boolean;
+    className?: string;
 }>;
 
-export default ({ withBottomSpace, spacerClass, byKey }: Props) => {
-    const flashes = useStoreState((state: State<ApplicationState>) => state.flashes.items);
+export default ({ className, spacerClass, byKey }: Props) => {
+    const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
 
     let filtered = flashes;
     if (byKey) {
@@ -21,9 +21,8 @@ export default ({ withBottomSpace, spacerClass, byKey }: Props) => {
         return null;
     }
 
-    // noinspection PointlessBooleanExpressionJS
     return (
-        <div className={withBottomSpace === false ? undefined : 'mb-2'}>
+        <div className={className}>
             {
                 filtered.map((flash, index) => (
                     <React.Fragment key={flash.id || flash.type + flash.message}>

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -4,14 +4,14 @@ import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
 
 export default () => {
     const [ isSubmitting, setSubmitting ] = React.useState(false);
     const [ email, setEmail ] = React.useState('');
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value);
 

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -4,15 +4,15 @@ import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { StaticContext } from 'react-router';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
 
 export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
     const [ code, setCode ] = useState('');
     const [ isLoading, setIsLoading ] = useState(false);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     if (!state || !state.token) {
         history.replace('/auth/login');

resources/scripts/components/auth/LoginContainer.tsx

@@ -5,14 +5,14 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 export default ({ history }: RouteComponentProps) => {
     const [ username, setUsername ] = useState('');
     const [ password, setPassword ] = useState('');
     const [ isLoading, setLoading ] = useState(false);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const submit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -7,7 +7,7 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
 
@@ -17,7 +17,7 @@ export default (props: Props) => {
     const [ password, setPassword ] = useState('');
     const [ passwordConfirm, setPasswordConfirm ] = useState('');
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const parsed = parse(props.location.search);
     if (email.length === 0 && parsed.email) {

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -9,8 +9,8 @@ import { Link } from 'react-router-dom';
 
 export default () => (
     <div className={'my-10'}>
-        <Link to={'/server/e9d6c836'} className={'flex no-underline text-neutral-200 cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
-            <div className={'rounded-full bg-neutral-500 p-3'}>
+        <Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
+            <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
             <div className={'w-1/2 ml-4'}>
@@ -49,8 +49,8 @@ export default () => (
                 </div>
             </div>
         </Link>
-        <div className={'flex mt-px cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
-            <div className={'rounded-full bg-neutral-500 p-3'}>
+        <div className={'grey-row-box cursor-pointer mt-2'}>
+            <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
             <div className={'w-1/2 ml-4'}>

resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { Form, Formik, FormikActions } from 'formik';
 import * as Yup from 'yup';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
+import { ApplicationStore } from '@/state';
 
 interface Values {
     email: string;
@@ -18,10 +18,10 @@ const schema = Yup.object().shape({
 });
 
 export default () => {
-    const user = useStoreState((state: State<ApplicationState>) => state.user.data);
-    const updateEmail = useStoreActions((state: Actions<ApplicationState>) => state.user.updateUserEmail);
+    const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
+    const updateEmail = useStoreActions((state: Actions<ApplicationStore>) => state.user.updateUserEmail);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const submit = (values: Values, { resetForm, setSubmitting }: FormikActions<Values>) => {
         clearFlashes('account:email');