feat: Email/Password control support icon definition.

Author: jaywcjlove

pages/page2/README.md

@@ -29,6 +29,9 @@ const Demo = () => (
     <Login.Banner>
       <img src={defaultBannerImage} />
     </Login.Banner>
+    <Login.Password>
+      <div>xx</div>
+    </Login.Password>
   </Login>
 );
 
@@ -107,7 +110,9 @@ const Demo = () => (
     </Logo>
     <Email index={3} type="text" placeholder="Username" />
     <Password index={2} />
-    <Input name="phone" index={1} placeholder="Phone number" />
+    <Input name="phone" index={1} placeholder="Phone number">
+      <div>xx</div>
+    </Input>
     <Banner>
       <img src={defaultBannerImage} />
     </Banner>
@@ -239,7 +244,9 @@ import { Button, Input } from 'react-login-page';
 <Password visible={false} />
 
 // Add input control
-<Input name="phone" index={1} placeholder="Phone number" />
+<Input name="phone" index={1} placeholder="Phone number">
+  <svg>...</svg>
+</Input>
 
 // Add content after the button
 <Login.ButtonAfter>

pages/page2/src/control/ButtonAfter.tsx

@@ -1,10 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { Block, BlockProps, BlockTagType } from 'react-login-page';
 
-type Div = BlockProps<'div'>
-
-export const ButtonAfter = <Tag extends BlockTagType = 'div'>(props: PropsWithChildren<BlockProps<Tag | 'footer'>>) => {
+export const ButtonAfter = <Tag extends BlockTagType>(props: PropsWithChildren<BlockProps<Tag | 'aside'>>) => {
   const { name, ...elmProps } = props;
-  
-  return <Block {...elmProps} name="buttonAfter" />;
+  return <Block {...elmProps} name="buttonAfter" tagName="aside" />;
 };

pages/page2/src/control/Email.tsx

@@ -1,7 +1,12 @@
 import { FC } from 'react';
 import { Input, InputProps } from 'react-login-page';
+import { EmailIcon } from '../icons/email';
 
-export const Email: FC<InputProps> = (props) => {
-  const { name, ...elmProps } = props;
+export interface EmailProps extends InputProps {};
+export const Email: FC<EmailProps> = (props) => {
+  const { name,  ...elmProps } = props;
+  if (!elmProps.children) {
+    elmProps.children = EmailIcon
+  }
   return <Input placeholder="Email" spellCheck={false} {...elmProps} type="email" name="email" rename={name} />;
 };

pages/page2/src/control/Password.tsx

@@ -1,7 +1,12 @@
 import { FC } from 'react';
 import { Input, InputProps } from 'react-login-page';
+import { LockIcon } from '../icons/lock';
 
-export const Password: FC<InputProps> = (props) => {
+export interface PasswordProps extends InputProps {};
+export const Password: FC<PasswordProps> = (props) => {
   const { name, ...elmProps } = props;
+  if (!elmProps.children) {
+    elmProps.children = LockIcon
+  }
   return <Input type="password" placeholder="Password" {...elmProps} name="password" rename={name} />;
 };

pages/page2/src/icons/email.tsx

@@ -0,0 +1,5 @@
+export const EmailIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em">
+    <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25a.85.85 0 1 1 .9-1.44L12 11l6.7-4.19a.85.85 0 1 1 .9 1.44z"/>
+  </svg>
+);

pages/page2/src/icons/lock.tsx

@@ -0,0 +1,5 @@
+export const LockIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor">
+    <path fill="currentColor" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/>
+  </svg>
+);

pages/page2/src/index.css

@@ -63,13 +63,14 @@
   background-color: transparent;
 }
 
-.login-page2-inner > article {
+.login-page2-inner > main {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
+  position: relative;
 }
 
-.login-page2-inner > article > header {
+.login-page2-inner > main > header {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -78,20 +79,24 @@
   padding-bottom: 2rem;
 }
 
-.login-page2-inner > article > header svg {
+.login-page2-inner > main > header svg {
   display: block;
 }
-.login-page2-inner > article > header h1 {
+.login-page2-inner > main > header h1 {
   margin: 0;
   padding: 0;
   font-size: 24px;
   text-align: center;
 }
 
-.login-page2-inner > article > label {
+.login-page2-inner > main > aside {
+  text-align: center;
+  font-size: 14px;
+}
+.login-page2-inner > main > label {
   display: block;
 }
-.login-page2-inner > article > label input {
+.login-page2-inner > main > label input {
   color: var(--login-input);
   display: block;
   width: 100%;
@@ -107,21 +112,21 @@
 .login-page2-inner input::placeholder {
   color: var(--login-input-placeholder);
 }
-.login-page2-inner > article > label input:focus {
+.login-page2-inner > main > label input:focus {
   border-color: transparent!important;
 }
 
-.login-page2-inner > article > label input:-webkit-autofill {
+.login-page2-inner > main > label input:-webkit-autofill {
   box-shadow: 0 0 0 1000px #e6e6e6 inset;
-  color: #57b846;
+  color: var(--login-input);
   -webkit-text-fill-color: #333 !important;
 }
 
-.login-page2-inner > article > section {
+.login-page2-inner > main > section {
   display: flex;
   gap: var(--gap);
 }
-.login-page2-inner > article > section > button {
+.login-page2-inner > main > section > button {
   font-weight: bold;
   color: var(--login-btn);
   text-transform: uppercase;
@@ -140,20 +145,32 @@
   touch-action: manipulation;
 }
 
-.login-page2-inner > article > section > button:hover {
+.login-page2-inner > main > section > button:hover {
   background: var(--login-btn-bg-hover);
 }
-.login-page2-inner > article > section > button:active {
+.login-page2-inner > main > section > button:active {
   background: var(--login-btn-bg-active);
 }
 
-.login-page2-inner > article > label input {
+.login-page2-inner > main > label {
+  display: flex;
+  align-items: center;
+  color: var(--login-input);
+}
+.login-page2-inner > main > label :first-child:not(input) {
+  color: var(--login-input);
+  position: absolute;
+  width: 23px;
+  height: 23px;
+  left: 29px;
+}
+.login-page2-inner > main > label input {
   box-shadow: 0 0;
 }
-.login-page2-inner > article > label input:focus {
+.login-page2-inner > main > label input:focus {
   box-shadow: 0 0;
 }
-.login-page2-inner > article > label input:focus {
+.login-page2-inner > main > label input:focus {
   box-shadow: 0 0 0 0 var(--login-btn-bg-focus);
   animation: anim-shadow .5s ease-in-out forwards
 }

pages/page2/src/index.tsx

@@ -22,21 +22,21 @@ export * from './control/Logo';
 export * from './control/Banner';
 
 const RenderLogin = () => {
-  const { blocks = {}, data } = useStore();
+  const { blocks = {}, extra = {}, data } = useStore();
   const { fields, buttons } = data || { fields: [] };
   return (
     <Render>
       <div className="login-page2-inner">
         <aside>
           {blocks.banner}
         </aside>
-        <article>
+        <main>
           <header>
             {blocks.logo} {blocks.title}
           </header>
           {fields.sort((a, b) => a.index - b.index).map((item, idx) => {
             if (!item.children) return null;
-            return <label key={item.name + idx}>{item.children}</label>
+            return <label key={item.name + idx}>{extra[item.name]} {item.children}</label>
           })}
           <section>
             {buttons.sort((a, b) => a.index - b.index).map((item, idx) => {
@@ -49,7 +49,7 @@ const RenderLogin = () => {
             })}
           </section>
           {blocks.buttonAfter}
-        </article>
+        </main>
       </div>
     </Render>
   );

website/src/pages/Example.tsx

@@ -1,5 +1,5 @@
 import LoginBase from '@react-login-page/base';
-import LoginLogo from 'react-login-page/logo';
+import LoginLogo from 'react-login-page/logo-rect';
 import LoginPage1 from '@react-login-page/page1';
 import LoginPage2 from '@react-login-page/page2';
 import bannerImage from '@react-login-page/page2/banner-image';