scratch3.0 scratch-gui integrated custom user system 3, (Chapter 6)

EDITORIAL

This series of articles has the ability to develop as a friend writing with the aim of helping them to develop a complete set of scratch scratch on the basis of 3.0 on a 3.0 programming tools, user communities and works cloud storage and sharing, brand integration in one scratch programming platform. If you are not a developer but want to have their own education platform and brand, also welcomed the exchange of learning and discuss cooperation.

So if you want to learn scratch children's programming courses, then please ignore this series of articles.

Foreword

We continue to work before the back-end integration of user systems.
In this chapter we will increase the login screen, when the user clicks the login button, a pop-up login window, enter the user name and password, if the login is successful, return to the main interface and menu-bar display user information in the upper right corner.

Began to realize

The first to realize pop assembly login.

We found that scratch-gui already defined their own ModalCompoent components and container Modal. So much the better. We can come to complete our login component in this modal popups basis, so as to be consistent with the existing styles.

New components in the login-modal folder and create a login-modal.jsx file in it, we have to achieve in the style login login-modal.jsx components, including a pop, two input boxes and a submit button.
LoginModal define the basic structure of:

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={styles.modalContent}        contentLabel={props.title}        id="loginModal"    >        <Box>            <input                className={styles.minInput}                name="account"                placeholder="账号"                type="text"            /><br />            <input                className={styles.minInput}                name="password"                placeholder="密码"                type="password"            /><br />            <SubmitLoginButton className={styles.btnSubmit} />        </Box>    </Modal>);LoginModal.propTypes = {    title: PropTypes.string.isRequired}export default LoginModal;

These include a submit button assembly SubmitLoginButton logged, implemented in submit-login-button.jsx in:

import classNames from 'classnames';import {FormattedMessage} 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={classNames(                className,                styles.SubmitLoginButton            )}            onClick={onClick}        >            <FormattedMessage                defaultMessage="登录"                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;

@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 existing components of style, thus keeping the overall style.

Now we can first use in gui.jsx components in it, look at the current results, it writes gui.jsx of components:

Compile and run:

It does appear to log in to see the pop interface.

All right. In order to debug just the style we write in components / gui.jsx died in display LoginModal, now we need to show it when Login is clicked on, turn it off by clicking the X in the upper right corner.

为了实现LoginModal在GUIComponent中的显示，我们需要先为GUIComponent添加一个属性showLoginModal，通过它的值来判断是否展示。