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

styling change login modal

Browse Source
This commit is contained in:
Roland Osborne 2024-02-23 12:50:51 -08:00
parent a24272db84
commit 60761d3d5d
2 changed files with 60 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
View File

@ -1,4 +1,4 @@
import { AccountAccessWrapper, SealModal, EditFooter } from './AccountAccess.styled';
import { AccountAccessWrapper, LoginModal, SealModal, EditFooter } from './AccountAccess.styled';
import { useAccountAccess } from './useAccountAccess.hook';
import { Button, Modal, Switch, Form, Input, Radio, Select } from 'antd';
import { SettingOutlined, UserOutlined, LockOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
@ -173,24 +173,30 @@ export function AccountAccess() {
)}
</SealModal>
</Modal>
<Modal title="Account Login" centered visible={state.editLogin} footer={editLoginFooter}
bodyStyle={{ paddingLeft: 16, paddingRight: 16 }} onCancel={actions.clearEditLogin}>
<Form name="basic" wrapperCol={{ span: 24, }}>
<Form.Item name="username" validateStatus={state.editStatus} help={state.editMessage}>
<Input placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
</Form.Item>
<Modal centered closable={false} footer={null} visible={state.editLogin} bodyStyle={{ padding: 16, ...state.menuStyle }} onCancel={actions.clearEditLogin}>
<LoginModal>
<Form name="basic" wrapperCol={{ span: 24, }}>
<Form.Item name="username" validateStatus={state.editStatus} help={state.editMessage}>
<Input className="loginValue" placeholder="Username" spellCheck="false" onChange={(e) => actions.setEditHandle(e.target.value)}
defaultValue={state.editHandle} autocomplete="username" autocapitalize="none" prefix={<UserOutlined />} />
</Form.Item>
<Form.Item name="password">
<Input.Password placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
<Form.Item name="password">
<Input.Password className="loginValue" placeholder="Password" spellCheck="false" onChange={(e) => actions.setEditPassword(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
<Form.Item name="confirm">
<Input.Password placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
</Form>
<Form.Item name="confirm">
<Input.Password className="loginValue" placeholder="Confirm Password" spellCheck="false" onChange={(e) => actions.setEditConfirm(e.target.value)}
autocomplete="new-password" prefix={<LockOutlined />} />
</Form.Item>
</Form>
</LoginModal>
<EditFooter>
<Button key="back" onClick={actions.clearEditLogin}>Cancel</Button>
<Button key="save" type="primary" className={actions.canSaveLogin() ? 'saveEnabled' : 'saveDisabled'} onClick={saveLogin}
disabled={!actions.canSaveLogin()} loading={state.busy}>Save</Button>
</EditFooter>
</Modal>
</AccountAccessWrapper>
);

37
net/web/src/session/account/profile/accountAccess/AccountAccess.styled.js
View File

@ -126,9 +126,46 @@ export const SealModal = styled.div`
}
`
export const LoginModal = styled.div`
.loginValue {
background-color: ${props => props.theme.inputArea};
color: ${props => props.theme.mainText};
}
input {
padding-left: 8px;
background-color: ${props => props.theme.inputArea};
border: 1px solid ${props => props.theme.sectionBorder};
color: ${props => props.theme.mainText};
}
input::placeholder {
color: ${props => props.theme.placeholderText};
}
`
export const EditFooter = styled.div`
width: 100%;
display: flex;
justify-content: flex-end;
gap: 16px;
.saveDisabled {
background-color: ${props => props.theme.disabledArea};
button {
color: ${props => props.theme.idleText};
}
}
.saveEnabled {
background-color: ${props => props.theme.enabledArea};
button {
color: ${props => props.theme.activeText};
}
}
.select {
display: flex;