martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

show spinner during login

Browse Source
This commit is contained in:
Roland Osborne 2022-03-16 11:31:17 -07:00
parent cba10f8d64
commit 4469e7db95
6 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
net/web/src/Create/Create.jsx
View File

@ -1,9 +1,9 @@
import React, { useContext, useState, useEffect, useRef } from 'react'
import { AppContext } from '../AppContext/AppContext';
import { Input, Button } from 'antd';
import { Input, Button, Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useCreate } from './useCreate.hook';
import { CreateWrapper, CreateInput, CreatePassword, CreateLogin, CreateEnter } from './Create.styled';
import { CreateWrapper, CreateInput, CreatePassword, CreateLogin, CreateEnter, CreateSpin } from './Create.styled';
export function Create() {
const { state, actions } = useCreate()
@ -27,6 +27,7 @@ export function Create() {
</CreateEnter>
</div>
<CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
<CreateSpin size="large" spinning={state.spinning} />
</CreateWrapper>
)
}

6
net/web/src/Create/Create.styled.js
View File

@ -1,4 +1,4 @@
import { Input, Button } from 'antd';
import { Input, Button, Spin } from 'antd';
import styled from 'styled-components';
export const CreateWrapper = styled.div`
@ -59,3 +59,7 @@ export const CreateEnter = styled(Button)`
export const CreateLogin = styled(Button)`
margin-top: 4px;
`;
export const CreateSpin = styled(Spin)`
position: absolute;
`

7
net/web/src/Create/useCreate.hook.js
View File

@ -10,6 +10,7 @@ export function useCreate() {
password: '',
confirmed: '',
conflict: '',
spinning: false,
});
const navigate = useNavigate();
@ -38,12 +39,16 @@ export function useCreate() {
navigate('/login')
},
onCreate: async () => {
if (!state.spinning) {
actions.updateState({ spinning: true })
try {
app.actions.create(state.username, state.password)
await app.actions.create(state.username, state.password)
}
catch (err) {
window.alert(err);
}
actions.updateState({ spinning: false })
}
},
updateState: (value) => {
setState((s) => ({ ...s, ...value }));

3
net/web/src/Login/Login.jsx
View File

@ -3,7 +3,7 @@ import { AppContext } from '../AppContext/AppContext';
import { Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useLogin } from './useLogin.hook';
import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter } from './Login.styled';
import { LoginWrapper, LoginInput, LoginPassword, LoginCreate, LoginEnter, LoginSpin } from './Login.styled';
export function Login(props) {
@ -27,6 +27,7 @@ export function Login(props) {
<LoginCreate type="link" onClick={() => actions.onCreate()} disabled={!state.available}>
<span>Create Account</span>
</LoginCreate>
<LoginSpin size="large" spinning={state.spinning} />
</LoginWrapper>
);
}

6
net/web/src/Login/Login.styled.js
View File

@ -1,4 +1,4 @@
import { Input, Button } from 'antd';
import { Input, Button, Spin } from 'antd';
import styled from 'styled-components';
export const LoginWrapper = styled.div`
@ -59,3 +59,7 @@ export const LoginEnter = styled(Button)`
export const LoginCreate = styled(Button)`
margin-top: 4px;
`;
export const LoginSpin = styled(Spin)`
position: absolute;
`;

5
net/web/src/Login/useLogin.hook.js
View File

@ -8,6 +8,7 @@ export function useLogin() {
username: '',
password: '',
available: false,
spinning: false,
});
const navigate = useNavigate();
@ -27,12 +28,16 @@ export function useLogin() {
return false
},
onLogin: async () => {
if (!state.spinning) {
actions.updateState({ spinning: true })
try {
await app.actions.login(state.username, state.password)
}
catch (err) {
window.alert(err)
}
actions.updateState({ spinning: false })
}
},
onCreate: () => {
navigate('/create')