complete-framer+supabase

App.tsx

import { ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { createClient } from "https://cdn.skypack.dev/@supabase/supabase-js"
import { md5 } from "https://cdn.skypack.dev/pure-md5"
import { browser, checkUsername, checkPassword, useStore } from "./globals.ts"

// Learn more: https://www.framer.com/docs/guides/overrides/

export function initDB(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        useEffect(() => {
            const supabase = createClient(
                "https://YOUR-SUPABASE-URL",
                "YOUR-SUPABASE-ANON-PUBLIC-KEY"
            )
            setStore({ supabase: supabase })

            var date = new Date().getTime()
            var userId = md5((Math.random() * 10000 + date).toString())

            console.log(supabase)
        }, [])

        return <Component {...props} />
    }
}

export function register(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        const fetchIP = () => {
            fetch("https://ipapi.co/json/", {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    //"x-api-key": apiKey,
                },
            })
                .then(async (response) => {
                    var info = await response.json()
                    var ip = info.ip
                    var address = info.city

                    const { data, error } = await store.supabase
                        .from("accounts")
                        .insert([
                            {
                                username: store.email,
                                userpass: store.pass,
                                last_login: new Date().toISOString(),
                                ip: ip,
                                location_address: address,
                                browser: browser,
                            },
                        ])

                    console.log(info)
                })
                .catch((err) => {
                    console.error(err)
                })
        }

        return <Component {...props} onClick={fetchIP} />
    }
}

export function checkEmail(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        const result = (value) => {
            var usernameResult = checkUsername(value, store.supabase)
            usernameResult.then((resultValue) => {
                console.log(resultValue)
                setStore({ loginEmail: resultValue, loginEmailValue: value })
            })
        }
        return <Component {...props} onChange={result} />
    }
}

export function loginButton(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        console.log(store.loginEmail, store.loginPass)
        const getState = () => {
            return store.loginEmail == true && store.loginPass == true
                ? {
                      disabled: false,
                      pointerEvents: "all",
                      backgroundColor: "#CB4855",
                  }
                : {
                      disabled: true,
                      pointerEvents: "none",
                      backgroundColor: "#c9c9c9",
                  }
        }
        return <Component {...props} style={getState()} />
    }
}

export function checkPass(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        const result = (value) => {
            var passResult = checkPassword(
                store.loginEmailValue,
                md5(value),
                store.supabase
            )
            passResult.then((value) => {
                console.log(value)
                setStore({ loginPass: value })
            })
        }
        return <Component {...props} onChange={result} />
    }
}

export function saveEmail(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        const saveValue = (value) => {
            setStore({ email: value })
            console.log(value)
        }
        return <Component {...props} onChange={saveValue} />
    }
}

export function savePass(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        const saveValue = (value) => {
            let strength = 0

            if (value.length > 0) {
                let sizeElements = value.length

                if (sizeElements > 10) {
                    strength += 30
                } else {
                    let calcMath = sizeElements * 2

                    strength += calcMath
                }
            }

            let lowerCase = new RegExp(/[a-z]/)
            if (lowerCase.test(value)) {
                strength += 16
            }

            let upperCase = new RegExp(/[A-Z]/)
            if (upperCase.test(value)) {
                strength += 18
            }

            let regularNumber = new RegExp(/[0-9]/i)
            if (regularNumber.test(value)) {
                strength += 16
            }

            let specialChars = new RegExp(/[^a-z0-9]/i)
            if (specialChars.test(value)) {
                strength += 20
            }

            var color = "#EB544C"
            if (strength <= 40) {
                color = "#EB544C"
            } else if (strength > 40 && strength <= 60) {
                color = "#EBE84C"
            } else {
                color = "#7CEB4C"
            }

            setStore({ passStrength: strength, passColor: color })
            if (strength > 60) {
                setStore({ pass: md5(value) })
                console.log(md5(value))
            }

            console.log("Password Strength is: ", strength)
        }
        return <Component {...props} onChange={saveValue} />
    }
}

export function passStrength(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        return (
            <Component
                {...props}
                progress={store.passStrength}
                progressColor={store.passColor}
            />
        )
    }
}

export function getEmail(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()

        return <Component {...props} text={store.loginEmailValue} />
    }
}