mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2026-03-10 21:25:04 +00:00
Compare commits
1 Commits
frontEnd
...
write_micr
| Author | SHA1 | Date | |
|---|---|---|---|
|
971d58b9be |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -63,6 +63,3 @@ node_modules/
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# The keyfile for google services authentication
|
||||
twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
|
||||
@@ -27,4 +27,3 @@
|
||||
"rules": "storage.rules"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
/* eslint-disable prefer-arrow-callback */
|
||||
/* eslint-disable promise/always-return */
|
||||
const admin = require('firebase-admin');
|
||||
|
||||
exports.putPost = (req, res) => {
|
||||
const newPost = {
|
||||
body: req.body.body,
|
||||
userHandle: req.user.handle,
|
||||
userImage: req.body.userImage,
|
||||
userID: req.user.uid,
|
||||
microBlogTitle: req.body.microBlogTitle,
|
||||
createdAt: new Date().toISOString(),
|
||||
likeCount: 0,
|
||||
commentCount: 0,
|
||||
microBlogTopics: req.body.microBlogTopics
|
||||
};
|
||||
|
||||
admin.firestore().collection('posts').add(newPost)
|
||||
.then((doc) => {
|
||||
const resPost = newPost;
|
||||
resPost.postId = doc.id;
|
||||
return res.status(200).json(resPost);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: 'something went wrong'});
|
||||
});
|
||||
};
|
||||
|
||||
exports.getallPostsforUser = (req, res) => {
|
||||
var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
|
||||
post_query.get()
|
||||
.then(function(myPosts) {
|
||||
let posts = [];
|
||||
myPosts.forEach(function(doc) {
|
||||
posts.push(doc.data());
|
||||
});
|
||||
return res.status(200).json(posts);
|
||||
})
|
||||
.then(function() {
|
||||
res.status(200).send("Successfully retrieved all user's posts from database.");
|
||||
return;
|
||||
})
|
||||
.catch(function(err) {
|
||||
res.status(500).send("Failed to retrieve user's posts from database.", err);
|
||||
});
|
||||
};
|
||||
|
||||
exports.getallPosts = (req, res) => {
|
||||
var post_query = admin.firestore().collection("posts");
|
||||
post_query.get()
|
||||
.then(function(allPosts) {
|
||||
let posts = [];
|
||||
allPosts.forEach(function(doc) {
|
||||
posts.push(doc.data());
|
||||
});
|
||||
return res.status(200).json(posts);
|
||||
})
|
||||
.then(function() {
|
||||
res.status(200).send("Successfully retrieved every post from database.");
|
||||
return;
|
||||
})
|
||||
.catch(function(err) {
|
||||
res.status(500).send("Failed to retrieve posts from database.", err);
|
||||
});
|
||||
};
|
||||
|
||||
exports.getFilteredPosts = (req, res) => {
|
||||
admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
const { admin, db } = require("../util/admin");
|
||||
exports.putTopic = (req, res) => {
|
||||
const newTopic = {
|
||||
topic: req.body.topic
|
||||
};
|
||||
|
||||
admin
|
||||
.firestore()
|
||||
.collection("topics")
|
||||
.add(newTopic)
|
||||
.then(doc => {
|
||||
const resTopic = newTopic;
|
||||
return res.status(200).json(resTopic);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: "something is wrong" });
|
||||
});
|
||||
};
|
||||
|
||||
exports.getAllTopics = (req, res) => {
|
||||
admin
|
||||
.firestore()
|
||||
.collection("topics")
|
||||
.get()
|
||||
.then(data => {
|
||||
let topics = [];
|
||||
data.forEach(function(doc) {
|
||||
topics.push({
|
||||
topic: doc.data().topic,
|
||||
id: doc.id
|
||||
});
|
||||
});
|
||||
return res.status(200).json(topics);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: "Failed to fetch all topics." });
|
||||
});
|
||||
};
|
||||
|
||||
exports.deleteTopic = (req, res) => {
|
||||
const topic = db.doc(`/topics/${req.params.topicId}`);
|
||||
topic
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (!doc.exists) {
|
||||
return res.status(404).json({ error: "Topic not found" });
|
||||
} else {
|
||||
return topic.delete();
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
return res.json({ message: "Topic successfully deleted!" });
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: "Failed to delete topic." });
|
||||
});
|
||||
};
|
||||
@@ -1,365 +0,0 @@
|
||||
/* eslint-disable promise/catch-or-return */
|
||||
const { admin, db } = require("../util/admin");
|
||||
const config = require("../util/config");
|
||||
const { validateUpdateProfileInfo } = require("../util/validator");
|
||||
|
||||
const firebase = require("firebase");
|
||||
firebase.initializeApp(config);
|
||||
|
||||
exports.signup = (req, res) => {
|
||||
const newUser = {
|
||||
email: req.body.email,
|
||||
handle: req.body.handle,
|
||||
password: req.body.password,
|
||||
confirmPassword: req.body.confirmPassword,
|
||||
createdAt: new Date().toISOString()
|
||||
};
|
||||
|
||||
let errors = {};
|
||||
|
||||
const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
// Email check
|
||||
if (newUser.email.trim() === "") {
|
||||
errors.email = "Email must not be blank.";
|
||||
} else if (!newUser.email.match(emailRegEx)) {
|
||||
errors.email = "Email is invalid.";
|
||||
}
|
||||
|
||||
// handle check
|
||||
if (newUser.handle.trim() === "") {
|
||||
errors.handle = "Username must not be blank.";
|
||||
} else if (newUser.handle.length < 4 || newUser.handle.length > 30) {
|
||||
errors.handle = "Username must be between 4-30 characters long.";
|
||||
}
|
||||
|
||||
// Password check
|
||||
if (newUser.password.trim() === "") {
|
||||
errors.password = "Password must not be blank.";
|
||||
} else if (newUser.password.length < 8 || newUser.password.length > 20) {
|
||||
errors.password = "Password must be between 8-20 characters long.";
|
||||
}
|
||||
|
||||
// Confirm password check
|
||||
if (newUser.confirmPassword !== newUser.password) {
|
||||
errors.confirmPassword = "Passwords must match.";
|
||||
}
|
||||
|
||||
// Overall check
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return res.status(400).json(errors);
|
||||
}
|
||||
|
||||
let token, userId;
|
||||
|
||||
db.doc(`/users/${newUser.handle}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (doc.exists) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ handle: "This username is already taken." });
|
||||
}
|
||||
return firebase
|
||||
.auth()
|
||||
.createUserWithEmailAndPassword(newUser.email, newUser.password);
|
||||
})
|
||||
.then(data => {
|
||||
userId = data.user.uid;
|
||||
return data.user.getIdToken();
|
||||
})
|
||||
.then(idToken => {
|
||||
token = idToken;
|
||||
const defaultImageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/no-img.png?alt=media`;
|
||||
const userCred = {
|
||||
email: newUser.email,
|
||||
handle: newUser.handle,
|
||||
createdAt: newUser.createdAt,
|
||||
userId,
|
||||
followedTopics: [],
|
||||
imageUrl: defaultImageUrl
|
||||
};
|
||||
return db.doc(`/users/${newUser.handle}`).set(userCred);
|
||||
})
|
||||
.then(() => {
|
||||
return res.status(201).json({ token });
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
if (err.code === "auth/email-already-in-use") {
|
||||
return res.status(500).json({ email: "This email is already taken." });
|
||||
}
|
||||
return res.status(500).json({ error: err.code });
|
||||
});
|
||||
};
|
||||
|
||||
exports.login = (req, res) => {
|
||||
const user = {
|
||||
email: req.body.email,
|
||||
password: req.body.password
|
||||
};
|
||||
|
||||
// Auth validation
|
||||
let errors = {};
|
||||
|
||||
const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
|
||||
// Checks if email/username field is empty
|
||||
if (user.email.trim() === "") {
|
||||
errors.email = "Email must not be blank.";
|
||||
}
|
||||
|
||||
// Checks if password field is empty
|
||||
if (user.password.trim() === "") {
|
||||
errors.password = "Password must not be blank.";
|
||||
}
|
||||
|
||||
// Checks if any of the above two errors were found
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return res.status(400).json(errors);
|
||||
}
|
||||
|
||||
// Email/username field is username since it's not in email format
|
||||
if (!user.email.match(emailRegEx)) {
|
||||
var userDoc = db.collection("users").doc(`${user.email}`);
|
||||
userDoc
|
||||
.get()
|
||||
.then(function(doc) {
|
||||
if (doc.exists) {
|
||||
user.email = doc.data().email;
|
||||
} else {
|
||||
return res
|
||||
.status(403)
|
||||
.json({ general: "Invalid credentials. Please try again." });
|
||||
}
|
||||
return;
|
||||
})
|
||||
.then(function() {
|
||||
firebase
|
||||
.auth()
|
||||
.signInWithEmailAndPassword(user.email, user.password)
|
||||
.then(data => {
|
||||
return data.user.getIdToken();
|
||||
})
|
||||
.then(token => {
|
||||
return res.status(200).json({ token });
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
if (
|
||||
err.code === "auth/user-not-found" ||
|
||||
err.code === "auth/invalid-email" ||
|
||||
err.code === "auth/wrong-password"
|
||||
) {
|
||||
return res
|
||||
.status(403)
|
||||
.json({ general: "Invalid credentials. Please try again." });
|
||||
}
|
||||
return res.status(500).json({ error: err.code });
|
||||
});
|
||||
return;
|
||||
})
|
||||
.catch(function(err) {
|
||||
if (!doc.exists) {
|
||||
return res
|
||||
.status(403)
|
||||
.json({ general: "Invalid credentials. Please try again." });
|
||||
}
|
||||
return res.status(500).send(err);
|
||||
});
|
||||
}
|
||||
// Email/username field is username
|
||||
else {
|
||||
firebase
|
||||
.auth()
|
||||
.signInWithEmailAndPassword(user.email, user.password)
|
||||
.then(data => {
|
||||
return data.user.getIdToken();
|
||||
})
|
||||
.then(token => {
|
||||
return res.status(200).json({ token });
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
if (
|
||||
err.code === "auth/user-not-found" ||
|
||||
err.code === "auth/invalid-email" ||
|
||||
err.code === "auth/wrong-password"
|
||||
) {
|
||||
return res
|
||||
.status(403)
|
||||
.json({ general: "Invalid credentials. Please try again." });
|
||||
}
|
||||
return res.status(500).json({ error: err.code });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//Deletes user account and all associated data
|
||||
exports.deleteUser = (req, res) => {
|
||||
// Get the profile image filename
|
||||
// `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`
|
||||
let imageFileName;
|
||||
req.userData.imageUrl ?
|
||||
imageFileName = req.userData.imageUrl.split('/o/')[1].split('?alt=')[0] :
|
||||
imageFileName = 'no-img.png'
|
||||
|
||||
const userId = req.userData.userId;
|
||||
let errors = {};
|
||||
|
||||
function thenFunction(data) {
|
||||
console.log(`${data} data for ${req.userData.handle} has been deleted.`);
|
||||
}
|
||||
|
||||
function catchFunction(data, err) {
|
||||
console.error(err);
|
||||
errors[data] = err;
|
||||
}
|
||||
|
||||
// Deletes user from authentication
|
||||
let auth = admin.auth().deleteUser(userId);
|
||||
|
||||
// Deletes database data
|
||||
let data = db.collection("users").doc(`${req.user.handle}`).delete();
|
||||
|
||||
// Deletes any custom profile image
|
||||
let image;
|
||||
if (imageFileName !== 'no-img.png') {
|
||||
image = admin.storage().bucket().file(imageFileName).delete()
|
||||
} else {
|
||||
image = Promise.resolve();
|
||||
}
|
||||
|
||||
// Deletes all users posts
|
||||
let posts = db.collection("posts")
|
||||
.where("userHandle", "==", req.user.handle)
|
||||
.get()
|
||||
.then((query) => {
|
||||
query.forEach((snap) => {
|
||||
snap.ref.delete();
|
||||
});
|
||||
return;
|
||||
})
|
||||
|
||||
let promises = [
|
||||
auth
|
||||
.then(thenFunction('auth'))
|
||||
.catch((err) => catchFunction('auth', err)),
|
||||
data
|
||||
.then(thenFunction('data'))
|
||||
.catch((err) => catchFunction('data', err)),
|
||||
image
|
||||
.then(thenFunction('image'))
|
||||
.catch((err) => catchFunction('image', err)),
|
||||
posts
|
||||
.then(thenFunction('posts'))
|
||||
.catch((err) => catchFunction('image', err))
|
||||
];
|
||||
|
||||
|
||||
// Wait for all promises to resolve
|
||||
let waitPromise = Promise.all(promises);
|
||||
|
||||
waitPromise.then(() => {
|
||||
if (Object.keys(errors) > 0) {
|
||||
return res.status(500).json(errors);
|
||||
} else {
|
||||
return res.status(200).json({message: `All data for ${req.userData.handle} has been deleted.`});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
return res.status(500).json({error: err});
|
||||
})
|
||||
};
|
||||
|
||||
// Returns all data in the database for the user who is currently signed in
|
||||
exports.getProfileInfo = (req, res) => {
|
||||
db.collection("users")
|
||||
.doc(req.user.handle)
|
||||
.get()
|
||||
.then(data => {
|
||||
return res.status(200).json(data.data());
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json(err);
|
||||
});
|
||||
};
|
||||
|
||||
// Updates the data in the database of the user who is currently logged in
|
||||
exports.updateProfileInfo = (req, res) => {
|
||||
// Data validation
|
||||
const { valid, errors, profileData } = validateUpdateProfileInfo(req);
|
||||
if (!valid) return res.status(400).json(errors);
|
||||
|
||||
// Update the database entry for this user
|
||||
db.collection("users")
|
||||
.doc(req.user.handle)
|
||||
.set(profileData, { merge: true })
|
||||
.then(() => {
|
||||
console.log(`${req.user.handle}'s profile info has been updated.`);
|
||||
return res.status(201).json({
|
||||
general: `${req.user.handle}'s profile info has been updated.`
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({
|
||||
error: "Error updating profile data"
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
exports.getUserDetails = (req, res) => {
|
||||
let userData = {};
|
||||
db.doc(`/users/${req.body.handle}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (doc.exists) {
|
||||
userData = doc.data();
|
||||
return res.status(200).json({ userData });
|
||||
} else {
|
||||
return res.status(400).json({ error: "User not found." });
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: err.code });
|
||||
});
|
||||
};
|
||||
|
||||
exports.getAuthenticatedUser = (req, res) => {
|
||||
let credentials = {};
|
||||
db.doc(`/users/${req.user.handle}`)
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (doc.exists) {
|
||||
credentials = doc.data();
|
||||
return res.status(200).json({ credentials });
|
||||
} else {
|
||||
return res.status(400).json({ error: "User not found." });
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: err.code });
|
||||
});
|
||||
};
|
||||
|
||||
exports.getUserHandles = (req, res) => {
|
||||
admin
|
||||
.firestore()
|
||||
.collection("users")
|
||||
.get()
|
||||
.then(data => {
|
||||
let users = [];
|
||||
data.forEach(function(doc) {
|
||||
users.push(doc.data().handle);
|
||||
});
|
||||
return res.status(200).json(users);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
return res.status(500).json({ error: "Failed to get all user handles." });
|
||||
});
|
||||
};
|
||||
@@ -1,74 +1,43 @@
|
||||
/* eslint-disable promise/always-return */
|
||||
const app = require("express")();
|
||||
const cors = require("cors");
|
||||
const { db } = require("./util/admin");
|
||||
const fbAuth = require("./util/fbAuth");
|
||||
const functions = require("firebase-functions");
|
||||
app.use(cors());
|
||||
const functions = require('firebase-functions');
|
||||
const admin = require('firebase-admin');
|
||||
const app = require('express')();
|
||||
admin.initializeApp();
|
||||
|
||||
/*------------------------------------------------------------------*
|
||||
* handlers/users.js *
|
||||
*------------------------------------------------------------------*/
|
||||
const {
|
||||
getAuthenticatedUser,
|
||||
getUserDetails,
|
||||
getProfileInfo,
|
||||
login,
|
||||
signup,
|
||||
deleteUser,
|
||||
updateProfileInfo,
|
||||
getUserHandles
|
||||
} = require("./handlers/users");
|
||||
const firebaseConfig = {
|
||||
apiKey: "AIzaSyCvsWetg4qFdsPGfJ3LCw_QaaYzoan7Q34",
|
||||
authDomain: "twistter-e4649.firebaseapp.com",
|
||||
databaseURL: "https://twistter-e4649.firebaseio.com",
|
||||
projectId: "twistter-e4649",
|
||||
storageBucket: "twistter-e4649.appspot.com",
|
||||
messagingSenderId: "20131817365",
|
||||
appId: "1:20131817365:web:633c95fb08b16d4526b89c"
|
||||
};
|
||||
const firebase = require('firebase');
|
||||
firebase.initializeApp(firebaseConfig);
|
||||
|
||||
// Adds a user to the database and registers them in firebase with
|
||||
// an email and password pair
|
||||
// Returns a token for the new user
|
||||
app.post("/signup", signup);
|
||||
|
||||
// Returns a token for the user that matches the provided username
|
||||
// and password
|
||||
app.post("/login", login);
|
||||
|
||||
//Deletes user account
|
||||
app.delete("/delete", fbAuth, deleteUser);
|
||||
|
||||
app.get("/getUser", fbAuth, getUserDetails);
|
||||
|
||||
// Returns all profile data of the currently logged in user
|
||||
app.get("/getProfileInfo", fbAuth, getProfileInfo);
|
||||
|
||||
// Updates the currently logged in user's profile information
|
||||
app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
|
||||
|
||||
app.get("/user", fbAuth, getAuthenticatedUser);
|
||||
|
||||
// get user handles with search phase
|
||||
app.get("/getUserHandles", fbAuth, getUserHandles);
|
||||
|
||||
/*------------------------------------------------------------------*
|
||||
* handlers/post.js *
|
||||
*------------------------------------------------------------------*/
|
||||
const { getallPostsforUser, getallPosts, putPost } = require("./handlers/post");
|
||||
|
||||
app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
|
||||
|
||||
app.get("/getallPosts", getallPosts);
|
||||
|
||||
// Adds one post to the database
|
||||
app.post("/putPost", fbAuth, putPost);
|
||||
|
||||
/*------------------------------------------------------------------*
|
||||
* handlers/topic.js *
|
||||
*------------------------------------------------------------------*/
|
||||
const { putTopic, getAllTopics, deleteTopic } = require("./handlers/topic");
|
||||
|
||||
// add topic to database
|
||||
app.post("/putTopic", fbAuth, putTopic);
|
||||
|
||||
// get all topics from database
|
||||
app.get("/getAllTopics", fbAuth, getAllTopics);
|
||||
|
||||
// delete a specific topic
|
||||
app.delete("/deleteTopic/:topicId", fbAuth, deleteTopic);
|
||||
app.get('/getUsers', (req, res) => {
|
||||
admin.firestore().collection('users').get().then(data => {
|
||||
let users = [];
|
||||
data.forEach(doc => {
|
||||
users.push(doc.data());
|
||||
}); return res.json(users);
|
||||
}).catch((err) => console.error(err));
|
||||
});
|
||||
|
||||
app.post('/postUser', (req, res) => {
|
||||
const newUser = {
|
||||
body: req.body.body
|
||||
};
|
||||
admin.firestore().collection('users').add(newUser).then((doc) => {
|
||||
res.json({
|
||||
message: 'Successfully added!'
|
||||
});
|
||||
}).catch((err) => {
|
||||
res.status(500).json({
|
||||
error: "Error in posting user!"
|
||||
});
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
exports.api = functions.https.onRequest(app);
|
||||
319
functions/package-lock.json
generated
319
functions/package-lock.json
generated
@@ -24,13 +24,13 @@
|
||||
}
|
||||
},
|
||||
"@firebase/app": {
|
||||
"version": "0.4.17",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.4.17.tgz",
|
||||
"integrity": "sha512-YkCe10/KHnfJ5Lx79SCQ4ZJRlpnwe8Yns6Ntf7kltXq1hCQCUrKEU3zaOTPY90SBx36hYm47IaqkKwT/kBOK3A==",
|
||||
"version": "0.4.16",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.4.16.tgz",
|
||||
"integrity": "sha512-4aa6ixQlV6xQxj4HbwFKrfYZnnKk8AtB/vEEuIaBCGQYBvV287OVNCozXd4CC4Q4I4Vtkzrc+kggahYFl8nDWQ==",
|
||||
"requires": {
|
||||
"@firebase/app-types": "0.4.3",
|
||||
"@firebase/logger": "0.1.25",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/logger": "0.1.24",
|
||||
"@firebase/util": "0.2.27",
|
||||
"dom-storage": "2.1.0",
|
||||
"tslib": "1.10.0",
|
||||
"xmlhttprequest": "1.8.0"
|
||||
@@ -55,30 +55,15 @@
|
||||
"integrity": "sha512-foQHhvyB0RR+mb/+wmHXd/VOU+D8fruFEW1k79Q9wzyTPpovMBa1Mcns5fwEWBhUfi8bmoEtaGB8RSAHnTFzTg=="
|
||||
},
|
||||
"@firebase/database": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.4.tgz",
|
||||
"integrity": "sha512-Hz1Bi3fzIcNNocE4EhvvwoEQGurG2BGssWD3/6a2bzty+K1e57SLea2Ied8QYNBUU1zt/4McHfa3Y71EQIyn/w==",
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.2.tgz",
|
||||
"integrity": "sha512-LnXKRE1AmjlS+iRF7j8vx+Ni8x85CmLP5u5Pw5rDKhKLn2eTR1tJKD937mUeeGEtDHwR1rrrkLYOqRR2cSG3hQ==",
|
||||
"requires": {
|
||||
"@firebase/database-types": "0.4.3",
|
||||
"@firebase/logger": "0.1.25",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/logger": "0.1.24",
|
||||
"@firebase/util": "0.2.27",
|
||||
"faye-websocket": "0.11.3",
|
||||
"tslib": "1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@firebase/logger": {
|
||||
"version": "0.1.25",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.25.tgz",
|
||||
"integrity": "sha512-/lRhuepVcCCnQ2jcO5Hr08SYdmZDTQU9fdPdzg+qXJ9k/QnIrD2RbswXQcL6mmae3uPpX7fFXQAoScJ9pzp50w=="
|
||||
},
|
||||
"@firebase/util": {
|
||||
"version": "0.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.28.tgz",
|
||||
"integrity": "sha512-ZQMAWtXj8y5kvB6izs0aTM/jG+WO8HpqhXA/EwD6LckJ+1P5LnAhaLZt1zR4HpuCE+jeP5I32Id5RJ/aifFs6A==",
|
||||
"requires": {
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@firebase/database-types": {
|
||||
@@ -90,13 +75,13 @@
|
||||
}
|
||||
},
|
||||
"@firebase/firestore": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.5.3.tgz",
|
||||
"integrity": "sha512-O/yAbXpitOA6g627cUl0/FHYlkTy1EiEKMKOlnlMOJF2fH+nLVZREXjsrCC7N2tIvTn7yYwfpZ4zpSNvrhwiTA==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.5.2.tgz",
|
||||
"integrity": "sha512-CPYLvkGZBKE47oQC9a0q13UMVRj3LvnSbB1nOerktE3CGRHKy44LxDumamN8Kj067hV/80mKK9FdbeUufwO/Rg==",
|
||||
"requires": {
|
||||
"@firebase/firestore-types": "1.5.0",
|
||||
"@firebase/logger": "0.1.25",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/logger": "0.1.24",
|
||||
"@firebase/util": "0.2.27",
|
||||
"@firebase/webchannel-wrapper": "0.2.26",
|
||||
"@grpc/proto-loader": "^0.5.0",
|
||||
"grpc": "1.23.3",
|
||||
@@ -109,9 +94,9 @@
|
||||
"integrity": "sha512-VhRHNbEbak+R2iK8e1ir2Lec7eaHMZpGTRy6LMtzATYthlkwNHF9tO8JU8l6d1/kYkI4+DWzX++i3HhTziHEWA=="
|
||||
},
|
||||
"@firebase/functions": {
|
||||
"version": "0.4.18",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.18.tgz",
|
||||
"integrity": "sha512-N/ijwpxJy26kOErYIi5QS8pQgMZEuEMF/zDaNmgqcoN3J8P52NhBnVQZnIl+U4W96nQfNiURhSwXEERHFyvSZQ==",
|
||||
"version": "0.4.17",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.4.17.tgz",
|
||||
"integrity": "sha512-heWMXrR3hgvQNe1JEZMUeY7a0QFLMVwVS+lzLq/lzk06bj22X9bJy7Yct+/P9P1ftnsCGLrhk3jAEuL78seoqg==",
|
||||
"requires": {
|
||||
"@firebase/functions-types": "0.3.8",
|
||||
"@firebase/messaging-types": "0.3.2",
|
||||
@@ -125,12 +110,12 @@
|
||||
"integrity": "sha512-9hajHxA4UWVCGFmoL8PBYHpamE3JTNjObieMmnvZw3cMRTP2EwipMpzZi+GPbMlA/9swF9yHCY/XFAEkwbvdgQ=="
|
||||
},
|
||||
"@firebase/installations": {
|
||||
"version": "0.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.2.7.tgz",
|
||||
"integrity": "sha512-67tzowHVwRBtEuB1HLMD+fCdoRyinOQlMKBes7UwrtZIVd0CPDUqAKxNqup5EypWZb7O2tqFtRzK7POajfSNMA==",
|
||||
"version": "0.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.2.6.tgz",
|
||||
"integrity": "sha512-hkuKmBtnsmqIfWxt9KyaN+cP574pfTcB81IG5tnmVcgP1xQ4hyQ9LRP0M7jDTGWMw272TInBzUuaM05xw9GMnA==",
|
||||
"requires": {
|
||||
"@firebase/installations-types": "0.1.2",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/util": "0.2.27",
|
||||
"idb": "3.0.2",
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
@@ -141,17 +126,17 @@
|
||||
"integrity": "sha512-fQaWIW8hyX1XUN7+FCSPjvM1agFjGidVuF4Sxi7aFwfyh5t+4fD2VpM4wCQbWmodnx4fZLvsuQd9mkxxU+lGYQ=="
|
||||
},
|
||||
"@firebase/logger": {
|
||||
"version": "0.1.25",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.25.tgz",
|
||||
"integrity": "sha512-/lRhuepVcCCnQ2jcO5Hr08SYdmZDTQU9fdPdzg+qXJ9k/QnIrD2RbswXQcL6mmae3uPpX7fFXQAoScJ9pzp50w=="
|
||||
"version": "0.1.24",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.24.tgz",
|
||||
"integrity": "sha512-wPwhWCepEjWiTIqeC9U+7Hcw4XwezKPdXmyXbYSPiWNDcVekNgMPkntwSK+/2ufJO/1nMwAL2n6fL12oQG/PpQ=="
|
||||
},
|
||||
"@firebase/messaging": {
|
||||
"version": "0.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.4.11.tgz",
|
||||
"integrity": "sha512-KYt479yio6ThkV7Pb9LRB1KPIBio+OR4RozwyoLC1ZSVQdTIrd/sVEuDSzYY88Wh/6Kg6ejdu2z6mfWG9l1ZaQ==",
|
||||
"version": "0.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.4.10.tgz",
|
||||
"integrity": "sha512-WqtSqlulV2ix4MZ3r1HwGAEj0DiEWtpNCSPh5wOXZsj8Kd01Q2QPTLUtUWmwXSV9WCQWnowfE2x8wjq5388ixw==",
|
||||
"requires": {
|
||||
"@firebase/messaging-types": "0.3.2",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/util": "0.2.27",
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
},
|
||||
@@ -161,14 +146,14 @@
|
||||
"integrity": "sha512-2qa2qNKqpalmtwaUV3+wQqfCm5myP/dViIBv+pXF8HinemIfO1IPQtr9pCNfsSYyus78qEhtfldnPWXxUH5v0w=="
|
||||
},
|
||||
"@firebase/performance": {
|
||||
"version": "0.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.2.19.tgz",
|
||||
"integrity": "sha512-dINWwR/XcSiSnFNNX7QWfec8bymiXk1Zp6mPyPN+R9ONMrpDbygQUy06oT/6r/xx9nHG4Za6KMUJag3sWNKqnQ==",
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.2.18.tgz",
|
||||
"integrity": "sha512-PcN+nTPaMGqODfwAXgwbaCvcxXH+YzvK6UpZzm0Bl9wmW28/oJipnUxF3cYbVGCiaLAaByIPVSIF22XhTOjUtA==",
|
||||
"requires": {
|
||||
"@firebase/installations": "0.2.7",
|
||||
"@firebase/logger": "0.1.25",
|
||||
"@firebase/installations": "0.2.6",
|
||||
"@firebase/logger": "0.1.24",
|
||||
"@firebase/performance-types": "0.0.3",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/util": "0.2.27",
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
},
|
||||
@@ -178,9 +163,9 @@
|
||||
"integrity": "sha512-RuC63nYJPJU65AsrNMc3fTRcRgHiyNcQLh9ufeKUT1mEsFgpxr167gMb+tpzNU4jsbvM6+c6nQAFdHpqcGkRlQ=="
|
||||
},
|
||||
"@firebase/polyfill": {
|
||||
"version": "0.3.22",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.22.tgz",
|
||||
"integrity": "sha512-PYbEqDHJhJJoF2Q5IB/oP0Tz6O2vSUPtODy9kUQibi+T0bK1gkTaySPwz8GAgHfIpFNENj1kK+7Xpf87R8bYbw==",
|
||||
"version": "0.3.21",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/polyfill/-/polyfill-0.3.21.tgz",
|
||||
"integrity": "sha512-2mqS3FQHMhCGyfMGRsaZEypHSBD8hVmp9ZBnZSkn8hq5sSOLiNTFSC0FsvNu5z99GNsPQJFTui8bxcZl5cHQbw==",
|
||||
"requires": {
|
||||
"core-js": "3.2.1",
|
||||
"promise-polyfill": "8.1.3",
|
||||
@@ -195,12 +180,12 @@
|
||||
}
|
||||
},
|
||||
"@firebase/storage": {
|
||||
"version": "0.3.12",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.12.tgz",
|
||||
"integrity": "sha512-8hXt3qPZlVH+yPF4W9Dc15/gBiTPGUJUgYs3dH9WnO41QWl1o4aNlZpZK/pdnpCIO1GmN0+PxJW9TCNb0H0Hqw==",
|
||||
"version": "0.3.11",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.3.11.tgz",
|
||||
"integrity": "sha512-Q2ffXE+X62gFy5mZkg7qhzAC7+kqaNZWpgS+297h/hWr/cFBDyC8eBPmnI509eKi2okixmOMbWnNluZkNYNSfw==",
|
||||
"requires": {
|
||||
"@firebase/storage-types": "0.3.3",
|
||||
"@firebase/util": "0.2.28",
|
||||
"@firebase/util": "0.2.27",
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
},
|
||||
@@ -210,9 +195,9 @@
|
||||
"integrity": "sha512-fUp4kpbxwDiWs/aIBJqBvXgFHZvgoND2JA0gJYSEsXtWtVwfgzY/710plErgZDeQKopX5eOR1sHskZkQUy0U6w=="
|
||||
},
|
||||
"@firebase/util": {
|
||||
"version": "0.2.28",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.28.tgz",
|
||||
"integrity": "sha512-ZQMAWtXj8y5kvB6izs0aTM/jG+WO8HpqhXA/EwD6LckJ+1P5LnAhaLZt1zR4HpuCE+jeP5I32Id5RJ/aifFs6A==",
|
||||
"version": "0.2.27",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.27.tgz",
|
||||
"integrity": "sha512-kFlbWNX1OuLfHrDXZ5QLmNNiLtMyxzbBgMo1DY1tXMjKK1AMYsHnyjInA8esvO0SCDp5XN3Pt9EDlhY4sRiLsw==",
|
||||
"requires": {
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
@@ -223,9 +208,9 @@
|
||||
"integrity": "sha512-VlTurkvs4v7EVFWESBZGOPghFEokQhU5au5CP9WqA8B2/PcQRDsaaQlQCA6VATuEnW+vtSiSBvTiOc4004f8xg=="
|
||||
},
|
||||
"@google-cloud/common": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.2.2.tgz",
|
||||
"integrity": "sha512-AgMdDgLeYlEG17tXtMCowE7mplm907pcugtfJYYAp06HNe9RDnunUIY5KMnn9yikYl7NXNofARC+hwG77Zsa4g==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-2.2.0.tgz",
|
||||
"integrity": "sha512-ArSNbbuMOWVhrSasxECEYRcjMzkPgTfXJHQE5gccyDaoBv0oKqG9S2lse2KAgHpRADRna7wKiX9PWOpeB19VvA==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@google-cloud/projectify": "^1.0.0",
|
||||
@@ -275,9 +260,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"@google-cloud/storage": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-3.3.0.tgz",
|
||||
"integrity": "sha512-9jmHJ0ncQTcrZRwq5MRjXEwuCFkIjHenYwVbycV6bbZ4O84Hcgg4Yp33sKcJug5rvZeVgrpCzPbYXqO3B0LzJw==",
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-3.2.1.tgz",
|
||||
"integrity": "sha512-129EwPGej6bXzY1u5nja2aeMDew6DIHaJn7ZV6nteQ74LQQSNv2jKrqTlyhndBsAwpuwQAxeghPTCoFT/H8Frg==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@google-cloud/common": "^2.1.1",
|
||||
@@ -286,50 +271,27 @@
|
||||
"arrify": "^2.0.0",
|
||||
"compressible": "^2.0.12",
|
||||
"concat-stream": "^2.0.0",
|
||||
"date-and-time": "^0.10.0",
|
||||
"date-and-time": "^0.9.0",
|
||||
"duplexify": "^3.5.0",
|
||||
"extend": "^3.0.2",
|
||||
"gaxios": "^2.0.1",
|
||||
"gcs-resumable-upload": "^2.2.4",
|
||||
"gcs-resumable-upload": "^2.0.0",
|
||||
"hash-stream-validation": "^0.2.1",
|
||||
"mime": "^2.2.0",
|
||||
"mime-types": "^2.0.8",
|
||||
"onetime": "^5.1.0",
|
||||
"p-limit": "^2.2.0",
|
||||
"pumpify": "^2.0.0",
|
||||
"readable-stream": "^3.4.0",
|
||||
"snakeize": "^0.1.0",
|
||||
"stream-events": "^1.0.1",
|
||||
"through2": "^3.0.0",
|
||||
"xdg-basedir": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"readable-stream": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
|
||||
"integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"inherits": "^2.0.3",
|
||||
"string_decoder": "^1.1.1",
|
||||
"util-deprecate": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
|
||||
"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@grpc/grpc-js": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.5.4.tgz",
|
||||
"integrity": "sha512-aY4fTCz7jq7oKFmfAeZVqGzMCR5I9NLdY9E2fJ70QtGXwlJnTaN6cnbRmCk23/aKPx9UHqOtk2lyjpN6LbAaxw==",
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.5.3.tgz",
|
||||
"integrity": "sha512-doDzxjdN0IJihQJvjDkZun9bZp/TW2EKO5E4fNvw8634kU1eNqPnFtAmiEiIYptqJ9StC+zRo1mwrazhqI0k5A==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"semver": "^6.2.0"
|
||||
@@ -536,9 +498,10 @@
|
||||
"dev": true
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
|
||||
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
@@ -584,15 +547,6 @@
|
||||
"integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@@ -945,9 +899,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"date-and-time": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.10.0.tgz",
|
||||
"integrity": "sha512-IbIzxtvK80JZOVsWF6+NOjunTaoFVYxkAQoyzmflJyuRCJAJebehy48mPiCAedcGp4P7/UO3QYRWa0fe6INftg==",
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.9.0.tgz",
|
||||
"integrity": "sha512-4JybB6PbR+EebpFx/KyR5Ybl+TcdXMLIJkyYsCx3P4M4CWGMuDyFF19yh6TyasMAIF5lrsgIxiSHBXh2FFc7Fg==",
|
||||
"optional": true
|
||||
},
|
||||
"debug": {
|
||||
@@ -1117,9 +1071,9 @@
|
||||
}
|
||||
},
|
||||
"end-of-stream": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.3.tgz",
|
||||
"integrity": "sha512-cbNhPFS6MlYlWTGncSiDYbdqKhwWFy7kNeb1YSOG6K65i/wPTkLVCJQj0hXA4j0m5Da+hBWnqopEnu1FFelisQ==",
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
|
||||
"integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"once": "^1.4.0"
|
||||
@@ -1201,12 +1155,6 @@
|
||||
"text-table": "^0.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||
@@ -1221,15 +1169,6 @@
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
|
||||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1476,28 +1415,42 @@
|
||||
}
|
||||
},
|
||||
"firebase": {
|
||||
"version": "6.6.2",
|
||||
"resolved": "https://registry.npmjs.org/firebase/-/firebase-6.6.2.tgz",
|
||||
"integrity": "sha512-uL9uNbutC0T8GAxrGgOCC35Ven3QKJqzJozNoVIpBuiWrB9ifm9aKOxn44h6o5ouviax3LVvoiG2jLkLkdQq4A==",
|
||||
"version": "6.6.1",
|
||||
"resolved": "https://registry.npmjs.org/firebase/-/firebase-6.6.1.tgz",
|
||||
"integrity": "sha512-iXbHPIBRt04xYSjWffnARqZbc3vUc0RTnOHsMtAqaT7pqDWicaghEwj2WbCJ0+JLAiKnLNK7fTjW73zfKQSSoQ==",
|
||||
"requires": {
|
||||
"@firebase/app": "0.4.17",
|
||||
"@firebase/app": "0.4.16",
|
||||
"@firebase/app-types": "0.4.3",
|
||||
"@firebase/auth": "0.12.0",
|
||||
"@firebase/database": "0.5.4",
|
||||
"@firebase/firestore": "1.5.3",
|
||||
"@firebase/functions": "0.4.18",
|
||||
"@firebase/installations": "0.2.7",
|
||||
"@firebase/messaging": "0.4.11",
|
||||
"@firebase/performance": "0.2.19",
|
||||
"@firebase/polyfill": "0.3.22",
|
||||
"@firebase/storage": "0.3.12",
|
||||
"@firebase/util": "0.2.28"
|
||||
"@firebase/database": "0.5.3",
|
||||
"@firebase/firestore": "1.5.2",
|
||||
"@firebase/functions": "0.4.17",
|
||||
"@firebase/installations": "0.2.6",
|
||||
"@firebase/messaging": "0.4.10",
|
||||
"@firebase/performance": "0.2.18",
|
||||
"@firebase/polyfill": "0.3.21",
|
||||
"@firebase/storage": "0.3.11",
|
||||
"@firebase/util": "0.2.27"
|
||||
},
|
||||
"dependencies": {
|
||||
"@firebase/database": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.5.3.tgz",
|
||||
"integrity": "sha512-TFjQ/M0T4jO24jAMU5cZAHNk3ndNfeNtGKe5PL4o/YrGYJHg3XaE2LKzU/vFrXUFLnLxqbETzXjFa4hTA6cDUg==",
|
||||
"requires": {
|
||||
"@firebase/database-types": "0.4.3",
|
||||
"@firebase/logger": "0.1.24",
|
||||
"@firebase/util": "0.2.27",
|
||||
"faye-websocket": "0.11.3",
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"firebase-admin": {
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-8.6.0.tgz",
|
||||
"integrity": "sha512-+JqOinU5bYUkg434LqEBXrHMrIBhL/+HwWEgbZpS1sBKHQRJK7LlcBrayqxvQKwJzgh5xs/JTInTmkozXk7h1w==",
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-8.5.0.tgz",
|
||||
"integrity": "sha512-rvgCj5Z1iFOT6K6uW37VRl4PKNpAcBFu/FIQ4Nl5bFnqbHSxf+QxzsqdsUtIxdqZU1yh2DTs2t+s5qORx/T9+g==",
|
||||
"requires": {
|
||||
"@firebase/database": "^0.5.1",
|
||||
"@google-cloud/firestore": "^2.0.0",
|
||||
@@ -1571,29 +1524,6 @@
|
||||
"integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
|
||||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
}
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
|
||||
@@ -1634,9 +1564,9 @@
|
||||
}
|
||||
},
|
||||
"gcp-metadata": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-3.0.0.tgz",
|
||||
"integrity": "sha512-WP5/TZWri9TrD41jNr8ukY9dKYLL+8jwQVwbtUbmprjWuyybdnJNkbXbwqD2sdbXIVXD1WCqzfj7QftSLB6K8Q==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-2.0.2.tgz",
|
||||
"integrity": "sha512-dxPXBvjyfz5qFEBXzEwNmuZXwsGYfuASGYeg3CKZDaQRXdiWti9J3/Ezmtyon1OrCNpDO2YekyoSjEqMtsrcXw==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"gaxios": "^2.0.1",
|
||||
@@ -1678,25 +1608,25 @@
|
||||
"dev": true
|
||||
},
|
||||
"google-auth-library": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.2.2.tgz",
|
||||
"integrity": "sha512-0vzniXbjD5SE9aenAMqhjVR99wvqLpyd5Fw6zC3WxJ15GIMGx96tq+Cu1WRviqsnQqhrmnad6T69kv6qkj/w2Q==",
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-5.2.1.tgz",
|
||||
"integrity": "sha512-p9vO6UcRIK/zD3PxoMijaUfFYu6tvzaQwvag1K/82O42NBeAnmllyQUgqaBhcAh9FzFAVlN4bQIaO8+prpE7Vg==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"arrify": "^2.0.0",
|
||||
"base64-js": "^1.3.0",
|
||||
"fast-text-encoding": "^1.0.0",
|
||||
"gaxios": "^2.0.0",
|
||||
"gcp-metadata": "^3.0.0",
|
||||
"gcp-metadata": "^2.0.0",
|
||||
"gtoken": "^4.0.0",
|
||||
"jws": "^3.1.5",
|
||||
"lru-cache": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"google-gax": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/google-gax/-/google-gax-1.6.1.tgz",
|
||||
"integrity": "sha512-5/6uaUA9qAqRKVe2sjvMgsnU/HbfQisQTM5EZ5DfNGOYVBoTsPBdOhR2ZqEWPyqHe7YkdzVHev3FH9W3YWcORw==",
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/google-gax/-/google-gax-1.5.2.tgz",
|
||||
"integrity": "sha512-NceyDzlw4mQz6qH3bDIuRtfDAZKehM96QpnPPJ3Hur7FA/gPzpzboUYwhfP6q5obSP4LuSSDhI/76Fu51/ljtg==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"@grpc/grpc-js": "^0.5.2",
|
||||
@@ -2167,9 +2097,9 @@
|
||||
}
|
||||
},
|
||||
"gtoken": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-4.1.0.tgz",
|
||||
"integrity": "sha512-wqyn2gf5buzEZN4QNmmiiW2i2JkEdZnL7Z/9p44RtZqgt4077m4khRgAYNuu8cBwHWCc6MsP6eDUn/KkF6jFIw==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gtoken/-/gtoken-4.0.0.tgz",
|
||||
"integrity": "sha512-XaRCfHJxhj06LmnWNBzVTAr85NfAErq0W1oabkdqwbq3uL/QTB1kyvGog361Uu2FMG/8e3115sIy/97Rnd4GjQ==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"gaxios": "^2.0.0",
|
||||
@@ -2414,11 +2344,6 @@
|
||||
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
|
||||
"optional": true
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
|
||||
"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
|
||||
},
|
||||
"is-date-object": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
|
||||
@@ -3329,23 +3254,6 @@
|
||||
"requires": {
|
||||
"is-fullwidth-code-point": "^2.0.0",
|
||||
"strip-ansi": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"string_decoder": {
|
||||
@@ -3355,11 +3263,12 @@
|
||||
"optional": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
|
||||
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^4.1.0"
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"strip-json-comments": {
|
||||
|
||||
@@ -10,14 +10,12 @@
|
||||
"logs": "firebase functions:log"
|
||||
},
|
||||
"engines": {
|
||||
"node": "10"
|
||||
"node": "8"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"firebase": "^6.6.2",
|
||||
"firebase-admin": "^8.6.0",
|
||||
"firebase-functions": "^3.1.0",
|
||||
"strip-ansi": "^5.2.0"
|
||||
"firebase": "^6.6.1",
|
||||
"firebase-admin": "^8.0.0",
|
||||
"firebase-functions": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^5.12.0",
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
const admin = require('firebase-admin');
|
||||
admin.initializeApp();
|
||||
|
||||
const db = admin.firestore();
|
||||
|
||||
module.exports = { admin, db };
|
||||
@@ -1,9 +0,0 @@
|
||||
module.exports = {
|
||||
apiKey: "AIzaSyCvsWetg4qFdsPGfJ3LCw_QaaYzoan7Q34",
|
||||
authDomain: "twistter-e4649.firebaseapp.com",
|
||||
databaseURL: "https://twistter-e4649.firebaseio.com",
|
||||
projectId: "twistter-e4649",
|
||||
storageBucket: "twistter-e4649.appspot.com",
|
||||
messagingSenderId: "20131817365",
|
||||
appId: "1:20131817365:web:633c95fb08b16d4526b89c"
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
const { admin, db } = require('./admin');
|
||||
|
||||
// Acts as a middleman between the client and any function that you use it with
|
||||
// The function will only execute if the user is logged in, or rather, they have
|
||||
// a valid token
|
||||
module.exports = (req, res, next) => {
|
||||
console.log(req);
|
||||
console.log(req.body);
|
||||
console.log(req.headers);
|
||||
console.log(req.headers.authorization);
|
||||
console.log(JSON.stringify(req.body));
|
||||
console.log(JSON.stringify(req.header));
|
||||
|
||||
let idToken;
|
||||
|
||||
// Checking that the token exists in the header of the request
|
||||
if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
|
||||
idToken = req.headers.authorization.split('Bearer ')[1];
|
||||
} else {
|
||||
console.error('No token found');
|
||||
return res.status(403).json({ error: 'Unauthorized'});
|
||||
}
|
||||
|
||||
// Checking that the token is valid in firebase
|
||||
admin.auth().verifyIdToken(idToken)
|
||||
.then((decodedToken) => {
|
||||
req.user = decodedToken;
|
||||
return db.collection('users').where('userId', '==', req.user.uid)
|
||||
.limit(1)
|
||||
.get();
|
||||
})
|
||||
.then((data) => {
|
||||
req.user.handle = data.docs[0].data().handle; // Save username
|
||||
req.user.imageUrl = data.docs[0].data().imageUrl;
|
||||
req.userData = data.docs[0].data(); // Stores all user data from the database
|
||||
return next();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error while verifying token ', err);
|
||||
return res.status(403).json(err);
|
||||
});
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
const isEmail = (str) => {
|
||||
const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
if (str.match(emailRegEx)) return true;
|
||||
else return false;
|
||||
};
|
||||
|
||||
const isEmpty = (str) => {
|
||||
if (str.trim() === "") return true;
|
||||
else return false;
|
||||
};
|
||||
|
||||
exports.validateUpdateProfileInfo = (req) => {
|
||||
const newData = req.body;
|
||||
// const oldData = req.userData;
|
||||
let errors = {};
|
||||
let profileData = req.userData;
|
||||
|
||||
// ?: Should users be able to change their handles and emails?
|
||||
|
||||
// Deletes any unused keys so that they aren't stored in the database
|
||||
if (newData.firstName) {
|
||||
profileData.firstName = newData.firstName.toString().trim();
|
||||
} else {
|
||||
delete profileData.firstName;
|
||||
}
|
||||
|
||||
if (newData.lastName) {
|
||||
profileData.lastName = newData.lastName.toString().trim();
|
||||
} else {
|
||||
delete profileData.lastName;
|
||||
}
|
||||
|
||||
if (newData.bio) {
|
||||
profileData.bio = newData.bio.toString().trim();
|
||||
} else {
|
||||
delete profileData.bio;
|
||||
}
|
||||
|
||||
if (isEmpty(newData.email)) {
|
||||
errors.email = "Must not be empty.";
|
||||
} else if (!isEmail(newData.email)) {
|
||||
errors.email = "Must be a valid email.";
|
||||
} else {
|
||||
profileData.email = newData.email;
|
||||
}
|
||||
|
||||
return {
|
||||
errors,
|
||||
valid: Object.keys(errors).length === 0 ? true : false,
|
||||
profileData
|
||||
};
|
||||
};
|
||||
37
package-lock.json
generated
37
package-lock.json
generated
@@ -16,15 +16,6 @@
|
||||
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
|
||||
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"body-parser": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
|
||||
@@ -173,24 +164,6 @@
|
||||
"unpipe": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
|
||||
@@ -231,16 +204,6 @@
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
|
||||
"integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA=="
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
|
||||
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
|
||||
},
|
||||
"jwt-decode": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
|
||||
"integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
|
||||
78
public/index.html
Normal file
78
public/index.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Welcome to Firebase Hosting</title>
|
||||
|
||||
<!-- update the version number as needed -->
|
||||
<script defer src="/__/firebase/6.6.0/firebase-app.js"></script>
|
||||
<!-- include only the Firebase features as you need -->
|
||||
<script defer src="/__/firebase/6.6.0/firebase-auth.js"></script>
|
||||
<script defer src="/__/firebase/6.6.0/firebase-database.js"></script>
|
||||
<script defer src="/__/firebase/6.6.0/firebase-messaging.js"></script>
|
||||
<script defer src="/__/firebase/6.6.0/firebase-storage.js"></script>
|
||||
<!-- initialize the SDK after all desired features are loaded -->
|
||||
<script defer src="/__/firebase/init.js"></script>
|
||||
|
||||
<style media="screen">
|
||||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
|
||||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
|
||||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
|
||||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
|
||||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
|
||||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
|
||||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
||||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
|
||||
@media (max-width: 600px) {
|
||||
body, #message { margin-top: 0; background: white; box-shadow: none; }
|
||||
body { border-top: 16px solid #ffa100; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">
|
||||
<h2>This is a test message!</h2>
|
||||
<h2>Welcome</h2>
|
||||
|
||||
|
||||
<h1>Firebase Hosting Setup Complete</h1>
|
||||
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
|
||||
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
|
||||
<div id="like_button_container"></div>
|
||||
</div>
|
||||
<p id="load">Firebase SDK Loading…</p>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// // The Firebase SDK is initialized and available here!
|
||||
//
|
||||
// firebase.auth().onAuthStateChanged(user => { });
|
||||
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
|
||||
// firebase.messaging().requestPermission().then(() => { });
|
||||
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
|
||||
//
|
||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
try {
|
||||
let app = firebase.app();
|
||||
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
|
||||
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="like_button.js"></script>
|
||||
<script src="loader.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
public/like_button.js
Normal file
30
public/like_button.js
Normal file
@@ -0,0 +1,30 @@
|
||||
'use strict';
|
||||
|
||||
const e = React.createElement;
|
||||
|
||||
class LikeButton extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
liked: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.liked) {
|
||||
return 'You liked this.';
|
||||
}
|
||||
|
||||
return e(
|
||||
'button', {
|
||||
onClick: () => this.setState({
|
||||
liked: true
|
||||
})
|
||||
},
|
||||
'Like'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const domContainer = document.querySelector('#like_button_container');
|
||||
ReactDOM.render(e(LikeButton), domContainer);
|
||||
12
twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
Normal file
12
twistter-e4649-firebase-adminsdk-pgjve-1e57494429.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"type": "service_account",
|
||||
"project_id": "twistter-e4649",
|
||||
"private_key_id": "1e57494429e4fd7d17f6fc28524e14b8e5227596",
|
||||
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCyRdMZwXrpf3HB\nsVrGZVoPt+S+ahkT4SCCEWV/Q4O4hVyW277Rs0p7k5ZkZfkhcVVBUqKGMgW/Esvz\npx0VIgpg3gg308kMRmC3MGzYbodjynVyDHatyAZhhUi9cg0N2K9+vSsW5eSmWROe\nfVvB8hvr6m5xGVdJFA7DV4/0vm2cfy+Q/FlFb6vFmQTZtPZzGFf5BKoNMe7pMxey\n4zspAIZgRmxWDbAqqzX0PYk/WbXFgH/wn2X25S+ArHhoay2Hms65/NbWCV6mpFUJ\nYqzrlCn/WcwXGAm7tjmu00yD+bARabImh8R7+PSBaHMQ+SGdri2snIXWsvB/xi9/\nSNFqzHynAgMBAAECggEAVty/zapg1bnTt0FPziBfIA6FpaPzoSSN3uJUFozSdwuA\nAD+E/A9EiO7yFew71egvVrtJVmK0OxQRDSDNglkKPoWg8na+XL1D7a5qMpC0ZlKl\nJBNfljBCr6yuMySJqMf+Rp4siyUr4kO/0/cXyOnLYglhk7j5tzFPOi4FhgZtSRU9\nYckk5wwcBObUFE0Rmqf0gPcI9WuFUkusIjz3rjuEju1/U6E/VV5gHmMuQy3f9LHB\nnsiLAobx9+TGgs12CvkjWYpW5raUCCn5z/EYNPZSt7rg9CSWqXW009HCfTqi6i7o\nNpZ7qpp5DVQdHNFJunSGvI+k44+i8OE7HEY4xXt+OQKBgQDZ/E1QwJQoHuzPkrGW\nAc0a+NQeG8NwaXwsezlvYXMTbL27SxKXC3dzPT1WgNUKpaKj3wLJPar4NgPPSPi3\nqgmcvMqgwm4B+HPbXc1oxBS7/jD3pWJVyPO9Re17Uc0RYV/DORQhWe1Yq7TyMHvl\nbD/KqIvOxswigVxK4JMIxp4s7wKBgQDRXJfb4BHdR7CGfuTVQ19gH5uLgrK9ezBk\nQOLK+u9yBpoKyYSnD3OH/i0wG5bm3rUegzvwHGKKhDfiLbajMIt04n2DuVUm57HQ\n+Jca29V8XMWfhTbu3kDl+OOFmLvPCwg8C9edNTJWUVYu3EbwsyzCQY5TDroWGQdF\n6cQIkAIbyQKBgQCUtWd1UHuCR16cWOHniQEIhnoGtEAHHx9EJShQkLV1qfhhnlxn\nSL5LkpqWubsc0VR74LbA3N4XCJpevdRXT5vRHoZJV3q+w2UeYQaxkxrmCQoU1/GW\nvklxdRQGzg5M7hXrU7Qk8HlXxYPiuSq8n7WBJqyB+uLmI0P4HO6RzRW5ZwKBgBkr\nf5pQkvU+dCuHP+2fvuyogCPCn8iF8ehroJh0mKrlvklDtu36vpH/7eDVwEubRL0Z\nW/BfCT3L7YgEpOtzn6B6xko60tDtlAQijtAM09qysJOgCV2oXLcJOBlMpm+azO+j\nINXmmlmkR680jlbLw7rK9NhpcdfMRIKUOxwobAh5AoGBAJMN6n7Hy8nJRJZ18iHY\n3hEkVbKrLLMMHFDQj5BZQCeAp1v0Fj30RYJWS4hTzR9ht0MtdmPub460lh9hhqCM\nl3UnCJoz00ApF3Z2FRN/l0KpCFD9Gw2Hjyc3u9sEUpqd8G3cg3IZE6eZ6CZWljFT\nHcuQ2cTFdB8bq8oLUxXeY3Yv\n-----END PRIVATE KEY-----\n",
|
||||
"client_email": "firebase-adminsdk-pgjve@twistter-e4649.iam.gserviceaccount.com",
|
||||
"client_id": "102241295911303209723",
|
||||
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
|
||||
"token_uri": "https://oauth2.googleapis.com/token",
|
||||
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
|
||||
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-pgjve%40twistter-e4649.iam.gserviceaccount.com"
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"type": "service_account",
|
||||
"project_id": "twistter-e4649",
|
||||
"private_key_id": "382fc005e17340a21dd39079feca75371330644d",
|
||||
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDL1bwTpEluR6dJ\nVfS/K1d76j2I3Wrn4qSbrTYm4/cAPBPlsBRO0bwrkhr+g0I6rwW/fFz8udjNAFB1\nfDfz769buR6go5us71I5LxMNviIhzFr59ZsEkcnUCgW8G7koicLEjWdstI4lJxZT\nRRolH+SFpPwsQAY399zjdBiCC8STbavVVhe+ChEDl/S2K72W7A7nWSMbLsyGsz2o\nQ9uIG3onwFNE7WRIeObWCxSBKlydMmTJ+p/CsTdFY4fUHb97QsMEmzRJox10kmyt\nP9l5wfJ2wUYvRXRJKq7Mwx1UnLduXP2oe/XvR5fzJLJ780HO6BNBf5IKcTHXHVBA\ne6ZtiL5dAgMBAAECggEAFvfN1NttjXL0KKak3hMA1+z8Y2WqXC1aUFMOMlz8Qhct\nmXNjy8CFAYEvGtVTgHqkR9Vi7PShYfLSc3U8diI155H5H4S6pUaPmfNHTwRzosyn\ncQRPJA6sEqvRGvHMxVfwjbvultMpiTTZpnxiMSNiLqT5PUs26CuSb5bErt1V7dP5\nn/lhY+4rzfXSrw38ZsO/gEvLZ/7iRA+JZgqE3Qs2cD5idxqqOcOLLiW741JpXTmd\n5ug/urJgSyvz+cNo3yHnajEtAxiSfkpU4sUHZ/WWqaRGWxpt3XWILtR9Q/4afPeM\n/T82YvddoW5pUwDpgvZxdVYjopuoxvnS298L0AGySQKBgQDqDD7Yh6SbOR3w4ZN9\nRO7q5KiJbyZmVdZ3lLZddsL/vto9JkUtnLDOMpYnb2TezGfN6ErzAkRQCSUsWK4m\nERbSK6oyUvevhlt/gHGP34uc/OCxGk2D7WCAS3s54ofDt2369tzIpGjsnkYM+h3b\nuZ5lFoWHG1YM3JtgcIIU6UygTwKBgQDe9ArV08wPDuXf4rcldmImQDB7xhGcg9xU\njAKEn5FZW1mvmBy3Sq1qpZj0baZz6eEDn6FBLwH1Ke5gdfrd8WnESUNnFnBBqpA1\nospIgUmKZ1sjyly9CHMQ11Kbzt7+kA9GYZrMbaMjS8M18qFEBZ7CoPLv5DLyabJW\nOkPzTwb/kwKBgQDR3fUkmEzj202bx8pHE97gxfTSd9aJAQN06uaz3GByjyKGnqB9\ni/mGjBnUdrCOj9+s5VT/ntK+qdSpdUODYuOBxiGxSnBK9kFpjTVHe35nYOHiLOHB\nIMPdhtGSUCzJNNvrpBzJ1ZM4SZwq2sSXWFRN9On7Amog0liJG5mpQqGxRQKBgHmP\nzFycF3XaZKH2xm8ppgg/FXBXJYEWMEr07+aJ7kEvWq4wHPAfSoCMe+JB6vDmg2Zr\nYgvdao7W5v83NKpQl5+LZrHNfTWAnxJviSWRQJyzD/Fqw7fZ5Is5K/SCDfn0aC+y\nxilSWhHDnFNM0Hr7KX3rLap43QJpePAk4qnF3AX7AoGBAOe5C1VMKoTapnxvo/FI\nBCvXw05SSEExfXVR0ryoqUxgu1asCkYyJSoWxOZQ+33npQ1/zV1mCXn/lNZcyveW\nZ5/cUw71grW8KBYFrW7LeQIzjZb7xPI3Z4EV0uYd2b69GkQk1buHj/gsswRhGEvx\nJM1DN1SCenbGcVLprM0vVelp\n-----END PRIVATE KEY-----\n",
|
||||
"client_email": "firebase-adminsdk-pgjve@twistter-e4649.iam.gserviceaccount.com",
|
||||
"client_id": "102241295911303209723",
|
||||
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
|
||||
"token_uri": "https://oauth2.googleapis.com/token",
|
||||
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
|
||||
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-pgjve%40twistter-e4649.iam.gserviceaccount.com"
|
||||
}
|
||||
@@ -1,10 +1,5 @@
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
|
||||
|
||||
|
||||
Cloud: https://us-central1-twistter-e4649.cloudfunctions.net/api
|
||||
Local: http://localhost:5001/twistter-e4649/us-central1/api (npm install --save firebase)
|
||||
|
||||
|
||||
Below you will find some information on how to perform common tasks.<br>
|
||||
You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
|
||||
|
||||
5670
twistter-frontend/package-lock.json
generated
5670
twistter-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -3,24 +3,10 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.4.3",
|
||||
"@material-ui/icons": "^4.5.1",
|
||||
"@material-ui/styles": "^4.5.0",
|
||||
"@material-ui/system": "^4.5.0",
|
||||
"axios": "^0.19.0",
|
||||
"clsx": "^1.0.4",
|
||||
"create-react-app": "^3.1.2",
|
||||
"install": "^0.13.0",
|
||||
"jwt-decode": "^2.2.0",
|
||||
"node-pre-gyp": "^0.13.0",
|
||||
"react": "^16.9.0",
|
||||
"react-dom": "^16.9.0",
|
||||
"react-redux": "^7.1.1",
|
||||
"react-router-dom": "^5.1.0",
|
||||
"react-scripts": "0.9.5",
|
||||
"redux": "^4.0.4",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"typeface-roboto": "0.0.75"
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-scripts": "0.9.5"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
@@ -28,18 +14,5 @@
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,13 +5,6 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Twistter</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
|
||||
import userReducer from './reducers/userReducer';
|
||||
import dataReducer from './reducers/dataReducer';
|
||||
import uiReducer from './reducers/uiReducer';
|
||||
|
||||
const initialState = {};
|
||||
|
||||
const middleware = {thunk};
|
||||
|
||||
const reducers = combineReducers({
|
||||
user: userReducer,
|
||||
data: dataReducer,
|
||||
UI: uiReducer
|
||||
});
|
||||
|
||||
//const store = createStore(reducers, )
|
||||
@@ -1,7 +1,3 @@
|
||||
html,
|
||||
body {
|
||||
background-color: rgb(245, 245, 245);
|
||||
}
|
||||
.app {
|
||||
font-family: "Segoe UI";
|
||||
font-size: large;
|
||||
@@ -26,7 +22,7 @@ body {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signup {
|
||||
.register {
|
||||
background-color: #1da1f2;
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
@@ -45,10 +41,3 @@ body {
|
||||
border: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 80px auto 0 auto;
|
||||
max-width: 1200px;
|
||||
color: #1da1f2;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,90 +1,180 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from "react";
|
||||
import "./App.css";
|
||||
import axios from "axios";
|
||||
import React, { Component } from 'react';
|
||||
import logo from './twistter-logo.png';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Route from 'react-router-dom/Route';
|
||||
import './App.css';
|
||||
import Writing_Microblogs from './Writing_Microblogs.js'
|
||||
|
||||
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
||||
import Navbar from "./components/layout/NavBar";
|
||||
import jwtDecode from "jwt-decode";
|
||||
var validEmail = true;
|
||||
var validUsername = false;
|
||||
var validPassword = false;
|
||||
var passwordsMatch = false;
|
||||
|
||||
// Redux
|
||||
import { Provider } from "react-redux";
|
||||
import store from "./redux/store";
|
||||
import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
|
||||
import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
|
||||
import themeObject from "./util/theme";
|
||||
import { SET_AUTHENTICATED } from "./redux/types";
|
||||
import { logoutUser, getUserData } from "./redux/actions/userActions";
|
||||
const emailBlur = () => {
|
||||
//var email = document.getElementById("email");
|
||||
|
||||
// Components
|
||||
import AuthRoute from "./util/AuthRoute";
|
||||
|
||||
// axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api';
|
||||
|
||||
// Pages
|
||||
import home from "./pages/Home";
|
||||
import signup from "./pages/Signup";
|
||||
import login from "./pages/Login";
|
||||
import user from "./pages/user";
|
||||
import logout from "./pages/Logout";
|
||||
import Delete from "./pages/Delete";
|
||||
import writeMicroblog from "./Writing_Microblogs.js";
|
||||
import editProfile from "./pages/editProfile";
|
||||
import userLine from "./Userline.js";
|
||||
import Search from "./pages/Search.js";
|
||||
|
||||
const theme = createMuiTheme(themeObject);
|
||||
|
||||
const token = localStorage.FBIdToken;
|
||||
if (token) {
|
||||
try {
|
||||
const decodedToken = jwtDecode(token);
|
||||
if (decodedToken.exp * 1000 < Date.now()) {
|
||||
store.dispatch(logoutUser());
|
||||
window.location.href = "/login";
|
||||
} else {
|
||||
store.dispatch({ type: SET_AUTHENTICATED });
|
||||
axios.defaults.headers.common["Authorization"] = token;
|
||||
store.dispatch(getUserData());
|
||||
/*if() {
|
||||
validEmail = true;
|
||||
}
|
||||
} catch (invalidTokenError) {
|
||||
store.dispatch(logoutUser());
|
||||
window.location.href = "/login";
|
||||
else {
|
||||
validEmail = false;
|
||||
alert("Email is invalid.");
|
||||
}*/
|
||||
|
||||
if(validEmail && validUsername && validPassword && passwordsMatch) {
|
||||
document.getElementById("submit").disabled = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("submit").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const usernameBlur = () => {
|
||||
var username = document.getElementById("username");
|
||||
|
||||
if(username.value.length >= 3 && username.value.length <= 50) {
|
||||
validUsername = true;
|
||||
}
|
||||
else {
|
||||
validUsername = false;
|
||||
alert("Username must be between 3 and 50 characters long.");
|
||||
}
|
||||
|
||||
if(validEmail && validUsername && validPassword && passwordsMatch) {
|
||||
document.getElementById("submit").disabled = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("submit").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const passwordBlur = () => {
|
||||
var password = document.getElementById("password");
|
||||
|
||||
if(password.value.length >= 8 && password.value.length <= 20) {
|
||||
validPassword = true;
|
||||
}
|
||||
else {
|
||||
validPassword = false;
|
||||
alert("Password must be between 8 and 20 characters long.");
|
||||
}
|
||||
|
||||
if(validEmail && validUsername && validPassword && passwordsMatch) {
|
||||
document.getElementById("submit").disabled = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("submit").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
const confirmPasswordBlur = () => {
|
||||
var password = document.getElementById("password");
|
||||
var confirmPassword = document.getElementById("confirmPassword");
|
||||
|
||||
if(password.value === confirmPassword.value) {
|
||||
passwordsMatch = true;
|
||||
}
|
||||
else {
|
||||
passwordsMatch = false;
|
||||
alert("Passwords must match.");
|
||||
}
|
||||
|
||||
if(validEmail && validUsername && validPassword && passwordsMatch) {
|
||||
document.getElementById("submit").disabled = false;
|
||||
}
|
||||
else {
|
||||
document.getElementById("submit").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
class App extends Component {
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<Provider store={store}>
|
||||
<Router>
|
||||
<div className="container">
|
||||
<Navbar />
|
||||
</div>
|
||||
<div className="app">
|
||||
<Switch>
|
||||
|
||||
{/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
|
||||
<AuthRoute exact path="/signup" component={signup} />
|
||||
<AuthRoute exact path="/login" component={login} />
|
||||
<AuthRoute exact path="/" component={home}/>
|
||||
|
||||
<Route exact path="/logout" component={logout} />
|
||||
<Route exact path="/delete" component={Delete} />
|
||||
|
||||
<Route exact path="/home" component={home} />
|
||||
<Route exact path="/user" component={user} />
|
||||
<Route exact path="/edit" component={editProfile} />
|
||||
<Route exact path="/search" component={Search} />
|
||||
|
||||
<AuthRoute exact path="/" component={home} />
|
||||
|
||||
</Switch>
|
||||
<Route path="/" exact render={
|
||||
() => {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Welcome to Twistter!</b>
|
||||
<br/><br/>
|
||||
<b>See the most interesting topics people are following right now.</b>
|
||||
</div>
|
||||
|
||||
<br/><br/><br/><br/>
|
||||
|
||||
<div>
|
||||
<b>Join today or sign in if you already have an account.</b>
|
||||
<br/><br/>
|
||||
<button class="authButtons register"><a href="/register">Sign up</a></button>
|
||||
<br/><br/>
|
||||
<button class="authButtons login"><a href="/login">Sign in</a></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}/>
|
||||
|
||||
<Route path="/register" exact render={
|
||||
() => {
|
||||
return (
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Create your account</b>
|
||||
<br/><br/>
|
||||
<input class="authInput" id="email" placeholder="Email" onBlur={() => emailBlur()}></input>
|
||||
<br/><br/>
|
||||
<input class="authInput" id="username" placeholder="Username" onBlur={() => usernameBlur()}></input>
|
||||
<br/><br/>
|
||||
<input class="authInput" id="password" placeholder="Password" onBlur={() => passwordBlur()}></input>
|
||||
<br/><br/>
|
||||
<input class="authInput" id="confirmPassword" placeholder="Confirm Password" onBlur={() => confirmPasswordBlur()}></input>
|
||||
<br/><br/>
|
||||
<button class="authButtons register" id="submit" onclick="" disabled>Sign up</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}/>
|
||||
|
||||
<Route path="/login" exact render={
|
||||
() => {
|
||||
return (
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Log in to Twistter</b>
|
||||
<br/><br/>
|
||||
<input class="authInput" placeholder="Username or email"></input>
|
||||
<br/><br/>
|
||||
<input class="authInput" placeholder="Password"></input>
|
||||
<br/><br/>
|
||||
<button class="authButtons register" onclick="">Sign in</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}/>
|
||||
|
||||
<Route path="/home" exact render={
|
||||
() => {
|
||||
return (
|
||||
<Writing_Microblogs/>
|
||||
)
|
||||
}
|
||||
}/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</Router>
|
||||
</Provider>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Route from 'react-router-dom/Route';
|
||||
import axios from 'axios';
|
||||
import Box from '@material-ui/core/Box'
|
||||
import {borders} from '@material-ui/system';
|
||||
import { sizing } from '@material-ui/system';
|
||||
// var moment = require('moment');
|
||||
|
||||
|
||||
|
||||
class Userline extends Component {
|
||||
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
microBlogs : [],
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
axios.get('/getallPostsforUser')
|
||||
.then(res => {
|
||||
const post = res.data;
|
||||
this.setState({microBlogs : post})
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const sortedPosts = (this.state.microBlogs).sort((a,b) =>
|
||||
-a.createdAt.localeCompare(b.createdAt)
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
|
||||
<p>Userline</p>
|
||||
</div>
|
||||
<Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
|
||||
<div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
|
||||
<p>
|
||||
{sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
|
||||
<br></br>When post was created: {microBlog.createdAt.substring(0,10) +
|
||||
" " + microBlog.createdAt.substring(11,19)}
|
||||
<br></br>Number of comments: {microBlog.commentCount}
|
||||
<br></br>Number of likes: {microBlog.likeCount}
|
||||
<br></br>Body of post: {microBlog.body}
|
||||
<br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}
|
||||
</p>)}
|
||||
</p>
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
export default Userline;
|
||||
@@ -1,117 +1,58 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
import Route from "react-router-dom/Route";
|
||||
import axios from "axios";
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import Route from 'react-router-dom/Route';
|
||||
|
||||
|
||||
class Writing_Microblogs extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: "",
|
||||
title: "",
|
||||
topics: "",
|
||||
characterCount: 250
|
||||
value: '',
|
||||
title: '',
|
||||
characterCount: 10
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleChangeforPost = this.handleChangeforPost.bind(this);
|
||||
this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
this.setState( {title: event.target.value });
|
||||
}
|
||||
|
||||
handleChangeforTopics(event) {
|
||||
this.setState({ topics: event.target.value });
|
||||
}
|
||||
|
||||
handleSubmit(event) {
|
||||
// alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
|
||||
const postData = {
|
||||
body: this.state.value,
|
||||
userImage: "bing-url",
|
||||
microBlogTitle: this.state.title,
|
||||
microBlogTopics: this.state.topics.split(", ")
|
||||
};
|
||||
const headers = {
|
||||
headers: { "Content-Type": "application/json" }
|
||||
};
|
||||
|
||||
axios
|
||||
.post("/putPost", postData, headers)
|
||||
.then(res => {
|
||||
alert("Post was shared successfully!");
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
alert("An error occured.");
|
||||
console.error(err);
|
||||
});
|
||||
alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
|
||||
event.preventDefault();
|
||||
this.setState({ value: "", title: "", characterCount: 250, topics: "" });
|
||||
}
|
||||
|
||||
handleChangeforPost(event) {
|
||||
this.setState({ value: event.target.value });
|
||||
this.setState({value: event.target.value })
|
||||
}
|
||||
|
||||
handleChangeforCharacterCount(event) {
|
||||
const charCount = event.target.value.length;
|
||||
const charRemaining = 250 - charCount;
|
||||
this.setState({ characterCount: charRemaining });
|
||||
const charCount = event.target.value.length
|
||||
const charRemaining = 10 - charCount
|
||||
this.setState({characterCount: charRemaining })
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
width: "200px",
|
||||
height: "50px",
|
||||
marginTop: "180px",
|
||||
marginLeft: "50px"
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "30px" }}>
|
||||
<form>
|
||||
<textarea
|
||||
placeholder="Enter Microblog Title"
|
||||
value={this.state.title}
|
||||
required
|
||||
onChange={this.handleChange}
|
||||
cols={30}
|
||||
rows={1}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
|
||||
<form>
|
||||
<textarea
|
||||
placeholder="Enter topics seperated by a comma"
|
||||
value={this.state.topics}
|
||||
required
|
||||
onChange={this.handleChangeforTopics}
|
||||
cols={40}
|
||||
rows={1}
|
||||
/>
|
||||
<input type="text" placeholder="Enter Microblog Title" value={this.state.title} onChange={this.handleChange} />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style={{ width: "200px", marginLeft: "50px"}}>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<textarea
|
||||
value={this.state.value}
|
||||
required
|
||||
maxLength="250"
|
||||
placeholder="Write Microblog here..."
|
||||
onChange={e => {
|
||||
this.handleChangeforPost(e);
|
||||
this.handleChangeforCharacterCount(e);
|
||||
}}
|
||||
cols={40}
|
||||
rows={20}
|
||||
/>
|
||||
<textarea value={this.state.value} maxLength="10" placeholder= "Write Microblog here..."
|
||||
onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />
|
||||
<div style={{ fontSize: "14px", marginRight: "-100px"}} >
|
||||
<p2>Characters Left: {this.state.characterCount}</p2>
|
||||
</div>
|
||||
@@ -121,8 +62,11 @@ class Writing_Microblogs extends Component {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Writing_Microblogs;
|
||||
@@ -1,71 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Material UI stuff
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import ToolBar from '@material-ui/core/Toolbar';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
// Redux stuff
|
||||
import { logoutUser } from '../../redux/actions/userActions';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 30
|
||||
},
|
||||
pageTitle: {
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
}
|
||||
};
|
||||
|
||||
export class Navbar extends Component {
|
||||
render() {
|
||||
const authenticated = this.props.user.authenticated;
|
||||
return (
|
||||
<AppBar>
|
||||
<ToolBar>
|
||||
<Button component={ Link } to='/'>
|
||||
Home
|
||||
</Button>
|
||||
{authenticated && <Button component={ Link } to='/user'>
|
||||
Profile
|
||||
</Button>}
|
||||
{!authenticated && <Button component={ Link } to='/login'>
|
||||
Login
|
||||
</Button>}
|
||||
{!authenticated && <Button component={ Link } to='/signup'>
|
||||
Sign Up
|
||||
</Button>}
|
||||
{authenticated && <Button component={ Link } to='/logout'>
|
||||
Logout
|
||||
</Button>}
|
||||
</ToolBar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user
|
||||
})
|
||||
|
||||
Navbar.propTypes = {
|
||||
user: PropTypes.object.isRequired,
|
||||
classes: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(withStyles(styles)(Navbar));
|
||||
@@ -1,48 +0,0 @@
|
||||
import React, { Component, Fragment } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import axios from "axios";
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
//MUI
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import Card from "@material-ui/core/CardMedia";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Paper } from "@material-ui/core";
|
||||
|
||||
const styles = theme => ({
|
||||
...theme
|
||||
});
|
||||
|
||||
class Profile extends Component {
|
||||
state = {
|
||||
profile: null
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get("/user")
|
||||
.then(res => {
|
||||
console.log(res.data.userData.credentials.handle);
|
||||
this.setState({
|
||||
profile: res.data.userData.credentials.handle
|
||||
});
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
}
|
||||
render() {
|
||||
let profileMarkup = this.state.profile ? (
|
||||
<p>
|
||||
<Typography variant='h5'>{this.state.profile}</Typography>
|
||||
</p>) : <p>loading profile...</p>
|
||||
|
||||
return profileMarkup;
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: state.user,
|
||||
classes: PropTypes.object.isRequired
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(withStyles(styles)(Profile));
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
|
||||
|
||||
// TODO: fix the style
|
||||
const styles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap',
|
||||
padding: theme.spacing(0.5),
|
||||
},
|
||||
chip: {
|
||||
margin: theme.spacing(0.5),
|
||||
},
|
||||
}));
|
||||
|
||||
export default function ChipsArray() {
|
||||
const classes = useStyles();
|
||||
const [chipData, setChipData] = React.useState([
|
||||
{ key: 0, label: 'Angular' },
|
||||
{ key: 1, label: 'jQuery' },
|
||||
{ key: 2, label: 'Polymer' },
|
||||
{ key: 3, label: 'React' },
|
||||
{ key: 4, label: 'Vue.js' },
|
||||
]);
|
||||
|
||||
const handleDelete = chipToDelete => () => {
|
||||
if (chipToDelete.label === 'React') {
|
||||
alert('Why would you want to delete React?! :)');
|
||||
return;
|
||||
}
|
||||
|
||||
setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
{chipData.map(data => {
|
||||
|
||||
return (
|
||||
<Chip
|
||||
key={data.key}
|
||||
label={data.label}
|
||||
onDelete={handleDelete(data)}
|
||||
className={classes.chip}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
5
twistter-frontend/src/index.css
Normal file
5
twistter-frontend/src/index.css
Normal file
@@ -0,0 +1,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
@@ -1,11 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
serviceWorker.unregister();
|
||||
@@ -1,60 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
// Material UI stuff
|
||||
import Button from "@material-ui/core/Button";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
// Redux stuff
|
||||
//import { logoutUser } from "../redux/actions/userActions";
|
||||
import { deleteUser } from "../redux/actions/userActions";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 30
|
||||
},
|
||||
pageTitle: {
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
}
|
||||
};
|
||||
|
||||
export class Delete extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
//this.props.logoutUser();
|
||||
this.props.deleteUser();
|
||||
this.props.history.push('/');
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user
|
||||
});
|
||||
|
||||
//const mapActionsToProps = { logoutUser };
|
||||
const mapActionsToProps = { deleteUser };
|
||||
|
||||
Delete.propTypes = {
|
||||
//logoutUser: PropTypes.func.isRequired,
|
||||
deleteUser: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Delete));
|
||||
@@ -1,107 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import axios from 'axios';
|
||||
|
||||
// Material UI and React Router
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
// component
|
||||
import '../App.css';
|
||||
import logo from '../images/twistter-logo.png';
|
||||
import noImage from '../images/no-img.png';
|
||||
import Writing_Microblogs from '../Writing_Microblogs';
|
||||
|
||||
class Home extends Component {
|
||||
state = {};
|
||||
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get("/getallPosts")
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
this.setState({
|
||||
posts: res.data
|
||||
})
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
}
|
||||
|
||||
render() {
|
||||
let authenticated = this.props.user.authenticated;
|
||||
|
||||
let postMarkup = this.state.posts ? (
|
||||
this.state.posts.map(post =>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
{
|
||||
this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
|
||||
(<img src={noImage} height="50" width="50"/>)
|
||||
}
|
||||
</Typography>
|
||||
<Typography variant="h7"><b>{post.userHandle}</b></Typography>
|
||||
<Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
|
||||
<br />
|
||||
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
|
||||
<Typography variant="body2">{post.body}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
) : (<p>My Posts</p>);
|
||||
|
||||
return (
|
||||
authenticated ?
|
||||
<Grid container spacing={16}>
|
||||
<Grid item sm={4} xs={8}>
|
||||
<Writing_Microblogs />
|
||||
</Grid>
|
||||
<Grid item sm={4} xs={8}>
|
||||
{postMarkup}
|
||||
</Grid>
|
||||
</Grid>
|
||||
:
|
||||
<div>
|
||||
<div>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br/><br/>
|
||||
<b>Welcome to Twistter!</b>
|
||||
<br/><br/>
|
||||
<b>See the most interesting topics people are following right now.</b>
|
||||
</div>
|
||||
|
||||
<br/><br/><br/><br/>
|
||||
|
||||
<div>
|
||||
<b>Join today or sign in if you already have an account.</b>
|
||||
<br/><br/>
|
||||
<form action="./signup">
|
||||
<button className="authButtons signup">Sign up</button>
|
||||
</form>
|
||||
<br/>
|
||||
<form action="./login">
|
||||
<button className="authButtons login">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user
|
||||
})
|
||||
|
||||
Home.propTypes = {
|
||||
user: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Home);
|
||||
@@ -1,198 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
// import '../App.css';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import logo from '../images/twistter-logo.png';
|
||||
|
||||
// Material-UI stuff
|
||||
import Button from "@material-ui/core/Button";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
// Redux stuff
|
||||
import { connect } from 'react-redux';
|
||||
import { loginUser } from '../redux/actions/userActions';
|
||||
import { fontFamily } from '@material-ui/system';
|
||||
|
||||
//Theme
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 20
|
||||
},
|
||||
pageTitle: {
|
||||
// marginTop: 20,
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
},
|
||||
p: {
|
||||
fontFamily: "cursive",
|
||||
},
|
||||
div: {
|
||||
backgroundColor: "lightgrey",
|
||||
}
|
||||
};
|
||||
|
||||
export class Login extends Component {
|
||||
// componentDidMount() {
|
||||
// axios
|
||||
// .get("/getProfileInfo")
|
||||
// .then((res) => {
|
||||
// this.setState({
|
||||
// firstName: res.data.firstName,
|
||||
// lastName: res.data.lastName,
|
||||
// email: res.data.email,
|
||||
// handle: res.data.handle,
|
||||
// bio: res.data.bio
|
||||
// });
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error(err);
|
||||
// });
|
||||
// }
|
||||
|
||||
// Constructor for the state
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
email: "",
|
||||
password:"",
|
||||
errors: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.UI.errors) {
|
||||
this.setState({ errors: nextProps.UI.errors });
|
||||
}
|
||||
}
|
||||
|
||||
// Runs whenever the submit button is clicked.
|
||||
// Updates the database entry of the signed in user with the
|
||||
// data stored in the state.
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const loginData = {
|
||||
email: this.state.email,
|
||||
password: this.state.password,
|
||||
};
|
||||
this.props.loginUser(loginData, this.props.history);
|
||||
};
|
||||
|
||||
// Updates the state whenever one of the textboxes changes.
|
||||
// The key is the name of the textbox and the value is the
|
||||
// value in the text box.
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value,
|
||||
errors: {
|
||||
[event.target.name]: null
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes, UI: { loading } } = this.props;
|
||||
const { errors } = this.state;
|
||||
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm />
|
||||
<Grid item sm>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
|
||||
<b><font face="Segoe UI">Log in to Twistter</font></b>
|
||||
<br></br>
|
||||
</Typography>
|
||||
<br></br>
|
||||
<div>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email*"
|
||||
className={classes.textField}
|
||||
value={this.state.email}
|
||||
helperText={errors.email}
|
||||
error={errors.email ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
name="password"
|
||||
label="Password*"
|
||||
className={classes.textField}
|
||||
value={this.state.password}
|
||||
helperText={errors.password}
|
||||
error={errors.password ? true : false}
|
||||
type="password"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
disabled={loading}
|
||||
>
|
||||
Login
|
||||
{loading && (
|
||||
<CircularProgress size={30} className={classes.progress} />
|
||||
)}
|
||||
</Button>
|
||||
{errors.general && (
|
||||
<Typography color="error">Invalid username/email or password</Typography>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Proptypes just confirms that all data in it exists and is of the type that it
|
||||
// is declared to be
|
||||
Login.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
loginUser: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user,
|
||||
UI: state.UI,
|
||||
});
|
||||
|
||||
const mapActionsToProps = {
|
||||
loginUser
|
||||
}
|
||||
|
||||
Login.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
// This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it
|
||||
// The state contains info about the current logged in user
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Login));
|
||||
@@ -1,56 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
// Material UI stuff
|
||||
import Button from "@material-ui/core/Button";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
// Redux stuff
|
||||
import { logoutUser } from "../redux/actions/userActions";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 30
|
||||
},
|
||||
pageTitle: {
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
}
|
||||
};
|
||||
|
||||
export class Logout extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.props.logoutUser();
|
||||
this.props.history.push('/');
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user
|
||||
});
|
||||
|
||||
const mapActionsToProps = { logoutUser };
|
||||
|
||||
Logout.propTypes = {
|
||||
logoutUser: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Logout));
|
||||
@@ -1,74 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
// import props
|
||||
import { TextField, Paper } from "@material-ui/core";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Axios from "axios";
|
||||
import user from "./user.js";
|
||||
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
Link,
|
||||
useRouteMatch
|
||||
} from "react-router-dom";
|
||||
|
||||
export class Search extends Component {
|
||||
state = {
|
||||
searchPhase: null,
|
||||
searchResult: null
|
||||
};
|
||||
|
||||
handleSearch(event) {
|
||||
Axios.get("/getUserHandles").then(res => {
|
||||
this.setState({
|
||||
searchResult: res.data
|
||||
});
|
||||
});
|
||||
console.log(this.state.searchPhase);
|
||||
}
|
||||
|
||||
handleInput(event) {
|
||||
this.setState({
|
||||
searchPhase: event.target.value
|
||||
});
|
||||
this.handleSearch();
|
||||
}
|
||||
|
||||
handleRedirect() {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
render() {
|
||||
let resultMarkup = this.state.searchResult ? (
|
||||
this.state.searchResult.map(result => (
|
||||
<Router>
|
||||
<div>
|
||||
<Link to={`/user`}>{result}</Link>
|
||||
</div>
|
||||
</Router>
|
||||
))
|
||||
) : (
|
||||
// console.log(this.state.searchResult)
|
||||
<p> searching... </p>
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Grid>
|
||||
<TextField
|
||||
id="standard-required"
|
||||
label="Search"
|
||||
defaultValue="username"
|
||||
margin="normal"
|
||||
value={this.state.searchPhase}
|
||||
onChange={event => this.handleInput(event)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid>{resultMarkup}</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Search;
|
||||
@@ -1,215 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
// import '../App.css';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import logo from '../images/twistter-logo.png';
|
||||
|
||||
// Material-UI stuff
|
||||
import Button from "@material-ui/core/Button";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
// Redux stuff
|
||||
import { connect } from 'react-redux';
|
||||
import { signupUser } from '../redux/actions/userActions';
|
||||
import { border } from '@material-ui/system';
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 20,
|
||||
//border: "1px solid #234",
|
||||
display: "inline-block",
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
pageTitle: {
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
},
|
||||
div: {
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "grey",
|
||||
padding: "20px",
|
||||
},
|
||||
p: {
|
||||
fontFamily: "Segoe UI",
|
||||
}
|
||||
};
|
||||
|
||||
export class Signup extends Component {
|
||||
|
||||
// Constructor for the state
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
handle: "",
|
||||
email: "",
|
||||
password:"",
|
||||
confirmPassword: "",
|
||||
errors: {}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.UI.errors) {
|
||||
this.setState({ errors: nextProps.UI.errors });
|
||||
}
|
||||
}
|
||||
|
||||
// Runs whenever the submit button is clicked.
|
||||
// Updates the database entry of the signed in user with the
|
||||
// data stored in the state.
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const signupData = {
|
||||
handle: this.state.handle,
|
||||
email: this.state.email,
|
||||
password: this.state.password,
|
||||
confirmPassword: this.state.confirmPassword
|
||||
};
|
||||
console.log(signupData)
|
||||
this.props.signupUser(signupData, this.props.history);
|
||||
};
|
||||
|
||||
// Updates the state whenever one of the textboxes changes.
|
||||
// The key is the name of the textbox and the value is the
|
||||
// value in the text box.
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value,
|
||||
errors: {
|
||||
[event.target.name]: null
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes, UI: { loading } } = this.props;
|
||||
const { errors } = this.state;
|
||||
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm />
|
||||
<Grid item sm>
|
||||
<img src={logo} className="app-logo" alt="logo" />
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Typography variant="p" className={classes.pageTitle}>
|
||||
<b><font face="Segoe UI">Create a new account</font></b>
|
||||
<br></br>
|
||||
</Typography>
|
||||
<br></br>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<TextField
|
||||
id="handle"
|
||||
name="handle"
|
||||
label="Username*"
|
||||
className={classes.textField}
|
||||
value={this.state.handle}
|
||||
helperText={errors.handle}
|
||||
error={errors.handle ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email*"
|
||||
className={classes.textField}
|
||||
value={this.state.email}
|
||||
helperText={errors.email}
|
||||
error={errors.email ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
name="password"
|
||||
label="Password*"
|
||||
className={classes.textField}
|
||||
value={this.state.password}
|
||||
helperText={errors.password}
|
||||
error={errors.password ? true : false}
|
||||
type="password"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
label="Confirm Password*"
|
||||
className={classes.textField}
|
||||
value={this.state.confirmPassword}
|
||||
helperText={errors.confirmPassword}
|
||||
error={errors.confirmPassword ? true : false}
|
||||
type="password"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
disabled={loading}
|
||||
>
|
||||
Sign Up
|
||||
{loading && (
|
||||
<CircularProgress size={30} className={classes.progress} />
|
||||
)}
|
||||
</Button>
|
||||
{errors.general && (
|
||||
<Typography color="error">Invalid username/email or password</Typography>
|
||||
)}
|
||||
</form>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Proptypes just confirms that all data in it exists and is of the type that it
|
||||
// is declared to be
|
||||
Signup.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
signupUser: PropTypes.func.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user,
|
||||
UI: state.UI,
|
||||
});
|
||||
|
||||
const mapActionsToProps = {
|
||||
signupUser
|
||||
}
|
||||
|
||||
Signup.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
// This mapStateToProps is just synchronizing the 'state' to 'this.props' so we can access it
|
||||
// The state contains info about the current logged in user
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Signup));
|
||||
@@ -1,264 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
import PropTypes from "prop-types";
|
||||
// TODO: Add a read-only '@' in the left side of the handle input
|
||||
// TODO: Add a cancel button, that takes the user back to their profile page
|
||||
|
||||
// Material-UI stuff
|
||||
import Button from "@material-ui/core/Button";
|
||||
import { Link } from 'react-router-dom';
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 30
|
||||
},
|
||||
pageTitle: {
|
||||
// marginTop: 20,
|
||||
marginBottom: 40
|
||||
},
|
||||
button: {
|
||||
positon: "relative",
|
||||
marginBottom: 30
|
||||
},
|
||||
progress: {
|
||||
position: "absolute"
|
||||
}
|
||||
};
|
||||
|
||||
export class edit extends Component {
|
||||
// Runs as soon as the page loads.
|
||||
// Sets the default values of all the textboxes to the data
|
||||
// that is stored in the database for the user.
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get("/getProfileInfo")
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
firstName: res.data.firstName,
|
||||
lastName: res.data.lastName,
|
||||
email: res.data.email,
|
||||
handle: res.data.handle,
|
||||
bio: res.data.bio
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
if (err.response.status === 403) {
|
||||
alert("You are not logged in");
|
||||
// TODO: Redirect them, to the profile they are trying to edit
|
||||
// If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
|
||||
this.props.history.push('../');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Constructor for the state
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
handle: "",
|
||||
bio: "",
|
||||
loading: false,
|
||||
errors: {}
|
||||
};
|
||||
}
|
||||
|
||||
// Runs whenever the submit button is clicked.
|
||||
// Updates the database entry of the signed in user with the
|
||||
// data stored in the state.
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
const newProfileData = {
|
||||
firstName: this.state.firstName,
|
||||
lastName: this.state.lastName,
|
||||
email: this.state.email,
|
||||
handle: this.state.handle,
|
||||
bio: this.state.bio
|
||||
};
|
||||
|
||||
// Removes all keys from newProfileData that are empty, undefined, or null
|
||||
Object.keys(newProfileData).forEach(key => {
|
||||
if (newProfileData[key] === "" || newProfileData[key] === undefined || newProfileData[key] === null) {
|
||||
delete newProfileData[key];
|
||||
}
|
||||
})
|
||||
|
||||
axios
|
||||
.post("/updateProfileInfo", newProfileData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.setState({
|
||||
loading: false
|
||||
});
|
||||
// this.props.history.push('/');
|
||||
// TODO: Need to redirect user to their profile page
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
this.setState({
|
||||
errors: err.response.data,
|
||||
loading: false
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Updates the state whenever one of the textboxes changes.
|
||||
// The key is the name of the textbox and the value is the
|
||||
// value in the text box.
|
||||
// Also sets errors to null of textboxes that have been edited
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value,
|
||||
errors: {
|
||||
[event.target.name]: null
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { errors, loading } = this.state;
|
||||
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm />
|
||||
<Grid item sm>
|
||||
<Typography variant="h2" className={classes.pageTitle}>
|
||||
Edit Profile
|
||||
</Typography>
|
||||
<form noValidate onSubmit={this.handleSubmit}>
|
||||
<Grid container className={classes.form} spacing={4}>
|
||||
<Grid item sm>
|
||||
<TextField
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
label="First Name"
|
||||
className={classes.textField}
|
||||
value={this.state.firstName}
|
||||
helperText={errors.firstName}
|
||||
error={errors.firstName ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<TextField
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
className={classes.textField}
|
||||
value={this.state.lastName}
|
||||
helperText={errors.lastname}
|
||||
error={errors.lastName ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email*"
|
||||
className={classes.textField}
|
||||
value={this.state.email}
|
||||
disabled
|
||||
helperText="(disabled)"
|
||||
// INFO: These will be uncommented if changing emails is allowed
|
||||
// helperText={errors.email}
|
||||
// error={errors.email ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="handle"
|
||||
name="handle"
|
||||
label="Handle*"
|
||||
className={classes.textField}
|
||||
value={this.state.handle}
|
||||
disabled
|
||||
helperText="(disabled)"
|
||||
// INFO: These will be uncommented if changing usernames is allowed
|
||||
// helperText={errors.handle}
|
||||
// error={errors.handle ? true : false}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="bio"
|
||||
name="bio"
|
||||
label="Bio"
|
||||
className={classes.textField}
|
||||
value={this.state.bio}
|
||||
helperText={errors.bio}
|
||||
error={errors.bio ? true : false}
|
||||
multiline
|
||||
rows="8"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
disabled={loading}
|
||||
//component={ Link }
|
||||
//to='/user'
|
||||
>
|
||||
Submit
|
||||
{loading && (
|
||||
<CircularProgress size={30} className={classes.progress} />
|
||||
)}
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
//variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
component={ Link }
|
||||
to='/user'
|
||||
>
|
||||
Back to Profile
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
className={classes.button}
|
||||
component={ Link }
|
||||
to='/delete'
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
</form>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
edit.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(edit);
|
||||
@@ -1,191 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import axios from 'axios';
|
||||
//import '../App.css';
|
||||
|
||||
// Material UI and React Router
|
||||
import { makeStyles, styled } from "@material-ui/core/styles";
|
||||
import { Link } from 'react-router-dom';
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
|
||||
import Chip from "@material-ui/core/Chip";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import AddCircle from "@material-ui/icons/AddCircle";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
|
||||
// component
|
||||
import '../App.css';
|
||||
import noImage from '../images/no-img.png';
|
||||
import Writing_Microblogs from '../Writing_Microblogs';
|
||||
const MyChip = styled(Chip)({
|
||||
margin: 2,
|
||||
color: "primary"
|
||||
});
|
||||
|
||||
class user extends Component {
|
||||
state = {
|
||||
profile: null,
|
||||
imageUrl: null,
|
||||
topics: null,
|
||||
newTopic: null
|
||||
};
|
||||
|
||||
handleDelete = topic => {
|
||||
axios
|
||||
.delete(`/deleteTopic/${topic.id}`)
|
||||
.then(function() {
|
||||
location.reload();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
handleAddCircle = () => {
|
||||
axios
|
||||
.post("/putTopic", {
|
||||
topic: this.state.newTopic
|
||||
})
|
||||
.then(function() {
|
||||
location.reload();
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
handleChange(event) {
|
||||
this.setState({
|
||||
newTopic: event.target.value
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get("/user")
|
||||
.then(res => {
|
||||
this.setState({
|
||||
profile: res.data.credentials.handle,
|
||||
imageUrl: res.data.credentials.imageUrl
|
||||
});
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
|
||||
axios
|
||||
.get("/getAllTopics")
|
||||
.then(res => {
|
||||
this.setState({
|
||||
topics: res.data
|
||||
});
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
|
||||
axios
|
||||
.get("/getallPostsforUser")
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
this.setState({
|
||||
posts: res.data
|
||||
})
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
}
|
||||
|
||||
render() {
|
||||
let authenticated = this.props.user.authenticated;
|
||||
let classes = this.props;
|
||||
let profileMarkup = this.state.profile ? (
|
||||
<p>
|
||||
<Typography variant='h5'>{this.state.profile}</Typography>
|
||||
</p>) : (<p>loading username...</p>);
|
||||
let topicsMarkup = this.state.topics ? (
|
||||
this.state.topics.map(
|
||||
topic => (
|
||||
<MyChip
|
||||
label={{ topic }.topic.topic}
|
||||
key={{ topic }.topic.id}
|
||||
onDelete={key => this.handleDelete(topic)}
|
||||
/>
|
||||
) // console.log({ topic }.topic.id)
|
||||
)
|
||||
) : (
|
||||
<p> loading topics...</p>
|
||||
);
|
||||
|
||||
let imageMarkup = this.state.imageUrl ? (<img src={this.state.imageUrl} height="150" width="150" />) :
|
||||
(<img src={noImage} height="150" width="150"/>);
|
||||
|
||||
let postMarkup = this.state.posts ? (
|
||||
this.state.posts.map(post =>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
{
|
||||
this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
|
||||
(<img src={noImage} height="50" width="50"/>)
|
||||
}
|
||||
</Typography>
|
||||
<Typography variant="h7"><b>{post.userHandle}</b></Typography>
|
||||
<Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
|
||||
<br />
|
||||
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
|
||||
<Typography variant="body2">{post.body}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
) : (<p>My Posts</p>);
|
||||
|
||||
return (
|
||||
<Grid container spacing={24}>
|
||||
<Grid item sm={4} xs={8}>
|
||||
{imageMarkup}
|
||||
{profileMarkup}
|
||||
{topicsMarkup}
|
||||
<TextField
|
||||
id="newTopic"
|
||||
label="new topic"
|
||||
defaultValue=""
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={this.state.newTopic}
|
||||
onChange={(event) => this.handleChange(event)}
|
||||
/>
|
||||
<AddCircle
|
||||
color="primary"
|
||||
clickable
|
||||
onClick={this.handleAddCircle}
|
||||
/>
|
||||
<br />
|
||||
{authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>}
|
||||
</Grid>
|
||||
<Grid item sm={4} xs={8}>
|
||||
{postMarkup}
|
||||
</Grid>
|
||||
<Grid item sm={4} xs={8}>
|
||||
<Writing_Microblogs />
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
user: state.user
|
||||
})
|
||||
|
||||
user.propTypes = {
|
||||
user: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(user);
|
||||
@@ -1,88 +0,0 @@
|
||||
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
export const getUserData = () => (dispatch) => {
|
||||
axios.get('/user')
|
||||
.then((res) => {
|
||||
dispatch({
|
||||
type: SET_USER,
|
||||
payload: res.data,
|
||||
})
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
}
|
||||
|
||||
export const loginUser = (loginData, history) => (dispatch) => {
|
||||
dispatch({ type: LOADING_UI });
|
||||
axios
|
||||
.post("/login", loginData)
|
||||
.then((res) => {
|
||||
// Save the login token
|
||||
setAuthorizationHeader(res.data.token);
|
||||
dispatch(getUserData());
|
||||
dispatch({ type: CLEAR_ERRORS })
|
||||
// Redirects to home page
|
||||
history.push('/home');
|
||||
})
|
||||
.catch((err) => {
|
||||
dispatch ({
|
||||
type: SET_ERRORS,
|
||||
payload: err.response.data,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const signupUser = (newUserData, history) => (dispatch) => {
|
||||
dispatch({ type: LOADING_UI });
|
||||
axios
|
||||
.post("/signup", newUserData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
console.log(res.data);
|
||||
// Save the signup token
|
||||
setAuthorizationHeader(res.data.token);
|
||||
dispatch(getUserData());
|
||||
dispatch({ type: CLEAR_ERRORS })
|
||||
// Redirects to home page
|
||||
history.push('/home');
|
||||
})
|
||||
.catch((err) => {
|
||||
dispatch ({
|
||||
type: SET_ERRORS,
|
||||
payload: err.response.data,
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
export const logoutUser = () => (dispatch) => {
|
||||
localStorage.removeItem('FBIdToken');
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
dispatch({ type: SET_UNAUTHENTICATED });
|
||||
}
|
||||
|
||||
export const deleteUser = () => (dispatch) => {
|
||||
axios
|
||||
.delete("/delete")
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
console.log("User account successfully deleted.");
|
||||
}
|
||||
)
|
||||
.catch((err) => {
|
||||
dispatch ({
|
||||
type: SET_ERRORS,
|
||||
payload: err.response.data,
|
||||
})
|
||||
});
|
||||
|
||||
localStorage.removeItem('FBIdToken');
|
||||
delete axios.defaults.headers.common['Authorization'];
|
||||
dispatch({ type: SET_UNAUTHENTICATED });
|
||||
}
|
||||
|
||||
const setAuthorizationHeader = (token) => {
|
||||
const FBIdToken = `Bearer ${token}`;
|
||||
localStorage.setItem('FBIdToken', FBIdToken);
|
||||
axios.defaults.headers.common['Authorization'] = FBIdToken;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { SET_ERRORS, CLEAR_ERRORS, LOADING_UI } from '../types';
|
||||
|
||||
const initialState = {
|
||||
loading: false,
|
||||
errors: null
|
||||
};
|
||||
|
||||
export default function(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case SET_ERRORS:
|
||||
return {
|
||||
...state,
|
||||
loading: false,
|
||||
errors: action.payload
|
||||
};
|
||||
case CLEAR_ERRORS:
|
||||
return {
|
||||
...state,
|
||||
loading: false,
|
||||
errors: null
|
||||
};
|
||||
case LOADING_UI:
|
||||
return {
|
||||
...state,
|
||||
loading: true
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
|
||||
|
||||
const initialState = {
|
||||
authenticated: false,
|
||||
credentials: {},
|
||||
likes: [],
|
||||
notifications: []
|
||||
};
|
||||
|
||||
export default function(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case SET_AUTHENTICATED:
|
||||
return {
|
||||
...state,
|
||||
authenticated: true,
|
||||
|
||||
};
|
||||
case SET_UNAUTHENTICATED:
|
||||
return initialState;
|
||||
case SET_USER:
|
||||
return {
|
||||
authenticated: true,
|
||||
...action.payload,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { createStore, combineReducers, applyMiddleware, compose } from "redux";
|
||||
import thunk from "redux-thunk";
|
||||
|
||||
import userReducer from "./reducers/userReducer";
|
||||
import dataReducer from "./reducers/dataReducer";
|
||||
import uiReducer from "./reducers/uiReducer";
|
||||
|
||||
const initialState = {};
|
||||
|
||||
const middleWare = [thunk];
|
||||
|
||||
const reducers = combineReducers({
|
||||
user: userReducer,
|
||||
data: dataReducer,
|
||||
UI: uiReducer
|
||||
});
|
||||
|
||||
|
||||
const store = createStore(
|
||||
reducers,
|
||||
initialState,
|
||||
compose(
|
||||
applyMiddleware(...middleWare),
|
||||
window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f // Can be removed after debugging is finished
|
||||
)
|
||||
);
|
||||
|
||||
export default store;
|
||||
@@ -1,12 +0,0 @@
|
||||
// User reducer types
|
||||
export const SET_AUTHENTICATED = 'SET_AUTHENTICATED';
|
||||
export const SET_UNAUTHENTICATED = 'SET_UNAUTHENTICATED';
|
||||
export const SET_USER = 'SET_USER';
|
||||
export const LOADING_USER = 'LOADING_USER';
|
||||
|
||||
// UI reducer types
|
||||
export const SET_ERRORS = 'SET_ERRORS';
|
||||
export const LOADING_UI = 'LOADING_UI';
|
||||
export const CLEAR_ERRORS = 'CLEAR_ERRORS';
|
||||
|
||||
// Data reducer types
|
||||
@@ -1,135 +0,0 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
@@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Route, Redirect } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
|
||||
<Route
|
||||
{...rest}
|
||||
render={(props) =>
|
||||
authenticated === true ? <Redirect to="/home" /> : <Component {...props} />
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
authenticated: state.user.authenticated
|
||||
});
|
||||
|
||||
AuthRoute.propTypes = {
|
||||
user: PropTypes.object
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(AuthRoute);
|
||||
@@ -1,77 +0,0 @@
|
||||
/* eslint-disable */
|
||||
import React, { Fragment } from 'react';
|
||||
import NoImg from '../images/no-img.png';
|
||||
import PropTypes from 'prop-types';
|
||||
// MUI
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
|
||||
import withStyles from '@material-ui/core/styles/withStyles';
|
||||
|
||||
const styles = (theme) => ({
|
||||
...theme,
|
||||
card: {
|
||||
display: 'flex',
|
||||
marginBottom: 20
|
||||
},
|
||||
cardContent: {
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
padding: 25
|
||||
},
|
||||
cover: {
|
||||
minWidth: 200,
|
||||
objectFit: 'cover'
|
||||
},
|
||||
handle: {
|
||||
width: 60,
|
||||
height: 18,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
marginBottom: 7
|
||||
},
|
||||
date: {
|
||||
height: 14,
|
||||
width: 100,
|
||||
backgroundColor: 'rgba(0,0,0, 0.3)',
|
||||
marginBottom: 10
|
||||
},
|
||||
fullLine: {
|
||||
height: 15,
|
||||
width: '90%',
|
||||
backgroundColor: 'rgba(0,0,0, 0.6)',
|
||||
marginBottom: 10
|
||||
},
|
||||
halfLine: {
|
||||
height: 15,
|
||||
width: '50%',
|
||||
backgroundColor: 'rgba(0,0,0, 0.6)',
|
||||
marginBottom: 10
|
||||
}
|
||||
});
|
||||
|
||||
const PostSkeleton = (props) => {
|
||||
const { classes } = props;
|
||||
|
||||
const content = Array.from({ length: 5 }).map((item, index) => (
|
||||
<Card className={classes.card} key={index}>
|
||||
<CardMedia className={classes.cover} image={NoImg} />
|
||||
<CardContent className={classes.cardContent}>
|
||||
<div className={classes.handle} />
|
||||
<div className={classes.date} />
|
||||
<div className={classes.fullLine} />
|
||||
<div className={classes.fullLine} />
|
||||
<div className={classes.halfLine} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
));
|
||||
|
||||
return <Fragment>{content}</Fragment>;
|
||||
};
|
||||
|
||||
PostSkeleton.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(PostSkeleton);
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import withStyles from '@material-ui/core/styles/withStyles';
|
||||
import NoImg from '../images/no-img.png';
|
||||
// MUI
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
// Icons
|
||||
import LocationOn from '@material-ui/icons/LocationOn';
|
||||
import LinkIcon from '@material-ui/icons/Link';
|
||||
import CalendarToday from '@material-ui/icons/CalendarToday';
|
||||
|
||||
const styles = (theme) => ({
|
||||
...theme,
|
||||
handle: {
|
||||
height: 20,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
width: 60,
|
||||
margin: '0 auto 7px auto'
|
||||
},
|
||||
fullLine: {
|
||||
height: 15,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
width: '100%',
|
||||
marginBottom: 10
|
||||
},
|
||||
halfLine: {
|
||||
height: 15,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
width: '50%',
|
||||
marginBottom: 10
|
||||
}
|
||||
});
|
||||
|
||||
const ProfileSkeleton = (props) => {
|
||||
const { classes } = props;
|
||||
return (
|
||||
<Paper className={classes.paper}>
|
||||
<div className={classes.profile}>
|
||||
<div className="image-wrapper">
|
||||
<img src={NoImg} alt="profile" className="profile-image" />
|
||||
</div>
|
||||
<hr />
|
||||
<div className="profile-details">
|
||||
<div className={classes.handle} />
|
||||
<hr />
|
||||
<div className={classes.fullLine} />
|
||||
<div className={classes.fullLine} />
|
||||
<hr />
|
||||
<LocationOn color="primary" /> <span>Location</span>
|
||||
<hr />
|
||||
<LinkIcon color="primary" /> https://website.com
|
||||
<hr />
|
||||
<CalendarToday color="primary" /> Joined date
|
||||
</div>
|
||||
</div>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileSkeleton.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ProfileSkeleton);
|
||||
@@ -1,103 +0,0 @@
|
||||
export default {
|
||||
palette: {
|
||||
primary: {
|
||||
light: '#1da1f2',
|
||||
main: '#1da1f2',
|
||||
dark: '#008394',
|
||||
contrastText: '#fff'
|
||||
},
|
||||
secondary: {
|
||||
light: '#ff6333',
|
||||
main: '#ff3d00',
|
||||
dark: '#b22a00',
|
||||
contrastText: '#fff'
|
||||
}
|
||||
},
|
||||
typography: {
|
||||
useNextVariants: true
|
||||
},
|
||||
form: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
image: {
|
||||
margin: '20px auto 20px auto'
|
||||
},
|
||||
pageTitle: {
|
||||
margin: '10px auto 10px auto'
|
||||
},
|
||||
textField: {
|
||||
margin: '10px auto 10px auto'
|
||||
},
|
||||
button: {
|
||||
marginTop: 20,
|
||||
position: 'relative'
|
||||
},
|
||||
customError: {
|
||||
color: 'red',
|
||||
fontSize: '0.8rem',
|
||||
marginTop: 10
|
||||
},
|
||||
progress: {
|
||||
position: 'absolute'
|
||||
},
|
||||
invisibleSeparator: {
|
||||
border: 'none',
|
||||
margin: 4
|
||||
},
|
||||
visibleSeparator: {
|
||||
width: '100%',
|
||||
borderBottom: '1px solid rgba(0,0,0,0.1)',
|
||||
marginBottom: 20
|
||||
},
|
||||
paper: {
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexWrap: 'wrap'
|
||||
},
|
||||
chip: {
|
||||
margin: 0.5,
|
||||
},
|
||||
profile: {
|
||||
'& .image-wrapper': {
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
'& button': {
|
||||
position: 'absolute',
|
||||
top: '80%',
|
||||
left: '70%'
|
||||
}
|
||||
},
|
||||
'& .profile-image': {
|
||||
width: 200,
|
||||
height: 200,
|
||||
objectFit: 'cover',
|
||||
maxWidth: '100%',
|
||||
borderRadius: '50%'
|
||||
},
|
||||
'& .profile-details': {
|
||||
textAlign: 'center',
|
||||
'& span, svg': {
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
'& a': {
|
||||
color: '#00bcd4'
|
||||
}
|
||||
},
|
||||
'& hr': {
|
||||
border: 'none',
|
||||
margin: '0 0 10px 0'
|
||||
},
|
||||
'& svg.button': {
|
||||
'&:hover': {
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
},
|
||||
buttons: {
|
||||
textAlign: 'center',
|
||||
'& a': {
|
||||
margin: '20px 10px'
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user