From 2f8af347c3de85f6cc37b4cacf8ca563218cbc05 Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sun, 14 Apr 2019 13:24:00 +0800
Subject: [PATCH 1/6] wip

---
 resources/js/routers/backoffice.js            |  13 ++
 resources/js/views/__backoffice/Home.js       |   1 -
 .../js/views/__backoffice/layouts/Master.js   | 173 +++++++++---------
 .../js/views/__backoffice/partials/Header.js  | 138 ++++++++------
 .../js/views/__backoffice/settings/Account.js |  15 ++
 .../js/views/__backoffice/settings/Profile.js |  15 ++
 .../js/views/__backoffice/settings/index.js   |   4 +
 resources/lang/en/navigation.php              |   1 -
 resources/lang/fil/navigation.php             |   1 -
 9 files changed, 213 insertions(+), 148 deletions(-)
 create mode 100644 resources/js/views/__backoffice/settings/Account.js
 create mode 100644 resources/js/views/__backoffice/settings/Profile.js
 create mode 100644 resources/js/views/__backoffice/settings/index.js

diff --git a/resources/js/routers/backoffice.js b/resources/js/routers/backoffice.js
index 9f3290b..74e4ef6 100644
--- a/resources/js/routers/backoffice.js
+++ b/resources/js/routers/backoffice.js
@@ -1,4 +1,5 @@
 import { Home } from '../views/__backoffice';
