How to display speak stuff no selection by true or false if speak stuff property is null or no values?

I work on asp.net MVC web app I face issue i can’t make check box no

selection if value of speakstuff property is null so i will not make

default value false .

i need speakstuff property when display for first

time of user to display as null so how to change my code to accept if

speakstuff is null then no checked checkbox selection by true or false

my code as below :

my code what i try as below

    $(document).ready(function () {

        $('.speak-stuff-checkbox').on('change', function () {
            $('.speak-stuff-checkbox').not(this).prop('checked', false);
            var selectedValue = $(this).val();
            $('#SpeakStuff').val(selectedValue);
        });
      
        });

     @Html.Label("Did You Meet/Speak to Staff", htmlAttributes: new { @class = "control-label col-md-5" })
     <div class="col-md-7">
        

         <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="true" class="speak-stuff-checkbox" @(Model.SpeakStuff ? "checked" : "") disabled />
         Yes
         &nbsp;&nbsp;
         <input type="checkbox" id="SpeakStuff" name="SpeakStuff" value="false" class="speak-stuff-checkbox" @(!Model.SpeakStuff ? "checked" : "") disabled />
         No



     </div>

 public class ResignationRequester
 {
     
public int RequestNo { get; set; }
public bool SpeakStuff { get; set; }
 }

when assign value to speakstuff property it made as below :

obj.SpeakStuff = F6000059["REEV01"].ToString().ToUpper() == "Y" ? true : false;

Uncaught TypeError: Illegal invocation when using Bootstrap Modal and FullCalendar

I am encountering an issue in my web project where I am using Bootstrap Modal in conjunction with FullCalendar to manage events. When trying to open or interact with the modal, I receive the following error in the console:

Uncaught TypeError: Illegal invocation
    at Object.findOne (selector-engine.js:20:44)
    at Ni._showElement (modal.js:181:38)
    at modal.js:118:36
    at m (index.js:254:5)
    at backdrop.js:79:7
    at m (index.js:254:5)
    at _ (index.js:260:5)
    at yi._emulateAnimation (backdrop.js:145:5)
    at yi.show (backdrop.js:78:10)
    at Ni.show (modal.js:118:20)

Context:

I am using Bootstrap 5 and the latest version of FullCalendar. My implementation includes creating modals using new bootstrap.Modal and interacting with events in FullCalendar.

Steps to Reproduce:

Open the modal using new bootstrap.Modal(element).
Attempted Solutions:

Verified that I am using Bootstrap 5 and the latest version of FullCalendar.

Ensured that bootstrap.bundle.min.js is included and contains all necessary dependencies.

Verified that I am passing a real DOM element when instantiating the Modal.

Question:

Has anyone encountered this error when using Bootstrap Modal and FullCalendar? Is there any known solution to resolve this “Illegal invocation” issue? Appreciate any help or guidance in resolving this matter.

How can add iteration to my form validation error function?

I am new to programming and am trying to build this form validation function to check the validity of different input types and throw relevant errors. The part I am struggling with is incorporating iteration so that it runs through my array of different input types and checks their validity.

I do not know if this is the most effective way of doing it but this is all I could think of for now.

This is the code I am working on and at the moment it only works with the input type ’email’.

What I thought I could do is add a loop function to iterate through my inputTypes array and check validity (perhaps with checkValidity()?) for each of the input types listed and if invalid then send it over to the showError function.

However, where and how can I fit it in so that it works with the dot notation?
Should it be within the event listener or the showError function or entirely separate?

I would be very grateful for any hints or critiques.

const form = document.querySelector("form");
const email = document.querySelector('input[type=email]');
const tel = document.querySelector('input[type=tel]');
const text = document.querySelector('input[type=text]');
const radio = document.querySelector('input[type=radio]');
const inputTypes = [email,tel,text,radio];

const emailError = document.querySelector('input[type=email] + span.error');

//detect when user stops typing and check if content is valid

email.addEventListener("keyup", (event) =>{
      if (email.validity.valid) {
      emailError.textContent = "";
      emailError.className = "error";
      } 
      else {
        setTimeout(() =>{
          showError();
         },2000);
      }
});

