Update user w/ plex token and URL

client/src/actions/index.js

@@ -7,8 +7,12 @@ export const fetchUser = () => async dispatch => {
   dispatch({type: FETCH_USER, payload: res.data});
 };
 
-export const fetchPlexToken = (username, password) => async dispatch => {
-  const params = {username, password};
+export const fetchPlexToken = (
+  username,
+  password,
+  plexUrl,
+) => async dispatch => {
+  const params = {username, password, plexUrl};
   const token = await axios.get('/plex/auth', {params});
   dispatch({type: FETCH_PLEX_TOKEN, payload: token});
 };

client/src/components/App.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {BrowserRouter, Route} from 'react-router-dom';
 import {connect} from 'react-redux';
-import axios from 'axios';
 import * as actions from '../actions';
 
 import Header from './Header';
@@ -23,7 +22,7 @@ class App extends Component {
               <Header />
               <Route exact path="/" component={Hero} />
 
-              <Route path="/create-account" component={CreateAccount} />
+              <Route path="/plex-token" component={CreateAccount} />
               <Route path="/form" component={PlexForm} />
             </div>
           </BrowserRouter>

client/src/components/CreateAccount.js

@@ -9,7 +9,7 @@ import Modal from './Modal';
 import styles from './css';
 
 class CreateAccount extends React.Component {
-  state = {email: '', password: '', section_data: ''};
+  state = {email: '', password: '', plexUrl: ''};
 
   onFormSubmit = event => {
     event.preventDefault();
@@ -17,7 +17,8 @@ class CreateAccount extends React.Component {
   };
 
   getPlexToken = async params => {
-    const res = await axios.get('/plex/auth', {params});
+    const res = await axios.get('/api/plex/token', {params});
+    console.log(res);
     return res;
   };
 
@@ -29,79 +30,91 @@ class CreateAccount extends React.Component {
 
   render() {
     const {classes} = this.props;
-    return (
-      <React.Fragment>
-        <CssBaseline />
-        <div className={classes.heroUnit}>
-          <div className={classes.heroContentSmall}>
-            <div className="section center-align">
-              <h3 className={classes.shrinkTopMargin}>Fetch Plex Token</h3>
-              <div className="center">
-                <Modal />
+    if (!this.props.auth) {
+      return (
+        <div>
+          <div>
+            <h2>You need to be logged in to do that.</h2>
+          </div>
+        </div>
+      );
+    } else if (this.props.auth) {
+      return (
+        <React.Fragment>
+          <CssBaseline />
+          <div className={classes.heroUnit}>
+            <div className={classes.heroContentSmall}>
+              <div className="section center-align">
+                <h3 className={classes.shrinkTopMargin}>Fetch Plex Token</h3>
+                <div className="center">
+                  <Modal />
+                </div>
               </div>
-            </div>
-            <div className="section center-align">
-              <div className="row">
-                <form onSubmit={this.onFormSubmit} className="col s12">
-                  <div className="row no-bottom-margin">
-                    <div className="input-field col m8 offset-m2 s12">
-                      <p>Plex Email</p>
-                      <input
-                        id="email"
-                        type="text"
-                        className="validate center-align"
-                        value={this.state.email}
-                        onChange={e => this.setState({email: e.target.value})}
-                      />
-                    </div>
-                  </div>
-                  <div className="row no-bottom-margin">
-                    <div className="input-field col m8 offset-m2 s12">
-                      <p>Plex Server URL</p>
-                      <input
-                        id="email"
-                        type="text"
-                        className="validate center-align"
-                        value={this.state.email}
-                        onChange={e => this.setState({email: e.target.value})}
-                      />
-                    </div>
-                  </div>
-                  <div className="row no-bottom-margin">
-                    <div className="input-field col m8 offset-m2 s12">
-                      <p>Plex Password</p>
-                      <input
-                        id="password"
-                        type="password"
-                        className="validate center-align"
-                        value={this.state.password}
-                        onChange={e =>
-                          this.setState({password: e.target.value})
-                        }
-                      />
-                    </div>
-                  </div>
-                  <div className="row">
-                    <div className="col s12">
-                      <div className="center-align">
-                        <button
-                          className="btn-large waves-effect waves-light center-align"
-                          type="submit"
-                          name="action"
-                        >
-                          Submit
-                          <i className="material-icons right">send</i>
-                        </button>
+              <div className="section center-align">
+                <div className="row">
+                  <form onSubmit={this.onFormSubmit} className="col s12">
+                    <div className="row no-bottom-margin">
+                      <div className="input-field col m8 offset-m2 s12">
+                        <p>Plex Email</p>
+                        <input
+                          id="email"
+                          type="text"
+                          className="validate center-align"
+                          value={this.state.email}
+                          onChange={e => this.setState({email: e.target.value})}
+                        />
                       </div>
                     </div>
-                  </div>
-                </form>
+                    <div className="row no-bottom-margin">
+                      <div className="input-field col m8 offset-m2 s12">
+                        <p>Plex Server URL</p>
+                        <input
+                          id="plexUrl"
+                          type="text"
+                          className="validate center-align"
+                          value={this.state.plexUrl}
+                          onChange={e =>
+                            this.setState({plexUrl: e.target.value})
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div className="row no-bottom-margin">
+                      <div className="input-field col m8 offset-m2 s12">
+                        <p>Plex Password</p>
+                        <input
+                          id="password"
+                          type="password"
+                          className="validate center-align"
+                          value={this.state.password}
+                          onChange={e =>
+                            this.setState({password: e.target.value})
+                          }
+                        />
+                      </div>
+                    </div>
+                    <div className="row">
+                      <div className="col s12">
+                        <div className="center-align">
+                          <button
+                            className="btn-large waves-effect waves-light center-align"
+                            type="submit"
+                            name="action"
+                          >
+                            Submit
+                            <i className="material-icons right">send</i>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </React.Fragment>
-    );
+        </React.Fragment>
+      );
+    }
   }
 }
 

client/src/components/Hero.js

@@ -37,10 +37,10 @@ class Hero extends Component {
                 </Typography>
                 <div className="center-align">
                   <Link
-                    to="/app/plex"
+                    to="/plex-token"
                     className="waves-effect waves-light btn-large"
                   >
-                    <i className="material-icons left">live_tv</i>Sign In
+                    <i className="material-icons left">live_tv</i>Get Started
                   </Link>
                 </div>
               </div>

client/src/reducers/authReducer.js

@@ -1,6 +1,6 @@
 import {FETCH_USER} from '../actions/types';
 
-export default function(state = {}, action) {
+export default function(state = false, action) {
   switch (action.type) {
     case FETCH_USER:
       return action.payload || false;

client/src/reducers/plexReducer.js

@@ -0,0 +1,10 @@
+import {FETCH_PLEX_TOKEN} from '../actions/types';
+
+export default function(state = '', action) {
+  switch (action.type) {
+    case FETCH_PLEX_TOKEN:
+      return action.payload || false;
+    default:
+      return state;
+  }
+}

config/plex.js

@@ -1,6 +1,6 @@
 const plexConfig = {
   ip: 'http://192.168.0.44',
-  plexServerUrl: 'https://plex.mjrflix.com',
+  plexUrl: 'https://plex.mjrflix.com',
   plexApiUrl: 'https://plex.tv/api',
   token: process.env.PLEX_API_TOKEN,
 };

server/controllers/plex.controller.js

@@ -3,7 +3,7 @@ import plexService from '../services/plex';
 
 const router = Router();
 
-router.get('/auth', plexService.getAuthToken);
+router.get('/token', plexService.getAuthToken);
 
 router.get('/users', plexService.getUsers);
 

server/db/migrations/20190224043920-create-user.js

@@ -20,7 +20,7 @@ module.exports = {
         type: Sequelize.STRING,
         unique: true,
       },
-      plexServerUrl: {
+      plexUrl: {
         type: Sequelize.STRING,
       },
       plexToken: {

server/db/models/user.js

@@ -6,7 +6,7 @@ module.exports = (sequelize, DataTypes) => {
       lastName: DataTypes.STRING,
       googleId: DataTypes.STRING,
       email: {type: DataTypes.STRING, unique: true},
-      plexServerUrl: DataTypes.STRING,
+      plexUrl: DataTypes.STRING,
       plexToken: DataTypes.STRING,
     },
     {},

server/services/plex/auth.js

@@ -18,9 +18,13 @@ const encryptUserCreds = (username, password) => {
 };
 
 const fetchToken = async (username, password) => {
-  const res = await request.post(urlParams(username, password));
-  const token = res.match(rxAuthToken)[1];
-  return token;
+  try {
+    const res = await request.post(urlParams(username, password));
+    const token = res.match(rxAuthToken)[1];
+    return token;
+  } catch (error) {
+    return error.message;
+  }
 };
 
 export default fetchToken;

server/services/plex/index.js

@@ -1,16 +1,25 @@
 import plexApi from './plexApi';
 import importData from './importData';
 import auth from './auth';
+import models from '../../db/models';
 import helpers from '../helpers';
 
 const getAuthToken = async (req, res) => {
-  const {username} = req.query;
-  const {password} = req.query;
-  console.log('Mikes stuff', username, password);
-  const token = await auth(username, password);
-  // req.user.plexToken = token;
-  // const user = await req.user.save();
-  return res.json(token);
+  try {
+    const {email, password, plexUrl} = req.query;
+    const plexToken = await auth(email, password);
+    const [rowsUpdate, updatedUser] = await models.User.update(
+      {plexUrl, plexToken},
+      {returning: true, where: {googleId: req.user.googleId}},
+    );
+    console.log('updatedUser', updatedUser);
+    console.log('token', plexToken);
+
+    return res.json(updatedUser);
+  } catch (error) {
+    console.log(error.message);
+    return res.status(201).json(error.message);
+  }
 };
 
 const getUsers = (req, res) => {

server/services/plex/plexApi.js

@@ -13,7 +13,7 @@ const getUsersUrlParams = function(token) {
 
 const getSectionsUrlParams = function() {
   return {
-    host: config.plex.plexServerUrl,
+    host: config.plex.plexUrl,
     path: '/library/sections',
     queryParams: {
       'X-Plex-Token': config.plex.token,
@@ -23,7 +23,7 @@ const getSectionsUrlParams = function() {
 
 const mostWatchedUrlParams = function(accountId, sectionKey, limit = 10) {
   return {
-    host: config.plex.plexServerUrl,
+    host: config.plex.plexUrl,
     path: '/library/all/top',
     queryParams: {
       ...(accountId && {accountId}),
@@ -36,7 +36,7 @@ const mostWatchedUrlParams = function(accountId, sectionKey, limit = 10) {
 
 const getLibraryDataBySectionUrlParams = function(sectionId) {
   return {
-    host: config.plex.plexServerUrl,
+    host: config.plex.plexUrl,
     path: `/library/sections/${sectionId}/all`,
     queryParams: {
       'X-Plex-Token': config.plex.token,