|
| 1 | +import * as React from 'react' |
| 2 | +import { purify, DuckCmpProps } from 'saga-duck' |
| 3 | + |
| 4 | +import Duck from './PageDuck' |
| 5 | +import insertCSS from '@src/polaris/common/helpers/insertCSS' |
| 6 | +import { Row, Col, Card, H2, Text, Form, Button, Input as TeaInput, Copy, Bubble } from 'tea-component' |
| 7 | +import FormField from '@src/polaris/common/duckComponents/form/Field' |
| 8 | +import Input from '@src/polaris/common/duckComponents/form/Input' |
| 9 | +insertCSS( |
| 10 | + 'login', |
| 11 | + `.login-background{ |
| 12 | +height:100vh; |
| 13 | +width:100vw; |
| 14 | +overflow:hidden; |
| 15 | +
|
| 16 | +}`, |
| 17 | +) |
| 18 | +export default purify(function (props: DuckCmpProps<Duck>) { |
| 19 | + const { duck, store, dispatch } = props |
| 20 | + const { ducks, creators, selector } = duck |
| 21 | + const { userName, password } = ducks.form.getAPI(store, dispatch).getFields(['userName', 'password']) |
| 22 | + const { preError } = selector(store) |
| 23 | + return ( |
| 24 | + <div |
| 25 | + style={{ background: 'url(static/img/login-background.png)', backgroundSize: '100% 100%' }} |
| 26 | + className={'login-background'} |
| 27 | + > |
| 28 | + <img |
| 29 | + src={'static/img/logo-polaris.png'} |
| 30 | + style={{ width: '200px', position: 'absolute', top: 0, left: 0, padding: '15px' }} |
| 31 | + /> |
| 32 | + <Row style={{ margin: '30vh 0 30vh 0', height: '40vh' }}> |
| 33 | + <Col span={4}></Col> |
| 34 | + |
| 35 | + <Col span={16}> |
| 36 | + <Row style={{ maxWidth: '1000px', margin: 'auto' }}> |
| 37 | + <Col span={15}> |
| 38 | + <Card |
| 39 | + style={{ |
| 40 | + backgroundColor: 'transparent', |
| 41 | + border: 'none', |
| 42 | + padding: '5vh 0', |
| 43 | + }} |
| 44 | + bordered |
| 45 | + > |
| 46 | + <Card.Body> |
| 47 | + <Text parent={'div'} style={{ color: '#fff', fontSize: '24px', width: '550px' }}> |
| 48 | + 北极星服务治理中心 |
| 49 | + </Text> |
| 50 | + <Text parent={'div'} style={{ color: 'rgba(255, 255, 255, 0.6)', width: '450px' }}> |
| 51 | + 一个支持多语言、多框架和异构基础设施的服务治理中心，提供服务发现、流量调度、熔断降级、限流鉴权和可观测性等服务治理功能。北极星治理中心默认提供服务注册功能，也可以搭配其他服务注册中心使用。 |
| 52 | + </Text> |
| 53 | + </Card.Body> |
| 54 | + </Card> |
| 55 | + </Col> |
| 56 | + <Col span={9}> |
| 57 | + <Card> |
| 58 | + <Card.Body> |
| 59 | + <Row> |
| 60 | + <Col> |
| 61 | + <H2> |
| 62 | + <Text align={'center'} parent={'div'} style={{ width: '100%' }}> |
| 63 | + 初始化主账户 |
| 64 | + </Text> |
| 65 | + </H2> |
| 66 | + </Col> |
| 67 | + </Row> |
| 68 | + <Row> |
| 69 | + <Col> |
| 70 | + <Text theme={'weak'} parent={'div'} style={{ width: '100%' }} align={'center'}> |
| 71 | + 外网访问建议设置访问控制策略 |
| 72 | + </Text> |
| 73 | + </Col> |
| 74 | + </Row> |
| 75 | + <Form style={{ padding: '20px 0px' }}> |
| 76 | + <FormField field={userName} label={'用户名'}> |
| 77 | + <Input field={userName} size={'full'} /> |
| 78 | + </FormField> |
| 79 | + <FormField field={password} label={'密码'}> |
| 80 | + <TeaInput.Password |
| 81 | + value={password.getValue() || ''} |
| 82 | + size={'full'} |
| 83 | + onChange={(v) => { |
| 84 | + password.setValue(v) |
| 85 | + password.setTouched(true) |
| 86 | + password.setError('') |
| 87 | + }} |
| 88 | + onPressEnter={() => { |
| 89 | + password.setError('') |
| 90 | + dispatch(creators.submit()) |
| 91 | + }} |
| 92 | + rules={false} |
| 93 | + disabled={preError} |
| 94 | + /> |
| 95 | + </FormField> |
| 96 | + </Form> |
| 97 | + <Row> |
| 98 | + <Col span={8}></Col> |
| 99 | + <Bubble> |
| 100 | + <Col span={8}> |
| 101 | + <Button |
| 102 | + type={'primary'} |
| 103 | + style={{ width: '100%', margin: 'auto' }} |
| 104 | + onClick={() => { |
| 105 | + password.setError('') |
| 106 | + dispatch(creators.submit()) |
| 107 | + }} |
| 108 | + disabled={preError} |
| 109 | + > |
| 110 | + 初始化 |
| 111 | + </Button> |
| 112 | + </Col> |
| 113 | + </Bubble> |
| 114 | + </Row> |
| 115 | + </Card.Body> |
| 116 | + </Card> |
| 117 | + </Col> |
| 118 | + </Row> |
| 119 | + </Col> |
| 120 | + <Col span={4}></Col> |
| 121 | + </Row> |
| 122 | + </div> |
| 123 | + ) |
| 124 | +}) |
0 commit comments