@dejwcake/craftable 0.1.9 → 2.0.0

package/scss/vendor/_index.scss

@@ -1,4 +1,5 @@
-@use "~@coreui/icons/css/coreui-icons.min.css" as *;
-@use "~font-awesome/scss/font-awesome.scss" as *;
-@use "~simple-line-icons/scss/simple-line-icons.scss" as *;
-@use "~@coreui/coreui/scss/coreui" as *;
+@import '@fortawesome/fontawesome-free/css/fontawesome.css';
+@import '@fortawesome/fontawesome-free/css/solid.css';
+@import '@fortawesome/fontawesome-free/css/regular.css';
+@import '@coreui/coreui/scss/coreui';
+@import 'vue-multiselect/dist/vue-multiselect.css';

package/src/auth/ActivationError.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <div class="auth-header">
+                <h1 class="auth-title">{{ translations.title }}</h1>
+            </div>
+            <div class="auth-body">
+                <div v-if="serverErrors.length" class="alert alert-danger">
+                    <ul>
+                        <li v-for="(error, index) in serverErrors" :key="index">{{ error }}</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    translations: { type: Object, default: () => ({}) },
+    serverErrors: { type: Array, default: () => [] },
+});
+</script>

package/src/auth/ActivationForm.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <form role="form" method="POST" :action="action" novalidate @submit.prevent="onSubmit">
+                <div class="auth-header">
+                    <h1 class="auth-title">{{ translations.title }}</h1>
+                    <p class="auth-subtitle">{{ translations.note }}</p>
+                </div>
+                <div class="auth-body">
+                    <div v-if="successMessage" class="alert alert-success">
+                        {{ successMessage }}
+                    </div>
+                    <div v-if="statusMessage && !successMessage" class="alert alert-success">
+                        {{ statusMessage }}
+                    </div>
+                    <div v-if="serverErrors.length" class="alert alert-danger">
+                        <ul>
+                            <li v-for="(error, index) in serverErrors" :key="index">{{ error }}</li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="email">{{ translations.email }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
+                            <input
+                                id="email"
+                                v-model="form.email"
+                                type="text"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.email }"
+                                name="email"
+                                :placeholder="translations.email"
+                            />
+                        </div>
+                        <div v-if="errors.email" class="invalid-feedback d-block form-text">
+                            {{ errors.email }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <button type="submit" class="btn btn-primary submit-btn" :disabled="submitting">
+                            <i v-if="submitting" class="fa fa-spinner fa-spin"></i>
+                            {{ translations.button }}
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useBaseAuth } from '@dejwcake/craftable';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    translations: { type: Object, default: () => ({}) },
+    statusMessage: { type: String, default: '' },
+    serverErrors: { type: Array, default: () => [] },
+});
+
+const { form, errors, submitting, successMessage, onSubmit } = useBaseAuth(props, {
+    formDefaults: { email: '' },
+    validationSchema: {
+        email: 'required|email',
+    },
+});
+</script>

package/src/auth/ForgotPasswordForm.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <form role="form" method="POST" :action="action" novalidate @submit.prevent="onSubmit">
+                <div class="auth-header">
+                    <h1 class="auth-title">{{ translations.title }}</h1>
+                    <p class="auth-subtitle">{{ translations.note }}</p>
+                </div>
+                <div class="auth-body">
+                    <div v-if="successMessage" class="alert alert-success">
+                        {{ successMessage }}
+                    </div>
+                    <div v-if="statusMessage && !successMessage" class="alert alert-success">
+                        {{ statusMessage }}
+                    </div>
+                    <div v-if="serverErrors.length" class="alert alert-danger">
+                        <ul>
+                            <li v-for="(error, index) in serverErrors" :key="index">{{ error }}</li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="email">{{ translations.email }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
+                            <input
+                                id="email"
+                                v-model="form.email"
+                                type="text"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.email }"
+                                name="email"
+                                :placeholder="translations.email"
+                            />
+                        </div>
+                        <div v-if="errors.email" class="invalid-feedback d-block form-text">
+                            {{ errors.email }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <button type="submit" class="btn btn-primary submit-btn" :disabled="submitting">
+                            <i v-if="submitting" class="fa fa-spinner fa-spin"></i>
+                            {{ translations.button }}
+                        </button>
+                    </div>
+
+                    <div v-if="loginUrl" class="text-center">
+                        <a :href="loginUrl" class="auth-ghost-link">{{ translations.backToLogin }}</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useBaseAuth } from '@dejwcake/craftable';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    loginUrl: { type: String, default: '' },
+    translations: { type: Object, default: () => ({}) },
+    statusMessage: { type: String, default: '' },
+    serverErrors: { type: Array, default: () => [] },
+});
+
+const { form, errors, submitting, successMessage, onSubmit } = useBaseAuth(props, {
+    formDefaults: { email: '' },
+    validationSchema: {
+        email: 'required|email',
+    },
+});
+</script>

