Typescript error when creating a ref to 'LoginForm'

Hilla
1

Hello everyone,

I’m new to Hilla and I was learning about Login Forms when I came to this error,

ERROR(TypeScript)  'LoginForm' refers to a value, but is being used as a type here. Did you mean 'typeof LoginForm'?

Here is the code,

import {ViewConfig} from "@vaadin/hilla-file-router/types.js";
import {LoginForm} from "@vaadin/react-components/LoginForm";
import { Notification } from '@vaadin/react-components/Notification.js';
import {AuthService} from "Frontend/generated/endpoints";
import {createRef} from "react";

export const config: ViewConfig = {
    menu:
    {
        order: 1,
        icon: 'line-awesome/svg/download-solid.svg',
    },
    title: "Login Page"
};

let loginFormRef = createRef<LoginForm>();

async function sendLogin(event: CustomEvent<{ username: string, password: string }>) {
    let serverResponse: string;
    try {
        serverResponse = await AuthService.tryLogIn(event.detail.username, event.detail.password);
    } catch {
        serverResponse = "Please enter your credentials.";
    }
    Notification.show(serverResponse, {position: 'bottom-center'});

    if (loginFormRef.current)
        loginFormRef.current.disabled = false;
};

export default function LoginView()
{
    return (
        <div className="flex flex-col h-full items-center justify-center p-l text-center box-border">
            <LoginForm ref={loginFormRef} onLogin={sendLogin} />
        </div>
    );
};

Also assist me on where can I find a decent guide to learm Hilla.

Thanks.

2

I recommend going to https://start.vaadin.com creating an application with a protected view and then checking out the code.

3

You could use LoginFormElement instead:

let loginFormRef = createRef<LoginFormElement>();

You could have a look at the guide about implementing client-security in the docs: Authentication with Spring Security | Security | Guides | Hilla | Vaadin Docs.

4 Likes