Files
ForumMobile/src/Home/AuthPage/AuthPage.js

84 lines
2.7 KiB
JavaScript

import { Preferences } from '@capacitor/preferences';
import util from "../../util.js"
import "./Login.js";
import "./Signup.js"
class AuthPage 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)"
}
})
}
selectedPage = 1 // 1 == login, 2 == signup
render() {
VStack(() => {
img(window.matchMedia('(prefers-color-scheme: dark)').matches ? "/_/icons/columnwhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
.marginTop(5, em)
.marginLeft(2, em)
.onClick((done) => {
window.navigateTo("/")
})
HStack(() => {
p("Login")
.fontWeight(this.selectedPage === 1 ? "bold" : "normal")
.padding(0.75, em)
.borderRadius(12, px)
.background(this.selectedPage === 1 ? "var(--loginButton)" : "transparent")
.onTap(() => {
this.selectedPage = 1;
this.rerender();
})
p("Sign Up")
.fontWeight(this.selectedPage === 2 ? "bold" : "normal")
.padding(0.75, em)
.borderRadius(12, px)
.background(this.selectedPage === 2 ? "var(--loginButton)" : "transparent")
.onTap(() => {
this.selectedPage = 2;
this.rerender();
})
})
.fontFamily("Arial")
.padding(0.25, em)
.borderRadius(12, px)
.background("var(--loginBackground)")
.color("var(--text)")
.horizontalAlign("center")
.margin("auto")
.marginTop(7.5, em)
.marginBottom(2, em)
.gap(0.5, em)
switch (this.selectedPage) {
case 1:
Login()
break;
case 2:
Signup()
break;
}
})
.width(100, vw)
.height(100, vh)
.margin(0)
}
}
register(AuthPage)