+import * as Settings from '../views/__backoffice/settings';
 import * as Users from '../views/__backoffice/users';
 
 export default [
@@ -8,6 +9,18 @@ export default [
         component: Home,
     },
 
+    {
+        name: 'settings.profile',
+        path: '/settings/profile',
+        component: Settings.Profile,
+    },
+
+    {
+        name: 'settings.account',
+        path: '/settings/account',
+        component: Settings.Account,
+    },
+
     {
         name: 'users.index',
         path: '/users',
diff --git a/resources/js/views/__backoffice/Home.js b/resources/js/views/__backoffice/Home.js
index 2f9c6ed..85c37a3 100755
--- a/resources/js/views/__backoffice/Home.js
+++ b/resources/js/views/__backoffice/Home.js
@@ -28,7 +28,6 @@ class Home extends Component {
                 pageTitle={Lang.get('navigation.dashboard')}
                 primaryAction={primaryAction}
                 tabs={tabs}
-                breadcrumbs={[]}
             >
                 <Typography>There is no place like home</Typography>
             </MasterLayout>
diff --git a/resources/js/views/__backoffice/layouts/Master.js b/resources/js/views/__backoffice/layouts/Master.js
index aabca7e..4487a46 100755
--- a/resources/js/views/__backoffice/layouts/Master.js
+++ b/resources/js/views/__backoffice/layouts/Master.js
@@ -96,7 +96,7 @@ class Master extends Component {
     }
 
     render() {
-        const { classes, ...childProps } = this.props;
+        const { classes, showBreadcrumbs, ...other } = this.props;
 
         const {
             children,
@@ -130,6 +130,76 @@ class Master extends Component {
             </Grid>
         );
 
+        const renderBreadcrumbs = (
+            <AppBar
+                component="div"
+                color="inherit"
+                position="static"
+                elevation={0}
+                className={classes.breadcrumbBar}
+                style={{
+                    backgroundColor: nightMode ? '#303030' : '#FAFAFA',
+                }}
+            >
+                <div className={classes.breadcrumbWrapper}>
+                    <Breadcrumbs arial-label="Breadcrumb">
+                        {segments.length > 0 ? (
+                            <Link
+                                color="inherit"
+                                component={linkProps => (
+                                    <RouterLink
+                                        {...linkProps}
+                                        to={NavigationUtils._route(
+                                            'backoffice.home',
+                                        )}
+                                    />
+                                )}
+                                className={classes.breadcrumbItem}
+                            >
+                                <HomeIcon
+                                    className={classes.breadcrumbItemIcon}
+                                />
+                            </Link>
+                        ) : (
+                            <HomeIcon className={classes.breadcrumbItemIcon} />
+                        )}
+
+                        {segments.map((segment, key) => {
+                            if (key + 1 === segments.length) {
+                                return (
+                                    <Typography
+                                        key={key}
+                                        className={classes.breadcrumbItem}
+                                    >
+                                        {StringUtils._uppercaseFirst(segment)}
+                                    </Typography>
+                                );
+                            }
+
+                            return (
+                                <Link
+                                    key={key}
+                                    color="inherit"
+                                    component={linkProps => (
+                                        <RouterLink
+                                            {...linkProps}
+                                            to={
+                                                '/' +
+                                                segment.split('/').join('.')
+                                            }
+                                        />
+                                    )}
+                                    className={classes.breadcrumbItem}
+                                >
+                                    {StringUtils._uppercaseFirst(segment)}
+                                </Link>
+                            );
+                        })}
+                    </Breadcrumbs>
+                </div>
+            </AppBar>
+        );
+
         return (
             <>
                 {loading && <LinearDeterminate className={classes.loader} />}
@@ -140,7 +210,7 @@ class Master extends Component {
                     <nav className={classes.drawer}>
                         <Hidden smUp implementation="js">
                             <Sidebar
-                                {...childProps}
+                                {...other}
                                 loading={loading}
                                 navigate={path => history.push(path)}
                                 variant="temporary"
@@ -152,7 +222,7 @@ class Master extends Component {
 
                         <Hidden xsDown implementation="css">
                             <Sidebar
-                                {...childProps}
+                                {...other}
                                 loading={loading}
                                 navigate={path => history.push(path)}
                                 PaperProps={{ style: { width: drawerWidth } }}
@@ -162,98 +232,14 @@ class Master extends Component {
 
                     <div className={classes.contentWrapper}>
                         <Header
-                            {...childProps}
+                            {...other}
                             {...this.state}
                             loading={loading}
                             onDrawerToggle={this.handleDrawerToggled}
                             onNavLinkMenuToggle={this.handleNavLinkMenuToggled}
                         />
 
-                        <AppBar
-                            component="div"
-                            color="inherit"
-                            position="static"
-                            elevation={0}
-                            className={classes.breadcrumbBar}
-                            style={{
-                                backgroundColor: nightMode
-                                    ? '#303030'
-                                    : '#FAFAFA',
-                            }}
-                        >
-                            <div className={classes.breadcrumbWrapper}>
-                                <Breadcrumbs arial-label="Breadcrumb">
-                                    {segments.length > 0 ? (
-                                        <Link
-                                            color="inherit"
-                                            component={linkProps => (
-                                                <RouterLink
-                                                    {...linkProps}
-                                                    to={NavigationUtils._route(
-                                                        'backoffice.home',
-                                                    )}
-                                                />
-                                            )}
-                                            className={classes.breadcrumbItem}
-                                        >
-                                            <HomeIcon
-                                                className={
-                                                    classes.breadcrumbItemIcon
-                                                }
-                                            />
-                                        </Link>
-                                    ) : (
-                                        <HomeIcon
-                                            className={
-                                                classes.breadcrumbItemIcon
-                                            }
-                                        />
-                                    )}
-
-                                    {segments.map((segment, key) => {
-                                        if (key + 1 === segments.length) {
-                                            return (
-                                                <Typography
-                                                    key={key}
-                                                    className={
-                                                        classes.breadcrumbItem
-                                                    }
-                                                >
-                                                    {StringUtils._uppercaseFirst(
-                                                        segment,
-                                                    )}
-                                                </Typography>
-                                            );
-                                        }
-
-                                        return (
-                                            <Link
-                                                key={key}
-                                                color="inherit"
-                                                component={linkProps => (
-                                                    <RouterLink
-                                                        {...linkProps}
-                                                        to={
-                                                            '/' +
-                                                            segment
-                                                                .split('/')
-                                                                .join('.')
-                                                        }
-                                                    />
-                                                )}
-                                                className={
-                                                    classes.breadcrumbItem
-                                                }
-                                            >
-                                                {StringUtils._uppercaseFirst(
-                                                    segment,
-                                                )}
-                                            </Link>
-                                        );
-                                    })}
-                                </Breadcrumbs>
-                            </div>
-                        </AppBar>
+                        {showBreadcrumbs && renderBreadcrumbs}
 
                         <main className={classes.content}>
                             {loading ? (
@@ -294,6 +280,14 @@ class Master extends Component {
     }
 }
 
+Master.defaultProps = {
+    loading: false,
+    tabs: [],
+    showBreadcrumbs: true,
+    message: {},
+    alert: {},
+};
+
 Master.propTypes = {
     classes: PropTypes.object.isRequired,
     loading: PropTypes.bool,
@@ -301,6 +295,7 @@ Master.propTypes = {
     pageTitle: PropTypes.string.isRequired,
     primaryAction: PropTypes.object,
     tabs: PropTypes.array,
+    showBreadcrumbs: PropTypes.bool,
     message: PropTypes.object,
     alert: PropTypes.object,
 };
diff --git a/resources/js/views/__backoffice/partials/Header.js b/resources/js/views/__backoffice/partials/Header.js
index 2c1d960..dc00a0f 100644
--- a/resources/js/views/__backoffice/partials/Header.js
+++ b/resources/js/views/__backoffice/partials/Header.js
@@ -13,6 +13,8 @@ import {
     Grow,
     Hidden,
     IconButton,
+    ListItemAvatar,
+    ListItemText,
     ListItemIcon,
     MenuList,
     MenuItem,
@@ -27,7 +29,6 @@ import {
 } from '@material-ui/core';
 
 import {
-    AccountCircle as AccountCircleIcon,
     ExitToApp as ExitToAppIcon,
     Help as HelpIcon,
     Language as LanguageIcon,
@@ -38,6 +39,7 @@ import {
     Update as UpdateIcon,
 } from '@material-ui/icons';
 
+import * as NavigationUtils from '../../../utils/Navigation';
 import * as RandomUtils from '../../../utils/Random';
 import {
     LightbulbOff as LightbulbOffIcon,
@@ -46,6 +48,32 @@ import {
 import { Ph as PhIcon, Us as UsIcon } from '../../../icons/flags/4x3';
 import { Skeleton } from '../../../ui';
 
+const UserAvatar = props => {
+    const { user } = props;
+
+    return user.thumbnail_url !== null ? (
+        <Avatar alt={user.name} src={user.thumbnail_url} />
+    ) : (
+        <Avatar
+            style={{
+                fontSize: 17,
+                backgroundColor: RandomUtils._color(
+                    user.firstname.length -
+                        user.created_at.charAt(user.created_at.length - 2),
+                ),
+            }}
+        >
+            <Typography>
+                {`${user.firstname.charAt(0)}${user.lastname.charAt(0)}`}
+            </Typography>
+        </Avatar>
+    );
+};
+
+UserAvatar.propTypes = {
+    user: PropTypes.object.isRequired,
+};
+
 const LocaleMenu = props => {
     const { classes, localeMenuOpen, localeMenuEl } = props;
 
@@ -127,8 +155,15 @@ const LocaleMenu = props => {
 };
 
 const AccountMenu = props => {
-    const { classes, accountMenuOpen, accountMenuEl, pageProps } = props;
+    const {
+        history,
+        classes,
+        accountMenuOpen,
+        accountMenuEl,
+        pageProps,
+    } = props;
     const { user, handleLock, handleSignout } = pageProps;
+    const navigate = path => history.push(path);
 
     return (
         <Popper
@@ -155,23 +190,33 @@ const AccountMenu = props => {
                             }
                         >
                             <MenuList>
-                                <MenuItem
-                                    onClick={() =>
-                                        alert(`Hello ${user.firstname}!`)
-                                    }
-                                >
-                                    <ListItemIcon
+                                <MenuItem style={{ height: 50 }}>
+                                    <ListItemAvatar
                                         className={classes.navLinkMenuItemIcon}
                                     >
-                                        <AccountCircleIcon />
-                                    </ListItemIcon>
-
-                                    <Typography>
-                                        {Lang.get('navigation.profile')}
-                                    </Typography>
+                                        <UserAvatar user={user} />
+                                    </ListItemAvatar>
+
+                                    <ListItemText>
+                                        <Typography>
+                                            {pageProps.user.name}
+                                        </Typography>
+
+                                        <Typography color="textSecondary">
+                                            {pageProps.user.email}
+                                        </Typography>
+                                    </ListItemText>
                                 </MenuItem>
 
-                                <MenuItem>
+                                <MenuItem
+                                    onClick={() =>
+                                        navigate(
+                                            NavigationUtils._route(
+                                                'backoffice.settings.profile',
+                                            ),
+                                        )
+                                    }
+                                >
                                     <ListItemIcon
                                         className={classes.navLinkMenuItemIcon}
                                     >
@@ -531,34 +576,9 @@ const Header = props => {
                                         }
                                         color="inherit"
                                     >
-                                        {user.hasOwnProperty('thumbnail_url') &&
-                                        user.thumbnail_url !== null ? (
-                                            <Avatar
-                                                alt={user.name}
-                                                src={user.thumbnail_url}
-                                            />
-                                        ) : (
-                                            <Avatar
-                                                style={{
-                                                    fontSize: 17,
-                                                    backgroundColor: RandomUtils._color(
-                                                        user.firstname.length -
-                                                            user.created_at.charAt(
-                                                                user.created_at
-                                                                    .length - 2,
-                                                            ),
-                                                    ),
-                                                }}
-                                            >
-                                                <Typography>
-                                                    {`${user.firstname.charAt(
-                                                        0,
-                                                    )}${user.lastname.charAt(
-                                                        0,
-                                                    )}`}
-                                                </Typography>
-                                            </Avatar>
-                                        )}
+                                        {user.hasOwnProperty(
+                                            'thumbnail_url',
+                                        ) && <UserAvatar user={user} />}
                                     </IconButton>
 
                                     <AccountMenu {...props} />
@@ -609,19 +629,25 @@ const Header = props => {
                 </Toolbar>
             </AppBar>
 
-            <AppBar
-                component="div"
-                className={classes.secondaryBar}
-                color="primary"
-                position="static"
-                elevation={0}
-            >
-                <Tabs value={0} textColor="inherit">
-                    {tabs.map((tab, key) => (
-                        <Tab key={key} textColor="inherit" label={tab.name} />
-                    ))}
-                </Tabs>
-            </AppBar>
+            {tabs.length > 0 && (
+                <AppBar
+                    component="div"
+                    className={classes.secondaryBar}
+                    color="primary"
+                    position="static"
+                    elevation={0}
+                >
+                    <Tabs value={0} textColor="inherit">
+                        {tabs.map((tab, key) => (
+                            <Tab
+                                key={key}
+                                textColor="inherit"
+                                label={tab.name}
+                            />
+                        ))}
+                    </Tabs>
+                </AppBar>
+            )}
         </>
     );
 
diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js
new file mode 100644
index 0000000..b224caf
--- /dev/null
+++ b/resources/js/views/__backoffice/settings/Account.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Master as MasterLayout } from '../layouts';
+
+function Account(props) {
+    const { classes, ...other } = props;
+
+    return (
+        <MasterLayout {...other} pageTitle="Account" showBreadcrumbs={false}>
+            Account Page
+        </MasterLayout>
+    );
+}
+
+export default Account;
diff --git a/resources/js/views/__backoffice/settings/Profile.js b/resources/js/views/__backoffice/settings/Profile.js
new file mode 100644
index 0000000..8e3d97f
--- /dev/null
+++ b/resources/js/views/__backoffice/settings/Profile.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Master as MasterLayout } from '../layouts';
+
+function Profile(props) {
+    const { classes, ...other } = props;
+
+    return (
+        <MasterLayout {...other} pageTitle="Profile" showBreadcrumbs={false}>
+            Profile Page
+        </MasterLayout>
+    );
+}
+
+export default Profile;
diff --git a/resources/js/views/__backoffice/settings/index.js b/resources/js/views/__backoffice/settings/index.js
new file mode 100644
index 0000000..aa46ed9
--- /dev/null
+++ b/resources/js/views/__backoffice/settings/index.js
@@ -0,0 +1,4 @@
+import loadable from '@loadable/component';
+
+export const Account = loadable(() => import('./Account'));
+export const Profile = loadable(() => import('./Profile'));
diff --git a/resources/lang/en/navigation.php b/resources/lang/en/navigation.php
index 098cfe4..c40ee8f 100644
--- a/resources/lang/en/navigation.php
+++ b/resources/lang/en/navigation.php
@@ -38,7 +38,6 @@
     'nightmode_off' => 'Toggle Night Mode Off',
 
     'account' => 'Account',
-    'profile' => 'Profile',
     'settings' => 'Settings',
     'lock' => 'Lock',
     'signout' => 'Sign out',
diff --git a/resources/lang/fil/navigation.php b/resources/lang/fil/navigation.php
index 80ebe32..5833a97 100644
--- a/resources/lang/fil/navigation.php
+++ b/resources/lang/fil/navigation.php
@@ -38,7 +38,6 @@
     'nightmode_off' => 'I-Off ang Night Mode',
 
     'account' => 'Account',
-    'profile' => 'Profile',
     'settings' => 'Mga Setting',
     'lock' => 'I-lock',
     'signout' => 'Mag-sign out',

From 3eff735d1a1a64d26691959d0e18ad85caaae774 Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sun, 14 Apr 2019 20:03:52 +0800
Subject: [PATCH 2/6] Layout Changes

---
 .../js/views/__backoffice/layouts/Clean.js    | 122 +++++
 .../js/views/__backoffice/layouts/Master.js   |  67 ++-
 .../js/views/__backoffice/layouts/index.js    |   1 +
 .../js/views/__backoffice/partials/Footer.js  |  31 ++
 .../js/views/__backoffice/partials/Header.js  | 426 ++++++++++--------
 .../js/views/__backoffice/partials/Sidebar.js |  34 +-
 .../js/views/__backoffice/partials/index.js   |   1 +
 .../js/views/__backoffice/settings/Account.js |  10 +-
 .../js/views/__backoffice/settings/Profile.js |  10 +-
 9 files changed, 469 insertions(+), 233 deletions(-)
 create mode 100644 resources/js/views/__backoffice/layouts/Clean.js
 create mode 100644 resources/js/views/__backoffice/partials/Footer.js

diff --git a/resources/js/views/__backoffice/layouts/Clean.js b/resources/js/views/__backoffice/layouts/Clean.js
new file mode 100644
index 0000000..8034e6a
--- /dev/null
+++ b/resources/js/views/__backoffice/layouts/Clean.js
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+
+import { CssBaseline, Hidden, withStyles } from '@material-ui/core';
+import classNames from 'classnames';
+
+import { LinearDeterminate } from '../../../ui/Loaders';
+import { Footer, Header, Sidebar } from '../partials';
+
+function Clean(props) {
+    const { classes, ...other } = props;
+    const { history, loading } = props;
+
+    const [drawerOpen, setDrawer] = useState(false);
+    const [localeMenuOpen, setLocaleMenu] = useState(false);
+    const [accountMenuOpen, setAccountMenu] = useState(false);
+
+    const sidebarProps = Object.assign(other, {
+        navigate: path => history.push(path),
+        PaperProps: { style: { width: drawerWidth } },
+        open: drawerOpen,
+        onClose: () => setDrawer(!drawerOpen),
+    });
+
+    return (
+        <>
+            {loading && <LinearDeterminate className={classes.loader} />}
+
+            <div className={classes.root}>
+                <CssBaseline />
+
+                <nav className={classes.drawer}>
+                    <Hidden smUp implementation="js">
+                        <Sidebar {...sidebarProps} variant="temporary" />
+                    </Hidden>
+
+                    <Hidden xsDown implementation="css">
+                        <Sidebar {...sidebarProps} variant="persistent" />
+                    </Hidden>
+                </nav>
+
+                <div className={classes.contentWrapper}>
+                    <Header
+                        {...other}
+                        variant="slim"
+                        drawerOpen={drawerOpen}
+                        accountMenuOpen={accountMenuOpen}
+                        localeMenuOpen={localeMenuOpen}
+                        onDrawerToggle={() => setDrawer(!drawerOpen)}
+                        onLocaleMenuToggle={() =>
+                            setLocaleMenu(!localeMenuOpen)
+                        }
+                        onAccountMenuToggle={() =>
+                            setAccountMenu(!accountMenuOpen)
+                        }
+                    />
+
+                    <main
+                        className={classNames(classes.content, {
+                            [classes.contentShift]: drawerOpen,
+                        })}
+                    >
+                        {props.children}
+                    </main>
+                </div>
+
+                <Footer />
+            </div>
+        </>
+    );
+}
+
+const drawerWidth = 256;
+
+const styles = theme => ({
+    loader: {
+        zIndex: 9999,
+    },
+
+    root: {
+        display: 'flex',
+        position: 'relative',
+        minHeight: '100vh',
+        maxWidth: '100%',
+    },
+
+    drawer: {
+        drawer: {
+            width: drawerWidth,
+            flexShrink: 0,
+        },
+    },
+
+    contentWrapper: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflowX: 'scroll',
+    },
+
+    content: {
+        flex: 1,
+        padding: `0 ${theme.spacing.unit}px`,
+        marginBottom: 75,
+        marginLeft: 0,
+        [theme.breakpoints.up('sm')]: {
+            marginBottom: 50,
+            padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+        },
+    },
+
+    contentShift: {
+        [theme.breakpoints.up('sm')]: {
+            transition: theme.transitions.create('margin', {
+                easing: theme.transitions.easing.easeOut,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+            marginLeft: drawerWidth,
+        },
+    },
+});
+
+export default withStyles(styles)(Clean);
diff --git a/resources/js/views/__backoffice/layouts/Master.js b/resources/js/views/__backoffice/layouts/Master.js
index 4487a46..9ffe168 100755
--- a/resources/js/views/__backoffice/layouts/Master.js
+++ b/resources/js/views/__backoffice/layouts/Master.js
@@ -22,18 +22,34 @@ import * as StringUtils from '../../../utils/String';
 import * as UrlUtils from '../../../utils/URL';
 import { Snackbar, Modal } from '../../../ui';
 import { LinearDeterminate } from '../../../ui/Loaders';
-import { Header, Sidebar } from '../partials';
+import { Footer, Header, Sidebar } from '../partials';
 
 class Master extends Component {
     state = {
         mobileOpen: false,
         localeMenuOpen: false,
-        localeMenuEl: null,
         accountMenuOpen: false,
-        accountMenuEl: null,
         message: {},
     };
 
+    /**
+     * Toggles Locale Menu
+     *
+     * @return {undefined}
+     */
+    handleLocaleMenuToggled = () => {
+        this.handleNavLinkMenuToggled('localeMenuOpen');
+    };
+
+    /**
+     * Toggles Account Menu
+     *
+     * @return {undefined}
+     */
+    handleAccountMenuToggled = () => {
+        this.handleNavLinkMenuToggled('accountMenuOpen');
+    };
+
     /**
      * Event listener that is triggered when the a nav link menu is clicked.
      *
@@ -236,7 +252,8 @@ class Master extends Component {
                             {...this.state}
                             loading={loading}
                             onDrawerToggle={this.handleDrawerToggled}
-                            onNavLinkMenuToggle={this.handleNavLinkMenuToggled}
+                            onAccountMenuToggle={this.handleAccountMenuToggled}
+                            onLocaleMenuToggle={this.handleLocaleMenuToggled}
                         />
 
                         {showBreadcrumbs && renderBreadcrumbs}
@@ -249,18 +266,7 @@ class Master extends Component {
                             )}
                         </main>
 
-                        <footer className={classes.footer}>
-                            <Typography>
-                                {Lang.get('navigation.citation')}{' '}
-                                <Link
-                                    href="https://github.com/palonponjovertlota"
-                                    target="_blank"
-                                    rel="noreferrer"
-                                >
-                                    @palonponjovertlota
-                                </Link>
-                            </Typography>
-                        </footer>
+                        <Footer />
                     </div>
                 </div>
 
@@ -280,19 +286,12 @@ class Master extends Component {
     }
 }
 
-Master.defaultProps = {
-    loading: false,
-    tabs: [],
-    showBreadcrumbs: true,
-    message: {},
-    alert: {},
-};
-
 Master.propTypes = {
     classes: PropTypes.object.isRequired,
-    loading: PropTypes.bool,
     pageProps: PropTypes.object.isRequired,
     pageTitle: PropTypes.string.isRequired,
+    loading: PropTypes.bool,
+
     primaryAction: PropTypes.object,
     tabs: PropTypes.array,
     showBreadcrumbs: PropTypes.bool,
@@ -300,6 +299,15 @@ Master.propTypes = {
     alert: PropTypes.object,
 };
 
+Master.defaultProps = {
+    loading: false,
+
+    tabs: [],
+    showBreadcrumbs: true,
+    message: {},
+    alert: {},
+};
+
 const drawerWidth = 256;
 
 const styles = theme => ({
@@ -358,15 +366,6 @@ const styles = theme => ({
     loadingContainer: {
         minHeight: '100%',
     },
-
-    footer: {
-        position: 'absolute',
-        right: 0,
-        bottom: 0,
-        left: 0,
-        padding: theme.spacing.unit * 4,
-        textAlign: 'center',
-    },
 });
 
 export default withStyles(styles)(Master);
diff --git a/resources/js/views/__backoffice/layouts/index.js b/resources/js/views/__backoffice/layouts/index.js
index 2858116..f4f7a35 100644
--- a/resources/js/views/__backoffice/layouts/index.js
+++ b/resources/js/views/__backoffice/layouts/index.js
@@ -1,3 +1,4 @@
 import loadable from '@loadable/component';
 
+export const Clean = loadable(() => import('./Clean'));
 export const Master = loadable(() => import('./Master'));
diff --git a/resources/js/views/__backoffice/partials/Footer.js b/resources/js/views/__backoffice/partials/Footer.js
new file mode 100644
index 0000000..22d1673
--- /dev/null
+++ b/resources/js/views/__backoffice/partials/Footer.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Link, Typography, withStyles } from '@material-ui/core';
+
+const Footer = props => (
+    <footer {...props} className={props.classes.root}>
+        <Typography>
+            {Lang.get('navigation.citation')}{' '}
+            <Link
+                href="https://github.com/palonponjovertlota"
+                target="_blank"
+                rel="noreferrer"
+            >
+                @palonponjovertlota
+            </Link>
+        </Typography>
+    </footer>
+);
+
+const styles = theme => ({
+    root: {
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        left: 0,
+        padding: theme.spacing.unit * 4,
+        textAlign: 'center',
+    },
+});
+
+export default withStyles(styles)(Footer);
diff --git a/resources/js/views/__backoffice/partials/Header.js b/resources/js/views/__backoffice/partials/Header.js
index dc00a0f..bfb30ec 100644
--- a/resources/js/views/__backoffice/partials/Header.js
+++ b/resources/js/views/__backoffice/partials/Header.js
@@ -75,12 +75,11 @@ UserAvatar.propTypes = {
 };
 
 const LocaleMenu = props => {
-    const { classes, localeMenuOpen, localeMenuEl } = props;
+    const { classes, localeMenuOpen, onLocaleMenuToggle } = props;
 
     return (
         <Popper
             open={localeMenuOpen}
-            anchorEl={localeMenuEl}
             className={classes.navLinkMenu}
             transition
             disablePortal
@@ -96,11 +95,7 @@ const LocaleMenu = props => {
                     }}
                 >
                     <Paper>
-                        <ClickAwayListener
-                            onClickAway={() =>
-                                props.onNavLinkMenuToggle('localeMenuOpen')
-                            }
-                        >
+                        <ClickAwayListener onClickAway={onLocaleMenuToggle}>
                             <MenuList>
                                 <MenuItem
                                     onClick={() => {
@@ -158,17 +153,18 @@ const AccountMenu = props => {
     const {
         history,
         classes,
-        accountMenuOpen,
-        accountMenuEl,
         pageProps,
+
+        accountMenuOpen,
+        onAccountMenuToggle,
     } = props;
     const { user, handleLock, handleSignout } = pageProps;
+
     const navigate = path => history.push(path);
 
     return (
         <Popper
             open={accountMenuOpen}
-            anchorEl={accountMenuEl}
             className={classes.navLinkMenu}
             transition
             disablePortal
@@ -184,11 +180,7 @@ const AccountMenu = props => {
                     }}
                 >
                     <Paper>
-                        <ClickAwayListener
-                            onClickAway={() =>
-                                props.onNavLinkMenuToggle('accountMenuOpen')
-                            }
-                        >
+                        <ClickAwayListener onClickAway={onAccountMenuToggle}>
                             <MenuList>
                                 <MenuItem style={{ height: 50 }}>
                                     <ListItemAvatar
@@ -267,14 +259,19 @@ const AccountMenu = props => {
 const Header = props => {
     const {
         classes,
-        loading,
-        onDrawerToggle,
         pageProps,
         pageTitle,
+        loading,
+
+        variant,
         primaryAction,
         tabs,
         localeMenuOpen,
         accountMenuOpen,
+
+        onDrawerToggle,
+        onLocaleMenuToggle,
+        onAccountMenuToggle,
     } = props;
 
     const {
@@ -289,31 +286,37 @@ const Header = props => {
         highlightColor: colors.grey[200],
     };
 
+    const renderDrawerButtonNavigating = (
+        <Grid item>
+            <IconButton
+                color="inherit"
+                aria-label="Open drawer"
+                className={classes.menuButton}
+            >
+                <Skeleton {...skeletonProps} height={25} width={25} />
+            </IconButton>
+        </Grid>
+    );
+
     const renderNavigating = (
         <>
             <AppBar
                 color="primary"
                 position="sticky"
                 elevation={0}
-                className={classes.primaryBar}
+                className={
+                    variant === 'slim'
+                        ? classes.primaryBarSlim
+                        : classes.primaryBar
+                }
             >
                 <Toolbar>
                     <Grid container spacing={8} alignItems="center">
-                        <Hidden smUp>
-                            <Grid item>
-                                <IconButton
-                                    color="inherit"
-                                    aria-label="Open drawer"
-                                    className={classes.menuButton}
-                                >
-                                    <Skeleton
-                                        {...skeletonProps}
-                                        height={25}
-                                        width={25}
-                                    />
-                                </IconButton>
-                            </Grid>
-                        </Hidden>
+                        {variant === 'slim' ? (
+                            renderDrawerButtonNavigating
+                        ) : (
+                            <Hidden smUp>{renderDrawerButtonNavigating}</Hidden>
+                        )}
 
                         <Grid item xs />
 
@@ -331,8 +334,8 @@ const Header = props => {
                                 <Skeleton
                                     {...skeletonProps}
                                     circle
-                                    height={30}
-                                    width={30}
+                                    height={25}
+                                    width={25}
                                 />
                             </IconButton>
                         </Grid>
@@ -342,8 +345,8 @@ const Header = props => {
                                 <Skeleton
                                     {...skeletonProps}
                                     circle
-                                    height={30}
-                                    width={30}
+                                    height={25}
+                                    width={25}
                                 />
                             </IconButton>
                         </Grid>
@@ -353,8 +356,8 @@ const Header = props => {
                                 <Skeleton
                                     {...skeletonProps}
                                     circle
-                                    height={30}
-                                    width={30}
+                                    height={25}
+                                    width={25}
                                 />
                             </IconButton>
                         </Grid>
@@ -364,51 +367,19 @@ const Header = props => {
                                 <Skeleton
                                     {...skeletonProps}
                                     circle
-                                    height={30}
-                                    width={30}
+                                    height={25}
+                                    width={25}
                                 />
                             </IconButton>
                         </Grid>
-                    </Grid>
-                </Toolbar>
-            </AppBar>
-
-            <AppBar
-                component="div"
-                className={classes.secondaryBar}
-                color="primary"
-                position="static"
-                elevation={0}
-            >
-                <Toolbar>
-                    <Grid container alignItems="center" spacing={8}>
-                        <Grid item xs>
-                            <Skeleton
-                                height={30}
-                                width={100 + pageTitle.length * 2}
-                                {...skeletonProps}
-                                className={classes.button}
-                            />
-                        </Grid>
-
-                        {primaryAction && (
-                            <Grid item>
-                                <Skeleton
-                                    {...skeletonProps}
-                                    height={30}
-                                    width={50 + primaryAction.text.length * 2}
-                                    className={classes.button}
-                                />
-                            </Grid>
-                        )}
 
                         <Grid item>
                             <IconButton color="inherit">
                                 <Skeleton
                                     {...skeletonProps}
                                     circle
-                                    height={25}
-                                    width={25}
+                                    height={30}
+                                    width={30}
                                 />
                             </IconButton>
                         </Grid>
@@ -416,58 +387,118 @@ const Header = props => {
                 </Toolbar>
             </AppBar>
 
-            <AppBar
-                component="div"
-                className={classes.secondaryBar}
-                color="primary"
-                position="static"
-                elevation={0}
-            >
-                <Tabs value={0} textColor="inherit">
-                    {tabs.map((tab, key) => (
-                        <Tab
-                            key={key}
-                            textColor="inherit"
-                            label={
-                                <Skeleton
-                                    {...skeletonProps}
-                                    height={20}
-                                    width={30 + tab.name.length * 2}
-                                />
-                            }
-                        />
-                    ))}
-                </Tabs>
-            </AppBar>
+            {variant === 'full' && (
+                <>
+                    <AppBar
+                        component="div"
+                        className={classes.secondaryBar}
+                        color="primary"
+                        position="static"
+                        elevation={0}
+                    >
+                        <Toolbar>
+                            <Grid container alignItems="center" spacing={8}>
+                                <Grid item xs>
+                                    <Skeleton
+                                        height={25}
+                                        width={100 + pageTitle.length * 2}
+                                        {...skeletonProps}
+                                        className={classes.button}
+                                    />
+                                </Grid>
+
+                                {Object.keys(primaryAction) > 0 && (
+                                    <Grid item>
+                                        <Skeleton
+                                            {...skeletonProps}
+                                            height={25}
+                                            width={
+                                                50 +
+                                                primaryAction.text.length * 2
+                                            }
+                                            className={classes.button}
+                                        />
+                                    </Grid>
+                                )}
+
+                                <Grid item>
+                                    <IconButton color="inherit">
+                                        <Skeleton
+                                            {...skeletonProps}
+                                            circle
+                                            height={25}
+                                            width={25}
+                                        />
+                                    </IconButton>
+                                </Grid>
+                            </Grid>
+                        </Toolbar>
+                    </AppBar>
+
+                    {tabs.length > 0 && (
+                        <AppBar
+                            component="div"
+                            className={classes.secondaryBar}
+                            color="primary"
+                            position="static"
+                            elevation={0}
+                        >
+                            <Tabs value={0} textColor="inherit">
+                                {tabs.map((tab, key) => (
+                                    <Tab
+                                        key={key}
+                                        textColor="inherit"
+                                        label={
+                                            <Skeleton
+                                                {...skeletonProps}
+                                                height={20}
+                                                width={25 + tab.name.length * 2}
+                                            />
+                                        }
+                                    />
+                                ))}
+                            </Tabs>
+                        </AppBar>
+                    )}
+                </>
+            )}
         </>
     );
 
+    const renderDrawerButton = (
+        <Grid item>
+            <Tooltip title={Lang.get('navigation.open_drawer')}>
+                <IconButton
+                    color="inherit"
+                    aria-label="Open drawer"
+                    onClick={onDrawerToggle}
+                    className={classes.menuButton}
+                >
+                    <MenuIcon />
+                </IconButton>
+            </Tooltip>
+        </Grid>
+    );
+
     const renderNavigated = (
         <>
             <AppBar
                 color="primary"
                 position="sticky"
                 elevation={0}
-                className={classes.primaryBar}
+                className={
+                    variant === 'slim'
+                        ? classes.primaryBarSlim
+                        : classes.primaryBar
+                }
             >
                 <Toolbar>
                     <Grid container spacing={8} alignItems="center">
-                        <Hidden smUp>
-                            <Grid item>
-                                <Tooltip
-                                    title={Lang.get('navigation.open_drawer')}
-                                >
-                                    <IconButton
-                                        color="inherit"
-                                        aria-label="Open drawer"
-                                        onClick={onDrawerToggle}
-                                        className={classes.menuButton}
-                                    >
-                                        <MenuIcon />
-                                    </IconButton>
-                                </Tooltip>
-                            </Grid>
-                        </Hidden>
+                        {variant === 'slim' ? (
+                            renderDrawerButton
+                        ) : (
+                            <Hidden smUp>{renderDrawerButton}</Hidden>
+                        )}
 
                         <Grid item xs />
 
@@ -525,11 +556,7 @@ const Header = props => {
                                             localeMenuOpen && 'material-appbar'
                                         }
                                         aria-haspopup="true"
-                                        onClick={() =>
-                                            props.onNavLinkMenuToggle(
-                                                'localeMenuOpen',
-                                            )
-                                        }
+                                        onClick={onLocaleMenuToggle}
                                         color="inherit"
                                     >
                                         <LanguageIcon />
@@ -569,11 +596,7 @@ const Header = props => {
                                             accountMenuOpen && 'material-appbar'
                                         }
                                         aria-haspopup="true"
-                                        onClick={() =>
-                                            props.onNavLinkMenuToggle(
-                                                'accountMenuOpen',
-                                            )
-                                        }
+                                        onClick={onAccountMenuToggle}
                                         color="inherit"
                                     >
                                         {user.hasOwnProperty(
@@ -589,64 +612,70 @@ const Header = props => {
                 </Toolbar>
             </AppBar>
 
-            <AppBar
-                component="div"
-                className={classes.secondaryBar}
-                color="primary"
-                position="static"
-                elevation={0}
-            >
-                <Toolbar>
-                    <Grid container alignItems="center" spacing={8}>
-                        <Grid item xs>
-                            <Typography color="inherit" variant="h5">
-                                {pageTitle}
-                            </Typography>
-                        </Grid>
-
-                        {primaryAction && (
-                            <Grid item>
-                                <Button
-                                    className={classes.button}
-                                    variant="outlined"
-                                    color="inherit"
-                                    size="small"
-                                    onClick={primaryAction.clicked}
-                                >
-                                    {primaryAction.text}
-                                </Button>
+            {variant === 'full' && (
+                <>
+                    <AppBar
+                        component="div"
+                        className={classes.secondaryBar}
+                        color="primary"
+                        position="static"
+                        elevation={0}
+                    >
+                        <Toolbar>
+                            <Grid container alignItems="center" spacing={8}>
+                                <Grid item xs>
+                                    <Typography color="inherit" variant="h5">
+                                        {pageTitle}
+                                    </Typography>
+                                </Grid>
+
+                                {Object.keys(primaryAction) > 0 && (
+                                    <Grid item>
+                                        <Button
+                                            className={classes.button}
+                                            variant="outlined"
+                                            color="inherit"
+                                            size="small"
+                                            onClick={primaryAction.clicked}
+                                        >
+                                            {primaryAction.text}
+                                        </Button>
+                                    </Grid>
+                                )}
+
+                                <Grid item>
+                                    <Tooltip
+                                        title={Lang.get('navigation.help')}
+                                    >
+                                        <IconButton color="inherit">
+                                            <HelpIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                </Grid>
                             </Grid>
-                        )}
-
-                        <Grid item>
-                            <Tooltip title={Lang.get('navigation.help')}>
-                                <IconButton color="inherit">
-                                    <HelpIcon />
-                                </IconButton>
-                            </Tooltip>
-                        </Grid>
-                    </Grid>
-                </Toolbar>
-            </AppBar>
-
-            {tabs.length > 0 && (
-                <AppBar
-                    component="div"
-                    className={classes.secondaryBar}
-                    color="primary"
-                    position="static"
-                    elevation={0}
-                >
-                    <Tabs value={0} textColor="inherit">
-                        {tabs.map((tab, key) => (
-                            <Tab
-                                key={key}
-                                textColor="inherit"
-                                label={tab.name}
-                            />
-                        ))}
-                    </Tabs>
-                </AppBar>
+                        </Toolbar>
+                    </AppBar>
+
+                    {tabs.length > 0 && (
+                        <AppBar
+                            component="div"
+                            className={classes.secondaryBar}
+                            color="primary"
+                            position="static"
+                            elevation={0}
+                        >
+                            <Tabs value={0} textColor="inherit">
+                                {tabs.map((tab, key) => (
+                                    <Tab
+                                        key={key}
+                                        textColor="inherit"
+                                        label={tab.name}
+                                    />
+                                ))}
+                            </Tabs>
+                        </AppBar>
+                    )}
+                </>
             )}
         </>
     );
@@ -656,13 +685,40 @@ const Header = props => {
 
 Header.propTypes = {
     classes: PropTypes.object.isRequired,
+    pageProps: PropTypes.object.isRequired,
+    pageTitle: PropTypes.string.isRequired,
+    loading: PropTypes.bool,
+
+    variant: PropTypes.oneOf(['full', 'slim']),
+    primaryAction: PropTypes.object,
+    tabs: PropTypes.array,
+    localeMenuOpen: PropTypes.bool,
+    accountMenuOpen: PropTypes.bool,
+    onDrawerToggle: PropTypes.func,
+    onLocaleMenuToggle: PropTypes.func,
+    onAccountMenuToggle: PropTypes.func,
+};
+
+Header.defaultProps = {
+    loading: false,
+
+    variant: 'full',
+    primaryAction: {},
+    tabs: [],
+    localeMenuOpen: false,
+    accountMenuOpen: false,
 };
 
 const lightColor = 'rgba(255, 255, 255, 0.7)';
 
 const styles = theme => ({
     primaryBar: {
-        paddingTop: '0.25rem',
+        paddingTop: 8,
+    },
+
+    primaryBarSlim: {
+        paddingTop: 8,
+        paddingBottom: 8,
     },
 
     navLinkMenuWrapper: {
@@ -672,13 +728,13 @@ const styles = theme => ({
 
     navLinkMenu: {
         position: 'absolute',
-        padding: '0.5rem 1.25rem',
+        padding: '8px 20px',
         right: 0,
         zIndex: 9999,
     },
 
     navLinkMenuItemIcon: {
-        marginRight: '1rem',
+        marginRight: 16,
     },
 
     secondaryBar: {
diff --git a/resources/js/views/__backoffice/partials/Sidebar.js b/resources/js/views/__backoffice/partials/Sidebar.js
index bf3aa99..1d71376 100644
--- a/resources/js/views/__backoffice/partials/Sidebar.js
+++ b/resources/js/views/__backoffice/partials/Sidebar.js
@@ -6,6 +6,7 @@ import {
     colors,
     Divider,
     Drawer,
+    IconButton,
     List,
     ListItem,
     ListItemIcon,
@@ -14,6 +15,7 @@ import {
 } from '@material-ui/core';
 
 import {
+    ChevronLeft as ChevronLeftIcon,
     Dashboard as DashboardIcon,
     People as PeopleIcon,
 } from '@material-ui/icons';
@@ -36,6 +38,7 @@ const Sidebar = props => {
         navigate,
         ...other
     } = props;
+    const { variant, onClose } = props;
     const { nightMode } = pageProps;
 
     const homeLink = {
@@ -57,7 +60,7 @@ const Sidebar = props => {
         },
     ];
 
-    const renderLoading = (
+    const renderNavigating = (
         <List disablePadding className={classes.links}>
             <ListItem
                 className={classNames(
@@ -66,12 +69,23 @@ const Sidebar = props => {
                     classes.linkGroup,
                     classes.brandLoading,
                 )}
+                style={{ paddingTop: 25 }}
             >
                 <Skeleton
-                    width={100}
+                    width={175}
                     color={nightMode && colors.grey['A700']}
                     highlightColor={nightMode && colors.grey['A400']}
                 />
+
+                {variant === 'persistent' && (
+                    <Skeleton
+                        circle
+                        width={30}
+                        height={30}
+                        color={nightMode && colors.grey['A700']}
+                        highlightColor={nightMode && colors.grey['A400']}
+                    />
+                )}
             </ListItem>
 
             <Divider className={classes.topDivider} />
@@ -171,6 +185,12 @@ const Sidebar = props => {
                     alt="company-logo"
                     className={classes.brandLogo}
                 />
+
+                {variant === 'persistent' && (
+                    <IconButton onClick={onClose}>
+                        <ChevronLeftIcon />
+                    </IconButton>
+                )}
             </ListItem>
 
             <Divider className={classes.topDivider} />
@@ -243,7 +263,7 @@ const Sidebar = props => {
 
     return (
         <Drawer variant="permanent" {...other}>
-            {loading ? renderLoading : renderNavigated}
+            {loading ? renderNavigating : renderNavigated}
         </Drawer>
     );
 };
@@ -265,13 +285,15 @@ const styles = theme => ({
     },
 
     brand: {
+        display: 'flex',
+        justifyContent: 'space-between',
         fontSize: 24,
         fontFamily: theme.typography.fontFamily,
         color: theme.palette.common.white,
     },
 
     brandLogo: {
-        width: 230,
+        width: 175,
     },
 
     linkGroupHeader: {
@@ -342,11 +364,11 @@ const styles = theme => ({
     },
 
     brandLoading: {
-        padding: '1rem 0.75rem',
+        padding: '16px 12px',
     },
 
     linkLoading: {
-        padding: '0.75rem',
+        padding: 12,
         display: 'flex',
         flexDirection: 'row',
     },
diff --git a/resources/js/views/__backoffice/partials/index.js b/resources/js/views/__backoffice/partials/index.js
index 774aae4..bd688b1 100644
--- a/resources/js/views/__backoffice/partials/index.js
+++ b/resources/js/views/__backoffice/partials/index.js
@@ -1,4 +1,5 @@
 import loadable from '@loadable/component';
 
+export const Footer = loadable(() => import('./Footer'));
 export const Header = loadable(() => import('./Header'));
 export const Sidebar = loadable(() => import('./Sidebar'));
diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js
index b224caf..648df86 100644
--- a/resources/js/views/__backoffice/settings/Account.js
+++ b/resources/js/views/__backoffice/settings/Account.js
@@ -1,14 +1,16 @@
 import React from 'react';
 
-import { Master as MasterLayout } from '../layouts';
+import { Typography } from '@material-ui/core';
+
+import { Clean as CleanLayout } from '../layouts';
 
 function Account(props) {
     const { classes, ...other } = props;
 
     return (
-        <MasterLayout {...other} pageTitle="Account" showBreadcrumbs={false}>
-            Account Page
-        </MasterLayout>
+        <CleanLayout {...other} pageTitle="Account" loading={false}>
+            <Typography>Account Page</Typography>
+        </CleanLayout>
     );
 }
 
diff --git a/resources/js/views/__backoffice/settings/Profile.js b/resources/js/views/__backoffice/settings/Profile.js
index 8e3d97f..34372af 100644
--- a/resources/js/views/__backoffice/settings/Profile.js
+++ b/resources/js/views/__backoffice/settings/Profile.js
@@ -1,14 +1,16 @@
 import React from 'react';
 
-import { Master as MasterLayout } from '../layouts';
+import { Typography } from '@material-ui/core';
+
+import { Clean as CleanLayout } from '../layouts';
 
 function Profile(props) {
     const { classes, ...other } = props;
 
     return (
-        <MasterLayout {...other} pageTitle="Profile" showBreadcrumbs={false}>
-            Profile Page
-        </MasterLayout>
+        <CleanLayout {...other} pageTitle="Profile" loading={false}>
+            <Typography>Profile Page</Typography>
+        </CleanLayout>
     );
 }
 

From 26f0ec0ef564baa1e6fd662201173e8075f68c84 Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sun, 14 Apr 2019 20:35:02 +0800
Subject: [PATCH 3/6] wip

---
 .../js/views/__backoffice/partials/Header.js  | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/resources/js/views/__backoffice/partials/Header.js b/resources/js/views/__backoffice/partials/Header.js
index bfb30ec..3d32b73 100644
--- a/resources/js/views/__backoffice/partials/Header.js
+++ b/resources/js/views/__backoffice/partials/Header.js
@@ -179,7 +179,7 @@ const AccountMenu = props => {
                                 : 'center bottom',
                     }}
                 >
-                    <Paper>
+                    <Paper style={{ marginTop: -3 }}>
                         <ClickAwayListener onClickAway={onAccountMenuToggle}>
                             <MenuList>
                                 <MenuItem style={{ height: 50 }}>
@@ -318,6 +318,19 @@ const Header = props => {
                             <Hidden smUp>{renderDrawerButtonNavigating}</Hidden>
                         )}
 
+                        <Hidden smDown>
+                            {variant === 'slim' && (
+                                <Grid item>
+                                    <Skeleton
+                                        {...skeletonProps}
+                                        height={30}
+                                        width={75 + pageTitle.length * 2}
+                                        className={classes.link}
+                                    />
+                                </Grid>
+                            )}
+                        </Hidden>
+
                         <Grid item xs />
 
                         <Grid item>
@@ -400,8 +413,8 @@ const Header = props => {
                             <Grid container alignItems="center" spacing={8}>
                                 <Grid item xs>
                                     <Skeleton
-                                        height={25}
-                                        width={100 + pageTitle.length * 2}
+                                        height={30}
+                                        width={75 + pageTitle.length * 2}
                                         {...skeletonProps}
                                         className={classes.button}
                                     />
@@ -500,6 +513,16 @@ const Header = props => {
                             <Hidden smUp>{renderDrawerButton}</Hidden>
                         )}
 
+                        <Hidden smDown>
+                            {variant === 'slim' && (
+                                <Grid item>
+                                    <Typography color="inherit" variant="h5">
+                                        {pageTitle}
+                                    </Typography>
+                                </Grid>
+                            )}
+                        </Hidden>
+
                         <Grid item xs />
 
                         <Grid item>

From 5d6bcd37f263e4abd96b5b524aedb25615ff323c Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sat, 20 Apr 2019 20:38:32 +0800
Subject: [PATCH 4/6] wip

---
 .../Api/V1/Settings/AccountController.php     |  13 +
 .../Api/V1/Settings/ProfileController.php     |  40 ++
 resources/js/config/locale.js                 |   2 +
 .../js/views/__backoffice/layouts/Clean.js    |  51 ++-
 .../js/views/__backoffice/layouts/Settings.js |  52 +++
 .../js/views/__backoffice/layouts/Slave.js    | 190 +++++++++
 .../js/views/__backoffice/layouts/index.js    |   2 +
 .../js/views/__backoffice/partials/Header.js  |   1 -
 .../js/views/__backoffice/settings/Account.js |  64 ++-
 .../views/__backoffice/settings/Navigation.js |  93 +++++
 .../js/views/__backoffice/settings/Profile.js | 377 +++++++++++++++++-
 .../js/views/__backoffice/settings/index.js   |   1 +
 resources/lang/en/actions.php                 |   2 +
 resources/lang/en/settings.php                |  18 +
 resources/lang/fil/actions.php                |   2 +
 resources/lang/fil/settings.php               |  18 +
 routes/api.php                                |   8 +
 tests/Feature/Api/V1/Settings/AccountTest.php |  11 +
 tests/Feature/Api/V1/Settings/ProfileTest.php |  38 ++
 19 files changed, 966 insertions(+), 17 deletions(-)
 create mode 100644 app/Http/Controllers/Api/V1/Settings/AccountController.php
 create mode 100644 app/Http/Controllers/Api/V1/Settings/ProfileController.php
 create mode 100644 resources/js/views/__backoffice/layouts/Settings.js
 create mode 100644 resources/js/views/__backoffice/layouts/Slave.js
 create mode 100644 resources/js/views/__backoffice/settings/Navigation.js
 create mode 100644 resources/lang/en/settings.php
 create mode 100644 resources/lang/fil/settings.php
 create mode 100644 tests/Feature/Api/V1/Settings/AccountTest.php
 create mode 100644 tests/Feature/Api/V1/Settings/ProfileTest.php

diff --git a/app/Http/Controllers/Api/V1/Settings/AccountController.php b/app/Http/Controllers/Api/V1/Settings/AccountController.php
new file mode 100644
index 0000000..6a9cf7c
--- /dev/null
+++ b/app/Http/Controllers/Api/V1/Settings/AccountController.php
@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Http\Controllers\Api\V1\Settings;
+
+use App\User;
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+use App\Http\Controllers\Controller;
+
+class AccountController extends Controller
+{
+
+}
\ No newline at end of file
diff --git a/app/Http/Controllers/Api/V1/Settings/ProfileController.php b/app/Http/Controllers/Api/V1/Settings/ProfileController.php
new file mode 100644
index 0000000..0a9b1b2
--- /dev/null
+++ b/app/Http/Controllers/Api/V1/Settings/ProfileController.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Controllers\Api\V1\Settings;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+use App\Http\Controllers\Controller;
+
+class ProfileController extends Controller
+{
+    /**
+     * Update User's profile
+     *
+     * @param Illuminate\Http\Request $request
+     *
+     * @return Illuminate\Http\JsonResponse
+     */
+    public function update(Request $request) : JsonResponse
+    {
+        $user = auth()->guard('api')->user();
+
+        $request->validate([
+            'firstname' => 'required|string|max:255',
+            'lastname' => 'required|string|max:255',
+
+            'gender' => 'nullable|in:female,male',
+            'birthdate' =>
+                'nullable|date:Y-m-d|before:'.now()->subYear(10)->format('Y-m-d'),
+            'address' => 'nullable|string|max:510',
+        ]);
+
+        $attributes = $request->all();
+        unset($attributes['auth_token']);
+
+        $user->fill($attributes);
+        $user->update();
+
+        return response()->json($user);
+    }
+}
\ No newline at end of file
diff --git a/resources/js/config/locale.js b/resources/js/config/locale.js
index 7182278..626ab71 100644
--- a/resources/js/config/locale.js
+++ b/resources/js/config/locale.js
@@ -3,6 +3,7 @@ export default {
     'en.actions': require('../../lang/en/actions.php'),
     'en.navigation': require('../../lang/en/navigation.php'),
     'en.resources': require('../../lang/en/resources.php'),
+    'en.settings': require('../../lang/en/settings.php'),
     'en.table': require('../../lang/en/table.php'),
     'en.validation': require('../../lang/en/validation.php'),
 
@@ -10,6 +11,7 @@ export default {
     'fil.actions': require('../../lang/fil/actions.php'),
     'fil.navigation': require('../../lang/fil/navigation.php'),
     'fil.resources': require('../../lang/fil/resources.php'),
+    'fil.settings': require('../../lang/fil/settings.php'),
     'fil.table': require('../../lang/fil/table.php'),
     'fil.validation': require('../../lang/fil/validation.php'),
 };
diff --git a/resources/js/views/__backoffice/layouts/Clean.js b/resources/js/views/__backoffice/layouts/Clean.js
index 8034e6a..4ca4947 100644
--- a/resources/js/views/__backoffice/layouts/Clean.js
+++ b/resources/js/views/__backoffice/layouts/Clean.js
@@ -1,14 +1,22 @@
 import React, { useState } from 'react';
-
-import { CssBaseline, Hidden, withStyles } from '@material-ui/core';
+import PropTypes from 'prop-types';
+
+import {
+    CircularProgress,
+    CssBaseline,
+    Grid,
+    Hidden,
+    withStyles,
+} from '@material-ui/core';
 import classNames from 'classnames';
 
+import { Snackbar } from '../../../ui';
 import { LinearDeterminate } from '../../../ui/Loaders';
 import { Footer, Header, Sidebar } from '../partials';
 
 function Clean(props) {
     const { classes, ...other } = props;
-    const { history, loading } = props;
+    const { history, loading, message } = props;
 
     const [drawerOpen, setDrawer] = useState(false);
     const [localeMenuOpen, setLocaleMenu] = useState(false);
@@ -21,6 +29,19 @@ function Clean(props) {
         onClose: () => setDrawer(!drawerOpen),
     });
 
+    const renderLoading = (
+        <Grid
+            container
+            className={classes.root}
+            justify="center"
+            alignItems="center"
+        >
+            <Grid item>
+                <CircularProgress color="primary" />
+            </Grid>
+        </Grid>
+    );
+
     return (
         <>
             {loading && <LinearDeterminate className={classes.loader} />}
@@ -59,16 +80,38 @@ function Clean(props) {
                             [classes.contentShift]: drawerOpen,
                         })}
                     >
-                        {props.children}
+                        {loading ? renderLoading : props.children}
                     </main>
                 </div>
 
                 <Footer />
             </div>
+
+            {message && message.hasOwnProperty('type') && (
+                <Snackbar {...message} />
+            )}
         </>
     );
 }
 
+Clean.propTypes = {
+    classes: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    match: PropTypes.object.isRequired,
+    pageProps: PropTypes.object.isRequired,
+
+    pageTitle: PropTypes.string,
+    loading: PropTypes.bool,
+    message: PropTypes.object,
+};
+
+Clean.defaultProps = {
+    pageTitle: '',
+    loading: false,
+    message: {},
+};
+
 const drawerWidth = 256;
 
 const styles = theme => ({
diff --git a/resources/js/views/__backoffice/layouts/Settings.js b/resources/js/views/__backoffice/layouts/Settings.js
new file mode 100644
index 0000000..f61fee6
--- /dev/null
+++ b/resources/js/views/__backoffice/layouts/Settings.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Grid, Hidden, withStyles } from '@material-ui/core';
+
+import { Navigation } from '../settings';
+
+function Settings(props) {
+    const { classes, children, navigationProps } = props;
+    const { formVisible } = navigationProps;
+
+    return (
+        <div className={classes.root}>
+            <Grid
+                container
+                spacing={16}
+                justify="center"
+                className={classes.content}
+            >
+                <Hidden mdUp>
+                    {!formVisible && <Navigation {...navigationProps} />}
+                </Hidden>
+
+                <Hidden smDown>
+                    <Navigation {...navigationProps} />
+                </Hidden>
+
+                {children}
+            </Grid>
+        </div>
+    );
+}
+
+Settings.propTypes = {
+    classes: PropTypes.object.isRequired,
+    navigationProps: PropTypes.object.isRequired,
+};
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'center',
+    },
+
+    content: {
+        width: '85%',
+        marginTop: theme.spacing.unit * 3,
+        minHeight: '75vh',
+    },
+});
+
+export default withStyles(styles)(Settings);
diff --git a/resources/js/views/__backoffice/layouts/Slave.js b/resources/js/views/__backoffice/layouts/Slave.js
new file mode 100644
index 0000000..6a471b9
--- /dev/null
+++ b/resources/js/views/__backoffice/layouts/Slave.js
@@ -0,0 +1,190 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    AppBar,
+    colors,
+    CircularProgress,
+    CssBaseline,
+    Grid,
+    IconButton,
+    Toolbar,
+    Tooltip,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
+
+import { ArrowBack as ArrowBackIcon } from '@material-ui/icons';
+
+import { LinearDeterminate } from '../../../ui/Loaders';
+import { Skeleton, Snackbar } from '../../../ui';
+
+function Slave(props) {
+    const { classes, ...other } = props;
+    const { history, location, loading, message, pageTitle } = props;
+
+    const skeletonProps = {
+        color: colors.grey[400],
+        highlightColor: colors.grey[200],
+    };
+
+    const renderLoading = (
+        <Grid
+            container
+            className={classes.root}
+            justify="center"
+            alignItems="center"
+        >
+            <Grid item>
+                <CircularProgress color="primary" />
+            </Grid>
+        </Grid>
+    );
+
+    const renderNavigating = (
+        <>
+            <AppBar
+                color="primary"
+                position="sticky"
+                elevation={0}
+                className={classes.header}
+            >
+                <Toolbar>
+                    <Grid container spacing={8} alignItems="center">
+                        <Grid item>
+                            <Skeleton
+                                {...skeletonProps}
+                                height={25}
+                                width={25}
+                            />
+                        </Grid>
+
+                        <Grid item>
+                            <Skeleton
+                                {...skeletonProps}
+                                height={30}
+                                width={75 + pageTitle.length * 2}
+                            />
+                        </Grid>
+                    </Grid>
+                </Toolbar>
+            </AppBar>
+
+            <main className={classes.content}>{renderLoading}</main>
+        </>
+    );
+
+    const renderNavigated = (
+        <>
+            <AppBar
+                color="primary"
+                position="sticky"
+                elevation={0}
+                className={classes.header}
+            >
+                <Toolbar>
+                    <Grid container spacing={8} alignItems="center">
+                        <Grid item>
+                            <Tooltip title={Lang.get('actions.back')}>
+                                <IconButton
+                                    color="inherit"
+                                    aria-label={Lang.get('actions.back')}
+                                    onClick={() =>
+                                        history.push(
+                                            `${location.pathname}?hidden`,
+                                        )
+                                    }
+                                    className={classes.backButton}
+                                >
+                                    <ArrowBackIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Grid>
+
+                        <Grid item>
+                            <Typography color="inherit" variant="h5">
+                                {pageTitle}
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                </Toolbar>
+            </AppBar>
+
+            <main className={classes.content}>{props.children}</main>
+        </>
+    );
+
+    return (
+        <>
+            {loading && <LinearDeterminate className={classes.loader} />}
+
+            <div className={classes.root}>
+                <CssBaseline />
+
+                <div className={classes.contentWrapper}>
+                    {loading ? renderNavigating : renderNavigated}
+                </div>
+            </div>
+
+            {message && message.hasOwnProperty('type') && (
+                <Snackbar {...message} />
+            )}
+        </>
+    );
+}
+
+Slave.propTypes = {
+    classes: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    match: PropTypes.object.isRequired,
+    pageProps: PropTypes.object.isRequired,
+
+    pageTitle: PropTypes.string,
+    loading: PropTypes.bool,
+    message: PropTypes.object,
+};
+
+Slave.defaultProps = {
+    pageTitle: '',
+    loading: false,
+    message: {},
+};
+
+const styles = theme => ({
+    root: {
+        display: 'flex',
+        position: 'relative',
+        minHeight: '100vh',
+        maxWidth: '100%',
+    },
+
+    contentWrapper: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflowX: 'scroll',
+    },
+
+    header: {
+        paddingTop: 8,
+        paddingBottom: 8,
+    },
+
+    backButton: {
+        marginLeft: -theme.spacing.unit,
+    },
+
+    content: {
+        flex: 1,
+        padding: `0 ${theme.spacing.unit}px`,
+        marginBottom: 75,
+        marginLeft: 0,
+        [theme.breakpoints.up('sm')]: {
+            marginBottom: 50,
+            padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+        },
+    },
+});
+
+export default withStyles(styles)(Slave);
diff --git a/resources/js/views/__backoffice/layouts/index.js b/resources/js/views/__backoffice/layouts/index.js
index f4f7a35..12e4eeb 100644
--- a/resources/js/views/__backoffice/layouts/index.js
+++ b/resources/js/views/__backoffice/layouts/index.js
@@ -2,3 +2,5 @@ import loadable from '@loadable/component';
 
 export const Clean = loadable(() => import('./Clean'));
 export const Master = loadable(() => import('./Master'));
+export const Settings = loadable(() => import('./Settings'));
+export const Slave = loadable(() => import('./Slave'));
diff --git a/resources/js/views/__backoffice/partials/Header.js b/resources/js/views/__backoffice/partials/Header.js
index 3d32b73..10a77aa 100644
--- a/resources/js/views/__backoffice/partials/Header.js
+++ b/resources/js/views/__backoffice/partials/Header.js
@@ -325,7 +325,6 @@ const Header = props => {
                                         {...skeletonProps}
                                         height={30}
                                         width={75 + pageTitle.length * 2}
-                                        className={classes.link}
                                     />
                                 </Grid>
                             )}
diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js
index 648df86..c91d83e 100644
--- a/resources/js/views/__backoffice/settings/Account.js
+++ b/resources/js/views/__backoffice/settings/Account.js
@@ -1,17 +1,71 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-import { Typography } from '@material-ui/core';
+import { Grid, Hidden, Paper, Typography, withStyles } from '@material-ui/core';
 
-import { Clean as CleanLayout } from '../layouts';
+import * as UrlUtils from '../../../utils/URL';
+import {
+    Clean as CleanLayout,
+    Settings as SettingsLayout,
+    Slave as SlaveLayout,
+} from '../layouts';
 
 function Account(props) {
     const { classes, ...other } = props;
+    const { location } = props;
+    const [formVisible, setFormVisibility] = useState(false);
+
+    useEffect(() => {
+        const queryParams = UrlUtils._queryParams(location.search);
+
+        if (queryParams.hasOwnProperty('visible')) {
+            setFormVisibility(true);
+        } else if (queryParams.hasOwnProperty('hidden')) {
+            setFormVisibility(false);
+        }
+    });
+
+    const renderForm = (
+        <Grid item md={8} sm={12} xs={12}>
+            <Paper className={classes.form}>
+                <Typography>Account Page</Typography>
+            </Paper>
+        </Grid>
+    );
+
+    const renderBody = (
+        <SettingsLayout
+            navigationProps={{
+                ...other,
+                formVisible,
+                setFormVisibility: () => setFormVisibility(!formVisible),
+            }}
+        >
+            <Hidden mdUp>{formVisible && renderForm}</Hidden>
+
+            <Hidden smDown>{renderForm}</Hidden>
+        </SettingsLayout>
+    );
+
+    if (formVisible) {
+        return (
+            <SlaveLayout {...other} pageTitle="Account" loading={false}>
+                {renderBody}
+            </SlaveLayout>
+        );
+    }
 
     return (
         <CleanLayout {...other} pageTitle="Account" loading={false}>
-            <Typography>Account Page</Typography>
+            {renderBody}
         </CleanLayout>
     );
 }
 
-export default Account;
+const styles = theme => ({
+    form: {
+        padding: theme.spacing.unit * 3,
+        minHeight: '100%',
+    },
+});
+
+export default withStyles(styles)(Account);
diff --git a/resources/js/views/__backoffice/settings/Navigation.js b/resources/js/views/__backoffice/settings/Navigation.js
new file mode 100644
index 0000000..39774ec
--- /dev/null
+++ b/resources/js/views/__backoffice/settings/Navigation.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Grid,
+    Hidden,
+    ListItemIcon,
+    MenuList,
+    MenuItem,
+    Paper,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
+
+import { ChevronRight as ChevronRightIcon } from '@material-ui/icons';
+
+function Navigation(props) {
+    const { classes, history, location } = props;
+
+    const links = [
+        {
+            path: '/settings/profile',
+            text: 'Profile',
+        },
+
+        {
+            path: '/settings/account',
+            text: 'Account',
+        },
+    ];
+
+    return (
+        <Grid item md={4} sm={12} xs={12}>
+            <Paper>
+                <MenuList>
+                    {links.map(link => (
+                        <div key={link.path}>
+                            <Hidden mdUp>
+                                <MenuItem
+                                    onClick={() =>
+                                        history.push(`${link.path}?visible`)
+                                    }
+                                >
+                                    <Typography>{link.text}</Typography>
+
+                                    <ListItemIcon className={classes.icon}>
+                                        <ChevronRightIcon />
+                                    </ListItemIcon>
+                                </MenuItem>
+                            </Hidden>
+
+                            <Hidden smDown>
+                                <MenuItem
+                                    onClick={() => history.push(link.path)}
+                                    className={
+                                        location.pathname === link.path
+                                            ? classes.active
+                                            : ''
+                                    }
+                                >
+                                    <Typography>{link.text}</Typography>
+
+                                    <ListItemIcon className={classes.icon}>
+                                        <ChevronRightIcon />
+                                    </ListItemIcon>
+                                </MenuItem>
+                            </Hidden>
+                        </div>
+                    ))}
+                </MenuList>
+            </Paper>
+        </Grid>
+    );
+}
+
+Navigation.propTypes = {
+    history: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired,
+    match: PropTypes.object.isRequired,
+    pageProps: PropTypes.object.isRequired,
+};
+
+const styles = theme => ({
+    icon: {
+        marginLeft: 'auto',
+    },
+
+    active: {
+        borderRight: `3px solid ${theme.palette.primary.main}`,
+    },
+});
+
+export default withStyles(styles)(Navigation);
diff --git a/resources/js/views/__backoffice/settings/Profile.js b/resources/js/views/__backoffice/settings/Profile.js
index 34372af..a4812d2 100644
--- a/resources/js/views/__backoffice/settings/Profile.js
+++ b/resources/js/views/__backoffice/settings/Profile.js
@@ -1,17 +1,380 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
 
-import { Typography } from '@material-ui/core';
+import {
+    Button,
+    CircularProgress,
+    FormControl,
+    FormHelperText,
+    Grid,
+    Hidden,
+    Input,
+    InputLabel,
+    MenuItem,
+    Paper,
+    Select,
+    TextField,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
 
-import { Clean as CleanLayout } from '../layouts';
+import { MuiPickersUtilsProvider, DatePicker } from 'material-ui-pickers';
+import MomentUtils from '@date-io/moment';
+
+import * as UrlUtils from '../../../utils/URL';
+import {
+    Clean as CleanLayout,
+    Settings as SettingsLayout,
+    Slave as SlaveLayout,
+} from '../layouts';
 
 function Profile(props) {
     const { classes, ...other } = props;
+    const { location, pageProps } = props;
+    const { user } = pageProps;
+
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState({});
+    const [formVisible, setFormVisibility] = useState(false);
+
+    /**
+     * Handle form submit, this should send an API response
+     * to update the profile.
+     *
+     * @param {object} values
+     * @param {object} form
+     *
+     * @return {undefined}
+     */
+    const handleSubmit = async (values, { setSubmitting }) => {
+        setSubmitting(false);
+
+        const updateProfile = () =>
+            axios.patch('/api/v1/settings/profile', values);
+
+        try {
+            setLoading(true);
+
+            await updateProfile();
+
+            setMessage({
+                type: 'success',
+                body: Lang.get('settings.profile_updated'),
+                closed: () => setMessage({}),
+            });
+
+            setLoading(false);
+        } catch (error) {
+            setMessage({
+                type: 'error',
+                body: Lang.get('settings.profile_not_updated'),
+                closed: () => setMessage({}),
+                actionText: Lang.get('actions.retry'),
+                action: async () => await updateProfile(),
+            });
+
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        const queryParams = UrlUtils._queryParams(location.search);
+
+        if (queryParams.hasOwnProperty('visible')) {
+            setFormVisibility(true);
+        } else if (queryParams.hasOwnProperty('hidden')) {
+            setFormVisibility(false);
+        }
+    });
+
+    const renderForm = (
+        <Grid item md={8} sm={12} xs={12}>
+            <Paper className={classes.form}>
+                <Formik
+                    initialValues={{
+                        firstname: user.firstname,
+                        middlename: user.middlename,
+                        lastname: user.lastname,
+
+                        gender: user.gender,
+                        birthdate: user.birthdate,
+                        address: user.address,
+                    }}
+                    validationSchema={Yup.object().shape({
+                        firstname: Yup.string().required(
+                            Lang.get('validation.required', {
+                                attribute: 'firstname',
+                            }),
+                        ),
+
+                        lastname: Yup.string().required(
+                            Lang.get('validation.required', {
+                                attribute: 'lastname',
+                            }),
+                        ),
+                    })}
+                    onSubmit={async (values, form) => {
+                        let mappedValues = {};
+                        let valuesArray = Object.values(values);
+
+                        // Format values specially the object ones (i.e Moment)
+                        Object.keys(values).forEach((filter, key) => {
+                            if (
+                                valuesArray[key] !== null &&
+                                typeof valuesArray[key] === 'object' &&
+                                valuesArray[key].hasOwnProperty(
+                                    '_isAMomentObject',
+                                )
+                            ) {
+                                mappedValues[filter] = moment(
+                                    valuesArray[key],
+                                ).format('YYYY-MM-DD');
+
+                                return;
+                            }
+
+                            mappedValues[filter] = valuesArray[key];
+                        });
+
+                        await handleSubmit(mappedValues, form);
+                    }}
+                    validateOnBlur={false}
+                >
+                    {({
+                        values,
+                        errors,
+                        submitCount,
+                        isSubmitting,
+                        handleChange,
+                        setFieldValue,
+                    }) => (
+                        <Form>
+                            <Typography variant="h6" gutterBottom>
+                                Personal Information
+                            </Typography>
+
+                            <TextField
+                                id="firstname"
+                                name="firstname"
+                                label="First Name"
+                                placeholder="Enter your firstname"
+                                value={values.firstname}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('firstname')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('firstname') &&
+                                    errors.firstname
+                                }
+                            />
+
+                            <TextField
+                                id="middlename"
+                                name="middlename"
+                                label="Middle Name"
+                                placeholder="Enter your middlename"
+                                value={values.middlename}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('middlename')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('middlename') &&
+                                    errors.middlename
+                                }
+                            />
+
+                            <TextField
+                                id="lastname"
+                                name="lastname"
+                                label="Last Name"
+                                placeholder="Enter your lastname"
+                                value={values.lastname}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('lastname')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('lastname') &&
+                                    errors.lastname
+                                }
+                            />
+
+                            <FormControl
+                                fullWidth
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('gender')
+                                }
+                            >
+                                <InputLabel htmlFor="gender">Gender</InputLabel>
+
+                                <Select
+                                    id="gender"
+                                    name="gender"
+                                    value={values.gender}
+                                    onChange={handleChange}
+                                    input={<Input fullWidth />}
+                                    autoWidth
+                                >
+                                    <MenuItem value="">
+                                        Please select the gender
+                                    </MenuItem>
+
+                                    <MenuItem value="female">Female</MenuItem>
+
+                                    <MenuItem value="male">Male</MenuItem>
+                                </Select>
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('gender') && (
+                                        <FormHelperText>
+                                            {errors.gender}
+                                        </FormHelperText>
+                                    )}
+                            </FormControl>
+
+                            <FormControl
+                                fullWidth
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('birthdate')
+                                }
+                            >
+                                <MuiPickersUtilsProvider utils={MomentUtils}>
+                                    <DatePicker
+                                        id="birthdate"
+                                        name="birthdate"
+                                        label="Birthdate"
+                                        placeholder="Please pick your birthdate"
+                                        value={values.birthdate}
+                                        onChange={date =>
+                                            setFieldValue('birthdate', date)
+                                        }
+                                        format="YYYY-MM-DD"
+                                        maxDate={moment()
+                                            .subtract(10, 'y')
+                                            .subtract(1, 'd')
+                                            .format('YYYY-MM-DD')}
+                                        keyboard
+                                        clearable
+                                        disableFuture
+                                    />
+                                </MuiPickersUtilsProvider>
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('birthdate') && (
+                                        <FormHelperText>
+                                            {errors.birthdate}
+                                        </FormHelperText>
+                                    )}
+                            </FormControl>
+
+                            <TextField
+                                id="address"
+                                name="address"
+                                label="Address"
+                                placeholder="Enter your address"
+                                value={values.address}
+                                onChange={handleChange}
+                                fullWidth
+                                multiline
+                                rows={3}
+                                margin="dense"
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('address')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('address') &&
+                                    errors.address
+                                }
+                            />
+
+                            <div className={classes.dense} />
+
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                color="primary"
+                                disabled={
+                                    (errors &&
+                                        Object.keys(errors).length > 0 &&
+                                        submitCount > 0) ||
+                                    isSubmitting
+                                }
+                            >
+                                {loading && (
+                                    <div className={classes.spinner}>
+                                        <CircularProgress
+                                            size={14}
+                                            color="inherit"
+                                        />
+                                    </div>
+                                )}
+
+                                <Typography color="inherit">Update</Typography>
+                            </Button>
+                        </Form>
+                    )}
+                </Formik>
+            </Paper>
+        </Grid>
+    );
+
+    const renderBody = (
+        <SettingsLayout
+            navigationProps={{
+                ...other,
+                formVisible,
+                setFormVisibility: () => setFormVisibility(!formVisible),
+            }}
+        >
+            <Hidden mdUp>{formVisible && renderForm}</Hidden>
+
+            <Hidden smDown>{renderForm}</Hidden>
+        </SettingsLayout>
+    );
+
+    const Layout = formVisible ? SlaveLayout : CleanLayout;
 
     return (
-        <CleanLayout {...other} pageTitle="Profile" loading={false}>
-            <Typography>Profile Page</Typography>
-        </CleanLayout>
+        <Layout {...other} pageTitle="Profile" message={message}>
+            {renderBody}
+        </Layout>
     );
 }
 
-export default Profile;
+const styles = theme => ({
+    form: {
+        padding: theme.spacing.unit * 3,
+        minHeight: '100%',
+    },
+
+    dense: {
+        marginTop: 16,
+    },
+
+    spinner: {
+        marginRight: theme.spacing.unit,
+    },
+});
+
+export default withStyles(styles)(Profile);
diff --git a/resources/js/views/__backoffice/settings/index.js b/resources/js/views/__backoffice/settings/index.js
index aa46ed9..a039113 100644
--- a/resources/js/views/__backoffice/settings/index.js
+++ b/resources/js/views/__backoffice/settings/index.js
@@ -1,4 +1,5 @@
 import loadable from '@loadable/component';
 
 export const Account = loadable(() => import('./Account'));
+export const Navigation = loadable(() => import('./Navigation'));
 export const Profile = loadable(() => import('./Profile'));
diff --git a/resources/lang/en/actions.php b/resources/lang/en/actions.php
index 9d45a17..bac0866 100644
--- a/resources/lang/en/actions.php
+++ b/resources/lang/en/actions.php
@@ -11,6 +11,8 @@
     |
     */
 
+    'back' => 'Back',
+    'next' => 'Next',
     'confirm' => 'Confirm',
     'cancel' => 'Cancel',
     'continue' => 'Continue',
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
new file mode 100644
index 0000000..67fae80
--- /dev/null
+++ b/resources/lang/en/settings.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Settings Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used in the frontend of the application,
+    | specifically in actions, links in different kind of settings.
+    |
+    */
+
+    'profile_updated' => 'Profile successfully updated!',
+    'profile_not_updated' => 'Profile was not updated!',
+    'account_updated' => 'Account successfully updated!',
+    'account_not_updated' => 'Account was not updated!',
+];
\ No newline at end of file
diff --git a/resources/lang/fil/actions.php b/resources/lang/fil/actions.php
index 4ed7f2a..d0163bb 100644
--- a/resources/lang/fil/actions.php
+++ b/resources/lang/fil/actions.php
@@ -11,6 +11,8 @@
     |
     */
 
+    'back' => 'Bumalik',
+    'next' => 'Susunod',
     'confirm' => 'I-Confirm',
     'cancel' => 'I-cancel',
     'continue' => 'Ituloy',
diff --git a/resources/lang/fil/settings.php b/resources/lang/fil/settings.php
new file mode 100644
index 0000000..53a0bd0
--- /dev/null
+++ b/resources/lang/fil/settings.php
@@ -0,0 +1,18 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Settings Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used in the frontend of the application,
+    | specifically in actions, links in different kind of settings.
+    |
+    */
+
+    'profile_updated' => 'Ang iyong Profile ay nabago!',
+    'profile_not_updated' => 'Ang iyong Profile ay hindi nabago!',
+    'account_updated' => 'Ang iyong Account ay nabago!',
+    'account_not_updated' => 'Ang iyong Account ay hindi nabago!',
+];
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 65469b7..c6c4a81 100755
--- a/routes/api.php
+++ b/routes/api.php
@@ -30,6 +30,14 @@
         });
 
         Route::middleware('auth:api')->group(function () {
+            Route::namespace('Settings')->prefix('settings')->name('settings.')->group(function() {
+                Route::patch('profile', 'ProfileController@update')->name('profile');
+
+                Route::prefix('account')->name('account.')->group(function() {
+                    Route::patch('password', 'AccountController@updatePassword')->name('password');
+                });
+            });
+
             Route::resource('users', 'UsersController', ['except' => ['edit', 'create']]);
             Route::prefix('users')->name('users.')->group(function () {
                 Route::patch('{user}/restore', 'UsersController@restore')->name('restore');
diff --git a/tests/Feature/Api/V1/Settings/AccountTest.php b/tests/Feature/Api/V1/Settings/AccountTest.php
new file mode 100644
index 0000000..7087199
--- /dev/null
+++ b/tests/Feature/Api/V1/Settings/AccountTest.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace Tests\Feature\Api\V1;
+
+use App\User;
+use Tests\Feature\Api\V1\BaseTest;
+
+class AccountTest extends BaseTest
+{
+    //
+}
\ No newline at end of file
diff --git a/tests/Feature/Api/V1/Settings/ProfileTest.php b/tests/Feature/Api/V1/Settings/ProfileTest.php
new file mode 100644
index 0000000..194ddee
--- /dev/null
+++ b/tests/Feature/Api/V1/Settings/ProfileTest.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Tests\Feature\Api\V1;
+
+use App\User;
+use Tests\Feature\Api\V1\BaseTest;
+
+class ProfileTest extends BaseTest
+{
+    /** @test */
+    public function a_user_can_update_its_profile()
+    {
+        $gender = $this->faker->randomElements(['female', 'male'])[0];
+
+        $attributes = [
+            'firstname' => ($firstName = (
+                $gender === 'female'
+                    ? $this->faker->firstNameFemale
+                    : $this->faker->firstNameMale
+            )),
+            'lastname' => ($lastName = $this->faker->lastName),
+
+            'gender' =>  $gender,
+            'birthdate' => $this->faker->dateTimeThisCentury->format('Y-m-d'),
+            'address' => $this->faker->address,
+        ];
+
+        // The response body that should be sent alongside the request.
+        $body = array_merge($this->getDefaultPayload(), $attributes);
+
+        // Assuming that the user's profile has been updated,
+        // It must return a 200 response status and then,
+        // It must return a response containing the updated attributes.
+        $this->patch(route('api.v1.settings.profile'), $body)
+            ->assertStatus(200)
+            ->assertJsonFragment($attributes);
+    }
+}
\ No newline at end of file

From c20fc69ce9c0f5b520117f15ae40876c0b3ba80b Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sat, 20 Apr 2019 21:51:35 +0800
Subject: [PATCH 5/6] wip

---
 .../Api/V1/Settings/AccountController.php     |  33 +-
 .../Api/V1/Settings/ProfileController.php     |   2 +-
 .../js/views/__backoffice/settings/Account.js | 334 +++++++++++++++++-
 .../js/views/__backoffice/settings/Profile.js |  26 +-
 resources/lang/en/auth.php                    |   1 +
 resources/lang/en/settings.php                |   6 +-
 resources/lang/fil/auth.php                   |   1 +
 resources/lang/fil/settings.php               |   7 +-
 routes/api.php                                |   4 +-
 tests/Feature/Api/V1/Settings/AccountTest.php |  22 +-
 tests/Feature/Api/V1/Settings/ProfileTest.php |   2 +-
 11 files changed, 401 insertions(+), 37 deletions(-)

diff --git a/app/Http/Controllers/Api/V1/Settings/AccountController.php b/app/Http/Controllers/Api/V1/Settings/AccountController.php
index 6a9cf7c..b8ffdb6 100644
--- a/app/Http/Controllers/Api/V1/Settings/AccountController.php
+++ b/app/Http/Controllers/Api/V1/Settings/AccountController.php
@@ -2,12 +2,41 @@
 
 namespace App\Http\Controllers\Api\V1\Settings;
 
-use App\User;
+use Hash;
 use Illuminate\Http\Request;
 use Illuminate\Http\JsonResponse;
 use App\Http\Controllers\Controller;
+use Illuminate\Validation\ValidationException;
 
 class AccountController extends Controller
 {
+    /**
+     * Update User's password
+     *
+     * @param Illuminate\Http\Request $request
+     *
+     * @return Illuminate\Http\JsonResponse
+     */
+    public function updatePassword(Request $request) : JsonResponse
+    {
+        $request->validate([
+            'old_password'  => 'required|string',
+            'password' => 'required|string|confirmed|min:8|pwned:100'
+        ]);
 
-}
\ No newline at end of file
+        $user = auth()->guard('api')->user();
+
+        if (! Hash::check($request->input('old_password'), $user->password)) {
+            throw ValidationException::withMessages([
+                'old_password' => [trans('auth.password_mismatch')]
+            ]);
+
+            return response()->json('Password was not Changed!', 422);
+        }
+
+        $user->password = bcrypt($request->input('password'));
+        $user->update();
+
+        return response()->json('Password Changed!');
+    }
+}
diff --git a/app/Http/Controllers/Api/V1/Settings/ProfileController.php b/app/Http/Controllers/Api/V1/Settings/ProfileController.php
index 0a9b1b2..c1c7beb 100644
--- a/app/Http/Controllers/Api/V1/Settings/ProfileController.php
+++ b/app/Http/Controllers/Api/V1/Settings/ProfileController.php
@@ -37,4 +37,4 @@ public function update(Request $request) : JsonResponse
 
         return response()->json($user);
     }
-}
\ No newline at end of file
+}
diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js
index c91d83e..7e63b03 100644
--- a/resources/js/views/__backoffice/settings/Account.js
+++ b/resources/js/views/__backoffice/settings/Account.js
@@ -1,6 +1,24 @@
 import React, { useState, useEffect } from 'react';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
 
