@adminforth/open-signup 1.0.2

package/dist/custom/SignupPage.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+    :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
+      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
+      'background-size': 'cover',
+      'background-position': 'center',
+      'background-blend-mode': 'darken'
+    }: {}"
+  >
+    
+    <img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
+      :src="loadFile(coreStore.config?.loginBackgroundImage)"
+      class="position-absolute top-0 left-0 h-screen object-cover w-0"
+      :class="{
+        '1/2': 'md:w-1/2',
+        '1/3': 'md:w-1/3',
+        '2/3': 'md:w-2/3',
+        '3/4': 'md:w-3/4',
+        '2/5': 'md:w-2/5',
+        '3/5': 'md:w-3/5',
+      }[backgroundPosition]"
+    />
+
+    <!-- Main modal -->
+    <div id="authentication-modal" tabindex="-1" 
+      class="overflow-y-auto flex flex-grow
+      overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="relative p-4 w-full max-h-full max-w-[400px]">
+            <!-- Modal content -->
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+                <!-- Modal header -->
+                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+                      Sign up into {{ coreStore.config?.brandName }}
+                    </h3>
+                </div>
+                <!-- Modal body -->
+                <div class="p-4 md:p-5">
+                  <form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
+                    <div class="relative">
+                      <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
+                      <input type="email" name="email" id="email" 
+                        tabindex="1"
+                        @keydown.enter="passwordInput.focus()"
+                        ref="emailInput"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                        placeholder="name@company.com" 
+                        required
+                      />
+                    </div>
+                    <div class="relative">
+                      <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New password</label>
+                      <input 
+                        tabindex="2"
+                        ref="passwordInput"
+                        :type="unmasked ? 'text' : 'password'"
+                        name="password" id="password" 
+                        v-model="password"
+                        @keydown.enter="passwordConfirmationInput.focus()"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                        placeholder="New password" required 
+                      />
+                      
+                      <button
+                        type="button"
+                        @click="unmasked = !unmasked"
+                        class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
+                      >
+                        <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked" />
+                        <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                      </button>
+                    </div>
+
+                    <div class="relative">
+                      <label for="password_confirmation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm new password</label>
+                      <input 
+                        ref="passwordConfirmationInput"
+                        :type="unmasked ? 'text' : 'password'"
+                        name="password_confirmation" id="password_confirmation" 
+                        tabindex="3"
+                        v-model="passwordConfirmation"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
+                        placeholder="Confirm new password" required 
+                      />
+
+                      <button
+                        type="button"
+                        @click="unmasked = !unmasked"
+                        class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
+                      >
+                        <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked" />
+                        <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                      </button>
+                    </div>
+
+                    <div v-if="validationError || error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+                      <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                      </svg>
+                      <span class="sr-only">Info</span>
+                      <div>
+                        {{ validationError || error }}
+                      </div>
+                    </div>
+
+                    <Button
+                      :disabled="inProgress || (validationRunning && validationError)"
+                      @click="doSignup"
+                      type="submit"
+                      class="w-full"
+                      :loader="inProgress"
+                    >
+                      Sign up
+                    </Button>
+                  </form>
+<!-- END of set new paasord -->
+                  <div v-else class="flex items center justify-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-green-800 dark:text-green-400" role="alert">
+                    If user with specified email exists in our db, then request was sent. Please check your email at {{ sentToEmail }} to reset your password.
+                  </div>
+
+                </div>
+            </div>
+        </div>
+    </div> 
+
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+import { onMounted, ref, computed, Ref } from 'vue';
+import { useCoreStore } from '@/stores/core';
+import { useUserStore } from '@/stores/user';
+import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import Button from '@/afcl/Button.vue';
+
+const inProgress = ref(false);
+
+const coreStore = useCoreStore();
+const requestSent = ref(false);
+
+const emailInput = ref(null);
+const passwordInput = ref(null);
+const passwordConfirmationInput = ref(null);
+
+const password = ref("");
+const passwordConfirmation = ref("");
+const unmasked = ref(false);
+const sentToEmail: Ref<string> = ref('');
+
+const user = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+function checkPassowrd() {
+
+  if (!password.value || !passwordConfirmation.value) {
+    return 'Please enter both password and password confirmation';
+  }
+  if (password.value !== passwordConfirmation.value) {
+    return 'Passwords do not match';
+  }
+
+  if (password.value.length < passwordField.value.minLength) {
+    return `Password must be at least ${passwordField.value.minLength} characters long`;
+  }
+
+  if (password.value.length > passwordField.value.maxLength) {
+    return `Password must be at most ${passwordField.value.maxLength} characters long`;
+  }
+
+  if (passwordField.value.validation) {
+    const valError = applyRegexValidation(password.value, passwordField.value.validation);
+    if (valError) {
+      return valError;
+    }
+  }
+
+  return null;
+}
+
+const validationRunning = ref(false);
+
+const validationError = computed(() => {
+  if (validationRunning.value) {
+    return checkPassowrd();
+  }
+  return null;
+});
+
+const error: Ref<str | null> = ref(null);
+
+onMounted(async () => {
+  if (route.query.token) {
+    // call method completeVerifiedSignup to confirm { token }
+    // if success, then redirect to login page
+
+    const resp = await callAdminForthApi({
+      path: `/plugin/${route.meta.pluginInstanceId}/complete-verified-signup`,
+      method: 'POST',
+      body: {
+        token: route.query.token,
+      }
+    });
+    if (resp.error) {
+      window.adminforth.alert({
+        message: `Error fetching data: ${error.message}`,
+        variant: 'danger',
+      });
+    } else if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    } else {
+      await user.finishLogin();
+    }
+    return;
+
+  }
+  emailInput.value.focus();
+});
+
+
+const backgroundPosition = computed(() => {
+  return coreStore.config?.loginBackgroundPosition || '1/2';
+});
+
+const passwordField = computed(
+  () => route.meta.passwordField
+)
+
+onMounted(async () => {
+  await coreStore.getPublicConfig();
+});
+
+async function doSignup() {
+  error.value = null;
+  const email = emailInput.value!.value;
+  if (!email) {
+    error.value = 'Please enter your email';
+    return;
+  }
+  if (checkPassowrd()) {
+    validationRunning.value = true;
+    return;
+  }
+
+  inProgress.value = true;
+  const resp = await callAdminForthApi({
+    path: `/plugin/${route.meta.pluginInstanceId}/signup`,
+    method: 'POST',
+    body: {
+      email,
+      url: window.location.origin + window.location.pathname,
+      password: password.value,
+    }
+  });
+  inProgress.value = false;
+  if (resp.error) {
+    error.value = resp.error;
+  } else {
+    error.value = null;
+    requestSent.value = true;
+    sentToEmail.value = email;
+    if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    } else {
+      error.value = null;
+      await user.finishLogin();
+    }
+  }
+}
+
+
+
+</script>