//prevent form from being submitted if the value isn't valid

form.addEventListener("submit", (event) => {
  if (!email.validity.valid) {
    showError();
    event.preventDefault();
  }
});

//match appropriate error messages with relevant constraint violations of an input type

function showError() {
  if (email.validity.valueMissing) {
    emailError.textContent = "You need to enter an email address."; 
  } else if (email.validity.typeMismatch) {
    emailError.textContent = "Entered value needs to be an email address.";
  } else if (email.validity.tooShort) {
    emailError.textContent = `Email should be at least ${inputTypes.minLength} characters; you entered ${inputTypes.value.length}.`;
  }
  emailError.className = "error active";
}

Superset UI: Refused to connect to ‘https://example.com/’ because it violates the following Content Security Policy directive: “connect-src ‘self'”

This is CSP issue
i am trying to access the external api using fetch from superset React frontEnd.

To enable the csp
CONTENT_SECURITY_POLICY_WARNING = False

TALISMAN_ENABLED in config file
TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", 
False))
CONTENT_SECURITY_POLICY_WARNING = True

# Do you want Talisman enabled?
TALISMAN_ENABLED = utils.cast_to_boolean(os.environ.get("TALISMAN_ENABLED", True))

# If you want Talisman, how do you want it configured??
TALISMAN_CONFIG = {
    "content_security_policy": {
        "default-src": ["'self'"],
        "img-src": ["'self'", "data:"],
        "worker-src": ["'self'", "blob:"],
        "connect-src": [
            "'self'",
            "https://api.mapbox.com",
            "https://events.mapbox.com",
        ],
        "object-src": "'none'",
        "style-src": ["'self'", "'unsafe-inline'"],
        "script-src": ["'self'", "'strict-dynamic'"],
    },
    "content_security_policy_nonce_in": ["script-src"],
    "force_https": False,
}
# React requires `eval` to work correctly in dev mode
TALISMAN_DEV_CONFIG = {
    "content_security_policy": {
        "default-src": ["'self'"],
        "img-src": ["'self'", "data:"],
        "worker-src": ["'self'", "blob:"],
        "connect-src": [
            "'self'",
            "https://api.mapbox.com",
            "https://events.mapbox.com",
        ],
        "object-src": "'none'",
        "style-src": ["'self'", "'unsafe-inline'"],
        "script-src": ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
    },
    "content_security_policy_nonce_in": ["script-src"],
    "force_https": False,
}`

i tried to enable it but it’s not work for me

Highlight image map area on mouseover react

How can I create a image map highlighter in React with support to TypeScript?. I want the functionality exactly like this without using JQuery. Is there any framework that can do this or how can i make it myself? Also i want a functionality like creating a map area. It would be better if the framework can do that feature too.

Accessibility widget solution for a Gatsby.js site

I have made a website for a client with gatsby.js, for which an additional requirement (aside from the usual accessibility checklist) is the integration of an accessibility widget, much like this one. The aforementioned is the only free solution I have found, but that doesn’t seem to be working on my Gatsby site. I did a trial on a vanilla js site and that works as expected.

My question is: is there anyone that has tried anything similar for a Gatsby site? I have done some research on this and almost all solutions are paid, and I can’t seem to be able to find any reliable documentation to integrate those on a Gatsby site.

I tried the Sienna widget, but it doesn’t seem to be working.

Filter all item if more than nearest based on quantity in array using javascript

i have a question 3 days ago and received help, today i have a new question. I have a array promotion conditions based on product quantity, if user order product match with product id and >= quantity in promotion condition, order will discount for user. Promotion data structure is

const promotions = [
   {
      id: 1,
      name: 'Promotion 1',
      conditionQuantity: 3,      // need product in order >= this quantity to discount order
      discount: 10000,
      conditionProducts: [
        { promotionId: 1, productId: 1 },
        { promotionId: 1, productId: 2 },
      ]
   },
   {
      id: 2,
      name: 'Promotion 1',
      conditionQuantity: 5,
      discount: 15000,
      conditionProducts: [
        { promotionId: 2, productId: 1 },
        { promotionId: 2, productId: 2 },
        { promotionId: 2, productId: 3 },
      ]
   },
   {
      id: 3,
      name: 'Promotion 2',
      conditionQuantity: 3,
      discount: 12000,
      conditionProducts: [
        { promotionId: 3, productId: 1 },
      ]
   }
]

and order products structure is

const productList = [
 {
  id: 1,             // product id
  name: 'Product 1',
  quantity: 3,       // quantity of product in order
 },
 {
  id: 2,
  name: 'Product 2',
  quantity: 6,
 },
 {
  id: 3,
  name: 'Product 3',
  quantity: 7,
 }
]

I expected result in my case is

const result = [
 
    id: 1,
    name: 'Promotion 1',
    totalDiscount: 10000,
  },
  {
    id: 2,
    name: 'Promotion 1',
    totalDiscount: 30000
  },
  {
    id: 3,
    name: 'Promotion 2',
    totalDiscount: 12000
  },
]

and total discount = 52000 (because productId = 1 is satisfy “Promotion 1” and “Promotion 2” (3 >= 3), productId = 2 and productId = 3 satisfy condition of “Promotion 2” (6, 7 > 5))

i try this code but not correct expected result

// get product condition in promotions
const getPromotionProducts = (promotions) => {
  return promotions.reduce((acc, promotion) => {
    if (promotion.conditionProducts.length > 0) {
      acc = acc.concat(promotion.conditionProducts)
    };
    return acc;
  }, []);
}

const getUserPromotions = (promotions, productList) => {
  const promotionProducts = getPromotionProducts(promotions);
  
  const mapPromotionConditionAndProductList = promotionProducts.reduce((acc, promotionProduct) => {
      const findProduct = productList.find(product => product.id === promotionProduct.productId);
      if (findProduct) acc = acc.concat(promotionProduct);
      return acc;
  }, []);

  let result = [], max = 0;
  for (const mappedProduct of mapPromotionConditionAndProductList) {
      
    const findPromotion = promotions.find(promotion => promotion.id === mappedProduct.promotionId);
    const findProduct = productList.find(product => product.id === mappedProduct.productId);

    if (findPromotion.conditionQuantity <= findProduct.quantity && findPromotion.conditionQuantity >= max) {
      if (findPromotion.conditionQuantity > max ) {
        max = findPromotion.conditionQuantity;
        result = [];
      }
      result.push({ ...findPromotion, productId: findProduct.id });
    }
  }
  return Object.values(result.reduce((acc, item) => {
    const key = `${item.id}-${item.promotionId}`;
    if (!acc[key]) { acc[key] = { ...item, totalDiscount: 0 } }
    acc[key].totalDiscount += item.discount;

    return acc;
  }, {}));
};

My code result uncorrect result, missing “Promotion 1” and “Promotion 2” with productId = 1.

[
  {
    id: 2,
    name: 'Promotion 1',
    totalDiscount: 30000,
    productId: 2
  }
]

How can i fix getUserPromotions function to response correct? I am looking forward to receive help from anyone.

Sticky nav bar and image size on click

Good evening, I’d like my site to have the same property as the “https://camillemormal.com/” site. That is, when I click on one of my images, they take up the entire screen size. However, I can’t manage this at all, and I don’t know what effect to use to make everything “smoother”.

My css and js are such that

#image-track {
    display: flex;
    gap: 4vmin;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(0%, -50%); 
    user-select: none;
  }
  
#image-track > .image {
    width: 40vmin;
    height: 56vmin;
    object-fit: cover;
    object-position: 100% center;
}

#image-track .image {
    transition: transform 0.3s ease;
}

#image-track .image.full-size {
    max-width: 100%;
    object-fit: contain;
    transform: scale(1.5);
}
document.addEventListener("DOMContentLoaded", function () {
  const images = document.querySelectorAll("#image-track .image");

  images.forEach(image => {
      image.addEventListener("click", function () {
          if (this.classList.contains("full-size")) {
              this.classList.remove("full-size");
          } else {
              images.forEach(img => img.classList.remove("full-size"));
              this.classList.add("full-size");
          }
      });
  });
});

As mentioned earlier, I want my image to get the whole page size when i click on them. I tried many things, but aint working. I also don’t understand why my navbar ain’t sticky, well it’s due to the parallax effect, but I don’t know how to make my navbar sticky without removing it. Any advices / help ?

OpenStax dropdown menu

I’m looking to design a dropdown menu similar to the one on the OpenStax website, specifically the sections that include “Subjects”, “Technology”, and “What We Do”. Here’s the link for reference: https://openstax.org.

I’ve made some progress in creating the anchors and other elements, but I’m having trouble with the actual implementation. Could someone provide some guidance on this matter?

html

<nav class="navbar1">
            <img src=".Logo.png" alt="OpenStax logo" width="120px" height="30px" class="logo">
            <p class="navpara">Access. The future of education.</p>
            <div class="dropdownmenu">
                <button onclick="myFunction()" class="dropdownbtn">Subjects</button>
                <div id="mydropdown" class="dropdown-content">
                    <a href="">All</a>
                    <a href="">Business</a>
                    <a href="">College Success</a>
                    <a href="">Humanities</a>
                    <a href="">Science</a>
                    <a href="">Social Sciences</a>
                </div>
            </div>
            <div class="dropdownmenu">
                <button onclick="myFunction()" class="dropdownbtn">Technology</button>
                <div id="mydropdown" class="dropdown-content">
                    <a href="">OpenStax Assignable</a>
                    <a href="">OpenStax Kinetic</a>
                    <a href="">OpenStax Technology Partners</a>
                </div>
            </div>
            <div class="dropdownmenu">
                <button onclick="myFunction()" class="dropdownbtn">What We do</button>
                <div id="mydropdown" class="dropdown-content">
                    <a href="">About us</a>
                    <a href="">Team</a>
                    <a href="">Research</a>
                    <a href="">K12 Books & Resources</a>
                    <a href="">Institutional Partnership</a>
                    <a href="">Technology Partnership</a>
                    <a href="">Webinars</a>
                </div>
            </div>
            <Button class="givebtn">Give</Button>
            <button class="loginbtn">Login</button>
        </nav>

Css

.navbar1 {
    width: 100%;
    padding: 5px 0 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: white;
}
.logo {
    margin-right: 10px;
    padding-left: 60px;
}
.navpara {
    margin-right: 14rem;
}

.dropdownbtn {
    padding: 13px 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

/* The container <div> - needed to position the dropdown content */
.dropdownmenu {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.show {display:block;}

.givebtn {
    padding: 13px 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

.loginbtn {
    padding: 13px 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 0 10px;
}

Javascript


function myFunction() {
    document.getElementById("mydropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (!event.target.matches('.dropdownbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

Node pre ‘save’ hook using a statics function

I’m trying to use a custom encrypt function inside a pre ‘save’ hook on my schema, but i’m having an error telling me that this.encrypt is not a function

passwordSchema.pre('save', async function() {
    if (this.isModified('password')) {
        try {
            this.password = this.encrypt(this.password);
        } catch (error) {
            throw new Error('Error while encrypting the password : ' + error.message);
        }
    }

    if (this.isModified('login')) {
        try {
            this.login = passwordSchema.encrypt(this.login);
        } catch (error) {
            throw new Error('Error while encrypting the login : ' + error.message);
        }
    }
});

There is the function encrypt :

passwordSchema.statics.encrypt = function(password) {
    const cipher = crypto.createCipheriv('aes-256-cbc', CRYPTO_AES);

    let encryptedPassword = cipher.update(password, 'utf8', 'hex');

    encryptedPassword += cipher.final('hex');

    return encryptedPassword;
};

And there is the schema :

const passwordSchema = new mongoose.Schema({
    login: {
        type: String,
        required: [true, "Login required"]
    },

    password: {
        type: String,
        required: [true, "Password required"]
    },

    commentaire: {
        type: String
    }
});

Note : The schema password is not exported at the end but instead used inside a collection schema

const collectionSchema = new mongoose.Schema(
    {
        [...],

        passwords: [passwordSchema]
    },

    {
        timestamps: true
    }
);

I have tried to use the constructor and other thing like “Password.encrypt” what can i do to be able to use this statics function inside the pre ‘save’ hook ?

payment gateway integration modal doesn’t show up after loading content in iframe

I’m trying to add payment gateway into my website and I created a route which sends html content after the purchase is done. I tried to show the html content in my website using iframe but all I see is a blank document. However there is another website that is using the same payment gateway and they get a modal which shows a qr code. I want similar thing on my website. What am I doing wrong in my code?

This is the reference site:

Use this id: 720390172 and zone id: 10328 and select any item option then select abapay and submit, then a modal appears with a qr code

payment documentation site

Backend code

export const createSingleOrder = async (req, res) => {
  const item = req.body;

  try {
      const paywayResponse = await initiatePaywayPayment(item);
        if (paywayResponse.status !== 'success') {
            throw new Error('Payment with PayWay failed');
        }
      res.json({ status: 'success', htmlContent: paywayResponse.htmlContent });
  } catch (error) {
      res.status(500).send("Internal Server Error");
  }
};

async function initiatePaywayPayment(item) {
  const paywayApiUrl = process.env.PAYWAY_API_URL;
  const merchantId = process.env.PAYWAY_MERCHANT_ID;
  const publicKey = process.env.PAYWAY_PUBLIC_KEY;
  
  const reqTime = new Date().toISOString();
  const tranId = generateTranId();
  const amount = item.price;
  const paymentOption = 'abapay'; 

  const hashString = `${merchantId}${tranId}${amount}${reqTime}${publicKey}`;
  const hash = crypto.createHmac('sha512', publicKey)
                  .update(hashString)
                  .digest('base64');
  const form = new FormData();
  form.append('merchant_id', merchantId);
  form.append('tran_id', tranId);
  form.append('req_time', reqTime);
  form.append('amount', amount);
  form.append('payment_option', paymentOption);
  form.append('hash', hash);
  try {
      const response = await axios.post(paywayApiUrl, form, {
          headers: form.getHeaders(),
      });
          console.log('response', response.data)
          return { status: 'success', htmlContent: response.data };

  } catch (error) {
      return { status: 'error', message: error.message };
  }
}

In the frontend I’m using vue2

<template>
  <div id="app" class="app">
    <div v-if="paymentHtmlContent" class="payment-iframe-container">
      <iframe id="paymentIframe" frameborder="0"></iframe>
    </div>
    <b-button
      @click="buyNowSingle"
      >Buy Now</b-button
    >
</div>
</template>

<script>
export default {
 data() {
    return {
      paymentHtmlContent: "",
    };
  },
  methods: {
     loadPaymentIframe() {
      const iframe = document.getElementById("paymentIframe");
      if (iframe && this.paymentHtmlContent) {
        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write(this.paymentHtmlContent);
        iframe.contentWindow.document.close();
      }
    },
    buyNowSingle() {
        const newItem = {
          price: this.selectedDiamond.price,
        };
        axios
          .post(
            `${process.env.VUE_APP_API_ENDPOINT}/transact/createsingleorder`,
            {
              items: newItem,
            }
          )
          .then((response) => {
            if (response.data && response.data.htmlContent) {
            this.paymentHtmlContent = response.data.htmlContent;
            this.$nextTick(() => {
               this.loadPaymentIframe();
            });
          }
           
          })
          .catch((error) => {
            console.error("Purchase failed:", error);
          });
       } 
      }
    },
  }
}
</script>

.html?v=000000 .js?v=00000 how can ı set like this files in apache to running them

in apache, trying to set .html?v=00000 files like or .js?v=0000000 files with ?version. I have different versions in the same folder.
But when dosnt work .html?v0000 files, only going to same .html before ?v=0000 and running only .html file always without after ?v=00000.

How to set modules in apache or a set js file to edit?

only working .html?v0000 before ?v=000000

Switching between 5 nodejs appilcations using single username and password

I am building a central platform form where user can access or switch between my already build other 4 products incudilng this central platfrom. How should I approach this problem and what are the hurdles I will face during implementing this switching feature?.

Note:- Other 4 products using jwt token for authentication and deployed separately on different machines.

I am thinking of generating jwt token from central platfrom only and redirect users to switched application.
I want a solution which is reliable and secure.

The website is encountering an error while attempting to decrypt a file using JavaScript

function readFile() {
    return new Promise((resolve, reject) => {
        var fileInput = document.getElementById('fileInput');
        
        if (fileInput.files.length > 0) {
            var file = fileInput.files[0];
            var reader = new FileReader();
            
            reader.onload = function(e) {
                var arrayBuffer = e.target.result;
                
                // Traitement des données binaires (arrayBuffer)
                console.log(arrayBuffer);
                resolve(arrayBuffer);
            };
            
            reader.onerror = function(e) {
                reject(e);
            };
            
            reader.readAsArrayBuffer(file);
        } else {
            console.log("Aucun fichier sélectionné.");
            reject("Aucun fichier sélectionné.");
        }
    });
}

async function encryptDataFile(t, p, fileName) {
    const e = new TextEncoder(),
        d = e.encode(t),
        s = crypto.getRandomValues(new Uint8Array(256)),
        k = await deriveKeyMaterial(p, s),
        i = crypto.getRandomValues(new Uint8Array(12)),
        c = await crypto.subtle.encrypt({ name: 'AES-GCM', iv: i }, k, d),
        u = new Uint8Array([...s, ...i, ...new Uint8Array(c)]),
        b = btoa(String.fromCharCode.apply(null, u));

    // Création d'un fichier binaire à partir du arrayBuffer chiffré
    var blob = new Blob([b], {type: "application/octet-stream"});
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName + ".enc";
    link.click();
}

async function decryptDataFile(e, p, fileName) {
    try {
        const t = new Uint8Array(atob(e).split('').map((char) => char.charCodeAt(0))),
            s = t.slice(0, 256),
            i = t.slice(256, 268),
            c = t.slice(268),
            k = await deriveKeyMaterial(p, s);
        //BEGINNING OF THE ERROR
        const d = await crypto.subtle.decrypt({ name: 'AES-GCM', iv: i }, k, c),
            u = new TextDecoder(),
            b = u.decode(d);
        //END OF THE ERREUR
        // Création d'un fichier binaire à partir du arrayBuffer déchiffré
        var blob = new Blob([b], {type: "application/octet-stream"});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName.replace('.enc', '');
        link.click();
    } catch (error) {
        console.error("Une erreur imprévue est arrivé.nRéessayez et vérifiez si il n'y a pas d'erreur.nSi le problème persiste veuillez nous contacter.");
        blinkButton();
    }
}



async function encryptFile() {
    try {
        const fileInput = document.getElementById('fileInput');
        const fileName = fileInput.files[0].name;
        const t = await readFile();
        const p = document.getElementById("pass").value;
        encryptDataFile(t, p, fileName);
    } catch (error) {
        console.log(error);
    }
}


async function decryptFile() {
    try {
        const fileInput = document.getElementById('fileInput');
        const fileName = fileInput.files[0].name;
        const arrayBuffer = await readFile();
        const t = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
        const p = document.getElementById("pass").value;
        decryptDataFile(t, p, fileName);
    } catch (error) {
        console.log(error);
    }
}

When I encrypt the file there is no problem the file downloads then it’s good but when I decrypt it I get the error attached in the photo (I remove the try exceptions to get the error)
I have tried different ways but still can’t solve the problem, can anyone help me?
Error-screen

I tried to completely modify the entire script to encrypt and decrypt differently but each time I get a new error

Permission is not being requested on Android

I’m in a react native project and I’m taking a beating so I need to ask for Video and Image permission. I’ve already put the users in the androidmanifest

import {
PermissionsAndroid,
Rationale,
} from ‘react-native’;
export default function Bin({ navigation }) {

const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
        {
          title: "Cool Photo App Camera Permission",
          message:
            "Cool Photo App needs access to your camera " +
            "so you can take awesome pictures.",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can use the camera");
      } else {
        console.log("Camera permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };