ForumMobile/src/Home/AuthPage/Login.js

import { Preferences } from '@capacitor/preferences';
import util from "../../util.js"

class Login extends Shadow {
    inputStyles(el) {
        return el
            .background("var(--main)")
            .color("var(--text)")
            .border("1px solid var(--accent)")
            .fontSize(0.9, rem)
            .backgroundColor("var(--searchbackground)")
            .borderRadius(12, px)
            .outline("none")
            .onTouch((start) => {
                if (start) {
                    this.style.backgroundColor = "var(--accent)"
                } else {
                    this.style.backgroundColor = "var(--searchbackground)"
                }
            })
    }

    render() {
        form(() => {
            VStack(() => {
                input("Email", "70vw")
                    .attr({ name: "email", type: "email" })
                    .margin("auto")
                    .marginVertical(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)

                input("Password", "70vw")
                    .attr({ name: "password", type: "password" })
                    .margin("auto")
                    .marginVertical(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)

                HStack(() => {
                    button("==>")
                        .padding(1, em)
                        .fontSize(0.9, rem)
                        .borderRadius(12, px)
                        .background("var(--searchbackground)")
                        .color("var(--text)")
                        .border("1px solid var(--accent)")  
                        .boxSizing("border-box")
                        .onTouch(function (start) {
                            if (start) {
                                this.style.backgroundColor = "var(--accent)"
                            } else {
                                this.style.backgroundColor = "var(--searchbackground)"
                            }
                        })
                })
                    .width(70, vw)
                    .margin("auto")
                    .fontSize(0.9, rem)
                    .paddingLeft(0, em)
                    .paddingRight(2, em)
                    .marginVertical(1, em)
                    .border("1px solid transparent")

                p("")
                    .state("errortype", function (type) {
                        const messages = {
                            email:         "Please enter a valid email.",
                            password:      "Please enter a valid password.",
                            emailwrong:    "Could not find an account with this email.",
                            passwordwrong: "Incorrect password.",
                        };

                        if(messages[type]) {
                            this.display("")
                            this.innerText = messages[type]
                        } else {
                            this.display("none")
                            this.innerText = ""
                        }
                    })
                    .margin("auto")
                    .marginTop(1, em)
                    .color("var(--text)")
                    .fontFamily("Arial")
                    .opacity(.7)
                    .padding(0.5, em)
                    .backgroundColor("var(--darkred)")
                    .display("none")

            })
        })
        .height(100, pct)
        .onSubmit(async (e) => {
            e.preventDefault();
            const data = {
                email: e.target.$('[name="email"]').value,
                password: e.target.$('[name="password"]').value,
            };
            await this.requestLogin(data);
        })
    }

    isValidEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    isValidPassword = (password) => password.length >= 7;

    async requestLogin(data) {
        const emailValid = this.isValidEmail(data.email.trim() || "");
        const passValid = this.isValidPassword(data.password.trim() || "");

        if (!emailValid || !passValid) {
            console.log("invalid", emailValid)
            const errorType = !emailValid ? 'email' : 'password';
            
            this.$("p").attr({ errorType });
            return;
        } else {
            this.$("p").attr({ errorType: "" });
        }

        const res = await fetch(`${util.HOST}/auth/login`, {
            method: "POST",
            headers: { "Content-Type": "application/json", "X-Client": "mobile" },
            body: JSON.stringify({
                email: data["email"],
                password: data["password"]
            })
        });

        if (res.ok) {
            const { token } = await res.json();
            await Preferences.set({ key: 'auth_token', value: token });
            global.renderHome();
        } else {
            const { error } = await res.json();
            this.errorMessage = error;
            console.error(error)
            if(error.includes("email")) {
                this.$("p").attr({ errorType: "emailwrong" });
            } else {
                this.$("p").attr({ errorType: "passwordwrong" });
            }
        }
    }
}

register(Login)