init

cyynote-frontend/src/pages/sign-in.tsx

@@ -0,0 +1,123 @@
+import { Component } from "react";
+import {  Form,Toast, Button } from '@douyinfe/semi-ui';
+// import { IconSemiLogo, IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';
+import { Layout } from '@douyinfe/semi-ui';
+
+import { Navigate } from "react-router-dom";
+// import { Formik, Field, Form, ErrorMessage } from "formik";
+// import * as Yup from "yup";
+
+import AuthService from "../services/auth.service";
+import {IconDescriptions} from "@douyinfe/semi-icons-lab";
+
+type Props = {};
+
+type State = {
+    redirect: string | null,
+    username: string,
+    password: string,
+    loading: boolean,
+    message: string
+};
+
+export default class SignIn extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        // this.handleLogin = this.handleLogin.bind(this);
+
+        this.state = {
+            redirect: null,
+            username: "",
+            password: "",
+            loading: false,
+            message: ""
+        };
+    }
+
+    componentDidMount() {
+        const currentUser = AuthService.getCurrentUser();
+
+        if (currentUser) {
+            this.setState({ redirect: "/home" });
+        }
+    }
+
+    // componentWillUnmount() {
+    //     window.location.reload();
+    // }
+
+
+    handleSubmit = (values: { username: string; password: string }) => {
+        console.log(values);
+        // Toast.info('表单已提交');
+
+        AuthService.login(values.username, values.password).then(
+            () => {
+                Toast.info('登录成功');
+                this.setState({
+                    redirect: "/home"
+                });
+            },
+            error => {
+                const resMessage =
+                    (error.response &&
+                        error.response.data &&
+                        error.response.data.message) ||
+                    error.message ||
+                    error.toString();
+                Toast.info(resMessage);
+            }
+        );
+    };
+
+    render() {
+        if (this.state.redirect) {
+            return <Navigate to={this.state.redirect} />
+        }
+
+
+        const { Header, Footer, Content } = Layout;
+
+        const commonStyle = {
+            height: 64,
+            lineHeight: '64px',
+            background: 'var(--semi-color-fill-0)'
+        };
+        return (
+            <Layout className="components-layout-demo">
+                <Header style={commonStyle}>
+                    <div style={{ paddingTop: '10px' }} >
+
+
+                        <IconDescriptions style={{height: '36px', fontSize: 36}}/>
+                    </div>
+
+
+                    {/*Header*/}
+                </Header>
+                <Content style={{ textAlign: 'center' }}>
+                    CyyNote 登录
+                    <Form onSubmit={values => this.handleSubmit(values)} style={{ textAlign: 'center' ,width: 400 }}>
+                        {({ formState, values, formApi }) => (
+                            <>
+                                <Form.Input field='username' label='UserName' style={{ width: '100%' }} placeholder='Enter your user name'></Form.Input>
+                                <Form.Input mode="password"  field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
+                                <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                                    <p>
+                                        <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}>Sign up</Button>
+                                    </p>
+                                    <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
+                                </div>
+                            </>
+                        )}
+                    </Form>
+
+
+                </Content>
+                <Footer style={commonStyle}>@版权无限所有</Footer>
+            </Layout>
+
+        );
+    }
+}

cyynote-frontend/src/pages/styles.css

@@ -0,0 +1,72 @@
+.App22 {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+/*html {*/
+/*    font-style: 16px;*/
+/*}*/
+
+/*body {*/
+/*    margin: 0;*/
+/*}*/
+
+/* styling button */
+#toggle-edit-btn {
+    background-color: #4267b2;
+    border: 1px solid #4267b2;
+    border-radius: 0.3rem;
+    color: #fff;
+    padding: 1rem 2rem;
+    font-size: 1.2rem;
+    margin: 2rem auto;
+}
+
+#toggle-edit-btn:focus,
+#toggle-edit-btn:hover {
+    cursor: pointer;
+}
+
+/* styling app content container */
+.app-content22 {
+    margin: 1rem auto;
+    width: 80%;
+    padding: 2%;
+    /*background-color: #f4f5f9;*/
+}
+
+/* styling alert text when edit mode is enabled */
+.edit-mode-alert {
+    text-decoration: underline;
+    color: #c80000;
+}
+
+/* styling text parsed */
+.text-container > *,
+.editor-container > * {
+    text-align: left;
+}
+
+
+
+
+/*滚动条整体样式*/
+.semi-tree-option-list::-webkit-scrollbar {
+    /*高宽分别对应横竖滚动条的尺寸*/
+    width: 10px;
+    height: 1px;
+}
+
+/*滚动条里面小方块*/
+.semi-tree-option-list::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: #9b9a9a;
+}
+
+/*滚动条里面轨道*/
+.semi-tree-option-list::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    background: #EDEDED;
+}

cyynote-frontend/src/pages/test.tsx

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import { Layout } from '@douyinfe/semi-ui';
+type Props = {};
+
+type State = {
+    redirect: string | null,
+    username: string,
+    password: string,
+    loading: boolean,
+    message: string
+};
+export default class Test extends Component<Props, State> {
+
+    render() {
+
+        console.log('124234');
+
+        const onbreakpoint = (screen, bool) => {
+            console.log(screen, bool);
+        };
+        const commonStyle = {
+            height: 64,
+            lineHeight: '64px',
+            background: 'var(--semi-color-fill-0)'
+        };
+        const { Header, Footer, Sider, Content } = Layout;
+        return (
+            <Layout className="components-layout-demo">
+                <Header style={commonStyle}>Header</Header>
+                <Layout>
+                    <Sider
+                        style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}
+                        breakpoint={['md']}
+                        onBreakpoint={onbreakpoint}
+                    >
+                        Sider
+                    </Sider>
+                    <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
+                </Layout>
+                <Footer style={commonStyle}>Footer</Footer>
+            </Layout>
+        );
+    }
+}