scratch3.0 scratch-gui中集成自定义用户系统3(第六章)

scratch3.0系列分享章节列表

scratch3.0二次开发scratch3.0基本介绍(第一章)

scratch3.0二次开发运行scratch-gui项目并了解工程结构(第二章)

scratch3.0二次自定义品牌logo(第三章)

scratch3.0 scratch-gui中集成自定义用户系统1(第四章)

scratch3.0 scratch-gui中集成自定义用户系统2(第五章)

scratch3.0 scratch-gui中集成自定义用户系统3(第六章)

scratch3.0 scratch-gui中集成自定义用户系统4(第七章)

scratch3.0 scratch-gui中集成自定义用户系统5(第八章)

scratch3.0 scratch-gui中集成自定义用户系统6(第九章)

scratch3.0 scratch-gui中集成作品系统1(第九章)

scratch3.0 scratch-gui中集成作品系统2(第十章)

scratch3.0 scratch-gui中集成作品系统3(第十一章)

scratch3.0 scratch-gui加载自定义初始化角色(第十二章)

scratch3.0 scratch-gui打开自己平台云端作品(第十三章)

写在前面

该系列文章是为具有开发能力的朋友写作的，目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及分享、品牌集成于一体的scratch编程平台。如果您不是开发者，但想要拥有自己的教育平台和品牌，也欢迎学习交流和洽谈合作。

所以如果您是想学习scratch少儿编程课程，那请忽略该系列的文章。

 

前言

我们继续之前的集成后台用户系统的工作。 
这一章我们将增加登录界面，在用户点击登录按钮时，弹出一个登录窗口，用户输入用户名密码，如果登录成功，回到主界面并且在右上角的menu-bar展示用户信息。

 

开始实现

先来实现登录的弹窗组件。

我们发现scratch-gui中已经定义了自己的ModalCompoent组件和container Modal。这样最好。我们可以在这个modal基础上来完成我们的登录弹窗组件，从而保持与已有的风格样式一致。

在components中新建login-modal文件夹，并在里面创建login-modal.jsx文件，我们来在login-modal.jsx中实现登录组件的样式，包括一个弹窗，两个输入框和一个提交按钮。 
定义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 => (            className={styles.modalContent}        contentLabel={props.title}        id="loginModal"    >                                    className={styles.minInput}                name="account"                placeholder="账号"                type="text"            />
                            className={styles.minInput}                name="password"                placeholder="密码"                type="password"            />
                        );LoginModal.propTypes = {    title: PropTypes.string.isRequired}export default LoginModal;

其中包括一个提交登录的按钮组件SubmitLoginButton，实现于submit-login-button.jsx中：

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}) => (    
                    className={classNames(                className,                styles.SubmitLoginButton            )}            onClick={onClick}        >                            defaultMessage="登录"                description="Label for submit login"                id="gui.loginModal.submitLogin"            />            
);SubmitLoginButton.propTypes = { className: PropTypes.string, onClick: PropTypes.func};SubmitLoginButton.defaultProps = { onClick: () => {}};export default SubmitLoginButton;

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;}

我们尽量复用已有组件的样式，从而保持整体风格一致。

现在我们可以先在gui.jsx组件里使用一下，看一下当前的效果，将它写到gui.jsx的组件中：

编译运行：

看到确实出现了登录弹窗界面。

 

好了。刚才为了调试样式，我们在components/gui.jsx中写死了显示LoginModal，现在我们需要在Login被点击时显示它，点击右上角的X时关闭它。

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

components/gui/gui.jsx: 

然后修改containers/gui.jsx，将showLoginModal的值与state映射起来：

这里我们将props showLoginModal的值映射给：

state.scratchGui.modals.loginModal

所以我们需要去reducers/modals.js中定义相关state： 

定义打开和关闭的actions: 

最后记得将它们export: 

现在回到components/menu-bar/login-button.jsx，将它的onClick方法映射到openLoginModal中: 

这样点击菜单栏的Login按钮，将会打开LoginModal。

然后是components/login-modal/login-modal.jsx，为它添加关闭登录窗的处理：

好了，重新编译运行，我们发现登录弹窗和关闭弹窗就实现完成了：

先到这里吧，下一章我们将对接登录接口，完成登录获取用户信息并在右上角展示的功能。

上一章节链接：https://blog.csdn.net/tank_ft/article/details/104197077
下一章节链接：暂未更新

有不懂的欢迎访问我的博客获取我的联系方式，手把手教哈，博客地址：http://www.liyblog.top/p/1.html