Compare commits

...

4 commits

Author SHA1 Message Date
thislight
71bdb21602
StackedRouter: fix duplicated '?' symbol
All checks were successful
/ depoly (push) Successful in 1m28s
2024-12-23 18:33:18 +08:00
thislight
771de51228
accounts/SignIn: various visual improvement 2024-12-23 18:31:56 +08:00
thislight
a7bca9bd67
StackedRouter: initializing stack supports query 2024-12-23 18:30:58 +08:00
thislight
3444068fd8
Settings: jump to sign in after signed out 2024-12-23 18:16:52 +08:00
4 changed files with 42 additions and 17 deletions

27
src/accounts/SignIn.css Normal file
View file

@ -0,0 +1,27 @@
.SignIn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 448px;
@media (max-width: 600px) {
& {
position: static;
height: 100vh;
width: 100%;
transform: none;
overflow: auto;
}
}
>.key-content {
height: 100%;
>form {
display: flex;
flex-flow: column;
gap: 16px;
}
}
}

View file

@ -18,6 +18,7 @@ import { createRestAPIClient } from "masto";
import { getOrRegisterApp } from "./stores"; import { getOrRegisterApp } from "./stores";
import { useSearchParams } from "@solidjs/router"; import { useSearchParams } from "@solidjs/router";
import { $settings } from "../settings/stores"; import { $settings } from "../settings/stores";
import "./SignIn.css";
type ErrorParams = { type ErrorParams = {
error: string; error: string;
@ -36,13 +37,6 @@ const SignIn: Component = () => {
const [targetSiteTitle, setTargetSiteTitle] = createSignal(""); const [targetSiteTitle, setTargetSiteTitle] = createSignal("");
useDocumentTitle("Sign In"); useDocumentTitle("Sign In");
css`
form {
display: flex;
flex-flow: column;
gap: 16px;
}
`;
const serverUrl = () => { const serverUrl = () => {
const url = rawServerUrl(); const url = rawServerUrl();
@ -121,19 +115,19 @@ const SignIn: Component = () => {
}; };
return ( return (
<div class={cards.layoutCentered}> <main class="SignIn">
<Show when={params.error || params.errorDescription}> <Show when={params.error || params.errorDescription}>
<div class={cards.card} style={{ "margin-bottom": "20px" }}> <div class={cards.card} style={{ "margin-bottom": "20px" }}>
<p>Authorization is failed.</p> <p>Authorization is failed.</p>
<p>{params.errorDescription}</p> <p>{params.errorDescription}</p>
<p> <p>
Please try again later. If the problem persist, you can seek for Please try again later. If the problem persists, you can ask for
help from the server administrator. help from the server administrator.
</p> </p>
</div> </div>
</Show> </Show>
<div <div
class={/*once*/ cards.card} class={`${cards.card} key-content`}
aria-busy={currentState() !== "inactive" ? "true" : "false"} aria-busy={currentState() !== "inactive" ? "true" : "false"}
aria-describedby={ aria-describedby={
currentState() !== "inactive" ? progressId : undefined currentState() !== "inactive" ? progressId : undefined
@ -169,7 +163,7 @@ const SignIn: Component = () => {
</div> </div>
</form> </form>
</div> </div>
</div> </main>
); );
}; };

View file

@ -1,5 +1,4 @@
import { import {
Router,
type RouterProps, type RouterProps,
type StaticRouterProps, type StaticRouterProps,
createRouter, createRouter,
@ -16,9 +15,6 @@ import {
useContext, useContext,
onCleanup, onCleanup,
type Accessor, type Accessor,
children,
createSignal,
createRoot,
} from "solid-js"; } from "solid-js";
import { createStore, unwrap } from "solid-js/store"; import { createStore, unwrap } from "solid-js/store";
import "./StackedRouter.css"; import "./StackedRouter.css";
@ -578,7 +574,11 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
createRenderEffect(() => createRenderEffect(() =>
untrack(() => { untrack(() => {
if (stack.length === 0) { if (stack.length === 0) {
pushFrame(window.location.pathname, { const parts = [window.location.pathname] as string[];
if (window.location.search) {
parts.push(window.location.search);
}
pushFrame(parts.join(""), {
replace: "all", replace: "all",
}); });
} }

View file

@ -163,7 +163,7 @@ const Settings: Component = () => {
}>, }>,
() => import(`./i18n/generic.json`), () => import(`./i18n/generic.json`),
); );
const { pop } = useNavigator(); const { pop, push } = useNavigator();
const settings$ = useStore($settings); const settings$ = useStore($settings);
const { needRefresh } = useServiceWorker(); const { needRefresh } = useServiceWorker();
const dateFnLocale = useDateFnLocale(); const dateFnLocale = useDateFnLocale();
@ -172,6 +172,10 @@ const Settings: Component = () => {
const doSignOut = (acct: Account) => { const doSignOut = (acct: Account) => {
signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken); signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
if (profiles().length == 0) {
push("/accounts/sign-in", { replace: "all" });
}
}; };
css` css`