-import { Grid, Hidden, Paper, Typography, withStyles } from '@material-ui/core';
+import {
+    Button,
+    CircularProgress,
+    Grid,
+    Hidden,
+    IconButton,
+    InputAdornment,
+    Paper,
+    TextField,
+    Typography,
+    withStyles,
+} from '@material-ui/core';
+
+import {
+    Visibility as VisibilityIcon,
+    VisibilityOff as VisibilityOffIcon,
+} from '@material-ui/icons';
 
 import * as UrlUtils from '../../../utils/URL';
 import {
@@ -11,8 +29,71 @@ import {
 
 function Account(props) {
     const { classes, ...other } = props;
-    const { location } = props;
+    const { location, pageProps } = props;
+    const { user } = pageProps;
+
+    const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState({});
     const [formVisible, setFormVisibility] = useState(false);
+    const [oldPasswordVisible, setOldPasswordVisibility] = useState(false);
+    const [passwordVisible, setPasswordVisibility] = useState(false);
+    const [
+        passwordConfirmationVisible,
+        setPasswordConfirmationVisibility,
+    ] = useState(false);
+
+    /**
+     * Handle password form submit, this should send an API response
+     * to update the password.
+     *
+     * @param {object} values
+     * @param {object} form
+     *
+     * @return {undefined}
+     */
+    const handlePasswordSubmit = async (
+        values,
+        { setSubmitting, setErrors },
+    ) => {
+        setSubmitting(false);
+
+        const updatePassword = () =>
+            axios.patch('/api/v1/settings/account/password', values);
+
+        try {
+            setLoading(true);
+
+            await updatePassword();
+
+            setMessage({
+                type: 'success',
+                body: Lang.get('settings.account_password_updated'),
+                closed: () => setMessage({}),
+            });
+
+            setLoading(false);
+        } catch (error) {
+            if (!error.response) {
+                return;
+            }
+
+            const { errors } = error.response.data;
+
+            if (errors) {
+                setErrors(errors);
+            } else {
+                setMessage({
+                    type: 'error',
+                    body: Lang.get('settings.account_password_not_updated'),
+                    closed: () => setMessage({}),
+                    actionText: Lang.get('actions.retry'),
+                    action: async () => await updatePassword(),
+                });
+            }
+
+            setLoading(false);
+        }
+    };
 
     useEffect(() => {
         const queryParams = UrlUtils._queryParams(location.search);
@@ -24,10 +105,229 @@ function Account(props) {
         }
     });
 
-    const renderForm = (
+    const renderPasswordForm = (
         <Grid item md={8} sm={12} xs={12}>
             <Paper className={classes.form}>
-                <Typography>Account Page</Typography>
+                <Formik
+                    initialValues={{
+                        old_password: '',
+                        password: '',
+                        password_confirmation: '',
+                    }}
+                    validationSchema={Yup.object().shape({
+                        old_password: Yup.string().required(
+                            Lang.get('validation.required', {
+                                attribute: 'old password',
+                            }),
+                        ),
+
+                        password: Yup.string()
+                            .required(
+                                Lang.get('validation.required', {
+                                    attribute: 'password',
+                                }),
+                            )
+                            .min(
+                                8,
+                                Lang.get('validation.min.string', {
+                                    attribute: 'password',
+                                    min: 8,
+                                }),
+                            )
+                            .oneOf(
+                                [Yup.ref('password_confirmation'), null],
+                                Lang.get('validation.confirmed', {
+                                    attribute: 'password',
+                                }),
+                            ),
+
+                        password_confirmation: Yup.string()
+                            .required(
+                                Lang.get('validation.required', {
+                                    attribute: 'password confirmation',
+                                }),
+                            )
+                            .min(
+                                8,
+                                Lang.get('validation.min.string', {
+                                    attribute: 'password confirmation',
+                                    min: 8,
+                                }),
+                            ),
+                    })}
+                    onSubmit={handlePasswordSubmit}
+                    validateOnBlur={false}
+                >
+                    {({
+                        values,
+                        errors,
+                        submitCount,
+                        isSubmitting,
+                        handleChange,
+                    }) => (
+                        <Form>
+                            <Typography variant="h6" gutterBottom>
+                                Change Password
+                            </Typography>
+
+                            <TextField
+                                type={oldPasswordVisible ? 'text' : 'password'}
+                                id="old_password"
+                                name="old_password"
+                                label="Old Password"
+                                placeholder="Enter your old password"
+                                value={values.old_password}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <IconButton
+                                                aria-label="Toggle old password visibility"
+                                                onClick={() =>
+                                                    setOldPasswordVisibility(
+                                                        !oldPasswordVisible,
+                                                    )
+                                                }
+                                            >
+                                                {oldPasswordVisible ? (
+                                                    <VisibilityOffIcon />
+                                                ) : (
+                                                    <VisibilityIcon />
+                                                )}
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ),
+                                }}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('old_password')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('old_password') &&
+                                    errors.old_password
+                                }
+                            />
+
+                            <TextField
+                                type={passwordVisible ? 'text' : 'password'}
+                                id="password"
+                                name="password"
+                                label="Password"
+                                placeholder="Enter your password"
+                                value={values.password}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <IconButton
+                                                aria-label="Toggle password visibility"
+                                                onClick={() =>
+                                                    setPasswordVisibility(
+                                                        !passwordVisible,
+                                                    )
+                                                }
+                                            >
+                                                {passwordVisible ? (
+                                                    <VisibilityOffIcon />
+                                                ) : (
+                                                    <VisibilityIcon />
+                                                )}
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ),
+                                }}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('password')
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('password') &&
+                                    errors.password
+                                }
+                            />
+
+                            <TextField
+                                type={
+                                    passwordConfirmationVisible
+                                        ? 'text'
+                                        : 'password'
+                                }
+                                id="password_confirmation"
+                                name="password_confirmation"
+                                label="Password Confirmation"
+                                placeholder="Enter your password again"
+                                value={values.password_confirmation}
+                                onChange={handleChange}
+                                fullWidth
+                                margin="dense"
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <IconButton
+                                                aria-label="Toggle password confirmation visibility"
+                                                onClick={() =>
+                                                    setPasswordConfirmationVisibility(
+                                                        !passwordConfirmationVisible,
+                                                    )
+                                                }
+                                            >
+                                                {passwordConfirmationVisible ? (
+                                                    <VisibilityOffIcon />
+                                                ) : (
+                                                    <VisibilityIcon />
+                                                )}
+                                            </IconButton>
+                                        </InputAdornment>
+                                    ),
+                                }}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty(
+                                        'password_confirmation',
+                                    )
+                                }
+                                helperText={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty(
+                                        'password_confirmation',
+                                    ) &&
+                                    errors.password_confirmation
+                                }
+                            />
+
+                            <div className={classes.dense} />
+
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                color="primary"
+                                disabled={
+                                    (errors &&
+                                        Object.keys(errors).length > 0 &&
+                                        submitCount > 0) ||
+                                    isSubmitting
+                                }
+                            >
+                                {loading && (
+                                    <div className={classes.spinner}>
+                                        <CircularProgress
+                                            size={14}
+                                            color="inherit"
+                                        />
+                                    </div>
+                                )}
+
+                                <Typography color="inherit">Change</Typography>
+                            </Button>
+                        </Form>
+                    )}
+                </Formik>
             </Paper>
         </Grid>
     );
