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

app/javascript/gabsocial/actions/user.js

@@ -1,11 +1,15 @@
 import isObject from 'lodash.isobject'
 import api from '../api'
-import { me } from '../initial_state'
+import {
+  me,
+  emailConfirmed,
+} from '../initial_state'
 import { importFetchedAccount } from './importer'
 
 export const SAVE_USER_PROFILE_INFORMATION_FETCH_REQUEST = 'SAVE_USER_PROFILE_INFORMATION_FETCH_REQUEST'
 export const SAVE_USER_PROFILE_INFORMATION_FETCH_SUCCESS = 'SAVE_USER_PROFILE_INFORMATION_FETCH_SUCCESS'
 export const SAVE_USER_PROFILE_INFORMATION_FETCH_FAIL = 'SAVE_USER_PROFILE_INFORMATION_FETCH_FAIL'
+export const RESEND_USER_CONFIRMATION_EMAIL_SUCCESS = 'RESEND_USER_CONFIRMATION_EMAIL_SUCCESS'
 
 export const saveUserProfileInformation = (data) => {
   return function (dispatch, getState) {
@@ -51,4 +55,13 @@ function saveUserProfileInformationFail(error) {
     type: SAVE_USER_PROFILE_INFORMATION_FETCH_FAIL,
     error,
   }
+}
+
+export const resendUserConfirmationEmail = () => (dispatch, getState) => {
+  if (!me || emailConfirmed) return
+
+  api(getState).post('/api/v1/accounts/resend_email_confirmation').then((response) => {
+    dispatch({ type: RESEND_USER_CONFIRMATION_EMAIL_SUCCESS })
+  })
+
 }

app/javascript/gabsocial/components/modal/email_confirmation_reminder_modal.js

@@ -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 Gab’s 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

app/javascript/gabsocial/components/modal/modal_root.js

@@ -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

app/javascript/gabsocial/components/sidebar/sidebar_layout.js

@@ -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(' ')}>
                 {

app/javascript/gabsocial/constants.js

@@ -46,6 +46,7 @@ export const MODAL_CONFIRM = 'CONFIRM'
 export const MODAL_DISPLAY_OPTIONS = 'DISPLAY_OPTIONS'
 export const MODAL_EDIT_PROFILE = 'EDIT_PROFILE'
 export const MODAL_EDIT_SHORTCUTS = 'EDIT_SHORTCUTS'
+export const MODAL_EMAIL_CONFIRMATION_REMINDER = 'EMAIL_CONFIRMATION_REMINDER'
 export const MODAL_EMBED = 'EMBED'
 export const MODAL_GROUP_CREATE = 'GROUP_CREATE'
 export const MODAL_GROUP_DELETE = 'GROUP_DELETE'

app/javascript/gabsocial/initial_state.js

@@ -26,5 +26,7 @@ export const lastReadNotificationId = getMeta('last_read_notification_id');
 export const monthlyExpensesComplete = getMeta('monthly_expenses_complete');
 export const favouritesCount = getMeta('favourites_count');
 export const isFirstSession = getMeta('is_first_session');
+export const emailConfirmed = getMeta('email_confirmed');
+export const meEmail = getMeta('email');
 
 export default initialState;

app/javascript/gabsocial/reducers/user.js

@@ -2,12 +2,14 @@ import {
   SAVE_USER_PROFILE_INFORMATION_FETCH_REQUEST,
   SAVE_USER_PROFILE_INFORMATION_FETCH_SUCCESS,
   SAVE_USER_PROFILE_INFORMATION_FETCH_FAIL,
+  RESEND_USER_CONFIRMATION_EMAIL_SUCCESS,
 } from '../actions/user'
 import { Map as ImmutableMap } from 'immutable'
 
 const initialState = ImmutableMap({
   isLoading: false,
   isError: false,
+  emailConfirmationResends: 0,
 })
 
 export default function (state = initialState, action) {
@@ -18,6 +20,8 @@ export default function (state = initialState, action) {
       return state
     case SAVE_USER_PROFILE_INFORMATION_FETCH_FAIL:
       return state.set('isError', true)
+    case RESEND_USER_CONFIRMATION_EMAIL_SUCCESS:
+      return state.set('emailConfirmationResends', state.get('emailConfirmationResends') + 1)
     default:
       return state
   }

app/javascript/styles/global.css

@@ -443,6 +443,7 @@ pre {
 .topNeg50PX { top: -50px; }
 .top0 { top: 0; }
 .top120PX { top: 120px; }
+.top53PX { top: 53px; }
 .top60PC { top: 60%; }
 .top50PC { top: 50%; }
 
@@ -478,12 +479,15 @@ pre {
 .maxH340PX { max-height: 340px; }
 .maxH200PX { max-height: 200px; }
 .maxH56PX { max-height: 56px; }
+.maxH56PX { max-height: 42px; }
+.calcH106PX { height: calc(100vh - 106px); }
 .calcH53PX { height: calc(100vh - 53px); }
 .calcH80VH106PX { height: calc(80vh - 106px); }
 
 .minH100VH { min-height: 100vh; }
 .minH50VH { min-height: 50vh; }
 .minH200PX { min-height: 200px; }
+.minH106PX { min-height: 106px; }
 .minH98PX { min-height: 98px; }
 .minH80PX { min-height: 80px; }
 .minH58PX { min-height: 58px; }