package/dist/custom/SignupUnderLogin.vue

@@ -0,0 +1,13 @@
+<template>
+  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3">
+    Have no account? 
+    <Link to="/signup">
+      sign up now
+    </Link>
+  </p>
+</template>
+
+<script setup>
+import Link from '@/afcl/Link.vue';
+
+</script>

package/dist/index.js

@@ -0,0 +1,269 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import AdminForth, { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes } from "adminforth";
+import { SendEmailCommand, SESClient } from '@aws-sdk/client-ses';
+export default class OpenSignupPlugin extends AdminForthPlugin {
+    constructor(options) {
+        super(options, import.meta.url);
+        this.options = options;
+    }
+    modifyResourceConfig(adminforth, resourceConfig) {
+        const _super = Object.create(null, {
+            modifyResourceConfig: { get: () => super.modifyResourceConfig }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            if (!this.options.emailField) {
+                throw new Error(`emailField is required and should be a name of field in auth resource`);
+            }
+            if (this.options.confirmEmails) {
+                if (!this.options.confirmEmails.emailProvider) {
+                    throw new Error(`confirmEmails.emailProvider is required and should be a name of field in auth resource`);
+                }
+                if (!this.options.confirmEmails.emailConfirmedField) {
+                    throw new Error(`confirmEmails.emailConfirmedField is required and should be a name of field in auth resource`);
+                }
+                const emailConfirmedField = this.authResource.columns.find(f => f.name === this.options.confirmEmails.emailConfirmedField);
+                if (!emailConfirmedField) {
+                    const similar = suggestIfTypo(this.authResource.columns.map(f => f.name), this.options.confirmEmails.emailConfirmedField);
+                    throw new Error(`Field with name ${this.options.confirmEmails.emailConfirmedField} not found in resource ${this.authResource.resourceId}.
+          ${similar ? `Did you mean ${similar}?` : ''}
+        `);
+                }
+                this.emailConfirmedField = emailConfirmedField;
+                if (this.emailConfirmedField.type !== AdminForthDataTypes.BOOLEAN) {
+                    throw new Error(`Field ${this.emailConfirmedField.name} must be of type boolean`);
+                }
+            }
+            // find field with name resourceConfig.emailField in adminforth.auth.usersResourceId and show error if it doesn't exist
+            const authResource = adminforth.config.resources.find(r => r.resourceId === adminforth.config.auth.usersResourceId);
+            if (!authResource) {
+                throw new Error(`Resource with id config.auth.usersResourceId=${adminforth.config.auth.usersResourceId} not found`);
+            }
+            this.authResource = authResource;
+            const emailField = authResource.columns.find(f => f.name === this.options.emailField);
+            if (!emailField) {
+                const similar = suggestIfTypo(authResource.columns.map(f => f.name), this.options.emailField);
+                throw new Error(`Field with name ${this.options.emailField} not found in resource ${authResource.resourceId}.
+        ${similar ? `Did you mean ${similar}?` : ''}
+      `);
+            }
+            this.emailField = emailField;
+            if (!this.options.passwordField) {
+                throw new Error(`passwordField is required to get password constraints and should be a name of virtual field in auth resource`);
+            }
+            const passwordField = authResource.columns.find(f => f.name === this.options.passwordField);
+            if (!passwordField) {
+                const similar = suggestIfTypo(authResource.columns.map(f => f.name), this.options.passwordField);
+                throw new Error(`Field with name ${this.options.passwordField} not found in resource ${authResource.resourceId}.
+        ${similar ? `Did you mean ${similar}?` : ''}
+      `);
+            }
+            this.passwordField = passwordField;
+            adminforth.config.customization.loginPageInjections.underInputs.push({
+                file: this.componentPath('SignupUnderLogin.vue'),
+            });
+            adminforth.config.customization.customPages.push({
+                path: '/signup',
+                component: {
+                    file: this.componentPath('SignupPage.vue'),
+                    meta: {
+                        customLayout: true,
+                        pluginInstanceId: this.pluginInstanceId,
+                        passwordField: {
+                            minLength: passwordField.minLength,
+                            maxLength: passwordField.maxLength,
+                            validation: passwordField.validation
+                        }
+                    }
+                }
+            });
+            // for confirmation disable login if email is not confirmed
+            if (this.options.confirmEmails) {
+                if (!adminforth.config.auth.beforeLoginConfirmation) {
+                    adminforth.config.auth.beforeLoginConfirmation = [];
+                }
+                // unshift because if e.g. 2fa set it's hook, this one should be first
+                adminforth.config.auth.beforeLoginConfirmation.unshift((_a) => __awaiter(this, [_a], void 0, function* ({ adminUser }) {
+                    if (!adminUser.dbUser[this.emailConfirmedField.name]) {
+                        return { body: { allowedLogin: false }, error: 'You need to confirm your email to be able to login' };
+                    }
+                }));
+            }
+        });
+    }
+    validateConfigAfterDiscover(adminforth, resourceConfig) {
+        // optional method where you can safely check field types after database discovery was performed
+    }
+    instanceUniqueRepresentation(pluginOptions) {
+        // optional method to return unique string representation of plugin instance. 
+        // Needed if plugin can have multiple instances on one resource 
+        return `single`;
+    }
+    doLogin(email, response) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const username = email;
+            const userRecord = yield this.adminforth.resource(this.authResource.resourceId).get(Filters.EQ(this.emailField.name, email));
+            const adminUser = {
+                dbUser: userRecord,
+                pk: userRecord[this.authResource.columns.find((col) => col.primaryKey).name],
+                username,
+            };
+            const toReturn = { allowedLogin: true, error: '' };
+            yield this.adminforth.restApi.processLoginCallbacks(adminUser, toReturn, response);
+            if (toReturn.allowedLogin) {
+                this.adminforth.auth.setAuthCookie({
+                    response,
+                    username,
+                    pk: userRecord[this.authResource.columns.find((col) => col.primaryKey).name]
+                });
+            }
+            return toReturn;
+        });
+    }
+    setupEndpoints(server) {
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/completeVerifiedSignup`,
+            noAuth: true,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {
+                const { token } = body;
+                const { email } = yield this.adminforth.auth.verify(token, 'tempVerifyEmailToken');
+                if (!email) {
+                    return { error: 'Invalid token', ok: false };
+                }
+                const userRecord = yield this.adminforth.resource(this.authResource.resourceId).get(Filters.EQ(this.emailField.name, email));
+                if (!userRecord) {
+                    return { error: 'User not found', ok: false };
+                }
+                yield this.adminforth.resource(this.authResource.resourceId).update(userRecord[this.authResource.columns.find((col) => col.primaryKey).name], {
+                    [this.options.confirmEmails.emailConfirmedField]: true
+                });
+                return yield this.doLogin(email, response);
+            })
+        });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/signup`,
+            noAuth: true,
+            handler: (_b) => __awaiter(this, [_b], void 0, function* ({ body, response }) {
+                const { email, url, password } = body;
+                // validate email
+                if (this.emailField.validation) {
+                    for (const { regExp, message } of this.emailField.validation) {
+                        if (!new RegExp(regExp).test(password)) {
+                            return { error: message, ok: false };
+                        }
+                    }
+                }
+                // validate password
+                if (password.length < this.passwordField.minLength) {
+                    return { error: `Password must be at least ${this.passwordField.minLength} characters long`, ok: false };
+                }
+                if (password.length > this.passwordField.maxLength) {
+                    return { error: `Password must be at most ${this.passwordField.maxLength} characters long`, ok: false };
+                }
+                if (this.passwordField.validation) {
+                    for (const { regExp, message } of this.passwordField.validation) {
+                        if (!new RegExp(regExp).test(password)) {
+                            return { error: message, ok: false };
+                        }
+                    }
+                }
+                // first check again if email already exists
+                const existing = yield this.adminforth.resource(this.authResource.resourceId).count(Filters.EQ(this.emailField.name, email));
+                if (existing > 0) {
+                    return { error: 'Email already exists', ok: false };
+                }
+                // create user
+                const created = yield this.adminforth.resource(this.authResource.resourceId).create(Object.assign(Object.assign(Object.assign({}, (this.options.defaultFieldValues || {})), (this.options.confirmEmails ? { [this.options.confirmEmails.emailConfirmedField]: false } : {})), { [this.emailField.name]: email, [this.options.passwordHashField]: yield AdminForth.Utils.generatePasswordHash(password) }));
+                if (!this.options.confirmEmails) {
+                    const resp = yield this.doLogin(email, response);
+                    return resp;
+                }
+                // send confirmation email
+                const brandName = this.adminforth.config.customization.brandName;
+                const verifyToken = this.adminforth.auth.issueJWT({ email, issuer: brandName }, 'tempVerifyEmailToken', '2h');
+                // send email with AWS SES this.options.providerOptions.AWS_SES
+                const ses = new SESClient({
+                    region: this.options.confirmEmails.providerOptions.AWS_SES.region,
+                    credentials: {
+                        accessKeyId: this.options.confirmEmails.providerOptions.AWS_SES.accessKeyId,
+                        secretAccessKey: this.options.confirmEmails.providerOptions.AWS_SES.secretAccessKey
+                    }
+                });
+                process.env.HEAVY_DEBUG && console.log('🐛Sending reset tok to', verifyToken);
+                const emailCommand = new SendEmailCommand({
+                    Destination: {
+                        ToAddresses: [email]
+                    },
+                    Message: {
+                        Body: {
+                            Text: {
+                                Charset: "UTF-8",
+                                Data: `
+                  Dear user,
+                  Welcome to ${brandName}! 
+                  
+                  To confirm your email, click the link below:\n\n
+
+                  ${url}?verifyToken=${verifyToken}\n\n
+
+                  If you didn't request this, please ignore this email.\n\n
+                  Link is valid for 2 hours.\n\n
+
+                  Thanks,
+                  The ${brandName} Team
+                                    
+                `
+                            },
+                            Html: {
+                                Charset: "UTF-8",
+                                Data: `
+                <html>
+                  <head></head>
+                  <body>
+                    <p>Dear user,</p>
+                    <p>Welcome to ${brandName}!</p>
+                    <p>To confirm your email, click the link below:</p>
+                    <a href="${url}?token=${verifyToken}">Confirm email</a>
+                    <p>If you didn't request this, please ignore this email.</p>
+                    <p>Link is valid for 2 hours.</p>
+                    <p>Thanks,</p>
+                    <p>The ${brandName} Team</p>
+                  </body>
+                </html>
+
+
+                `
+                            }
+                        },
+                        Subject: {
+                            Charset: "UTF-8",
+                            Data: `Signup request at ${brandName}`
+                        }
+                    },
+                    Source: `${this.options.confirmEmails.sendFrom}`
+                });
+                try {
+                    const sRes = yield ses.send(emailCommand);
+                }
+                catch (e) {
+                    console.error('Error sending email', e);
+                    if (process.env.NODE_ENV === 'development') {
+                        return { error: 'Some thing went wrong, please check the console', ok: false };
+                    }
+                    return { error: 'Something went wrong, please contact support', ok: false };
+                }
+                return { ok: true };
+            })
+        });
+    }
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};