Introduce PNPM, Workspaces and Remix app (#8)

.gitignore

@@ -9,5 +9,4 @@ tmp
 
 
 # temp
-web
-docker
+docker

.prettierignore

@@ -1 +1,5 @@
 build
+node_modules
+tmp
+dist
+.cache

.prettierrc

@@ -5,5 +5,6 @@
   "semi": true,
   "arrowParens": "always",
   "bracketSpacing": false,
-  "quoteProps": "consistent"
+  "quoteProps": "consistent",
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"]
 }

apps/api/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "root": true,
+  "parserOptions": {
+    "tsconfigRootDir": "."
+  },
+  "extends": ["custom-adonis"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".ts", ".tsx"],
+        "moduleDirectory": ["src", "node_modules"]
+      }
+    }
+  }
+}

apps/api/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+build
+dist
+coverage
+.env
+tmp

server/app/modules/user/controllers/UserController.ts → apps/api/app/modules/user/controllers/UserController.ts

@@ -8,6 +8,7 @@ import {editUser} from '../useCases/editUser';
 import {requestPasswordReset} from '../useCases/requestPasswordReset';
 import {resetPassword} from '../useCases/resetPassword';
 import {verifyEmail} from '../useCases/verifyEmail';
+import {verifyPasswordReset} from '../useCases/verifyPasswordReset';
 import {whoAmI} from '../useCases/whoAmI';
 
 export class UserController {
@@ -71,6 +72,25 @@ export class UserController {
     return response.ok(null);
   }
 
+  async verifyPasswordReset({request, response}: HttpContextContract) {
+    const payload = request.body();
+    const {validate, execute} = verifyPasswordReset({
+      passwordResetService: getPasswordResetService(),
+    });
+    const props = await validate(payload);
+    const result = await execute(props);
+
+    if (E.isLeft(result)) {
+      const error = result.left;
+      switch (error) {
+        case 'InvalidTokenError':
+          return response.badRequest({message: 'Token is invalid'});
+      }
+    }
+
+    return response.ok(null);
+  }
+
   async changePassword({request, auth, response}: HttpContextContract) {
     const payload = request.body();
     const user = auth.user!;
@@ -91,11 +111,11 @@ export class UserController {
   }
 
   async verifyEmail({request, response}: HttpContextContract) {
-    const params = request.params();
+    const payload = request.body();
     const {validate, execute} = verifyEmail({
       verifyEmailService: getVerifyEmailService(),
     });
-    const props = await validate(params);
+    const props = await validate(payload);
     const result = await execute(props);
 
     if (E.isLeft(result)) {

server/app/modules/user/mailers/EmailVerificationMailer.ts → apps/api/app/modules/user/mailers/EmailVerificationMailer.ts

@@ -16,7 +16,7 @@ export class EmailVerificationMailer extends AppMailer {
       .subject('Welcome Onboard!')
       .htmlView('emails/welcome', {
         user: this.user,
-        url: `${this.baseUrl}/verification-url?token=${this.token}`,
+        url: `${this.baseUrl}/verify-email?token=${this.token}`,
       });
   }
 }

server/app/modules/user/mailers/PasswordResetMailer.ts → apps/api/app/modules/user/mailers/PasswordResetMailer.ts

@@ -16,7 +16,7 @@ export class PasswordResetMailer extends AppMailer {
       .subject('Password Reset')
       .htmlView('emails/password-reset', {
         user: this.user,
-        url: `${this.baseUrl}?token=${this.token}`,
+        url: `${this.baseUrl}/reset-password/?token=${this.token}`,
       });
   }
 }

server/app/modules/user/routes.ts → apps/api/app/modules/user/routes.ts

@@ -48,7 +48,12 @@ Route.group(() => {
     return new UserController().requestPasswordReset(ctx);
   });
 
-  Route.post('change', async (ctx) => {
+  Route.post('verify', async (ctx) => {
+    const {UserController} = await import('./controllers/UserController');
+    return new UserController().verifyPasswordReset(ctx);
+  });
+
+  Route.patch('change', async (ctx) => {
     const {UserController} = await import('./controllers/UserController');
     return new UserController().changePassword(ctx);
   }).middleware('auth');

server/app/modules/user/useCases/requestPasswordReset/requestPasswordReset.ts → apps/api/app/modules/user/useCases/requestPasswordReset/requestPasswordReset.ts

@@ -18,7 +18,6 @@ interface Dependencies {
 export function requestPasswordReset({passwordResetService}: Dependencies) {
   async function execute(props: Props): Promise<Response> {
     const {email} = props;
-
     const user = await User.query().where('email', email).first();
 
     if (!user) {

apps/api/app/modules/user/useCases/verifyPasswordReset/index.ts

@@ -0,0 +1 @@
+export {verifyPasswordReset} from './verifyPasswordReset';

apps/api/app/modules/user/useCases/verifyPasswordReset/validation.ts

@@ -0,0 +1,19 @@
+import {schema, validator} from '@ioc:Adonis/Core/Validator';
+
+import {uuidTokenSchema} from '../../constants/validations';
+
+const validatorSchema = schema.create({
+  token: uuidTokenSchema,
+});
+
+export async function validate(props: Record<string, unknown>) {
+  const {token} = await validator.validate({
+    schema: validatorSchema,
+    data: props,
+    messages: {
+      'token.required': 'Please enter a token',
+      'token.uuid': 'Please enter a valid token',
+    },
+  });
+  return {token};
+}

apps/api/app/modules/user/useCases/verifyPasswordReset/verifyPasswordReset.ts

@@ -0,0 +1,33 @@
+import * as E from 'fp-ts/Either';
+
+import User from '../../models/User';
+import {PasswordResetService} from '../../services/passwordResetService';
+import {validate} from './validation';
+
+type Response = E.Either<'InvalidTokenError', User>;
+
+interface Props {
+  token: string;
+}
+
+interface Dependencies {
+  passwordResetService: PasswordResetService;
+}
+
+export function verifyPasswordReset({passwordResetService}: Dependencies) {
+  async function execute(props: Props): Promise<Response> {
+    const {token} = props;
+    const user = await passwordResetService.getUserByToken(token);
+
+    if (!user) {
+      return E.left('InvalidTokenError');
+    }
+
+    return E.right(user);
+  }
+
+  return {
+    execute,
+    validate,
+  };
+}

server/database/migrations/1683706404380_orgs.ts → apps/api/database/migrations/1683706404380_orgs.ts

@@ -9,7 +9,7 @@ export default class extends BaseSchema {
     this.schema.createTable(this.tableName, (table) => {
       table.string('id').notNullable().primary();
 
-      table.string('name').notNullable();
+      table.string('name', 255).notNullable();
       table.string('slug').notNullable().unique();
 
       table.timestamp('created_at', {useTz: true});

server/package.json → apps/api/package.json

@@ -36,9 +36,11 @@
     "@faker-js/faker": "^8.0.2",
     "@japa/preset-adonis": "^1.2.0",
     "@japa/runner": "^2.5.1",
+    "@types/luxon": "^3.3.0",
     "@types/proxy-addr": "^2.0.0",
     "@types/source-map-support": "^0.5.6",
     "adonis-preset-ts": "^2.1.0",
+    "eslint-config-custom-adonis": "workspace:*",
     "pino-pretty": "^10.0.0",
     "youch": "^3.2.3",
     "youch-terminal": "^2.2.0"

server/start/events.ts → apps/api/start/events.ts

@@ -1,4 +1,4 @@
-// import Mail from '@ioc:Adonis/Addons/Mail';
+import Mail from '@ioc:Adonis/Addons/Mail';
 import Application from '@ioc:Adonis/Core/Application';
 import Event from '@ioc:Adonis/Core/Event';
 import Database from '@ioc:Adonis/Lucid/Database';
@@ -13,8 +13,9 @@ Event.on('db:query', (query) => {
   }
 });
 
-Event.on('mail:sent', () => {
+Event.on('mail:sent', (data) => {
   if (Application.inDev) {
-    // Mail.prettyPrint(data);
+    Mail.prettyPrint(data);
+    console.log(data.message.html);
   }
 });

apps/api/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"root": false,
+	"extends": "adonis-preset-ts/tsconfig.json",
+	"include": ["**/*"],
+	"exclude": ["node_modules", "build"],
+	"compilerOptions": {
+		"baseUrl": ".",
+		"outDir": "build",
+		"rootDir": "./",
+		"sourceMap": true,
+		"paths": {
+			"@/*": ["./*"]
+		},
+		"moduleResolution": "node",
+		"types": [
+			"@adonisjs/core",
+			"@adonisjs/repl",
+			"@japa/preset-adonis/build/adonis-typings",
+			"@adonisjs/lucid",
+			"@adonisjs/lucid-slugify",
+			"@adonisjs/auth",
+			"@adonisjs/mail",
+			"@adonisjs/view",
+			"@adonisjs/redis",
+			"@adonisjs/bouncer"
+		]
+	}
+}

apps/dashboard/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "root": true,
+  "parserOptions": {
+    "tsconfigRootDir": "."
+  },
+  "extends": ["custom-remix"]
+}

apps/dashboard/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

apps/dashboard/app/components/error-feedback.tsx

@@ -0,0 +1,28 @@
+import {Alert, AlertDescription, AlertTitle} from 'ui-core';
+
+export function ErrorFeedback({
+  errors = {},
+}: {
+  errors?: Record<string, string>;
+}) {
+  const description =
+    Object.keys(errors).length > 0 ? (
+      Object.keys(errors).map((key) => {
+        const message = errors[key];
+        return (
+          <li key={key}>
+            <AlertDescription>{message}</AlertDescription>
+          </li>
+        );
+      })
+    ) : (
+      <AlertDescription>Let's try again, shall we?</AlertDescription>
+    );
+
+  return (
+    <Alert variant="destructive">
+      <AlertTitle>Something went wrong</AlertTitle>
+      <ul className="list-disc pl-4">{description}</ul>
+    </Alert>
+  );
+}

apps/dashboard/app/components/layouts/base-layout.tsx

@@ -0,0 +1,68 @@
+import {Link} from '@remix-run/react';
+import React from 'react';
+import {cn} from 'ui-core';
+
+import TeamSwitcher from '@/components/team-switcher';
+import {UserNav} from '@/components/user-nav';
+import {useUser} from '@/lib/user';
+
+function MainNav({className, ...props}: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <nav
+      className={cn('flex items-center space-x-4 lg:space-x-6', className)}
+      {...props}
+    >
+      <Link
+        to="/"
+        className="hover:text-primary text-sm font-medium transition-colors"
+      >
+        Overview
+      </Link>
+      <Link
+        to="/teams"
+        className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+      >
+        Teams
+      </Link>
+      <Link
+        to="/settings"
+        className="text-muted-foreground hover:text-primary text-sm font-medium transition-colors"
+      >
+        Settings
+      </Link>
+    </nav>
+  );
+}
+
+export function BaseLayout({
+  children,
+  title,
+  titleSlot,
+}: {
+  children: React.ReactNode;
+  title: string;
+  titleSlot?: React.ReactNode;
+}) {
+  const user = useUser();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <div className="border-b shadow-2xl">
+        <div className="flex h-16 items-center border-b px-4">
+          <h1 className="text-2xl font-bold tracking-tight">White Label</h1>
+          <MainNav className="mx-6" />
+          <div className="ml-auto flex items-center space-x-4">
+            <UserNav user={user} />
+          </div>
+        </div>
+        <div className="50 flex h-16 items-center px-8">
+          <div className="flex items-center justify-between space-y-2">
+            <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
+            {titleSlot}
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 space-y-4 bg-gray-50 p-8 pt-6">{children}</div>
+    </div>
+  );
+}

apps/dashboard/app/components/layouts/guest-layout.tsx

@@ -0,0 +1,16 @@
+import {BoxIcon} from 'lucide-react';
+import React from 'react';
+
+export function GuestLayout({children}: {children: React.ReactNode}) {
+  return (
+    <div className="flex min-h-screen flex-col items-center gap-10 bg-slate-100 pt-16">
+      <div className="flex flex-col items-center space-y-4 leading-none">
+        <div className="h-12 w-12 rounded-full bg-blue-100 p-2">
+          <BoxIcon className="h-full w-full text-blue-700" />
+        </div>
+        <h1 className="text-4xl font-bold">White Label</h1>
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}