From 332cd9451d15f1dcef22edcedfae00a5cda22457 Mon Sep 17 00:00:00 2001 From: GregTCLTK Date: Tue, 1 Oct 2024 00:07:56 +0200 Subject: [PATCH] fix: oauth layout --- pages/admin/views/list.ts | 36 +++++---- pages/admin/views/menu.ts | 15 ++-- pages/user/oauth.css | 4 - pages/user/oauth.ts | 126 ++++++++++++++++---------------- pages/user/settings.personal.ts | 2 +- pages/user/settings.ts | 2 +- pages/user/signin.ts | 2 +- 7 files changed, 86 insertions(+), 101 deletions(-) diff --git a/pages/admin/views/list.ts b/pages/admin/views/list.ts index 948fe02..8891bc0 100644 --- a/pages/admin/views/list.ts +++ b/pages/admin/views/list.ts @@ -1,8 +1,8 @@ +import { saveBlob, sheetStack } from "shared/helper.ts"; import { API, External, fileCache, RenderItem, stupidErrorAlert } from "shared/mod.ts"; -import { asRef, Box, Button, Cache, Color, Entry, Grid, Horizontal, IconButton, Image, MIcon, ref, SheetDialog, Spacer, TextInput, Vertical } from "webgen/mod.ts"; +import { asRef, Box, Button, Cache, Color, Entry, Grid, IconButton, Image, MIcon, ref, SheetDialog, TextInput } from "webgen/mod.ts"; import { templateArtwork } from "../../../assets/imports.ts"; import { File, OAuthApp, Transcript, Wallet } from "../../../spec/music.ts"; -import { saveBlob, sheetStack } from "../../shared/helper.ts"; import { state } from "../state.ts"; export function entryWallet(wallet: Wallet) { @@ -67,26 +67,24 @@ export function entryOAuth(app: OAuthApp) { .addClass("small"); } -const oAuthViewDialog = (oauth: OAuthApp) => - SheetDialog( - sheetStack, +const oAuthViewDialog = (oauth: OAuthApp) => { + const sheet = SheetDialog( + sheetStack.setSheetWidth("30rem"), "OAuth App Details", - Vertical( - Grid( - TextInput("text", "Name").ref(asRef(oauth.name)).setColor(Color.Disabled), - TextInput("text", "Client ID").ref(asRef(oauth._id)).setColor(Color.Disabled), - TextInput("text", "Client Secret").ref(asRef(oauth.secret)).setColor(Color.Disabled), - TextInput("text", "Redirect URI").ref(asRef(oauth.redirect.join(","))).setColor(Color.Disabled), - ), - Horizontal( - Spacer(), - Button("Close").onClick(() => { - oAuthViewDialog(oauth).close(); - }), - ), - ), + Grid( + TextInput("text", "Name").ref(asRef(oauth.name)).setColor(Color.Disabled), + TextInput("text", "Client ID").ref(asRef(oauth._id)).setColor(Color.Disabled), + TextInput("text", "Client Secret").ref(asRef(oauth.secret)).setColor(Color.Disabled), + TextInput("text", "Redirect URI").ref(asRef(oauth.redirect.join(","))).setColor(Color.Disabled), + Button("Close").onClick(() => { + sheet.close(); + }).setJustifySelf("end"), + ).setGap(), ); + return sheet; +}; + export function entryFile(file: File) { return Entry({ title: file.filename, diff --git a/pages/admin/views/menu.ts b/pages/admin/views/menu.ts index f1e8867..8c29b89 100644 --- a/pages/admin/views/menu.ts +++ b/pages/admin/views/menu.ts @@ -3,7 +3,7 @@ import { sumOf } from "@std/collections"; import loader from "https://esm.sh/@monaco-editor/loader@1.4.0"; import { activeUser, sheetStack, showProfilePicture } from "shared/helper.ts"; import { API, HeavyList, loadMore, Navigation, placeholder } from "shared/mod.ts"; -import { asRef, asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, Label, lazy, ref, SheetDialog, Spacer, Table, TextInput, Vertical } from "webgen/mod.ts"; +import { asRef, asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, lazy, ref, SheetDialog, Spacer, Table, TextInput } from "webgen/mod.ts"; import { DropType } from "../../../spec/music.ts"; import { upload } from "../loading.ts"; import { state } from "../state.ts"; @@ -185,9 +185,7 @@ export const adminMenu = Navigation({ { title: "Create new OAuth Application", id: "add+oauth", - clickHandler: () => { - addOAuthDialog.open(); - }, + clickHandler: () => addOAuthDialog.open(), }, HeavyList(state.$oauth, entryOAuth), ] @@ -218,10 +216,9 @@ const addOAuthDialog = SheetDialog( sheetStack, "Create new OAuth Application", Grid( - Label("Create new OAuth Application"), TextInput("text", "Name").ref(oAuthData.$name), oAuthData.$redirectURI.map((x) => - Vertical( + Grid( Table([ ["URI", "auto", (_, index) => TextInput("text", "URI", "blur") @@ -239,11 +236,9 @@ const addOAuthDialog = SheetDialog( .onClick(() => { x.push(""); }), - ).setPadding("0 0 3rem 0"), + ), ) .setGap() - .setWidth("clamp(0rem, 100vw, 60vw)") - .setMargin("0 -.6rem 0 0") ).asRefComponent(), Button("Upload Image").onPromiseClick(async () => { oAuthData.image = await upload("oauth"); @@ -262,5 +257,5 @@ const addOAuthDialog = SheetDialog( }); }) ).asRefComponent(), - ).setGap("10px"), + ).setGap(), ); diff --git a/pages/user/oauth.css b/pages/user/oauth.css index 34d2770..ac4b4d5 100644 --- a/pages/user/oauth.css +++ b/pages/user/oauth.css @@ -19,10 +19,6 @@ padding: 0.2rem 0; } -.area-space { - max-width: 27rem; -} - .auth-area .wimage.profile-picture img, .auth-area .wimage.profile-picture { width: 100%; diff --git a/pages/user/oauth.ts b/pages/user/oauth.ts index 4c70382..d3be887 100644 --- a/pages/user/oauth.ts +++ b/pages/user/oauth.ts @@ -1,11 +1,11 @@ import { Footer } from "shared/footer.ts"; +import { activeUser, getNameInital, logOut, ProfilePicture, RegisterAuthRefresh } from "shared/helper.ts"; import { API, LoadingSpinner, stupidErrorAlert } from "shared/mod.ts"; -import { asState, Body, Box, Button, ButtonStyle, Color, Grid, Horizontal, Image, isMobile, Label, MIcon, Spacer, Vertical, WebGen } from "webgen/mod.ts"; +import { asState, Body, Box, Button, ButtonStyle, Color, Content, FullWidthSection, Grid, Horizontal, Image, isMobile, Label, MIcon, Spacer, Vertical, WebGen } from "webgen/mod.ts"; import "../../assets/css/main.css"; import { dots, templateArtwork } from "../../assets/imports.ts"; import { DynaNavigation } from "../../components/nav.ts"; import { OAuthScopes } from "../../spec/music.ts"; -import { activeUser, getNameInital, logOut, ProfilePicture, RegisterAuthRefresh } from "../shared/helper.ts"; import "./oauth.css"; import "./signin.css"; @@ -39,74 +39,70 @@ const state = asState({ icon: "", }); -const list = state.$loaded.map((loaded) => { - if (loaded) { - return Box( - Grid( - isMobile.map((small) => - Label("Connect Now!") - .setMargin("5rem 0 .8rem") - .addClass(small ? "no-custom" : "line-header", "header") - .setFontWeight("extrabold") - .setTextSize(small ? "6xl" : "7xl") - ).asRefComponent().removeFromLayout(), - Label("CONNECTION") - .addClass("label-small"), - Grid( +Body( + Content( + FullWidthSection(DynaNavigation("Home"), Box().addClass("background-image")), + state.$loaded.map((loaded) => + loaded + ? Grid( + isMobile.map((small) => + Label("Connect Now!") + .setMargin("5rem 0 .8rem") + .addClass(small ? "no-custom" : "line-header", "header") + .setFontWeight("extrabold") + .setTextSize(small ? "6xl" : "7xl") + ).asRefComponent().removeFromLayout(), + Label("CONNECTION") + .addClass("label-small"), Grid( - Image(state.icon || templateArtwork, "New Connection"), - Label(state.name || "---") - .setJustifySelf("center") - .addClass("label-small"), - ), - Image(dots, "dots"), - Grid( - ProfilePicture( - activeUser.avatar ? Image(activeUser.avatar, "Profile Picture") : Label(getNameInital(activeUser.username)), - activeUser.username, + Grid( + Image(state.icon || templateArtwork, "New Connection"), + Label(state.name || "---") + .setJustifySelf("center") + .addClass("label-small"), ), - Label(activeUser.username) - .setJustifySelf("center") - .addClass("label-small"), - ), - ).addClass("linkage"), - Label("PERMISSIONS") - .addClass("label-small"), - Vertical( - params.scope!.split(",").map((e) => + Image(dots, "dots"), Grid( - MIcon("check"), - Label(oauthScopes[e as OAuthScopes]), - ).addClass("permission") + ProfilePicture( + activeUser.avatar ? Image(activeUser.avatar, "Profile Picture") : Label(getNameInital(activeUser.username)), + activeUser.username, + ), + Label(activeUser.username) + .setJustifySelf("center") + .addClass("label-small"), + ), + ).addClass("linkage"), + Label("PERMISSIONS") + .addClass("label-small"), + Vertical( + params.scope!.split(",").map((e) => + Grid( + MIcon("check"), + Label(oauthScopes[e as OAuthScopes]), + ).addClass("permission") + ), ), - ), - Button("Connect") - .setWidth("100%") - .setJustifyContent("center") - .setMargin("1rem 0 0") - .onPromiseClick(async () => await authorize()), - Horizontal( - Label("Wrong account?"), - Button("Switch it here") - .setStyle(ButtonStyle.Inline) - .setColor(Color.Colored) - .onClick(() => logOut(location.pathname + location.search)) - .addClass("link"), - Spacer(), + Button("Connect") + .setWidth("100%") + .setJustifyContent("center") + .setMargin("1rem 0 0") + .onPromiseClick(async () => await authorize()), + Horizontal( + Label("Wrong account?"), + Button("Switch it here") + .setStyle(ButtonStyle.Inline) + .setColor(Color.Colored) + .onClick(() => logOut(location.pathname + location.search)) + .addClass("link"), + Spacer(), + ) + .setMargin("1rem 0 0"), ) - .setMargin("1rem 0 0"), - ), - ); - } - return LoadingSpinner(); -}).asRefComponent(); - -Body(Vertical( - DynaNavigation("Home"), - Box().addClass("background-image"), - list.addClass("auth-area"), - Footer(), -)); + : LoadingSpinner() + ).asRefComponent().addClass("auth-area").setCssStyle("display", "grid"), + FullWidthSection(Footer()), + ), +); async function authorize() { await API.oauth.authorize(params.clientId!, params.scope!, params.redirectUri!) diff --git a/pages/user/settings.personal.ts b/pages/user/settings.personal.ts index 33363d7..ddfa691 100644 --- a/pages/user/settings.personal.ts +++ b/pages/user/settings.personal.ts @@ -1,8 +1,8 @@ import { delay } from "@std/async"; +import { activeUser, allowedImageFormats, forceRefreshToken, IsLoggedIn, showProfilePicture } from "shared/helper.ts"; import { API, StreamingUploadHandler, stupidErrorAlert } from "shared/mod.ts"; import { asRef, asState, Box, Button, CenterV, createFilePicker, Empty, getErrorMessage, Grid, Horizontal, IconButton, Image, Label, MIcon, Spacer, TextInput, Validate, Vertical } from "webgen/mod.ts"; import { zod } from "webgen/zod.ts"; -import { activeUser, allowedImageFormats, forceRefreshToken, IsLoggedIn, showProfilePicture } from "../shared/helper.ts"; export function ChangePersonal() { const state = asState({ diff --git a/pages/user/settings.ts b/pages/user/settings.ts index ca627f5..a949ff8 100644 --- a/pages/user/settings.ts +++ b/pages/user/settings.ts @@ -1,9 +1,9 @@ +import { logOut, RegisterAuthRefresh } from "shared/helper.ts"; import { API, Navigation } from "shared/mod.ts"; import { asState, Body, Box, Button, CenterV, Empty, getErrorMessage, Grid, Horizontal, isMobile, Label, Spacer, TextInput, Validate, Vertical, WebGen } from "webgen/mod.ts"; import { zod } from "webgen/zod.ts"; import "../../assets/css/main.css"; import { DynaNavigation } from "../../components/nav.ts"; -import { logOut, RegisterAuthRefresh } from "../shared/helper.ts"; import { ChangePersonal } from "./settings.personal.ts"; WebGen(); diff --git a/pages/user/signin.ts b/pages/user/signin.ts index ae3b15b..3a4f7f2 100644 --- a/pages/user/signin.ts +++ b/pages/user/signin.ts @@ -1,11 +1,11 @@ import { assert } from "@std/assert"; import { Footer } from "shared/footer.ts"; +import { RegisterAuthRefresh } from "shared/helper.ts"; import { API, LoadingSpinner } from "shared/mod.ts"; import { Body, Box, Button, ButtonStyle, Color, Component, createElement, Custom, Grid, Horizontal, Image, isMobile, Label, LinkButton, Spacer, TextInput, Vertical, WebGen } from "webgen/mod.ts"; import "../../assets/css/main.css"; import { discordLogo, googleLogo } from "../../assets/imports.ts"; import { DynaNavigation } from "../../components/nav.ts"; -import { RegisterAuthRefresh } from "../shared/helper.ts"; import { handleStateChange, loginUser, registerUser } from "./actions.ts"; import "./signin.css"; import { state } from "./state.ts";