martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +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 React, { useContext, useState, useEffect, useRef } from 'react'
import { AppContext } from '../AppContext/AppContext'; import { AppContext } from '../AppContext/AppContext';
import { Input, Button } from 'antd'; import { Input, Button, Spin } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useCreate } from './useCreate.hook'; 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() { export function Create() {
const { state, actions } = useCreate() const { state, actions } = useCreate()
@ -27,6 +27,7 @@ export function Create() {
</CreateEnter> </CreateEnter>
</div> </div>
<CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin> <CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
<CreateSpin size="large" spinning={state.spinning} />
</CreateWrapper> </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'; import styled from 'styled-components';
export const CreateWrapper = styled.div` export const CreateWrapper = styled.div`
@ -59,3 +59,7 @@ export const CreateEnter = styled(Button)`
export const CreateLogin = styled(Button)` export const CreateLogin = styled(Button)`
margin-top: 4px; margin-top: 4px;
`; `;
export const CreateSpin = styled(Spin)`
position: absolute;
`

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

@ -10,6 +10,7 @@ export function useCreate() {
password: '', password: '',
confirmed: '', confirmed: '',
conflict: '', conflict: '',
spinning: false,
}); });
const navigate = useNavigate(); const navigate = useNavigate();
@ -38,11 +39,15 @@ export function useCreate() {
navigate('/login') navigate('/login')
}, },
onCreate: async () => { onCreate: async () => {
try { if (!state.spinning) {
app.actions.create(state.username, state.password) actions.updateState({ spinning: true })
} try {
catch (err) { await app.actions.create(state.username, state.password)
window.alert(err); }
catch (err) {
window.alert(err);
}
actions.updateState({ spinning: false })
} }
}, },
updateState: (value) => { updateState: (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 { Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useLogin } from './useLogin.hook'; 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) { export function Login(props) {
@ -27,6 +27,7 @@ export function Login(props) {
<LoginCreate type="link" onClick={() => actions.onCreate()} disabled={!state.available}> <LoginCreate type="link" onClick={() => actions.onCreate()} disabled={!state.available}>
<span>Create Account</span> <span>Create Account</span>
</LoginCreate> </LoginCreate>
<LoginSpin size="large" spinning={state.spinning} />
</LoginWrapper> </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'; import styled from 'styled-components';
export const LoginWrapper = styled.div` export const LoginWrapper = styled.div`
@ -59,3 +59,7 @@ export const LoginEnter = styled(Button)`
export const LoginCreate = styled(Button)` export const LoginCreate = styled(Button)`
margin-top: 4px; margin-top: 4px;
`; `;
export const LoginSpin = styled(Spin)`
position: absolute;
`;

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

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