Skip to content

Commit f3eca8e

Browse files
jaywcjlovejaywcjlove
committed
feat(page6): add new login component.
1 parent 29f0ab4 commit f3eca8e

File tree

16 files changed

+791
-3
lines changed

16 files changed

+791
-3
lines changed

‎.github/workflows/main.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,5 +120,12 @@ jobs:
120120
name: 📦 @react-login-page/page5 publish to NPM
121121
continue-on-error: true
122122
working-directory: pages/page5
123+
env:
124+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
125+
126+
- run: npm publish --access public
127+
name: 📦 @react-login-page/page6 publish to NPM
128+
continue-on-error: true
129+
working-directory: pages/page6
123130
env:
124131
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎pages/page3/src/index.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[data-color-mode*='dark'] .login-page3, .login-page3 {
2-
--login-bg: #f3f2f2;
2+
--login-bg: #2c3338;
33
--login-color: #333;
44
--login-logo: #fff;
55
--login-inner-bg: #fff;
@@ -72,8 +72,8 @@
7272
min-height: 100%;
7373
position: relative;
7474
background-size: cover;
75-
border-top-left-radius: 4px;
76-
border-bottom-left-radius: 4px;
75+
border-top-left-radius: 10px;
76+
border-bottom-left-radius: 10px;
7777
background-color: var(--login-banner-bg);
7878
}
7979

‎pages/page6/README.md‎

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

‎pages/page6/package.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@react-login-page/page6",
3+
"version": "0.4.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+
"scripts": {
11+
"watch": "tsbb watch src/*.tsx --use-babel",
12+
"build": "tsbb build src/*.tsx --use-babel",
13+
"test": "tsbb test --env=jsdom",
14+
"coverage": "tsbb test --env=jsdom --coverage --bail"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/uiwjs/react-login-page.git"
19+
},
20+
"files": [
21+
"README.md",
22+
"src",
23+
"esm",
24+
"cjs"
25+
],
26+
"peerDependencies": {
27+
"@babel/runtime": ">=7.11.0",
28+
"react": ">=16.8.0",
29+
"react-dom": ">=16.8.0"
30+
},
31+
"dependencies": {
32+
"react-login-page": "0.4.1"
33+
},
34+
"keywords": [
35+
"react",
36+
"login",
37+
"login-page",
38+
"login-pages",
39+
"react-login",
40+
"react-login-page",
41+
"editor",
42+
"syntax",
43+
"ide",
44+
"code"
45+
],
46+
"jest": {
47+
"coverageReporters": [
48+
"lcov",
49+
"json-summary"
50+
]
51+
}
52+
}

0 commit comments

Comments
 (0)