Devise Token Auth for one quran (#571)

* Devise Token Auth for one quran

* pr comments

src/components/FacebookTokenButton/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { save } from 'redux/actions/auth';
+import { push } from 'react-router-redux';
+
+const styles = require('./style.scss');
+
+const FacebookTokenButton = ({ save, push }) => { // eslint-disable-line
+  let popup = null;
+  let interval = null;
+
+  const handleClick = () => {
+    popup = window.open('/onequran/omniauth/facebook?omniauth_window_type=newWindow&resource_class=User', '_blank'); // eslint-disable-line
+    interval = setInterval(() => popup.postMessage('requestCredentials', '*'), 1000);
+
+    window.addEventListener('message', (event) => { // eslint-disable-line
+      if (event.data.uid) {
+        save(event.data);
+        clearInterval(interval);
+
+        return push('/');
+      }
+    }, false);
+  };
+
+  return (
+    <button onClick={handleClick} className={`${styles.button} btn btn-default btn-block btn-lg`}>
+      <i className="fa fa-facebook" /> Continue with Facebook
+    </button>
+  );
+};
+
+export default connect(null, { save, push })(FacebookTokenButton);

src/components/FacebookTokenButton/style.scss

@@ -0,0 +1,6 @@
+.button{
+  background: #3B5998;
+  border-color: #3B5998;
+  color: #fff;
+  font-weight: 300;
+}

src/components/IndexHeader/Nav/index.js

@@ -75,7 +75,7 @@ export class IndexHeaderNav extends Component {
           user &&
             <li>
               <Link to="/profile" data-metrics-event-name="IndexHeader:Link:Profile">
-                {user.firstName}
+                {user.firstName || user.name}
               </Link>
             </li>
         }

src/containers/Login/index.js

@@ -1,9 +1,28 @@
 import React from 'react';
 
-import FacebookButton from 'components/FacebookButton';
+import FacebookTokenButton from 'components/FacebookTokenButton';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+const logo = require('../../../static/images/logo-lg.png');
 
 export default () => (
-  <div>
-    <FacebookButton />
+  <div className="row" style={{ paddingTop: '10vh' }}>
+    <div className="col-md-4 col-md-offset-4">
+      <div className="panel panel-default">
+        <div className="panel-body">
+          <div className="text-center">
+            <img src={logo} alt="logo" width="30%" />
+            <h3 style={{ color: '#000' }}>Quran.com</h3>
+          </div>
+          <p>
+            <LocaleFormattedMessage
+              id="login.message"
+              default="Sign in to Quran.com to store all your bookmarks, notes and activities."
+            />
+          </p>
+          <FacebookTokenButton />
+        </div>
+      </div>
+    </div>
   </div>
 );

src/containers/Profile/index.js

@@ -24,7 +24,7 @@ class Profile extends Component { // eslint-disable-line
     const { user, bookmarks } = this.props;
 
     return (
-      <div>
+      <div className="min-container">
         <Helmet title="The Noble Quran - القرآن الكريم" titleTemplate="%s" />
         <QuranNav />
         <div className={styles.header} />

src/helpers/ApiClient.js

@@ -38,8 +38,9 @@ export default class {
           }));
         }
 
-        if (cookie.load('accessToken')) {
-          request.set('Authorization', `Bearer ${cookie.load('accessToken')}`);
+        if (cookie.load('auth')) {
+          const headers = cookie.load('auth');
+          Object.keys(headers).forEach(key => request.set(key, headers[key]));
         }
 
         if (__SERVER__ && req.get('cookie')) {
@@ -50,11 +51,21 @@ export default class {
           request.send(decamelizeKeys(data));
         }
 
-        request.end((err, { body } = {}) => {
+        request.end((err, { header, body } = {}) => {
           if (err) {
             return reject(body || err);
           }
 
+          if (header['access-token']) {
+            cookie.save('auth', {
+              'access-token': header['access-token'],
+              client: header.client,
+              expiry: header.expiry,
+              uid: header.uid,
+              'token-type': 'Bearer'
+            });
+          }
+
           return resolve(body);
         });
       });

src/locale/ar.js

@@ -68,6 +68,8 @@ export default {
     'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',  // eslint-disable-line max-len
     'nav.mobile': 'التليفون المحمول',
     'nav.navigate': 'انتقل',
-    'nav.legacySite': 'الموقع القديم'
+    'nav.legacySite': 'الموقع القديم',
+
+    'login.message': 'تسجيل الدخول إلى Quran.com لتخزين كل ما تبذلونه من العناوين والملاحظات والأنشطة.'
   }
 };

src/locale/en.js

@@ -61,13 +61,15 @@ export default {
 
     'nav.contribute': 'Contribute',
     'nav.aboutUs': 'About us',
-    'nav.developers': 'developers',
+    'nav.developers': 'Developers',
     'nav.usefulSites': 'Useful sites',
     'nav.otherLinks': 'Other links',
     'nav.contactUs': 'Contact us',
     'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.', // eslint-disable-line max-len
     'nav.mobile': 'Mobile',
     'nav.navigate': 'Navigate',
-    'nav.legacySite': 'Legacy Quran.com'
+    'nav.legacySite': 'Legacy Quran.com',
+
+    'login.message': 'Sign in to Quran.com to store all your bookmarks, notes and activities.'
   }
 };

