Start working on some defined styles, begin implementing password update in account

resources/scripts/components/account/AccountOverview.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export default class AccountOverview extends React.PureComponent {
-    render () {
-        return null;
-    }
-}

resources/scripts/components/account/AccountOverviewContainer.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ContentBox from '@/components/elements/ContentBox';
+import UpdatePasswordForm from '@/components/account/forms/UpdatePasswordForm';
+
+export default () => {
+    return (
+        <div className={'flex my-10'}>
+            <ContentBox className={'flex-1 mr-4'} title={'Update Password'}>
+                <UpdatePasswordForm/>
+            </ContentBox>
+            <div className={'flex-1 ml-4'}>
+                <ContentBox title={'Update Email Address'}>
+                </ContentBox>
+                <ContentBox title={'Update Identity'} className={'mt-8'}>
+                </ContentBox>
+            </div>
+        </div>
+    );
+};

resources/scripts/components/account/DesignElements.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-export default class DesignElements extends React.PureComponent {
-    render () {
-        return (
-            <div className={'my-10'}>
-                <div className={'flex'}>
-                    <div className={'flex-1 mr-4'}>
-                        <h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2>
-                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
-                            <p className={'text-neutral-200 text-sm'}>
-                                Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
-                            </p>
-                            <p><Link to={'/'}>Back</Link></p>
-                        </div>
-                    </div>
-                    <div className={'ml-4 flex-1'}>
-                        <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
-                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
-                            <label className={'uppercase text-neutral-200'}>Email</label>
-                            <input
-                                type={'text'}
-                                className={'w-full p-3 bg-neutral-600 border border-neutral-500 hover:border-neutral-400 text-sm rounded text-neutral-200 focus:shadow'}
-                                style={{
-                                    transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
-                                }}
-                            />
-                            <p className={'text-xs text-neutral-400 mt-2'}>
-                                This is some descriptive helper text to explain how things work.
-                            </p>
-                            <div className={'mt-6'}/>
-                            <label className={'uppercase text-neutral-200'}>Textarea</label>
-                            <textarea
-                                className={'w-full p-3 h-10 bg-neutral-600 border border-neutral-500 hover:border-neutral-400 text-sm rounded text-neutral-200 focus:shadow'}
-                                style={{
-                                    transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
-                                }}
-                            ></textarea>
-                            <div className={'mt-6'}/>
-                            <button className={'tracking-wide bg-primary-500 spacing-wide text-xs text-primary-50 rounded p-3 uppercase border border-primary-600'}>
-                                Button
-                            </button>
-                            <button className={'ml-2 tracking-wide bg-neutral-500 spacing-wide text-xs text-neutral-50 rounded p-3 uppercase border border-neutral-600'}>
-                                Secondary
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

resources/scripts/components/account/DesignElementsContainer.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import ContentBox from '@/components/elements/ContentBox';
+
+export default class DesignElementsContainer extends React.PureComponent {
+    render () {
+        return (
+            <div className={'my-10'}>
+                <div className={'flex'}>
+                    <ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}>
+                        <p className={'text-neutral-200 text-sm'}>
+                            Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
+                        </p>
+                        <p><Link to={'/'}>Back</Link></p>
+                    </ContentBox>
+                    <div className={'ml-4 flex-1'}>
+                        <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
+                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
+                            <label className={'uppercase text-neutral-200'}>Email</label>
+                            <input type={'text'} className={'input-dark'}/>
+                            <p className={'input-help'}>
+                                This is some descriptive helper text to explain how things work.
+                            </p>
+                            <div className={'mt-6'}/>
+                            <label className={'uppercase text-neutral-200'}>Username</label>
+                            <input type={'text'} className={'input-dark error'}/>
+                            <p className={'input-help'}>
+                                This field has an error.
+                            </p>
+                            <div className={'mt-6'}/>
+                            <label className={'uppercase text-neutral-200'}>Disabled Field</label>
+                            <input type={'text'} className={'input-dark'} disabled={true}/>
+                            <div className={'mt-6'}/>
+                            <label className={'uppercase text-neutral-200'}>Textarea</label>
+                            <textarea className={'input-dark h-32'}></textarea>
+                            <div className={'mt-6'}/>
+                            <button className={'btn btn-primary btn-sm'}>
+                                Blue
+                            </button>
+                            <button className={'btn btn-grey btn-sm ml-2'}>
+                                Grey
+                            </button>
+                            <button className={'btn btn-green btn-sm ml-2'}>
+                                Green
+                            </button>
+                            <button className={'btn btn-red btn-sm ml-2'}>
+                                Red
+                            </button>
+                            <div className={'mt-6'}/>
+                            <button className={'btn btn-secondary btn-sm'}>
+                                Secondary
+                            </button>
+                            <button className={'btn btn-secondary btn-red btn-sm ml-2'}>
+                                Secondary Danger
+                            </button>
+                            <div className={'mt-6'}/>
+                            <button className={'btn btn-primary btn-lg'}>
+                                Large
+                            </button>
+                            <button className={'btn btn-primary btn-xs ml-2'}>
+                                Tiny
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

resources/scripts/components/account/forms/UpdatePasswordForm.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { State, useStoreState } from 'easy-peasy';
+import { ApplicationState } from '@/state/types';
+
+export default () => {
+    const [ isLoading, setIsLoading ] = useState(false);
+    const user = useStoreState((state: State<ApplicationState>) => state.user.data);
+
+    if (!user) {
+        return null;
+    }
+
+    return (
+        <form className={'m-0'}>
+            <label htmlFor={'current_password'} className={'input-dark-label'}>Current Password</label>
+            <input
+                id={'current_password'}
+                type={'password'}
+                className={'input-dark'}
+            />
+            <div className={'mt-6'}>
+                <label htmlFor={'new_password'} className={'input-dark-label'}>New Password</label>
+                <input
+                    id={'new_password'}
+                    type={'password'}
+                    className={'input-dark'}
+                />
+                <p className={'input-help'}>
+                    Your new password must be at least 8 characters in length.
+                </p>
+            </div>
+            <div className={'mt-6'}>
+                <label htmlFor={'new_password_confirm'} className={'input-dark-label'}>Confirm New Password</label>
+                <input
+                    id={'new_password_confirm'}
+                    type={'password'}
+                    className={'input-dark'}
+                />
+            </div>
+            <div className={'mt-6'}>
+                <button className={'btn btn-primary btn-sm'} disabled={true}>
+                    Update Password
+                </button>
+            </div>
+        </form>
+    );
+};

resources/scripts/components/elements/ContentBox.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    title?: string;
+    borderColor?: string;
+}>;
+
+export default ({ title, borderColor, children, ...props }: Props) => (
+    <div {...props}>
+        {title && <h2 className={'text-neutral-300 mb-2 px-4'}>{title}</h2>}
+        <div className={classNames('bg-neutral-700 p-4 rounded shadow-lg', borderColor, {
+            'border-t-4': !!borderColor,
+        })}>
+            {children}
+        </div>
+    </div>
+);

resources/scripts/routers/AccountRouter.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Route, RouteComponentProps } from 'react-router-dom';
-import DesignElements from '@/components/account/DesignElements';
+import DesignElementsContainer from '@/components/account/DesignElementsContainer';
+import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
 
 export default ({ match }: RouteComponentProps) => (
     <div>
-        <Route path={`${match.path}/`} component={DesignElements} exact/>
-        <Route path={`${match.path}/design`} component={DesignElements} exact/>
+        <Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
+        <Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
     </div>
 );