unfinished birthday greeting feature

src/components/modals/settings/sections/GreetingSettings.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Section from '../Section';
+import Checkbox from '../Checkbox';
+import DatePicker from 'react-date-picker';
+import { toast } from 'react-toastify';
+
+export default class GreetingSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        birthday: new Date(localStorage.getItem('birthday')) || new Date()
+    };
+  }
+
+  resetItem(type) {
+    switch (type) {
+      case 'greeting': document.getElementById('greetingName').value = ''; break;
+      default: break;
+    }
+    toast(this.props.toastLanguage.reset);
+  }
+
+  changeDate(data) {
+      if (data === 'reset') return; //soon
+      localStorage.setItem('birthday', data);
+      this.setState({ birthday: data });
+  }
+
+  render() {
+    return (
+        <Section title={this.props.language.greeting.title} name='greeting'>
+        <Checkbox name='events' text={this.props.language.greeting.events} />
+        <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
+        <ul>
+          <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greeting')}>{this.props.language.reset}</span></p>
+          <input type='text' id='greetingName'></input>
+        </ul>
+        <ul>
+          <p>Birthday Date <span className='modalLink' onClick={() => this.changeDate('reset')}>{this.props.language.reset}</span></p>
+          <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
+        </ul>
+      </Section>
+    );
+  }
+}

src/components/modals/tabs/Settings.jsx

@@ -8,11 +8,11 @@ import { toast } from 'react-toastify';
 import BackgroundSettings from '../settings/sections/BackgroundSettings';
 import SearchSettings from '../settings/sections/SearchSettings';
 import LanguageSettings from '../settings/sections/LanguageSettings';
+import GreetingSettings from '../settings/sections/GreetingSettings';
 
 export default class Settings extends React.PureComponent {
   resetItem(type) {
     switch (type) {
-      case 'greeting': document.getElementById('greetingName').value = ''; break;
       case 'css': document.getElementById('customcss').value = ''; break;
       default: break;
     }
@@ -54,14 +54,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='percentageComplete' text={this.props.language.time.percentageComplete} />
           </Section>
 
-          <Section title={this.props.language.greeting.title} name='greeting'>
-            <Checkbox name='events' text={this.props.language.greeting.events} />
-            <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
-            <ul>
-              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greeting')}>{this.props.language.reset}</span></p>
-              <input type='text' id='greetingName'></input>
-            </ul>
-          </Section>
+          <GreetingSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
 
           <Section title={this.props.language.quote.title} name='quote'>
             <Checkbox name='copyButton' text={this.props.language.quote.copy} />

src/components/widgets/greeting/Greeting.jsx

@@ -47,6 +47,10 @@ export default class Greeting extends React.PureComponent {
 
     if (custom === 'false') name = name.replace(',', '');
 
+    // Birthday
+    const birth = new Date(localStorage.getItem('birthday'));
+    if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth() && birth.getFullYear() !== 1001) message = 'Happy Birthday';
+
     // Set the state to the greeting string
     this.setState({
       greeting: `${message}${name}`