Skip to content

Commit b6f71b0

Browse files
jaywcjlovejaywcjlove
committed
feat: add page2 component.
1 parent f22aa36 commit b6f71b0

File tree

21 files changed

+785
-6
lines changed

21 files changed

+785
-6
lines changed

‎.github/workflows/main.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,5 +92,12 @@ jobs:
9292
name: 📦 @react-login-page/page1 publish to NPM
9393
continue-on-error: true
9494
working-directory: pages/page1
95+
env:
96+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
97+
98+
- run: npm publish --access public
99+
name: 📦 @react-login-page/page2 publish to NPM
100+
continue-on-error: true
101+
working-directory: pages/page2
95102
env:
96103
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎pages/page2/README.md‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
@react-login-page/page2
2+
===
3+
4+
[![npm version](https://img.shields.io/npm/v/@react-login-page/page2.svg)](https://www.npmjs.com/package/@react-login-page/page2)
5+
[![Downloads](https://img.shields.io/npm/dm/@react-login-page/page2.svg?style=flat)](https://www.npmjs.com/package/@react-login-page/page2)
6+
7+
<!--rehype:ignore:start-->
8+
<a href="https://uiwjs.github.io/react-login-page">
9+
<img width="571" alt="login-page" src="https://user-images.githubusercontent.com/1680273/233357735-5ab70bd9-9261-46fc-8f4e-88d9074750f9.png">
10+
</a>
11+
12+
<!--rehype:ignore:end-->
13+
14+
## Install
15+
16+
```bash
17+
$ npm install @react-login-page/page2 --save
18+
```
19+
20+
## Usage
21+
22+
```jsx mdx:preview
23+
import React from 'react';
24+
import Login from '@react-login-page/page2';
25+
import defaultBannerImage from '@react-login-page/page2/banner-image';
26+
27+
const Demo = () => (
28+
<Login style={{ height: 580 }}>
29+
<Login.Banner>
30+
<img src={defaultBannerImage} />
31+
</Login.Banner>
32+
</Login>
33+
);
34+
35+
export default Demo;
36+
```
37+
38+
## Modify Controls
39+
40+
```jsx mdx:preview
41+
import React from 'react';
42+
import LoginPage, { Email, Password, Submit, Title, Logo, Reset } from '@react-login-page/page2';
43+
import defaultBannerImage from '@react-login-page/page2/banner-image';
44+
import LoginLogo from 'react-login-page/logo';
45+
46+
const styles= { height: 580 }
47+
48+
const Demo = () => (
49+
<div style={styles}>
50+
<LoginPage>
51+
<LoginPage.Banner>
52+
<img src={defaultBannerImage} />
53+
</LoginPage.Banner>
54+
<Email name="userUserName" />
55+
<Password placeholder="请输入密码" name="userPassword" />
56+
<Submit>提交</Submit>
57+
<Reset>重置</Reset>
58+
<Title visible={false} />
59+
<Logo>
60+
<LoginLogo />
61+
</Logo>
62+
</LoginPage>
63+
</div>
64+
);
65+
66+
export default Demo;
67+
```
68+
69+
## Hide Controls
70+
71+
Use `visible={false}` to hide controls.
72+
73+
```jsx mdx:preview
74+
import React from 'react';
75+
import LoginPage, { Reset, Title, Logo, Banner, Password } from '@react-login-page/page2';
76+
import LoginLogo from 'react-login-page/logo-rect';
77+
import defaultBannerImage from '@react-login-page/page2/banner-image';
78+
79+
const Demo = () => (
80+
<LoginPage style={{ height: 580 }}>
81+
<Logo>
82+
<LoginLogo />
83+
</Logo>
84+
<Title />
85+
<Password visible={false} />
86+
<Banner>
87+
<img src={defaultBannerImage} />
88+
</Banner>
89+
</LoginPage>
90+
);
91+
92+
export default Demo;
93+
```
94+
95+
## Add content after the button
96+
97+
```jsx mdx:preview
98+
import React from 'react';
99+
import LoginPage, { Reset, Logo, Email, Banner, ButtonAfter, Password, Input } from '@react-login-page/page2';
100+
import LoginLogo from 'react-login-page/logo-rect';
101+
import defaultBannerImage from '@react-login-page/page2/banner-image';
102+
103+
const Demo = () => (
104+
<LoginPage style={{ height: 580 }}>
105+
<Logo>
106+
<LoginLogo />
107+
</Logo>
108+
<Email index={3} type="text" placeholder="Username" />
109+
<Password index={2} />
110+
<Input name="phone" index={1} placeholder="Phone number" />
111+
<Banner>
112+
<img src={defaultBannerImage} />
113+
</Banner>
114+
<ButtonAfter>
115+
Forgot <a href="#">Username / Password?</a>
116+
</ButtonAfter>
117+
</LoginPage>
118+
);
119+
120+
export default Demo;
121+
```
122+
123+
## Modify Color Style
124+
125+
```jsx
126+
import React from 'react';
127+
import Login from '@react-login-page/page2';
128+
129+
const css = {
130+
'--login-bg': 'linear-gradient(-135deg,#c850c0,#4158d0)',
131+
'--login-color': '#333',
132+
'--login-inner-bg': '#fff',
133+
'--login-input': '#57b846',
134+
'--login-input-bg': '#e6e6e6',
135+
'--login-input-placeholder': '#999999',
136+
'--login-btn': '#fff',
137+
'--login-btn-bg': '#57b846',
138+
'--login-btn-bg-focus': '#57b846',
139+
'--login-btn-bg-hover': '#333',
140+
'--login-btn-bg-active': '#57b846',
141+
}
142+
143+
const Demo = () => <Login style={{ height: 380, ...css }} />;
144+
145+
export default Demo;
146+
```
147+
148+
Use css variables to override default color values
149+
150+
```css
151+
.login-page2 {
152+
--login-bg: linear-gradient(-135deg,#c850c0,#4158d0);
153+
--login-color: #333;
154+
--login-inner-bg: #fff;
155+
--login-input: #57b846;
156+
--login-input-bg: #e6e6e6;
157+
--login-input-placeholder: #999999;
158+
--login-btn: #fff;
159+
--login-btn-bg: #57b846;
160+
--login-btn-bg-focus: #57b846;
161+
--login-btn-bg-hover: #333;
162+
--login-btn-bg-active: #57b846;
163+
}
164+
```
165+
166+
Custom CSS style overrides
167+
168+
```css
169+
.login-page2 section button:focus {
170+
box-shadow: 0 0 0 2px rgba(0,142,240,.26);
171+
}
172+
.login-page2 section button:hover {
173+
background-color: #0070bd;
174+
}
175+
.login-page2 section button:active {
176+
background-color: #00528a;
177+
}
178+
```
179+
180+
## Light & Dark Theme
181+
182+
```css
183+
[data-color-mode*='dark'] .login-page2, .login-page2 {
184+
--login-bg: linear-gradient(-135deg,#c850c0,#4158d0);
185+
--login-color: #333;
186+
--login-inner-bg: #fff;
187+
--login-input: #57b846;
188+
--login-input-bg: #e6e6e6;
189+
--login-input-placeholder: #999999;
190+
--login-btn: #fff;
191+
--login-btn-bg: #57b846;
192+
--login-btn-bg-focus: #57b846;
193+
--login-btn-bg-hover: #333;
194+
--login-btn-bg-active: #57b846;
195+
}
196+
[data-color-mode*='light'] .login-page2 {
197+
--login-bg: linear-gradient(-135deg,#c850c0,#4158d0);
198+
--login-color: #333;
199+
--login-inner-bg: #fff;
200+
--login-input: #57b846;
201+
--login-input-bg: #e6e6e6;
202+
--login-input-placeholder: #999999;
203+
--login-btn: #fff;
204+
--login-btn-bg: #57b846;
205+
--login-btn-bg-focus: #57b846;
206+
--login-btn-bg-hover: #333;
207+
--login-btn-bg-active: #57b846;
208+
}
209+
```
210+
211+
## API
212+
213+
Components be provided to modify control properties and perform other related functions.
214+
215+
```jsx
216+
import LoginPage from '@react-login-page/page2';
217+
// buttons
218+
import { Reset, Submit } from '@react-login-page/page2';
219+
// blocks
220+
import { Logo, Title, ButtonAfter } from '@react-login-page/page2';
221+
// fields
222+
import { Email, Password } from '@react-login-page/page2';
223+
224+
import defaultBannerImage from '@react-login-page/page2/banner-image';
225+
226+
// Basic Components
227+
import { Button, Input } from '@react-login-page/page2';
228+
// or
229+
import { Button, Input } from 'react-login-page';
230+
231+
<LoginPage>
232+
<Password index={2} />
233+
</LoginPage>
234+
235+
// Define the order of `Password` controls
236+
<Password index={2} />
237+
238+
// Hiding the `Password` control
239+
<Password visible={false} />
240+
241+
// Add input control
242+
<Input name="phone" index={1} placeholder="Phone number" />
243+
244+
// Add content after the button
245+
<Login.ButtonAfter>
246+
Forgot <a href="#">Username / Password?</a>
247+
</Login.ButtonAfter>
248+
249+
// Modify logo image
250+
<Logo>⚛️</Logo>
251+
```
252+
253+
Use [dot notation](https://legacy.reactjs.org/docs/jsx-in-depth.html#using-dot-notation-for-jsx-type) components.
254+
255+
```jsx
256+
import Login from '@react-login-page/page2';
257+
258+
<Login>
259+
<Login.Password index={2} />
260+
</Login>
261+
262+
// Define the order of `Password` controls
263+
<Login.Password index={2} />
264+
265+
// Hiding the `Password` control
266+
<Login.Password visible={false} />
267+
268+
// Add content after the button
269+
<Login.ButtonAfter>
270+
Forgot <a href="#">Username / Password?</a>
271+
</Login.ButtonAfter>
272+
273+
// Modify logo image
274+
<Login.Logo>⚛️</Login.Logo>
275+
```
276+
277+
## Contributors
278+
279+
As always, thanks to our amazing contributors!
280+
281+
<a href="https://github.com/uiwjs/react-login-page/graphs/contributors">
282+
<img src="https://uiwjs.github.io/react-login-page/CONTRIBUTORS.svg" />
283+
</a>
284+
285+
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
286+
287+
## License
288+
289+
Licensed under the MIT License.

‎pages/page2/banner-image.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '@react-login-page/page2/banner-image' {
2+
const bannerImage: string;
3+
export default bannerImage;
4+
}

‎pages/page2/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@react-login-page/page2",
3+
"version": "0.2.1",
4+
"description": "Some `react` login pages, which can be used quickly after installation.",
5+
"homepage": "https://uiwjs.github.io/react-login-page",
6+
"author": "kenny wong <wowohoo@qq.com>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"exports": {
11+
".": {
12+
"import": "./esm/index.js",
13+
"require": "./cjs/index.js"
14+
},
15+
"./banner-image": {
16+
"import": "./esm/control/banner-image.js",
17+
"require": "./cjs/control/banner-image.js"
18+
},
19+
"./README.md": "./README.md",
20+
"./package.json": "./package.json"
21+
},
22+
"scripts": {
23+
"watch": "tsbb watch src/*.tsx --use-babel",
24+
"build": "tsbb build src/*.tsx --use-babel",
25+
"test": "tsbb test --env=jsdom",
26+
"coverage": "tsbb test --env=jsdom --coverage --bail"
27+
},
28+
"repository": {
29+
"type": "git",
30+
"url": "https://github.com/uiwjs/react-login-page.git"
31+
},
32+
"files": [
33+
"README.md",
34+
"src",
35+
"esm",
36+
"cjs"
37+
],
38+
"peerDependencies": {
39+
"@babel/runtime": ">=7.11.0",
40+
"react": ">=16.8.0",
41+
"react-dom": ">=16.8.0"
42+
},
43+
"dependencies": {
44+
"react-login-page": "0.2.1"
45+
},
46+
"keywords": [
47+
"react",
48+
"login",
49+
"login-page",
50+
"login-pages",
51+
"react-login",
52+
"react-login-page",
53+
"editor",
54+
"syntax",
55+
"ide",
56+
"code"
57+
],
58+
"jest": {
59+
"coverageReporters": [
60+
"lcov",
61+
"json-summary"
62+
]
63+
}
64+
}

‎pages/page2/src/control/Banner.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { PropsWithChildren } from 'react';
2+
import { Block, BlockProps, BlockTagType } from 'react-login-page';
3+
4+
export const Banner = <T extends BlockTagType = 'div'>(props: PropsWithChildren<Partial<BlockProps<T>>>) => {
5+
const { name, ...elmProps } = props;
6+
return <Block {...elmProps} name="banner" />;
7+
};

‎pages/page2/src/control/ButtonAfter.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PropsWithChildren } from 'react';
2+
import { Block, BlockProps, BlockTagType } from 'react-login-page';
3+
4+
type Div = BlockProps<'div'>
5+
6+
export const ButtonAfter = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren<BlockProps<Tag | 'footer'>>) => {
7+
const { name, ...elmProps } = props;
8+
9+
return <Block {...elmProps} name="buttonAfter" />;
10+
};

0 commit comments

Comments
 (0)