theme init hook added, Client theme updated

src/controllers/clientarea/profile.controller.ts

@@ -0,0 +1,17 @@
+import UserApi from '@core/api/users.api';
+import { Request, Response } from 'express';
+import { User } from '@models/user.model';
+
+export const getProfile = async (req: Request, res: Response) => {
+  const user = await UserApi.getUserById(req.user.id);
+  res.load('clientarea/profile', {
+    pathName: 'profile',
+    layout: 'clientarea',
+    user,
+  });
+};
+
+export const postProfile = async (req: Request, res: Response) => {
+  await UserApi.updateUserSafe(req.user.id, req.body as User);
+  res.redirect('/clientarea/profile');
+};

src/core/api/users.api.ts

@@ -16,6 +16,14 @@ class UserApi {
     return await UserModel.findOne({ email }).lean();
   }
 
+  // Update User Function intended for use in the client area
+  static async updateUserSafe(user: User, data: User): Promise<User | null> {
+    const newUser = await UserModel.findByIdAndUpdate(user._id, data, {
+      runValidators: true,
+    });
+    return newUser;
+  }
+
   static async getUserById(id: string) {
     return await UserModel.findById(id).lean();
   }

src/lib/theme.ts

@@ -276,7 +276,21 @@ class Theme {
 
     const currentTheme = await this.getCurrentTheme();
 
-    app.use('/public', express.static(currentTheme.publicFolderPath));
+    // check if functions.js file exists
+    const functionsFilePath = join(currentTheme.absulutePath, 'functions.js');
+    if (await util.isFile(functionsFilePath)) {
+      const functions = await import(functionsFilePath);
+
+      if (typeof functions.init === 'function') {
+        functions.init(app);
+      }
+    }
+
+    // Theme static files
+    app.use(
+      currentTheme.themeBaseUri,
+      express.static(currentTheme.publicFolderPath),
+    );
   }
 }
 

src/middlewares/currency.middleware.ts

@@ -5,13 +5,24 @@ import CurrencyApi from '@core/api/currency.api';
 // TODO: Impliment Get Currency From IP address
 // TODO: Impliment Get Currency From User Preferences
 // TODO: Impliment Get Currency From User Session
-
+// TODO: Handle Errors
 export const getCurrency = async (
-  _req: Request,
+  req: Request,
   res: Response,
   next: NextFunction,
 ) => {
-  const currency = await CurrencyApi.getDefaultCurrency();
-  res.locals.currency = currency;
+  if (req.session.currency) {
+    res.locals.currency = await CurrencyApi.getCurrency({
+      code: req.session.currency,
+    });
+  } else if (req.query.cur) {
+    res.locals.currency = await CurrencyApi.getCurrency({
+      code: req.query.cur,
+    });
+    req.session.currency = req.query.cur;
+  } else {
+    const currency = await CurrencyApi.getDefaultCurrency();
+    res.locals.currency = currency;
+  }
   next();
 };

src/routes/clientarea/currency.route.ts

@@ -0,0 +1,20 @@
+import BaseRoute from '@routes/base.route';
+import { getCurrency } from '@middlewares/currency.middleware';
+
+class HomeRoute extends BaseRoute {
+  constructor() {
+    super('/');
+    this.init();
+  }
+
+  init() {
+    this.router.use(getCurrency);
+    this.router.post('/setcurrency', async (req, res) => {
+      req.session.currency = req.body.currency;
+      // redirect to referrar
+      res.redirect(req.headers.referer || '/');
+    });
+  }
+}
+
+export default HomeRoute;

src/routes/clientarea/profile.route.ts

@@ -0,0 +1,16 @@
+import { getProfile } from '@controllers/clientarea/profile.controller';
+import BaseRoute from '@routes/base.route';
+
+class Profile extends BaseRoute {
+  constructor() {
+    super('/clientarea');
+    this.init();
+  }
+
+  init() {
+    // TODO - initialize
+    this.router.route('/profile').get(getProfile);
+  }
+}
+
+export default Profile;

