Written in front
This series of articles is written for friends with development ability. The purpose is to help them develop a complete set of scratch programming platform integrating scratch 3.0 programming tools, user community and cloud storage and sharing of works, and brand integration on the basis of scratch 3.0. If you are not a developer but want to have your own education platform and brand, you are welcome to learn, exchange and negotiate cooperation.
So if you want to take the scratch children's programming course, ignore this series of articles.
Preface
We continue with our previous work of integrating back-end user systems.
In this chapter, we will add a login interface. When the user clicks the login button, a login window will pop up. The user enters the user name and password. If the login is successful, return to the main interface and display the user information in the menu bar in the upper right corner.
Begin to achieve
First, implement the pop-up component of login.
We found that the scratch GUI has defined its own modal component and container Modal. This is the best. We can complete our login pop-up component based on this modal, so as to keep consistent with the existing style.
Create a new login modal folder in components, and create a login modal.jsx file in it. Let's implement the login component style in login modal.jsx, including a pop-up window, two input boxes and a submit button.
Define the basic structure of LoginModal:
import Modal from '../../containers/modal.jsx';import styles from './login-modal.css';import React from 'react';import PropTypes from 'prop-types';import Box from '../box/box.jsx';import SubmitLoginButton from './submit-login-button.jsx';import connect from 'react-redux/es/connect/connect';const LoginModal = props => ( <Modal className= contentLabel= id="loginModal" > <Box> <input className= name="account" placeholder="Account number" type="text" /><br /> <input className= name="password" placeholder="Password" type="password" /><br /> <SubmitLoginButton className= /> </Box> </Modal>);LoginModal.propTypes = { title: PropTypes.string.isRequired}export default LoginModal;
It includes a button component SubmitLoginButton for submitting login, which is implemented in submit login button.jsx:
import classNames from 'classnames';import from 'react-intl';import PropTypes from 'prop-types';import React from 'react';import Button from '../button/button.jsx';import styles from './login-modal.css';const SubmitLoginButton = ({ className, onClick}) => ( <div> <Button className= onClick= > <FormattedMessage defaultMessage="Sign in" description="Label for submit login" id="gui.loginModal.submitLogin" /> </Button> </div>);SubmitLoginButton.propTypes = { className: PropTypes.string, onClick: PropTypes.func};SubmitLoginButton.defaultProps = { onClick: () => {}};export default SubmitLoginButton;
Style content in login-modal.css:
@import "../../css/colors.css";@import "../../css/units.css";.modal-content { width: 360px;}.min-input, .max-input { margin-bottom: 1.5rem; width: 100%; border: 1px solid $ui-black-transparent; border-radius: 5px; padding: 0 1rem; height: 3rem; color: $text-primary-transparent; font-size: .875rem;}.submit-login-button { background: $data-primary;}.btn-submit { background: hsla(30, 100%, 55%, 1); height: 2rem; alignment: center; cursor: pointer; border-radius: $form-radius; font-weight: bold; display: flex; flex-direction: row; align-items: center; padding-left: 9.75rem; user-select: none;}
We try to reuse the styles of existing components to keep the overall style consistent.
Now we can use it in the gui.jsx component to see the current effect and write it to the gui.jsx component:
Compile run:
You can see that the login pop-up interface does appear.
Okay. Just now, in order to debug the style, we have written LoginModal in components/gui.jsx. Now we need to display LoginModal when it is clicked, and close it when we click X in the upper right corner.
In order to display LoginModal in GUIComponent, we need to add a property showLoginModal for GUIComponent first, and judge whether to display or not by its value.
components/gui/gui.jsx:
Then modify containers/gui.jsx to map the value of showLoginModal to state:
Here we map the value of props showLoginModal to:
state.scratchGui.modals.loginModal
So we need to define the related state in reducers / modules.js:
Define actions to open and close:
Finally, remember to export them:
Now back to components / menu bar / login button.jsx, map its onClick method to openLoginModal:
In this way, clicking the Login button on the menu bar will open LoginModal.
Then there are components/login-modal/login-modal.jsx. Add the process of closing the login window for it:
OK, recompile and run. We find that the login pop-up window and close pop-up window are completed:
Let's go here first. In the next chapter, we will dock the login interface, complete the function of login to obtain user information and display it in the upper right corner.
tank_ft Published 9 original articles, won praise 1, visited 528 Private letter follow