Skip to main content
Glama
fonoster

Fonoster MCP Server

Official
by fonoster
login.page.tsx2.86 kB
/** * Copyright (C) 2025 by Fonoster Inc (https://fonoster.com) * http://github.com/fonoster/fonoster * * This file is part of Fonoster * * Licensed under the MIT License (the "License"); * you may not use this file except in compliance with * the License. You may obtain a copy of the License at * * https://opensource.org/licenses/MIT * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { LoginForm, type Schema } from "./login.form"; import { useCallback } from "react"; import { Box } from "@mui/material"; import { Typography } from "~/core/components/design-system/ui/typography/typography"; import type { Route } from "./+types/login.page"; import { useSubmit } from "react-router"; import { getGithubSigninUrl } from "~/auth/config/oauth"; /** * Sets the metadata for the login page. * Used by the router to set the document title and other meta tags. * * @param _ - Meta arguments (unused in this case). * @returns Array of meta objects for the page. */ export function meta(_: Route.MetaArgs) { return [{ title: "Log In | Fonoster" }]; } /** Re-exports the action function for form submission handling. */ export { action } from "./login.action"; /** * LoginPage component. * Renders the main layout for the login page including: * - Page title * - Login form with email/password * - GitHub login button (currently a placeholder) * * Integrates React Hook Form for validation and react-router submit for form handling. */ export default function LoginPage() { /** react-router hook to submit form data using the `post` method. */ const submit = useSubmit(); /** * Memoized submit handler for the login form. * Uses react-router's `submit` to trigger the action defined for the route. * * @param data - The validated form data. */ const onSubmit = useCallback( (data: Schema) => submit(data, { method: "post", viewTransition: true }), [submit] ); /** * Handler for GitHub authentication (currently not implemented). * Displays a toast message as a placeholder. */ const onGithubAuth = useCallback(async () => { window.location.href = getGithubSigninUrl(); }, []); return ( <Box width="100%" maxWidth="440px" gap="40px" display="flex" flexDirection="column" > {/* Page title */} <Typography variant="heading-large" color="base.03" sx={{ textAlign: "center" }} > Sign In </Typography> {/* Login form */} <LoginForm {...{ onSubmit, onGithubAuth }} /> </Box> ); }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/fonoster/fonoster'

If you have feedback or need assistance with the MCP directory API, please join our Discord server