package/src/auth/LoginForm.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <form role="form" method="POST" :action="action" novalidate @submit.prevent="onSubmit">
+                <div class="auth-header">
+                    <h1 class="auth-title">{{ translations.title }}</h1>
+                    <p class="auth-subtitle">{{ translations.signInText }}</p>
+                </div>
+                <div class="auth-body">
+                    <div v-if="statusMessage" class="alert alert-success">
+                        {{ statusMessage }}
+                    </div>
+                    <div v-if="serverErrors.length" class="alert alert-danger">
+                        <ul>
+                            <li v-for="(error, index) in serverErrors" :key="index">{{ error }}</li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="email">{{ translations.email }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
+                            <input
+                                id="email"
+                                v-model="form.email"
+                                type="text"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.email }"
+                                name="email"
+                                :placeholder="translations.email"
+                            />
+                        </div>
+                        <div v-if="errors.email" class="invalid-feedback d-block form-text">
+                            {{ errors.email }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="password">{{ translations.password }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-lock"></i></span>
+                            <input
+                                id="password"
+                                v-model="form.password"
+                                type="password"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.password }"
+                                name="password"
+                                :placeholder="translations.password"
+                            />
+                        </div>
+                        <div v-if="errors.password" class="invalid-feedback d-block form-text">
+                            {{ errors.password }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <input type="hidden" name="remember" value="1" />
+                        <button type="submit" class="btn btn-primary submit-btn" :disabled="submitting">
+                            <i v-if="submitting" class="fa fa-spinner fa-spin"></i>
+                            {{ translations.button }}
+                        </button>
+                    </div>
+                    <div class="mb-3 text-center">
+                        <a :href="passwordResetUrl" class="auth-ghost-link forgot-link">{{
+                            translations.forgotPassword
+                        }}</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useBaseAuth } from '@dejwcake/craftable';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    redirectUrl: { type: String, default: '/admin' },
+    translations: { type: Object, default: () => ({}) },
+    passwordResetUrl: { type: String, default: '/admin/password-reset' },
+    statusMessage: { type: String, default: '' },
+    serverErrors: { type: Array, default: () => [] },
+});
+
+const { form, errors, submitting, onSubmit } = useBaseAuth(props, {
+    formDefaults: { email: '', password: '' },
+    validationSchema: {
+        email: 'required|email',
+        password: 'required',
+    },
+    onSuccess() {
+        window.location.replace(props.redirectUrl);
+    },
+});
+</script>
+
+<style scoped>
+.forgot-link {
+    text-decoration: none;
+}
+
+.forgot-link:hover {
+    text-decoration: none;
+}
+</style>

package/src/auth/ResetPasswordForm.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="card">
+        <div class="card-body">
+            <form role="form" method="POST" :action="action" novalidate @submit.prevent="onSubmit">
+                <div class="auth-header">
+                    <h1 class="auth-title">{{ translations.title }}</h1>
+                    <p class="auth-subtitle">{{ translations.note }}</p>
+                </div>
+                <div class="auth-body">
+                    <div v-if="statusMessage" class="alert alert-success">
+                        {{ statusMessage }}
+                    </div>
+                    <div v-if="serverErrors.length" class="alert alert-danger">
+                        <ul>
+                            <li v-for="(error, index) in serverErrors" :key="index">{{ error }}</li>
+                        </ul>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="email">{{ translations.email }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
+                            <input
+                                id="email"
+                                v-model="form.email"
+                                type="text"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.email }"
+                                name="email"
+                                :placeholder="translations.email"
+                            />
+                        </div>
+                        <div v-if="errors.email" class="invalid-feedback d-block form-text">
+                            {{ errors.email }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="password">{{ translations.password }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-lock"></i></span>
+                            <input
+                                id="password"
+                                v-model="form.password"
+                                type="password"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.password }"
+                                name="password"
+                                :placeholder="translations.password"
+                            />
+                        </div>
+                        <div v-if="errors.password" class="invalid-feedback d-block form-text">
+                            {{ errors.password }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="password_confirmation">{{ translations.passwordConfirm }}</label>
+                        <div class="input-group input-group--custom">
+                            <span class="input-group-text"><i class="fa fa-lock"></i></span>
+                            <input
+                                id="password_confirmation"
+                                v-model="form.password_confirmation"
+                                type="password"
+                                class="form-control"
+                                :class="{ 'is-invalid': errors.password_confirmation }"
+                                name="password_confirmation"
+                                :placeholder="translations.passwordConfirm"
+                            />
+                        </div>
+                        <div v-if="errors.password_confirmation" class="invalid-feedback d-block form-text">
+                            {{ errors.password_confirmation }}
+                        </div>
+                    </div>
+
+                    <div class="mb-3">
+                        <button type="submit" class="btn btn-primary submit-btn" :disabled="submitting">
+                            <i v-if="submitting" class="fa fa-spinner fa-spin"></i>
+                            {{ translations.button }}
+                        </button>
+                    </div>
+
+                    <div v-if="loginUrl" class="text-center">
+                        <a :href="loginUrl" class="auth-ghost-link">{{ translations.backToLogin }}</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useBaseAuth } from '@dejwcake/craftable';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    loginUrl: { type: String, default: '' },
+    translations: { type: Object, default: () => ({}) },
+    statusMessage: { type: String, default: '' },
+    serverErrors: { type: Array, default: () => [] },
+    email: { type: String, default: '' },
+    token: { type: String, required: true },
+    redirectUrl: { type: String, default: '/admin' },
+});
+
+const { form, errors, submitting, onSubmit } = useBaseAuth(props, {
+    formDefaults: {
+        email: props.email,
+        password: '',
+        password_confirmation: '',
+        token: props.token,
+    },
+    validationSchema: {
+        email: 'required|email',
+        password: 'required|min:7',
+        password_confirmation: 'required|confirmed:@password',
+    },
+    onSuccess(data) {
+        window.location.replace(data.redirect || props.redirectUrl);
+    },
+});
+</script>