@@ -40,24 +340,20 @@ function Account(props) {
                 setFormVisibility: () => setFormVisibility(!formVisible),
             }}
         >
-            <Hidden mdUp>{formVisible && renderForm}</Hidden>
+            <Hidden mdUp>{formVisible && <>{renderPasswordForm}</>}</Hidden>
 
-            <Hidden smDown>{renderForm}</Hidden>
+            <Hidden smDown>
+                <>{renderPasswordForm}</>
+            </Hidden>
         </SettingsLayout>
     );
 
-    if (formVisible) {
-        return (
-            <SlaveLayout {...other} pageTitle="Account" loading={false}>
-                {renderBody}
-            </SlaveLayout>
-        );
-    }
+    const Layout = formVisible ? SlaveLayout : CleanLayout;
 
     return (
-        <CleanLayout {...other} pageTitle="Account" loading={false}>
+        <Layout {...other} pageTitle="Account" message={message}>
             {renderBody}
-        </CleanLayout>
+        </Layout>
     );
 }
 
@@ -66,6 +362,14 @@ const styles = theme => ({
         padding: theme.spacing.unit * 3,
         minHeight: '100%',
     },
+
+    dense: {
+        marginTop: 16,
+    },
+
+    spinner: {
+        marginRight: theme.spacing.unit,
+    },
 });
 
 export default withStyles(styles)(Account);
