Skip to content

Commit 0337c94

Browse files
jaywcjlovejaywcjlove
committed
feat: add login page4.
1 parent 7522f6c commit 0337c94

File tree

19 files changed

+859
-1
lines changed

19 files changed

+859
-1
lines changed

‎.github/workflows/main.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,5 +106,12 @@ jobs:
106106
name: 📦 @react-login-page/page3 publish to NPM
107107
continue-on-error: true
108108
working-directory: pages/page3
109+
env:
110+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
111+
112+
- run: npm publish --access public
113+
name: 📦 @react-login-page/page4 publish to NPM
114+
continue-on-error: true
115+
working-directory: pages/page4
109116
env:
110117
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎core/src/Block.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Block = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren
1818
const { name, visible = true, tagName = 'div', ...elmProps } = props;
1919
if (ref.current !== elmProps && name) {
2020
ref.current = { ...elmProps };
21-
const div = visible ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
21+
const div = visible && elmProps.children ? createElement(tagName, { ...elmProps }, elmProps.children) : null;
2222
dispatch({
2323
blocks: { ...blocks, [name]: div as unknown as Blocks<'div'> },
2424
});

‎pages/page4/README.md‎

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

‎pages/page4/package.json‎

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

‎pages/page4/src/control/Email.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { FC, memo, useEffect } from 'react';
2+
import { Input, InputProps, useStore } from 'react-login-page';
3+
import { EmailIcon } from '../icons/email';
4+
5+
export interface EmailProps extends InputProps {
6+
label?: React.ReactNode;
7+
}
8+
export const Email: FC<EmailProps> = memo((props) => {
9+
const { name, rename, label = 'Email:', ...elmProps } = props;
10+
const { dispatch } = useStore();
11+
if (!elmProps.children) {
12+
elmProps.children = EmailIcon;
13+
}
14+
15+
const nameProps = { name: 'email', rename: name };
16+
if (rename) {
17+
nameProps.name = rename;
18+
}
19+
20+
useEffect(() => dispatch({ [`$${nameProps.name}`]: label }), [label]);
21+
22+
return <Input type="email" placeholder="Email" spellCheck={false} {...elmProps} {...nameProps} />;
23+
});

‎pages/page3/src/control/Footer.tsx‎ renamed to ‎pages/page4/src/control/Footer.tsx‎

File renamed without changes.

0 commit comments

Comments
 (0)