themes/art-of-light/clientarea/profile.hbs

@@ -0,0 +1,81 @@
+<div class="container">
+
+    <div class="card mt-3">
+        <div class="card-body">
+            <h1 class="cad-title">Edit Profile</h1>
+
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
+                        type="button" role="tab" aria-controls="profile" aria-selected="true">Profile</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link " id="address-tab" data-bs-toggle="tab" data-bs-target="#address"
+                        type="button" role="tab" aria-controls="address" aria-selected="false">Address</button>
+                </li>
+
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
+                        type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
+                </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+                    <form>
+                        <div class="mb-3 mt-2">
+                            <label for="name" class="form-label">Name</label>
+                            <input type="name" class="form-control" id="name" value="{{user.name}}"
+                                aria-describedby="nameHelp">
+                            <div id="nameHelp" class="form-text">Enter your name here</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="email" class="form-label">Email address</label>
+                            <input type="email" class="form-control" id="email" value="{{user.email}}"
+                                aria-describedby="emailHelp">
+                            <div id="emailHelp" class="form-text">Enter Your Primary Email</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="exampleInputPassword1" class="form-label">Password</label>
+                            <input type="password" class="form-control" id="exampleInputPassword1">
+                        </div>
+                        <div class="mb-3 form-check">
+                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
+                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                    </form>
+                </div>
+                <div class="tab-pane fade " id="address" role="tabpanel" aria-labelledby="address-tab">
+                    <form>
+                        <div class="mb-3 mt-2">
+                            <label for="name" class="form-label">Name</label>
+                            <input type="name" class="form-control" id="name" value="{{user.name}}"
+                                aria-describedby="nameHelp">
+                            <div id="nameHelp" class="form-text">Enter your name here</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="address" class="form-label">Address Line 1</label>
+                            <textarea type="address" class="form-control" id="address" value="{{user.email}}"
+                                aria-describedby="addressHelp"></textarea>
+                            <div id="addressHelp" class="form-text">Enter Address Line 1</div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="address" class="form-label">Address Line 2</label>
+                            <textarea type="address" class="form-control" id="address" value="{{user.email}}"
+                                aria-describedby="addressHelp"></textarea>
+                            <div id="addressHelp" class="form-text">Enter Address Line 2</div>
+                        </div>
+                        <button type="submit" class="btn btn-primary">Save</button>
+                    </form>
+                </div>
+                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
+                    <div class="card">
+                        <div class="card-body"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+    </div>

themes/art-of-light/functions.js

@@ -1,6 +1,7 @@
 module.exports = {
   init(funcs) {
-    // JavaScript to be fired on all pages
+    // Runs on theme load to initialize the theme.
+    console.log('Theme initialized.');
   },
 };
 

themes/art-of-light/layouts/main.hbs

@@ -7,7 +7,9 @@
   {{#if title }}
   <title>{{title}}</title>
   {{/if}}
-  <link href='/public/assets/css/styles.css' rel='stylesheet' />
+  <link href='{{ themeBaseUri }}/assets/css/styles.css' rel='stylesheet' />
+  <link href='{{ themeBaseUri }}/assets/css/custom.css' rel='stylesheet' />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -20,6 +22,7 @@
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
     crossorigin="anonymous"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"></script>
 </body>
 
 </html>

themes/art-of-light/partials/header.hbs

@@ -27,7 +27,7 @@
             Hi, {{user.name}}
           </a>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="#">Profile</a></li>
+            <li><a class="dropdown-item" href="/clientarea/profile">Profile</a></li>
             <li><a class="dropdown-item" href="#">Change Password</a></li>
             <li><a class="dropdown-item" href="#">Email History</a></li>
             <li><a class="dropdown-item" href="#">Security Settings</a></li>

themes/art-of-light/public/assets/css/custom.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #e3e3e3 !important;
+}

typings/common/express.d.ts

@@ -16,5 +16,5 @@ declare namespace Express {
 }
 
 interface CustomSessionFields {
-  test: string;
+  currency: string;
 }