diff --git a/resources/js/views/__backoffice/settings/Profile.js b/resources/js/views/__backoffice/settings/Profile.js
index a4812d2..825b8a8 100644
--- a/resources/js/views/__backoffice/settings/Profile.js
+++ b/resources/js/views/__backoffice/settings/Profile.js
@@ -47,7 +47,7 @@ function Profile(props) {
      *
      * @return {undefined}
      */
-    const handleSubmit = async (values, { setSubmitting }) => {
+    const handleSubmit = async (values, { setSubmitting, setErrors }) => {
         setSubmitting(false);
 
         const updateProfile = () =>
@@ -66,13 +66,23 @@ function Profile(props) {
 
             setLoading(false);
         } catch (error) {
-            setMessage({
-                type: 'error',
-                body: Lang.get('settings.profile_not_updated'),
-                closed: () => setMessage({}),
-                actionText: Lang.get('actions.retry'),
-                action: async () => await updateProfile(),
-            });
+            if (!error.response) {
+                return;
+            }
+
+            const { errors } = error.response.data;
+
+            if (errors) {
+                setErrors(errors);
+            } else {
+                setMessage({
+                    type: 'error',
+                    body: Lang.get('settings.profile_not_updated'),
+                    closed: () => setMessage({}),
+                    actionText: Lang.get('actions.retry'),
+                    action: async () => await updateProfile(),
+                });
+            }
 
             setLoading(false);
         }
diff --git a/resources/lang/en/auth.php b/resources/lang/en/auth.php
index 93e8182..e31813c 100755
--- a/resources/lang/en/auth.php
+++ b/resources/lang/en/auth.php
@@ -13,6 +13,7 @@
     |
     */
 
+    'password_mismatch' => 'The password you entered is incorrect.',
     'failed' => "Sorry that didn't work. Please try again.",
     'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
 
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 67fae80..031da49 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -13,6 +13,6 @@
 
     'profile_updated' => 'Profile successfully updated!',
     'profile_not_updated' => 'Profile was not updated!',
-    'account_updated' => 'Account successfully updated!',
-    'account_not_updated' => 'Account was not updated!',
-];
\ No newline at end of file
+    'account_password_updated' => 'Account Password successfully updated!',
+    'account_password_not_updated' => 'Account Password was not updated!',
+];
diff --git a/resources/lang/fil/auth.php b/resources/lang/fil/auth.php
index 2e4e40b..be9e960 100755
--- a/resources/lang/fil/auth.php
+++ b/resources/lang/fil/auth.php
@@ -13,6 +13,7 @@
     |
     */
 
+    'password_mismatch' => 'Ang password na iyong nailagay ay mali.',
     'failed' => 'Paumanhin na hindi ito gumagana. Ulitin mo ulit.',
     'throttle' =>
         'Masyadong maraming mga pagtatangka sa pag-login. Pakisubukang muli pagkatapos ng :seconds segundo.',
diff --git a/resources/lang/fil/settings.php b/resources/lang/fil/settings.php
index 53a0bd0..408a9f9 100644
--- a/resources/lang/fil/settings.php
+++ b/resources/lang/fil/settings.php
@@ -13,6 +13,7 @@
 
     'profile_updated' => 'Ang iyong Profile ay nabago!',
     'profile_not_updated' => 'Ang iyong Profile ay hindi nabago!',
-    'account_updated' => 'Ang iyong Account ay nabago!',
-    'account_not_updated' => 'Ang iyong Account ay hindi nabago!',
-];
\ No newline at end of file
+    'account_password_updated' => 'Ang Password ng iyong Account ay nabago!',
+    'account_password_not_updated' =>
+        'Ang Password ng iyong Account ay hindi nabago!',
+];
diff --git a/routes/api.php b/routes/api.php
index c6c4a81..be95c99 100755
--- a/routes/api.php
+++ b/routes/api.php
@@ -30,10 +30,10 @@
         });
 
         Route::middleware('auth:api')->group(function () {
-            Route::namespace('Settings')->prefix('settings')->name('settings.')->group(function() {
+            Route::namespace('Settings')->prefix('settings')->name('settings.')->group(function () {
                 Route::patch('profile', 'ProfileController@update')->name('profile');
 
-                Route::prefix('account')->name('account.')->group(function() {
+                Route::prefix('account')->name('account.')->group(function () {
                     Route::patch('password', 'AccountController@updatePassword')->name('password');
                 });
             });
diff --git a/tests/Feature/Api/V1/Settings/AccountTest.php b/tests/Feature/Api/V1/Settings/AccountTest.php
index 7087199..9325a7b 100644
--- a/tests/Feature/Api/V1/Settings/AccountTest.php
+++ b/tests/Feature/Api/V1/Settings/AccountTest.php
@@ -7,5 +7,23 @@
 
 class AccountTest extends BaseTest
 {
-    //
-}
\ No newline at end of file
+    /** @test */
+    public function a_user_can_change_its_password()
+    {
+        $attributes = [
+            'old_password' => 'secret',
+            'password' => 'tellmewhat',
+            'password_confirmation' => 'tellmewhat'
+        ];
+
+        // The response body that should be sent alongside the request.
+        $body = array_merge($this->getDefaultPayload(), $attributes);
+
+        // Assuming that the user's password has been updated,
+        // It must return a 200 response status and then,
+        // It must return a response body containing the text: `Password Changed!`
+        $this->patch(route('api.v1.settings.account.password'), $body)
+            ->assertStatus(200)
+            ->assertSee('Password Changed!');
+    }
+}
diff --git a/tests/Feature/Api/V1/Settings/ProfileTest.php b/tests/Feature/Api/V1/Settings/ProfileTest.php
index 194ddee..7a950c9 100644
--- a/tests/Feature/Api/V1/Settings/ProfileTest.php
+++ b/tests/Feature/Api/V1/Settings/ProfileTest.php
@@ -35,4 +35,4 @@ public function a_user_can_update_its_profile()
             ->assertStatus(200)
             ->assertJsonFragment($attributes);
     }
-}
\ No newline at end of file
+}

From 002262ea1622d395442aa7380c4cbb19c6faa993 Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Sat, 20 Apr 2019 22:30:37 +0800
Subject: [PATCH 6/6] wip

---
 .../Api/V1/Settings/AccountController.php     |  44 +-
 .../js/views/__backoffice/settings/Account.js | 594 +++++++++++-------
 resources/lang/en/settings.php                |   6 +-
 resources/lang/fil/settings.php               |   7 +-
 routes/api.php                                |   1 +
 tests/Feature/Api/V1/Settings/AccountTest.php |  19 +
 6 files changed, 435 insertions(+), 236 deletions(-)

diff --git a/app/Http/Controllers/Api/V1/Settings/AccountController.php b/app/Http/Controllers/Api/V1/Settings/AccountController.php
index b8ffdb6..4ad1d34 100644
--- a/app/Http/Controllers/Api/V1/Settings/AccountController.php
+++ b/app/Http/Controllers/Api/V1/Settings/AccountController.php
@@ -10,6 +10,42 @@
 
 class AccountController extends Controller
 {
+    /**
+     * @var App\User
+     */
+    protected $user;
+
+    /**
+     * Create a new AccountController
+     */
+    public function __construct()
+    {
+        $this->user = auth()->guard('api')->user();
+    }
+
+    /**
+     * Update User's login credentials
+     *
+     * @param Illuminate\Http\Request $request
+     *
+     * @return Illuminate\Http\JsonResponse
+     */
+    public function updateCredentials(Request $request) : JsonResponse
+    {
+        $request->validate([
+            'username' =>
+                "required|string|unique:users,username,{$this->user->id},id,deleted_at,NULL",
+            'email' =>
+                "required|email|unique:users,email,{$this->user->id},id,deleted_at,NULL"
+        ]);
+
+        $this->user->username = $request->input('username');
+        $this->user->email = $request->input('email');
+        $this->user->update();
+
+        return response()->json($this->user);
+    }
+
     /**
      * Update User's password
      *
@@ -24,9 +60,7 @@ public function updatePassword(Request $request) : JsonResponse
             'password' => 'required|string|confirmed|min:8|pwned:100'
         ]);
 
-        $user = auth()->guard('api')->user();
-
-        if (! Hash::check($request->input('old_password'), $user->password)) {
+        if (! Hash::check($request->input('old_password'), $this->user->password)) {
             throw ValidationException::withMessages([
                 'old_password' => [trans('auth.password_mismatch')]
             ]);
@@ -34,8 +68,8 @@ public function updatePassword(Request $request) : JsonResponse
             return response()->json('Password was not Changed!', 422);
         }
 
-        $user->password = bcrypt($request->input('password'));
-        $user->update();
+        $this->user->password = bcrypt($request->input('password'));
+        $this->user->update();
 
         return response()->json('Password Changed!');
     }
diff --git a/resources/js/views/__backoffice/settings/Account.js b/resources/js/views/__backoffice/settings/Account.js
index 7e63b03..cd9fa49 100644
--- a/resources/js/views/__backoffice/settings/Account.js
+++ b/resources/js/views/__backoffice/settings/Account.js
@@ -32,7 +32,8 @@ function Account(props) {
     const { location, pageProps } = props;
     const { user } = pageProps;
 
-    const [loading, setLoading] = useState(false);
+    const [passwordSubmitting, setPasswordSubmitting] = useState(false);
+    const [credentialsSubmitting, setCredentialsSubmitting] = useState(false);
     const [message, setMessage] = useState({});
     const [formVisible, setFormVisibility] = useState(false);
     const [oldPasswordVisible, setOldPasswordVisibility] = useState(false);
@@ -42,6 +43,59 @@ function Account(props) {
         setPasswordConfirmationVisibility,
     ] = useState(false);
 
+    /**
+     * Handle credential form submit, this should send an API response
+     * to update the login credentials.
+     *
+     * @param {object} values
+     * @param {object} form
+     *
+     * @return {undefined}
+     */
+    const handleCredentialSubmit = async (
+        values,
+        { setSubmitting, setErrors },
+    ) => {
+        setSubmitting(false);
+
+        const updateCredentials = () =>
+            axios.patch('/api/v1/settings/account/credentials', values);
+
+        try {
+            setCredentialsSubmitting(true);
+
+            await updateCredentials();
+
+            setMessage({
+                type: 'success',
+                body: Lang.get('settings.account_credentials_updated'),
+                closed: () => setMessage({}),
+            });
+
+            setCredentialsSubmitting(false);
+        } catch (error) {
+            if (!error.response) {
+                return;
+            }
+
+            const { errors } = error.response.data;
+
+            if (errors) {
+                setErrors(errors);
+            } else {
+                setMessage({
+                    type: 'error',
+                    body: Lang.get('settings.account_credentials_not_updated'),
+                    closed: () => setMessage({}),
+                    actionText: Lang.get('actions.retry'),
+                    action: async () => await updateCredentials(),
+                });
+            }
+
+            setCredentialsSubmitting(false);
+        }
+    };
+
     /**
      * Handle password form submit, this should send an API response
      * to update the password.
@@ -61,7 +115,7 @@ function Account(props) {
             axios.patch('/api/v1/settings/account/password', values);
 
         try {
-            setLoading(true);
+            setPasswordSubmitting(true);
 
             await updatePassword();
 
@@ -71,7 +125,7 @@ function Account(props) {
                 closed: () => setMessage({}),
             });
 
-            setLoading(false);
+            setPasswordSubmitting(false);
         } catch (error) {
             if (!error.response) {
                 return;
@@ -91,7 +145,7 @@ function Account(props) {
                 });
             }
 
-            setLoading(false);
+            setPasswordSubmitting(false);
         }
     };
 
@@ -106,228 +160,316 @@ function Account(props) {
     });
 
     const renderPasswordForm = (
+        <Formik
+            initialValues={{
+                old_password: '',
+                password: '',
+                password_confirmation: '',
+            }}
+            validationSchema={Yup.object().shape({
+                old_password: Yup.string().required(
+                    Lang.get('validation.required', {
+                        attribute: 'old password',
+                    }),
+                ),
+
+                password: Yup.string()
+                    .required(
+                        Lang.get('validation.required', {
+                            attribute: 'password',
+                        }),
+                    )
+                    .min(
+                        8,
+                        Lang.get('validation.min.string', {
+                            attribute: 'password',
+                            min: 8,
+                        }),
+                    )
+                    .oneOf(
+                        [Yup.ref('password_confirmation'), null],
+                        Lang.get('validation.confirmed', {
+                            attribute: 'password',
+                        }),
+                    ),
+
+                password_confirmation: Yup.string()
+                    .required(
+                        Lang.get('validation.required', {
+                            attribute: 'password confirmation',
+                        }),
+                    )
+                    .min(
+                        8,
+                        Lang.get('validation.min.string', {
+                            attribute: 'password confirmation',
+                            min: 8,
+                        }),
+                    ),
+            })}
+            onSubmit={handlePasswordSubmit}
+            validateOnBlur={false}
+        >
+            {({ values, errors, submitCount, isSubmitting, handleChange }) => (
+                <Form>
+                    <Typography variant="h6" gutterBottom>
+                        Change Password
+                    </Typography>
+
+                    <TextField
+                        type={oldPasswordVisible ? 'text' : 'password'}
+                        id="old_password"
+                        name="old_password"
+                        label="Old Password"
+                        placeholder="Enter your old password"
+                        value={values.old_password}
+                        onChange={handleChange}
+                        fullWidth
+                        margin="dense"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="Toggle old password visibility"
+                                        onClick={() =>
+                                            setOldPasswordVisibility(
+                                                !oldPasswordVisible,
+                                            )
+                                        }
+                                    >
+                                        {oldPasswordVisible ? (
+                                            <VisibilityOffIcon />
+                                        ) : (
+                                            <VisibilityIcon />
+                                        )}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        }}
+                        error={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('old_password')
+                        }
+                        helperText={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('old_password') &&
+                            errors.old_password
+                        }
+                    />
+
+                    <TextField
+                        type={passwordVisible ? 'text' : 'password'}
+                        id="password"
+                        name="password"
+                        label="Password"
+                        placeholder="Enter your password"
+                        value={values.password}
+                        onChange={handleChange}
+                        fullWidth
+                        margin="dense"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="Toggle password visibility"
+                                        onClick={() =>
+                                            setPasswordVisibility(
+                                                !passwordVisible,
+                                            )
+                                        }
+                                    >
+                                        {passwordVisible ? (
+                                            <VisibilityOffIcon />
+                                        ) : (
+                                            <VisibilityIcon />
+                                        )}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        }}
+                        error={
+                            submitCount > 0 && errors.hasOwnProperty('password')
+                        }
+                        helperText={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('password') &&
+                            errors.password
+                        }
+                    />
+
+                    <TextField
+                        type={passwordConfirmationVisible ? 'text' : 'password'}
+                        id="password_confirmation"
+                        name="password_confirmation"
+                        label="Password Confirmation"
+                        placeholder="Enter your password again"
+                        value={values.password_confirmation}
+                        onChange={handleChange}
+                        fullWidth
+                        margin="dense"
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="Toggle password confirmation visibility"
+                                        onClick={() =>
+                                            setPasswordConfirmationVisibility(
+                                                !passwordConfirmationVisible,
+                                            )
+                                        }
+                                    >
+                                        {passwordConfirmationVisible ? (
+                                            <VisibilityOffIcon />
+                                        ) : (
+                                            <VisibilityIcon />
+                                        )}
+                                    </IconButton>
+                                </InputAdornment>
+                            ),
+                        }}
+                        error={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('password_confirmation')
+                        }
+                        helperText={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('password_confirmation') &&
+                            errors.password_confirmation
+                        }
+                    />
+
+                    <div className={classes.dense} />
+
+                    <Button
+                        type="submit"
+                        variant="contained"
+                        color="primary"
+                        disabled={
+                            (errors &&
+                                Object.keys(errors).length > 0 &&
+                                submitCount > 0) ||
+                            isSubmitting
+                        }
+                    >
+                        {passwordSubmitting && (
+                            <div className={classes.spinner}>
+                                <CircularProgress size={14} color="inherit" />
+                            </div>
+                        )}
+
+                        <Typography color="inherit">Change</Typography>
+                    </Button>
+                </Form>
+            )}
+        </Formik>
+    );
+
+    const renderCredentialsForm = (
+        <Formik
+            initialValues={{
+                username: user.username,
+                email: user.email,
+            }}
+            validationSchema={Yup.object().shape({
+                username: Yup.string().required(
+                    Lang.get('validation.required', {
+                        attribute: 'username',
+                    }),
+                ),
+
+                email: Yup.string()
+                    .required(
+                        Lang.get('validation.required', {
+                            attribute: 'email',
+                        }),
+                    )
+                    .email(
+                        Lang.get('validation.email', {
+                            attribute: 'email',
+                        }),
+                    ),
+            })}
+            onSubmit={handleCredentialSubmit}
+            validateOnBlur={false}
+        >
+            {({ values, errors, submitCount, isSubmitting, handleChange }) => (
+                <Form>
+                    <Typography variant="h6" gutterBottom>
+                        Login Credentials
+                    </Typography>
+
+                    <TextField
+                        id="username"
+                        name="username"
+                        label="Username"
+                        placeholder="Enter your username"
+                        value={values.username}
+                        onChange={handleChange}
+                        fullWidth
+                        margin="dense"
+                        error={
+                            submitCount > 0 && errors.hasOwnProperty('username')
+                        }
+                        helperText={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('username') &&
+                            errors.username
+                        }
+                    />
+
+                    <TextField
+                        id="email"
+                        name="email"
+                        label="Email"
+                        placeholder="Enter your email"
+                        value={values.email}
+                        onChange={handleChange}
+                        fullWidth
+                        margin="dense"
+                        error={
+                            submitCount > 0 && errors.hasOwnProperty('email')
+                        }
+                        helperText={
+                            submitCount > 0 &&
+                            errors.hasOwnProperty('email') &&
+                            errors.email
+                        }
+                    />
+
+                    <div className={classes.dense} />
+
+                    <Button
+                        type="submit"
+                        variant="contained"
+                        color="primary"
+                        disabled={
+                            (errors &&
+                                Object.keys(errors).length > 0 &&
+                                submitCount > 0) ||
+                            isSubmitting
+                        }
+                    >
+                        {credentialsSubmitting && (
+                            <div className={classes.spinner}>
+                                <CircularProgress size={14} color="inherit" />
+                            </div>
+                        )}
+
+                        <Typography color="inherit">Update</Typography>
+                    </Button>
+                </Form>
+            )}
+        </Formik>
+    );
+
+    const renderForms = (
         <Grid item md={8} sm={12} xs={12}>
             <Paper className={classes.form}>
-                <Formik
-                    initialValues={{
-                        old_password: '',
-                        password: '',
-                        password_confirmation: '',
-                    }}
-                    validationSchema={Yup.object().shape({
-                        old_password: Yup.string().required(
-                            Lang.get('validation.required', {
-                                attribute: 'old password',
-                            }),
-                        ),
-
-                        password: Yup.string()
-                            .required(
-                                Lang.get('validation.required', {
-                                    attribute: 'password',
-                                }),
-                            )
-                            .min(
-                                8,
-                                Lang.get('validation.min.string', {
-                                    attribute: 'password',
-                                    min: 8,
-                                }),
-                            )
-                            .oneOf(
-                                [Yup.ref('password_confirmation'), null],
-                                Lang.get('validation.confirmed', {
-                                    attribute: 'password',
-                                }),
-                            ),
+                {renderPasswordForm}
 
-                        password_confirmation: Yup.string()
-                            .required(
-                                Lang.get('validation.required', {
-                                    attribute: 'password confirmation',
-                                }),
-                            )
-                            .min(
-                                8,
-                                Lang.get('validation.min.string', {
-                                    attribute: 'password confirmation',
-                                    min: 8,
-                                }),
-                            ),
-                    })}
-                    onSubmit={handlePasswordSubmit}
-                    validateOnBlur={false}
-                >
-                    {({
-                        values,
-                        errors,
-                        submitCount,
-                        isSubmitting,
-                        handleChange,
-                    }) => (
-                        <Form>
-                            <Typography variant="h6" gutterBottom>
-                                Change Password
-                            </Typography>
-
-                            <TextField
-                                type={oldPasswordVisible ? 'text' : 'password'}
-                                id="old_password"
-                                name="old_password"
-                                label="Old Password"
-                                placeholder="Enter your old password"
-                                value={values.old_password}
-                                onChange={handleChange}
-                                fullWidth
-                                margin="dense"
-                                InputProps={{
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                aria-label="Toggle old password visibility"
-                                                onClick={() =>
-                                                    setOldPasswordVisibility(
-                                                        !oldPasswordVisible,
-                                                    )
-                                                }
-                                            >
-                                                {oldPasswordVisible ? (
-                                                    <VisibilityOffIcon />
-                                                ) : (
-                                                    <VisibilityIcon />
-                                                )}
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }}
-                                error={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty('old_password')
-                                }
-                                helperText={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty('old_password') &&
-                                    errors.old_password
-                                }
-                            />
-
-                            <TextField
-                                type={passwordVisible ? 'text' : 'password'}
-                                id="password"
-                                name="password"
-                                label="Password"
-                                placeholder="Enter your password"
-                                value={values.password}
-                                onChange={handleChange}
-                                fullWidth
-                                margin="dense"
-                                InputProps={{
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                aria-label="Toggle password visibility"
-                                                onClick={() =>
-                                                    setPasswordVisibility(
-                                                        !passwordVisible,
-                                                    )
-                                                }
-                                            >
-                                                {passwordVisible ? (
-                                                    <VisibilityOffIcon />
-                                                ) : (
-                                                    <VisibilityIcon />
-                                                )}
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }}
-                                error={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty('password')
-                                }
-                                helperText={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty('password') &&
-                                    errors.password
-                                }
-                            />
-
-                            <TextField
-                                type={
-                                    passwordConfirmationVisible
-                                        ? 'text'
-                                        : 'password'
-                                }
-                                id="password_confirmation"
-                                name="password_confirmation"
-                                label="Password Confirmation"
-                                placeholder="Enter your password again"
-                                value={values.password_confirmation}
-                                onChange={handleChange}
-                                fullWidth
-                                margin="dense"
-                                InputProps={{
-                                    endAdornment: (
-                                        <InputAdornment position="end">
-                                            <IconButton
-                                                aria-label="Toggle password confirmation visibility"
-                                                onClick={() =>
-                                                    setPasswordConfirmationVisibility(
-                                                        !passwordConfirmationVisible,
-                                                    )
-                                                }
-                                            >
-                                                {passwordConfirmationVisible ? (
-                                                    <VisibilityOffIcon />
-                                                ) : (
-                                                    <VisibilityIcon />
-                                                )}
-                                            </IconButton>
-                                        </InputAdornment>
-                                    ),
-                                }}
-                                error={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty(
-                                        'password_confirmation',
-                                    )
-                                }
-                                helperText={
-                                    submitCount > 0 &&
-                                    errors.hasOwnProperty(
-                                        'password_confirmation',
-                                    ) &&
-                                    errors.password_confirmation
-                                }
-                            />
-
-                            <div className={classes.dense} />
-
-                            <Button
-                                type="submit"
-                                variant="contained"
-                                color="primary"
-                                disabled={
-                                    (errors &&
-                                        Object.keys(errors).length > 0 &&
-                                        submitCount > 0) ||
-                                    isSubmitting
-                                }
-                            >
-                                {loading && (
-                                    <div className={classes.spinner}>
-                                        <CircularProgress
-                                            size={14}
-                                            color="inherit"
-                                        />
-                                    </div>
-                                )}
-
-                                <Typography color="inherit">Change</Typography>
-                            </Button>
-                        </Form>
-                    )}
-                </Formik>
+                <div className={classes.dense} />
+
+                {renderCredentialsForm}
             </Paper>
         </Grid>
     );
@@ -340,11 +482,9 @@ function Account(props) {
                 setFormVisibility: () => setFormVisibility(!formVisible),
             }}
         >
-            <Hidden mdUp>{formVisible && <>{renderPasswordForm}</>}</Hidden>
+            <Hidden mdUp>{formVisible && renderForms}</Hidden>
 
-            <Hidden smDown>
-                <>{renderPasswordForm}</>
-            </Hidden>
+            <Hidden smDown>{renderForms}</Hidden>
         </SettingsLayout>
     );
 
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 031da49..a87d90d 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -6,8 +6,8 @@
     | Settings Language Lines
     |--------------------------------------------------------------------------
     |
-    | The following language lines are used in the frontend of the application,
-    | specifically in actions, links in different kind of settings.
+    | The following language lines are used in specifically in actions,
+    | links in different kind of settings.
     |
     */
 
@@ -15,4 +15,6 @@
     'profile_not_updated' => 'Profile was not updated!',
     'account_password_updated' => 'Account Password successfully updated!',
     'account_password_not_updated' => 'Account Password was not updated!',
+    'account_credentials_updated' => 'Account Credentials successfully updated!',
+    'account_credentials_not_updated' => 'Account Credentials was not updated!',
 ];
diff --git a/resources/lang/fil/settings.php b/resources/lang/fil/settings.php
index 408a9f9..c156906 100644
--- a/resources/lang/fil/settings.php
+++ b/resources/lang/fil/settings.php
@@ -6,8 +6,8 @@
     | Settings Language Lines
     |--------------------------------------------------------------------------
     |
-    | The following language lines are used in the frontend of the application,
-    | specifically in actions, links in different kind of settings.
+    | The following language lines are used in specifically in actions,
+    | links in different kind of settings.
     |
     */
 
@@ -16,4 +16,7 @@
     'account_password_updated' => 'Ang Password ng iyong Account ay nabago!',
     'account_password_not_updated' =>
         'Ang Password ng iyong Account ay hindi nabago!',
+    'account_credentials_updated' => 'Ang Credentials ng iyong Account ay nabago!',
+    'account_credentials_not_updated' =>
+        'Ang Credentials ng iyong Account ay hindi nabago!',
 ];
diff --git a/routes/api.php b/routes/api.php
index be95c99..e198b48 100755
--- a/routes/api.php
+++ b/routes/api.php
@@ -35,6 +35,7 @@
 
                 Route::prefix('account')->name('account.')->group(function () {
                     Route::patch('password', 'AccountController@updatePassword')->name('password');
+                    Route::patch('credentials', 'AccountController@updateCredentials')->name('credentials');
                 });
             });
 
diff --git a/tests/Feature/Api/V1/Settings/AccountTest.php b/tests/Feature/Api/V1/Settings/AccountTest.php
index 9325a7b..5bf43e0 100644
--- a/tests/Feature/Api/V1/Settings/AccountTest.php
+++ b/tests/Feature/Api/V1/Settings/AccountTest.php
@@ -26,4 +26,23 @@ public function a_user_can_change_its_password()
             ->assertStatus(200)
             ->assertSee('Password Changed!');
     }
+
+    /** @test */
+    public function a_user_can_update_its_login_credentials()
+    {
+        $attributes = [
+            'username' => $this->faker->userName,
+            'email' => $this->faker->email,
+        ];
+
+        // The response body that should be sent alongside the request.
+        $body = array_merge($this->getDefaultPayload(), $attributes);
+
+        // Assuming that the user's login credentials has been updated,
+        // It must return a 200 response status and then,
+        // It must return a response body containing the updated user's credentials.
+        $this->patch(route('api.v1.settings.account.credentials'), $body)
+            ->assertStatus(200)
+            ->assertJsonFragment($attributes);
+    }
 }