Added new security question to sign up, Added notification for unconfirmed emails

• Added:
- new security question to sign up
- notification for unconfirmed emails
- modal for describing issue with Gab emails
This commit is contained in:
mgabdev
2020-10-16 16:25:37 -05:00
parent 9c0fc47777
commit 3c07e9d63b
16 changed files with 147 additions and 6 deletions

View File

@@ -0,0 +1,54 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
me,
meUsername,
} from '../../initial_state'
import Button from '../button'
import Text from '../text'
import ModalLayout from './modal_layout'
class EmailConfirmationReminderModal extends React.PureComponent {
render() {
const { onClose } = this.props
return (
<ModalLayout
title='Having Email Confirmation Issues?'
width={480}
onClose={onClose}
>
<Text size='medium' weight='medium' className={_s.mb10}>
Many email providers block Gabs emails.
</Text>
<Text size='medium' color='secondary'>
Please check your spam folder for the confirmation email. If you still do not see an email please reach out to us for help.
</Text>
<div className={[_s.d, _s.flexRow, _s.pt15, _s.pb10].join(' ')}>
<Button
isOutline
color='brand'
backgroundColor='none'
href={`mailto:support@gab.com?subject=Please%20confirm%20my%20email%20(${me})&body=My%20username%20is:%20${meUsername}%20and%20account%20id%20is:%20${me}`}
className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
>
<Text color='inherit' weight='medium' align='center'>
Email Gab Support
</Text>
</Button>
</div>
</ModalLayout>
)
}
}
EmailConfirmationReminderModal.propTypes = {
onClose: PropTypes.func.isRequired,
}
export default EmailConfirmationReminderModal

View File

@@ -16,6 +16,7 @@ import {
MODAL_DISPLAY_OPTIONS,
MODAL_EDIT_PROFILE,
MODAL_EDIT_SHORTCUTS,
MODAL_EMAIL_CONFIRMATION_REMINDER,
MODAL_EMBED,
MODAL_GROUP_CREATE,
MODAL_GROUP_DELETE,
@@ -48,6 +49,7 @@ import {
DisplayOptionsModal,
EditProfileModal,
EditShortcutsModal,
EmailConfirmationReminderModal,
EmbedModal,
GroupCreateModal,
GroupDeleteModal,
@@ -83,6 +85,7 @@ MODAL_COMPONENTS[MODAL_CONFIRM] = ConfirmationModal
MODAL_COMPONENTS[MODAL_DISPLAY_OPTIONS] = DisplayOptionsModal
MODAL_COMPONENTS[MODAL_EDIT_SHORTCUTS] = EditShortcutsModal
MODAL_COMPONENTS[MODAL_EDIT_PROFILE] = EditProfileModal
MODAL_COMPONENTS[MODAL_EMAIL_CONFIRMATION_REMINDER] = EmailConfirmationReminderModal
MODAL_COMPONENTS[MODAL_EMBED] = EmbedModal
MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal

View File

@@ -2,8 +2,10 @@ import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
CX,
BREAKPOINT_SMALL,
} from '../../constants'
import { emailConfirmed } from '../../initial_state'
import Button from '../button'
import { openModal } from '../../actions/modal'
import Responsive from '../../features/ui/util/responsive_component'
@@ -26,10 +28,18 @@ class SidebarLayout extends React.PureComponent {
children,
} = this.props
const innerContainerClasses = CX({
d: 1,
posFixed: 1,
calcH53PX: emailConfirmed,
calcH106PX: !emailConfirmed,
bottom0: 1,
})
return (
<header role='banner' className={[_s.d, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
<div className={[_s.d, _s.w240PX].join(' ')}>
<div className={[_s.d, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
<div className={innerContainerClasses}>
<div className={[_s.d, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
<div className={[_s.d, _s.w100PC].join(' ')}>
{