Adding md5 hashing for all usernames

This commit is contained in:
James Barnsley
2018-01-23 11:34:03 +13:00
parent 3a23a2b3ef
commit cdf8331e30
7 changed files with 65 additions and 47 deletions

View File

@ -51,6 +51,9 @@ export default class DropdownField extends React.Component{
if (this.props.no_status_icon){
className += ' no-status-icon';
}
if (this.props.button){
className += ' buttonify';
}
var current_value = this.props.options[0].value
if (this.props.value){
current_value = this.props.value;
@ -67,7 +70,7 @@ export default class DropdownField extends React.Component{
return (
<div className={className} data-key={this.props.name.replace(' ','_').toLowerCase()}>
<div className="label" onClick={ () => this.handleToggle() }>
<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={ () => this.handleToggle() }>
{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp; </span> : null}
<span className="text">{ this.props.name }</span>
</div>

View File

@ -802,4 +802,20 @@ export let getIndexedRecords = function(index, uris){
**/
export let titleCase = function(string){
return string.charAt(0).toUpperCase() + string.slice(1)
}
}
/**
* Hash a string
* Included from http://coursesweb.net/javascript/md5-hash-string_cs
*
* @param string
* @return string
**/
export let hash = function md5(string){
return string;
}

View File

@ -1,10 +1,11 @@
import ReactGA from 'react-ga'
import ReactGA from 'react-ga';
import md5 from 'md5';
var helpers = require('./../../helpers')
var spotifyActions = require('./actions')
var uiActions = require('../ui/actions')
var pusherActions = require('../pusher/actions')
var helpers = require('./../../helpers');
var spotifyActions = require('./actions');
var uiActions = require('../ui/actions');
var pusherActions = require('../pusher/actions');
const SpotifyMiddleware = (function(){
@ -17,15 +18,12 @@ const SpotifyMiddleware = (function(){
switch(action.type){
case 'SPOTIFY_CONNECTED':
var label = null
var hashed_username = null
if (store.getState().spotify.me){
if (store.getState().core.anonymise_analytics){
label = "anonymised_"+store.getState().pusher.client_id;
} else {
label = store.getState().spotify.me.id;
}
hashed_username = md5(store.getState().spotify.me.id);
ReactGA.set({userId: hashed_username});
}
ReactGA.event({ category: 'Spotify', action: 'Connected', label: label })
ReactGA.event({category: 'Spotify', action: 'Connected', label: hashed_username})
// TODO: remove this so we don't tap out our API limits before we even get started
// Perhaps fire this on demand? Context menu, playlists loading or AddToPlaylistModal
@ -37,7 +35,7 @@ const SpotifyMiddleware = (function(){
break
case 'SPOTIFY_AUTHORIZATION_GRANTED':
ReactGA.event({ category: 'Spotify', action: 'Authorization granted'});
ReactGA.event({category: 'Spotify', action: 'Authorization granted'});
// Flush out the previous user's library
store.dispatch(spotifyActions.flushLibrary());
@ -46,15 +44,12 @@ const SpotifyMiddleware = (function(){
break;
case 'SPOTIFY_AUTHORIZATION_REVOKED':
var label = null
var hashed_username = null
if (store.getState().spotify.me){
if (store.getState().core.anonymise_analytics){
label = "anonymised_"+store.getState().pusher.client_id;
} else {
label = store.getState().spotify.me.id;
}
hashed_username = md5(store.getState().spotify.me);
ReactGA.set({userId: hashed_username});
}
ReactGA.event({ category: 'Spotify', action: 'Authorization revoked', label: label})
ReactGA.event({ category: 'Spotify', action: 'Authorization revoked', label: hashed_username})
next(action)
// Now dispatch a getMe to get the backend-provided user
@ -66,15 +61,12 @@ const SpotifyMiddleware = (function(){
break;
case 'SPOTIFY_IMPORT_AUTHORIZATION':
var label = null;
if (action.me && action.me.id){
if (store.getState().core.anonymise_analytics){
label = "anonymised_"+store.getState().pusher.client_id;
} else {
label = action.me.id;
}
var hashed_username = null
if (store.getState().spotify.me){
hashed_username = md5(store.getState().spotify.me);
ReactGA.set({userId: hashed_username});
}
ReactGA.event({ category: 'Spotify', action: 'Authorization imported', label: label });
ReactGA.event({category: 'Spotify', action: 'Authorization imported', label: hashed_username});
// Flush out the previous user's library
store.dispatch(spotifyActions.flushLibrary());
@ -435,14 +427,9 @@ const SpotifyMiddleware = (function(){
store.dispatch(pusherActions.setUsername(name));
}
var label = null;
if (store.getState().core.anonymise_analytics){
label = "anonymised_"+store.getState().pusher.client_id;
} else {
ReactGA.set({userId: action.data.id});
label = action.data.id;
}
ReactGA.event({category: 'Spotify', action: 'Authorization verified', label: label});
var hashed_username = md5(action.data.id);
ReactGA.set({userId: hashed_username});
ReactGA.event({category: 'Spotify', action: 'Authorization verified', label: hashed_username});
store.dispatch({
type: 'USERS_LOADED',

View File

@ -378,11 +378,12 @@ class Discover extends React.Component{
onChange={value => this.setTunability(tunability.name, value)}
/>
</div>
<FontAwesome name="close" onClick={e => this.toggleTunability(tunability.name)} />
</div>
);
})
}
<DropdownField icon="plus" name="Add" options={addable_tunabilities} no_status_icon handleChange={val => {this.toggleTunability(val)}} />
<DropdownField icon="plus" name="Add" options={addable_tunabilities} no_status_icon button="alternative" handleChange={val => {this.toggleTunability(val)}} />
</div>
);
}
@ -486,7 +487,9 @@ class Discover extends React.Component{
</h2>
{this.renderSeeds()}
{this.renderTunabilities()}
<span className="button primary" onClick={e => this.getRecommendations()}>Apply</span>
<div className="actions">
<span className="button primary" onClick={e => this.getRecommendations()}>Apply</span>
</div>
</div>
</div>

View File

@ -6,9 +6,9 @@
position: relative;
display: inline-block;
.label {
.label:not(.button) {
@include animate();
padding: 14px 10px;
padding: 14px 10px;
cursor: pointer;
.notouch &:hover {
@ -17,7 +17,7 @@
}
&.expanded {
.label {
.label:not(.button) {
color: $blue;
}
.options {

View File

@ -296,6 +296,10 @@ input[type="submit"] {
&.range {
position: relative;
.input-range {
height: auto;
}
.label {
position: absolute;
top: 10px;
@ -307,13 +311,14 @@ input[type="submit"] {
.input-range__track,
.input-range__slider-container {
transition: none;
height: 30px;
height: 36px;
border-radius: 3px;
cursor: col-resize;
}
.input-range__track--background {
background: rgba(134, 201, 232, 0.5);
margin: 0;
background: rgba(100,100,100,0.5);
}
.input-range__track--active {
@ -329,7 +334,7 @@ input[type="submit"] {
top: 0;
height: 100%;
width: 20px;
margin: -30px 0 0 0;
margin: -36px 0 0 0;
border-radius: 3px;
}

View File

@ -33,7 +33,7 @@
.seeds,
.tunabilities {
padding-top: 40px;
padding-top: 20px;
h3 {
padding-bottom: 6px;
@ -120,6 +120,10 @@
}
}
}
.actions {
padding-top: 30px;
}
section {
.grid {