package/src/components/ConfirmModal.vue

@@ -0,0 +1,65 @@
+<template>
+    <Teleport to="body">
+        <div v-if="show" class="modal-backdrop fade show" @click="$emit('cancel')"></div>
+        <div v-if="show" class="modal fade show d-block" tabindex="-1" role="dialog" @click.self="$emit('cancel')">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">
+                            <i :class="iconClass" class="me-2"></i>
+                            {{ translations.confirm_title }}
+                        </h5>
+                        <button type="button" class="btn-close" @click="$emit('cancel')"></button>
+                    </div>
+                    <div class="modal-body">
+                        <p>{{ translations.confirm_text }}</p>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" @click="$emit('cancel')">
+                            {{ translations.cancel_btn }}
+                        </button>
+                        <button type="button" :class="btnClass" @click="$emit('confirm')">
+                            {{ translations.confirm_btn }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    variant: {
+        type: String,
+        default: 'danger',
+        validator: (v) => ['danger', 'success', 'primary', 'warning'].includes(v),
+    },
+    translations: {
+        type: Object,
+        default: () => ({
+            confirm_title: 'Warning!',
+            confirm_text: 'Are you sure?',
+            confirm_btn: 'Yes, confirm',
+            cancel_btn: 'Cancel',
+        }),
+    },
+});
+
+const btnClass = computed(() => {
+    const base = `btn btn-${props.variant}`;
+    return ['success', 'primary'].includes(props.variant) ? `${base} text-white` : base;
+});
+
+const iconClass = computed(() => {
+    if (props.variant === 'danger') return 'fa fa-triangle-exclamation text-danger';
+    if (props.variant === 'warning') return 'fa fa-triangle-exclamation text-warning';
+    if (props.variant === 'success') return 'fa fa-circle-check text-success';
+    return 'fa fa-circle-question text-primary';
+});
+
+defineEmits(['confirm', 'cancel']);
+</script>

package/src/components/UserDetailTooltip.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="user-detail-tooltip d-inline-flex align-items-center">
+        <label v-if="label" class="col-form-label text-body-secondary me-2 mb-0">{{ label }} :</label>
+        <Popper arrow click>
+            <div class="d-inline-flex align-items-center cursor-pointer">
+                <img
+                    v-if="user.avatar_thumb_url"
+                    :src="user.avatar_thumb_url"
+                    class="avatar-photo"
+                    :alt="user.full_name"
+                />
+                <div v-else class="avatar-initials">
+                    {{ abbr }}
+                </div>
+
+                <div v-if="options.showFullNameLabel" class="avatar-trigger-text">
+                    <span class="avatar-full-name">{{ user.full_name }}</span>
+                    <span v-if="datetime" class="d-block user-info-span">{{ datetime }}</span>
+                </div>
+            </div>
+
+            <template #content>
+                <div class="user-detail-popper d-flex align-items-center">
+                    <div class="user-avatar flex-shrink-0">
+                        <img
+                            v-if="user.avatar_thumb_url"
+                            :src="user.avatar_thumb_url"
+                            class="avatar-photo"
+                            :alt="user.full_name"
+                        />
+                        <div v-else class="avatar-initials">
+                            {{ abbr }}
+                        </div>
+                    </div>
+
+                    <div class="user-info ms-3">
+                        <h3>
+                            {{ user.full_name }}
+                            <small v-if="userText">
+                                | <strong class="text-uppercase">{{ userText }}</strong>
+                            </small>
+                        </h3>
+                        <a v-if="user.email" :href="'mailto:' + user.email">{{ user.email }}</a>
+                        <p v-if="datetimeText">{{ datetimeText }}</p>
+                    </div>
+                </div>
+            </template>
+        </Popper>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Popper from 'vue3-popper';
+
+const props = defineProps({
+    user: {
+        type: Object,
+        required: true,
+    },
+    userText: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: '',
+    },
+    datetimeText: {
+        type: String,
+        default: '',
+    },
+    options: {
+        type: Object,
+        default: () => ({
+            showFullNameLabel: true,
+        }),
+    },
+    datetime: {
+        type: String,
+        default: '',
+    },
+});
+
+const abbr = computed(() => {
+    return `${props.user.first_name.slice(0, 1)}${props.user.last_name.slice(0, 1)}`;
+});
+</script>