exchange-2.0/resources/assets/vue/components/settings/elements/PageLock.vue

<template>
    <transition name="fade">
        <div v-if="localActive" class="overlay-lock">
            <div class="backdrop">

            </div>
            <div class="content" v-if="!isLoading">
                <div class="lock-box">
                    <p>To edit, please enter the password to unlock page:</p>

                    <input
                        v-model="passwordInput"
                        type="password"
                        placeholder="Enter password"
                        class="password-input"
                        @keyup.enter="verifyPassword"
                    />

                    <button @click="verifyPassword" class="unlock-btn">
                        Unlock
                    </button>

                    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: "PageLock",
    props: {
        active: {
            type: Boolean,
            default: false,
        },
        section: {
            type: String,
            required: true,
        },
        companyId: {
            type: Number,
            required: true,
        },
        bookingId: {
            type: Number,
            required: true,
        },
        password: {
            type: String,
            default: "1234", // 🔐 Default password (you can override in parent)
        },
    },
    computed: {
        pendingQueue() {
            return this.$store.getters.isInCompleteQueue(this.section);
        },
    },
    data() {
        return {
            localActive: this.active,
            passwordInput: "",
            errorMessage: "",
            isLoading: true,
        };
    },
    watch: {
        active(newVal) {
            this.localActive = newVal;
        },
        pendingQueue(inComplete) {
            if (inComplete) {
                this.fetchStatus();
            }
        },
    },
    created() {
        this.$store.dispatch("updateListQueue", { name: this.section });
    },
    methods: {
        fetchStatus() {
            this.isLoading = true;
            this.parameters = {
                booking_id: this.bookingId,
                company_id: this.companyId,
            };
            this.submit(
                route("api.rule.check.transfer.period.lock"),
                "post",
                this.section,
                false,
                false
            );
        },
        successHandler(response, section, payload) {
            console.log('response: ' , JSON.stringify(response));
             console.log('section: ' , JSON.stringify(section));
              console.log('payload: ' , JSON.stringify(payload));
            if(section === this.section){
                this.$emit("initializeLock", false); // emit unlock
                this.localActive = false;
            }
            if(section === this.section + 'UnLock'){
                this.$emit("lock", false); // emit unlock
                this.localActive = false;
                this.passwordInput = '';
            }
            setTimeout(() => {
                this.isLoading = false;
            }, 2000);
        },
        errorHandler(response, statusCode, section) {
            this.isLoading = false;
            if (statusCode === 422) {
                // this.$emit("lock", true);
            }
            else if(statusCode === 403) {
                this.errorMessage = response.message;
            }
        },
        verifyPassword() {
            // if (this.passwordInput === this.password) {
                this.errorMessage = "";
                this.parameters = {
                    booking_id: this.bookingId,
                    password: this.passwordInput,
                };
                this.submit(
                    route("api.booking.delete.lock", this.bookingId),
                    "delete",
                    this.section + 'UnLock',
                    false,
                    true
                );
            // } else {
            //     this.errorMessage = "Incorrect password. Please try again.";
            // }
        },
    },
};
</script>

<style scoped>
.overlay-lock {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
}

.lock-box {
    background: white;
    border-radius: 1rem;
    padding: 2rem 3rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 300px;
}

.password-input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ccc;
}

.unlock-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: none;
    background: #4caf50;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
}

.unlock-btn:hover {
    background: #43a047;
}

.error {
    color: red;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
</style>