john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixing last couple of auth dialogs

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-24 10:53:34 -07:00
parent ce25d56dfe
commit cb708c720f
16 changed files with 312 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/src/API.js
View File

@@ -230,6 +230,9 @@ class API extends EventEmitter {
sendResetPassword(email) {
return this.post('/auth/password/send', { email })
}
confirmResetPassword(passwordToken) {
return this.post('/auth/password/confirm', { passwordToken })
}
resetPassword(passwords) {
return this.post('/auth/password/reset', passwords)
}

6
website/src/App.js
View File

@@ -97,11 +97,11 @@ export class App extends Component {
<Route exact path='/confirm-email' component={ConfirmEmail} />
<Route exact path='/reset-password' component={ResetPassword} />
<Route exact path='/forgot-password' component={ForgotPassword} />
<ProtectedRoute exact path='/profile' component={Profile} />
<ProtectedRoute exact admin path='/users' render={props => (<Users {...props} onChangeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/teams' component={Users} />
<ProtectedRoute exact admin path='/system' component={Users} />
<ProtectedRoute exact admin path='/home' render={props => (<Home {...props} onChangeTitle={this.handleChangeTitle} />)} />
<ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
<DefaultRoute />
</Switch>
<Column.Item>

10
website/src/Auth/ConfirmEmail.js
View File

@@ -2,13 +2,13 @@ import React from 'react'
import { api } from 'src/API'
import PropTypes from 'prop-types'
import { MessageModal, WaitModal } from '../Modal'
import { Logout } from '.'
import autobind from 'autobind-decorator'
export class ConfirmEmail extends React.Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}
constructor() {
super()
this.state = {
@@ -22,7 +22,9 @@ export class ConfirmEmail extends React.Component {
this.setState({ waitModal: { message: 'Validating Email...' } })
if (emailToken) {
api.confirmEmail(emailToken).then((response) => {
api.logout().then(() => {
return api.confirmEmail(emailToken)
}).then((response) => {
this.setState({ waitModal: null })
if (response && response.passwordToken) {
// API will send a password reset token if this is the first time loggin on
@@ -54,10 +56,6 @@ export class ConfirmEmail extends React.Component {
render() {
const { messageModal, waitModal } = this.state
if (api.loggedInUser) {
return <Logout redirect={`${window.location.pathname}${window.location.search}`} />
}
return (
<div>
<WaitModal

9
website/src/Auth/ForgotPassword.js
View File

@@ -5,7 +5,6 @@ import { Image, Text, Column, Row, BoundInput, BoundButton, Box } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from 'src/API'
import { FormBinder } from 'react-form-binder'
import { Logout } from '.'
import headerLogo from 'images/deighton.png'
import { sizeInfo, colorInfo } from 'ui/style'
import autobind from 'autobind-decorator'
@@ -35,6 +34,10 @@ export class ForgotPassword extends Component {
}
}
componentDidMount() {
api.logout()
}
@autobind
handleSubmit(e) {
e.preventDefault()
@@ -66,10 +69,6 @@ export class ForgotPassword extends Component {
render() {
const { binder, waitModal, messageModal } = this.state
if (api.loggedInUser) {
return <Logout redirect={`${window.location.pathname}${window.location.search}`} />
}
return (
<Fragment>
<Column.Item grow />

7
website/src/Auth/ProtectedRoute.js
View File

@@ -7,6 +7,7 @@ import autobind from 'autobind-decorator'
export class ProtectedRoute extends React.Component {
static propTypes = {
location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
admin: PropTypes.bool,
}
@autobind
@@ -30,11 +31,11 @@ export class ProtectedRoute extends React.Component {
// The API might be in the middle of fetching the user information
// Return something and wait for login evint to fire to re-render
return <div />
} else if (user.administrator) {
} else if (!this.props.admin || (this.props.admin && user.administrator)) {
return <Route {...this.props} />
}
} else {
return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} />
}
return <Redirect to={`/login?redirect=${this.props.location.pathname}${this.props.location.search}`} />
}
}

16
website/src/Auth/ResetPassword.js
View File

@@ -1,7 +1,6 @@
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Box, Text, Image, Column, Row, BoundInput, BoundButton } from 'ui'
import { Logout } from '.'
import { MessageModal, WaitModal } from '../Modal'
import { api } from 'src/API'
import { FormBinder } from 'react-form-binder'
@@ -47,13 +46,10 @@ export class ResetPassword extends Component {
this.setState({ waitModal: { message: 'Confirming password reset...' } })
if (passwordToken) {
api.confirmResetPassword(passwordToken).then((response) => {
this.setState({ waitModal: null })
if (response && response.valid) {
this.setState({ tokenConfirmed: true })
} else {
this.props.history.replace('/')
}
api.logout().then(() => {
return api.confirmResetPassword(passwordToken)
}).then((response) => {
this.setState({ waitModal: null, tokenConfirmed: true })
}).catch((err) => {
this.setState({
waitModal: null,
@@ -107,10 +103,6 @@ export class ResetPassword extends Component {
render() {
const { messageModal, waitModal, binder } = this.state
if (api.loggedInUser) {
return <Logout redirect={`${window.location.pathname}${window.location.search}`} />
}
return (
<Fragment>
<Column.Item grow />

6
website/src/Home/Home.js
View File

@@ -6,15 +6,15 @@ import { sizeInfo } from 'ui/style'
export class Home extends Component {
static propTypes = {
history: PropTypes.object,
onChangeTitle: PropTypes.func.isRequired,
changeTitle: PropTypes.func.isRequired,
}
componentDidMount() {
this.props.onChangeTitle('Home')
this.props.changeTitle('Home')
}
componentWillUnmount() {
this.props.onChangeTitle('')
this.props.changeTitle('')
}
render() {

32
website/src/Modal/ChangeEmailModal.js
View File

@@ -14,8 +14,11 @@ export class ChangeEmailModal extends React.Component {
}
static bindings = {
oldEmail: {
noValue: true,
},
newEmail: {
isValid: (r, v) => (v !== '' && regExpPattern.email.test(v))
isValid: (r, v) => (v !== '' && regExpPattern.email.test(v) && v !== r.getFieldValue('oldEmail'))
},
submit: {
isDisabled: (r) => (!r.allValid),
@@ -26,7 +29,9 @@ export class ChangeEmailModal extends React.Component {
constructor(props) {
super(props)
this.state = {
binder: new FormBinder({}, ChangeEmailModal.bindings)
binder: new FormBinder({
oldEmail: props.oldEmail,
}, ChangeEmailModal.bindings)
}
}
@@ -43,12 +48,7 @@ export class ChangeEmailModal extends React.Component {
@autobind
handleSubmit(e) {
e.preventDefault()
let newEmail = null
if (this.state.binder.anyModified && this.state.binder.allValid) {
newEmail = this.state.binder.getFieldValue('newEmail')
}
let newEmail = this.state.binder.getFieldValue('newEmail')
this.close(newEmail)
}
@@ -58,10 +58,11 @@ export class ChangeEmailModal extends React.Component {
}
render() {
const { binder } = this.state
return (
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
closeOnDimmerClick={false}>
<form id='emailForm' onSubmit={this.handleSubmit}>
<Modal open={this.props.open} width={sizeInfo.modalWidth}>
<form id='changeEmailForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
@@ -69,6 +70,11 @@ export class ChangeEmailModal extends React.Component {
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item color='black' icon='edit'>
<Text size='large'>Change Password</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text>{this.props.oldEmail}</Text>
</Column.Item>
@@ -76,7 +82,7 @@ export class ChangeEmailModal extends React.Component {
<Column.Item>
<BoundInput label='New Email' name='newEmail'
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
binder={this.state.binder} />
binder={binder} />
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
@@ -87,7 +93,7 @@ export class ChangeEmailModal extends React.Component {
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundButton submit='emailForm' name='submit' binder={this.state.binder} text='OK' />
<BoundButton submit='changeEmailForm' name='submit' binder={binder} text='OK' />
</Row.Item>
</Row>
</Column.Item>

96
website/src/Modal/ChangePasswordModal.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui'
import { Modal, Button, Column, Row, Text, BoundInput, BoundButton } from 'ui'
import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'
@@ -21,8 +21,7 @@ export class ChangePasswordModal extends React.Component {
isValid: (r, v) => (v !== '' && v !== r.fields.oldPassword.value)
},
reenteredNewPassword: {
alwaysGet: true,
isValid: (r, v) => (v !== '' && v === r.fields.newPassword.value)
isValid: (r, v) => (v !== '' && v === r.getFieldValue('newPassword')),
},
submit: {
isDisabled: (r) => (!r.allValid),
@@ -51,10 +50,11 @@ export class ChangePasswordModal extends React.Component {
handleSubmit(e) {
e.preventDefault()
let passwords = null
const { binder } = this.state
if (this.state.binder.allValid) {
const oldPassword = this.state.binder.getField('oldPassword').value
const newPassword = this.state.binder.getField('newPassword').value
if (binder.allValid) {
const oldPassword = binder.getFieldValue('oldPassword')
const newPassword = binder.getFieldValue('newPassword')
passwords = { oldPassword, newPassword }
}
this.close(passwords)
@@ -66,41 +66,57 @@ export class ChangePasswordModal extends React.Component {
}
render() {
const { binder } = this.state
return (
<Modal dimmer='inverted' open={this.props.open} width={sizeInfo.modalWidth}>
<form id='passwordForm' onSubmit={this.handleSubmit}>
<Column.Item color='black' icon='edit'>
<Text size='large'>Change Password</Text>
</Column.Item>
<Column.Item>
<Column>
<Column.Item>
<BoundInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
binder={this.state.binder} />
</Column.Item>
</Column>
</Column.Item>
<Column.Item>
<Row>
<BoundButton primary submit form='passwordForm' name='submit' binder={this.state.binder}>
<Icon name='checkmark' /> OK
</BoundButton>
<Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel
</Button>
</Row>
</Column.Item>
<Modal open={this.props.open} width={sizeInfo.modalWidth}>
<form id='changePasswordForm' onSubmit={this.handleSubmit}>
<Row>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item color='black' icon='edit'>
<Text size='large'>Change Password</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Column>
<Column.Item>
<BoundInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank'
binder={binder} />
</Column.Item>
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
binder={binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
binder={binder} />
</Column.Item>
</Column>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Button onClick={this.handleClick} text='Cancel' />
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<BoundButton text='Submit' submit='changePasswordForm' name='submit' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</form>
</Modal>
)

74
website/src/Profile/Profile.js
View File

@@ -4,9 +4,14 @@ import { api } from 'src/API'
import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
import { Column, Row } from 'ui'
import { sizeInfo } from 'ui/style'
import PropTypes from 'prop-types'
import autobind from 'autobind-decorator'
export class Profile extends Component {
static propTypes = {
changeTitle: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
@@ -23,11 +28,11 @@ export class Profile extends Component {
}
componentDidMount() {
api.addListener('newProfileImage', this.handleNewProfileImage)
this.props.changeTitle('Profile')
}
componentWillUnmount() {
api.removeListener('newProfileImage', this.handleNewProfileImage)
this.props.changeTitle('')
}
@autobind
@@ -41,7 +46,11 @@ export class Profile extends Component {
}).catch((error) => {
this.setState({
waitModal: null,
messageModal: { title: 'Update Error...', message: `Unable to save the profile changes. ${error.message}` }
messageModal: {
icon: 'hand',
message: 'Unable to save the profile changes.',
detail: error.message,
},
})
})
}
@@ -56,21 +65,6 @@ export class Profile extends Component {
this.setState({ changePasswordModal: true })
}
@autobind
handleProgress(uploadData) {
if (this.state.progressModal) {
this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
return true
} else {
return false
}
}
@autobind
handleUploadCancel(result) {
this.setState({ progressModal: null })
}
@autobind
handleChangePasswordDismiss(passwords) {
this.setState({ changePasswordModal: false })
@@ -85,8 +79,9 @@ export class Profile extends Component {
this.setState({
waitModal: false,
messageModal: {
title: 'Changing Password Error',
message: `Unable to change password. ${error.message}.`
icon: 'hand',
message: 'Unable to change password',
detail: error.message,
}
})
})
@@ -94,8 +89,8 @@ export class Profile extends Component {
}
@autobind
handleChangeEmail() {
this.setState({ changeEmailModal: {} })
handleChangeEmail(oldEmail) {
this.setState({ changeEmailModal: { oldEmail } })
}
@autobind
@@ -111,32 +106,32 @@ export class Profile extends Component {
this.setState({
waitModal: null,
messageModal: {
error: false,
title: 'Email Change Requested...',
icon: 'thumb',
message: `An email has been sent to '${newEmail}' with a link that you need to click on to finish changing your email.`
}
})
}).catch((error) => {
this.setState({
error: true,
waitModal: null,
messageModal: {
error: true,
title: 'Email Change Error...',
message: `Unable to request email change. ${error ? error.message : ''}`
icon: 'hand',
message: 'Unable to request email change.',
detail: error.message
}
})
})
}
render() {
const { messageModal, waitModal, changeEmailModal, changePasswordModal } = this.state
return (
<Fragment>
<Column.Item grow />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item width={sizeInfo.modalWidth}>
<Row.Item width={sizeInfo.profileWidth}>
<ProfileForm
user={this.state.user}
onSaved={this.handleSaved}
@@ -149,16 +144,25 @@ export class Profile extends Component {
</Row>
</Column.Item>
<Column.Item>
<MessageModal error open={!!this.state.messageModal}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
title={messageModal ? messageModal.title : ''}
message={messageModal ? messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<ChangeEmailModal open={!!this.state.changeEmailModal} onDismiss={this.handleChangeEmailDismiss} />
<ChangeEmailModal
open={!!changeEmailModal}
oldEmail={changeEmailModal ? changeEmailModal.oldEmail : ''}
onDismiss={this.handleChangeEmailDismiss} />
<WaitModal active={!!this.state.waitModal} message={this.state.waitModal ? this.state.waitModal.message : ''} />
<WaitModal
active={!!waitModal}
message={waitModal ? waitModal.message : ''} />
<ChangePasswordModal open={!!this.state.changePasswordModal} onDismiss={this.handleChangePasswordDismiss} />
<ChangePasswordModal
open={!!changePasswordModal}
onDismiss={this.handleChangePasswordDismiss} />
</Column.Item>
<Column.Item grow />
</Fragment>

76
website/src/Profile/ProfileForm.js
View File

@@ -2,7 +2,6 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
import { sizeInfo, colorInfo } from 'ui/style'
import { regExpPattern } from 'regexp-pattern'
import { FormBinder } from 'react-form-binder'
import autobind from 'autobind-decorator'
@@ -26,36 +25,6 @@ export class ProfileForm extends React.Component {
lastName: {
isValid: (r, v) => (v !== '')
},
zip: {
isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
},
state: {
isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
},
city: {
isValid: true
},
address1: {
isValid: true
},
address2: {
isValid: true
},
homePhone: {
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
},
cellPhone: {
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
},
dateOfBirth: {
isValid: true
},
dateOfHire: {
isValid: true
},
ssn: {
isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
},
save: {
noValue: true,
isDisabled: (r) => (!r.anyModified || !r.allValid)
@@ -90,38 +59,59 @@ export class ProfileForm extends React.Component {
}
}
@autobind
handleChangeEmail() {
this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
}
render() {
const { binder } = this.state
return (
<form onSubmit={this.handleSubmit} id='profileForm'>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
radius={sizeInfo.formBoxRadius}>
<Row>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Column stackable>
<Row.Item grow>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<BoundInput label='First Name' name='firstName'
binder={binder} />
message='First name is required' binder={binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Last Name' name='lastName'
binder={binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
<BoundInput label='Email' name='email'
message='Required. Must be a valid email address.'
binder={binder} />
</Column.Item>
<Column.Item>
<Button text={'Change Email'} label='&nbsp;'
onClick={this.props.onChangeEmail} />
<Button text={'Change Password'} label='&nbsp;'
onClick={this.props.onChangePassword} />
<BoundButton submit size='medium' text='Save' label='&nbsp;' name='save'
binder={binder} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<Button text={'Change Email'} label='&nbsp;'
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Button text={'Change Password'} label='&nbsp;'
width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' name='save'
binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</Box>
</form>

4
website/src/Users/UserForm.js
View File

@@ -149,12 +149,12 @@ export class UserForm extends React.Component {
<Row>
<Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder}
width={sizeInfo.formButtonLarge} onClick={this.handleChangeEmail} />
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
width={sizeInfo.formButtonLarge} onClick={this.handleResendEmail} />
width={sizeInfo.buttonWideWidth} onClick={this.handleResendEmail} />
</Row.Item>
</Row>
</Column.Item>

6
website/src/Users/Users.js
View File

@@ -11,7 +11,7 @@ import { sizeInfo, colorInfo } from 'ui/style'
export class Users extends Component {
static propTypes = {
onChangeTitle: PropTypes.func.isRequired,
changeTitle: PropTypes.func.isRequired,
}
constructor(props) {
@@ -28,7 +28,7 @@ export class Users extends Component {
}
componentDidMount() {
this.props.onChangeTitle('Users')
this.props.changeTitle('Users')
api.listUsers().then((list) => {
list.items.sort((userA, userB) => (userA.lastName.localeCompare(userB.lastName)))
@@ -45,7 +45,7 @@ export class Users extends Component {
}
componentWillUnmount() {
this.props.onChangeTitle('')
this.props.changeTitle('')
}
removeUnfinishedNewUser() {

1
website/src/ui/Button.js
View File

@@ -18,6 +18,7 @@ export class Button extends Component {
static defaultProps = {
visible: true,
disabled: false,
width: sizeInfo.buttonWidth,
}
static style = {

5
website/src/ui/style.js
View File

@@ -54,6 +54,8 @@ const sizeInfo = {
buttonHeight: 40,
buttonPadding: '0 15px 0 15px',
buttonWidth: 125,
buttonWideWidth: 225,
checkboxSize: 25,
checkmarkBorder: '0 3px 3px 0',
@@ -72,7 +74,6 @@ const sizeInfo = {
formRowSpacing: 20,
formBoundIcon: 30,
formBoundIconMargin: 0,
formButtonLarge: 225,
listBorderWidth: 1,
listTopBottomGap: 10,
@@ -83,6 +84,8 @@ const sizeInfo = {
modalShadowWidth: 25,
modalMessageIcon: 150,
profileWidth: '65vw',
inputPadding: 5,
inputBorderRadius: 5,