src/locale/ur.js

@@ -68,6 +68,8 @@ export default {
     'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
     'nav.mobile': 'موبائل',
     'nav.navigate': 'تشریف لے جائیں',
-    'nav.legacySite': 'پرانی سائٹ'
+    'nav.legacySite': 'پرانی سائٹ',
+
+    'login.message': 'Quran.com کرنے کیلئے سائن ان سب کو اپنے بک مارکس، نوٹوں اور سرگرمیوں کو ذخیرہ کرنے.'
   }
 };

src/redux/actions/auth.js

@@ -5,6 +5,7 @@ import {
   FACEBOOK_SUCCESS,
   FACEBOOK_FAILURE,
   LOGOUT_SUCCESS,
+  SAVE,
   LOAD,
   LOAD_SUCCESS,
   LOAD_FAILURE
@@ -17,17 +18,21 @@ export function isLoaded(globalState) {
 export function load() {
   return {
     types: [LOAD, LOAD_SUCCESS, LOAD_FAILURE],
-    promise: client => client.get('/onequran/api/v1/auth/current')
+    promise: client => client.get('/onequran/auth/validate_token')
   };
 }
 
 export function facebook() {
   return {
     types: [FACEBOOK, FACEBOOK_SUCCESS, FACEBOOK_FAILURE],
-    promise: client => client.get('/onequran/auth/facebook/callback')
   };
 }
 
+export const save = data => ({
+  type: SAVE,
+  data
+});
+
 export function logout() {
   return {
     type: LOGOUT_SUCCESS

src/redux/actions/bookmarks.js

@@ -19,14 +19,14 @@ export function load() {
   return {
     types: [LOAD, LOAD_SUCCESS, LOAD_FAILURE],
     schema: [bookmarksSchema],
-    promise: client => client.get('/onequran/api/v1/bookmarks')
+    promise: client => client.get('/onequran/api/v1/bookmarks.json')
   };
 }
 
 export function addBookmark(ayahKey) {
   return {
     types: [ADD_BOOKMARK, ADD_BOOKMARK_SUCCESS, ADD_BOOKMARK_FAILURE],
-    promise: client => client.post('/onequran/api/v1/bookmarks', {
+    promise: client => client.post('/onequran/api/v1/bookmarks.json', {
       data: {
         bookmark: { ayahKey }
       }
@@ -38,7 +38,7 @@ export function addBookmark(ayahKey) {
 export function removeBookmark(ayahKey) {
   return {
     types: [REMOVE_BOOKMARK, REMOVE_BOOKMARK_SUCCESS, REMOVE_BOOKMARK_FAILURE],
-    promise: client => client.del(`/onequran/api/v1/bookmarks/${ayahKey}`),
+    promise: client => client.del(`/onequran/api/v1/bookmarks/${ayahKey}.json`),
     ayahKey
   };
 }

src/redux/constants/auth.js

@@ -2,6 +2,7 @@ export const FACEBOOK = '@@quran/auth/FACEBOOK';
 export const FACEBOOK_SUCCESS = '@@quran/auth/FACEBOOK_SUCCESS';
 export const FACEBOOK_FAILURE = '@@quran/auth/FACEBOOK_FAILURE';
 export const LOGOUT_SUCCESS = '@@quran/auth/LOGOUT_SUCCESS';
+export const SAVE = '@@quran/auth/SAVE';
 export const LOAD = '@@quran/auth/LOAD';
 export const LOAD_SUCCESS = '@@quran/auth/LOAD_SUCCESS';
 export const LOAD_FAILURE = '@@quran/auth/LOAD_FAILURE';

src/redux/modules/auth.js

@@ -5,7 +5,8 @@ import {
   FACEBOOK_FAILURE,
   LOGOUT_SUCCESS,
   LOAD_SUCCESS,
-  LOAD_FAILURE
+  LOAD_FAILURE,
+  SAVE
 } from 'redux/constants/auth';
 
 const initialState = {
@@ -14,6 +15,22 @@ const initialState = {
 
 export default function reducer(state = initialState, action = {}) {
   switch (action.type) {
+    case SAVE: {
+      cookie.save('auth', {
+        client: action.data.client_id,
+        expiry: action.data.expiry,
+        uid: action.data.uid,
+        'access-token': action.data.auth_token,
+        'token-type': 'Bearer'
+      });
+
+      return {
+        ...state,
+        loading: false,
+        loaded: true,
+        user: action.data
+      };
+    }
     case LOAD_SUCCESS:
       return {
         ...state,

src/styles/main.scss

@@ -28,6 +28,10 @@ html,body{
   }
 }
 
+.min-container{
+  min-height: 80vh;
+}
+
 .highlight {
   background-color: #F5FBF7;
 }