Dodani avatarji in stran z nastavitvami.
This commit is contained in:
2
app.js
2
app.js
@ -4,6 +4,7 @@ var path = require('path');
|
||||
var cookieParser = require('cookie-parser');
|
||||
var bodyParser = require('body-parser');
|
||||
var logger = require('morgan');
|
||||
const fileUpload = require('express-fileupload');
|
||||
|
||||
var indexRouter = require('./routes/index');
|
||||
var usersRouter = require('./routes/user');
|
||||
@ -27,6 +28,7 @@ app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
app.use(cookieParser());
|
||||
app.use(bodyParser.urlencoded({ extended: true }));
|
||||
app.use(fileUpload());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
app.use('/', indexRouter);
|
||||
|
@ -16,7 +16,9 @@ module.exports = (sequelize, DataTypes) => {
|
||||
User.init({
|
||||
name: DataTypes.STRING,
|
||||
password: DataTypes.STRING,
|
||||
email: DataTypes.STRING
|
||||
email: DataTypes.STRING,
|
||||
avatar: DataTypes.BLOB,
|
||||
bio: DataTypes.STRING
|
||||
}, {
|
||||
sequelize,
|
||||
modelName: 'User',
|
||||
|
4104
package-lock.json
generated
4104
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -7,10 +7,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"body-parser": "^1.19.1",
|
||||
"connect-busboy": "^1.0.0",
|
||||
"cookie-parser": "~1.4.4",
|
||||
"debug": "~2.6.9",
|
||||
"ejs": "~2.6.1",
|
||||
"express": "~4.16.1",
|
||||
"express-busboy": "^8.0.0",
|
||||
"express-fileupload": "^1.3.1",
|
||||
"http-errors": "~1.6.3",
|
||||
"morgan": "~1.9.1",
|
||||
"sequelize": "^6.15.0",
|
||||
|
@ -5,7 +5,7 @@ var User = db.User;
|
||||
var lib = require('../lib');
|
||||
|
||||
/* GET users listing. */
|
||||
router.get('/:username', async function(req, res, next) {
|
||||
router.get('/profile/:username', async function(req, res, next) {
|
||||
var test = 123;
|
||||
var sessionId = req.cookies.sessionid;
|
||||
var search = req.params.username;
|
||||
@ -29,4 +29,46 @@ router.get('/:username', async function(req, res, next) {
|
||||
|
||||
});
|
||||
|
||||
router.get('/settings', async function(req, res, next) {
|
||||
var sessionId = req.cookies.sessionid;
|
||||
var auth = await lib.getAuthUser(sessionId);
|
||||
if(auth) {
|
||||
res.render('settings', { auth:auth });
|
||||
} else {
|
||||
res.redirect('/login');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
router.post('/settings', async function(req, res, next) {
|
||||
var sessionId = req.cookies.sessionid;
|
||||
var auth = await lib.getAuthUser(sessionId);
|
||||
if(auth) {
|
||||
console.log(req);
|
||||
console.log(req.files);
|
||||
await auth.update({
|
||||
'bio': req.body.bio,
|
||||
'avatar': req.files.avatar.data,
|
||||
});
|
||||
res.redirect('/user/settings');
|
||||
} else {
|
||||
res.redirect('/login');
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/avatar/:id', async function(req, res, next) {
|
||||
var user = await db.User.findOne({
|
||||
where: {
|
||||
id: req.params.id
|
||||
}
|
||||
});
|
||||
res.contentType('image/png');
|
||||
if(user.avatar) {
|
||||
res.end(Buffer.from(user.avatar.buffer, 'base64'));
|
||||
} else {
|
||||
res.send();
|
||||
}
|
||||
//res.send(user.avatar.buffer);
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
|
||||
<div class="mr-4 flex-shrink-0">
|
||||
<img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md">
|
||||
<img src="/user/avatar/<%- messages[i].User.id %>" alt="<%= auth.name %>" class="rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
|
||||
<div class="mr-4 flex-shrink-0">
|
||||
<img src="/images/avatar_48.png" alt="<%= user.name %>" class="rounded-md">
|
||||
<img src="/user/avatar/<%- user.id %>" alt="<%= user.name %>" class="rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
|
144
views/settings.ejs
Normal file
144
views/settings.ejs
Normal file
@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="dark">
|
||||
|
||||
<head>
|
||||
<title>Social Robot</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/stylesheets/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
|
||||
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body class="bg-white dark:bg-gray-800 dark:text-white">
|
||||
<div class="lg:px-24 mx-auto">
|
||||
|
||||
<div class="lg:flex justify-center">
|
||||
<div class="lg:w-72 lg:overflow-y-hidden">
|
||||
<form method="GET">
|
||||
<div class="relative text-gray-600 focus-within:text-gray-400">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
|
||||
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
viewBox="0 0 24 24" class="w-6 h-6">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<input type="search" name="q"
|
||||
class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
|
||||
placeholder="Search..." autocomplete="off">
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex items-center justify-between mt-5">
|
||||
<div class="flex items-center">
|
||||
<img src="/images/avatar_48.png" alt="<%= auth.name %>" class="rounded-md mr-2">
|
||||
<div>
|
||||
<div class="w-full font-bold text-sm"><%= auth.name %></div>
|
||||
<div class="w-full text-sm text-gray-400"><%= auth.email %></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" data-dropdown-toggle="dropdown" id="profileDropdownButton" class="bg-gray-700 rounded-md mx-2 px-2 focus:text-blue-400 text-lg font-bold" aria-expanded="true" aria-haspopup="true"><i class="fa fa-angle-down"></i></button>
|
||||
|
||||
<!-- This is an example component -->
|
||||
<div class="max-w-lg mx-auto">
|
||||
<!-- Dropdown menu -->
|
||||
<div class="hidden dark:bg-gray-700 dark:text-white z-50 list-none divide-y divide-gray-100 rounded-md shadow my-4" id="dropdown">
|
||||
<ul class="py-1" aria-labelledby="dropdown">
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Earnings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm hover:bg-gray-600 text-white block px-3 py-1">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/scripts/flowbite.js"></script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-5">
|
||||
<form method="POST" action="/message/add">
|
||||
<textarea
|
||||
class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
|
||||
name="body" id="body" cols="20" placeholder="What's on your mind?"></textarea>
|
||||
<hr class="my-4">
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline font-bold"
|
||||
type="submit">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="lg:flex-1 lg:mx-3 max-w-xl min-w-md dark:bg-gray-600 dark:text-white scrollbar-thin scrollbar-thumb-gray-900 scrollbar-track-gray-700 overflow-y-scroll">
|
||||
<div class="lg:h-screen">
|
||||
<div class="bg-gray-900 text-white p-4 flex justify-between w-full z-50"">
|
||||
<div><i class=" fa fa-home mr-2"></i>Home</div>
|
||||
<div><i class="fa fa-sliders"></i></div>
|
||||
</div>
|
||||
<div class="max-h-40 overflow-y-hidden align-bottom">
|
||||
<img class="object-none object-center" src="/images/19187755.jpg" alt="paralax">
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
|
||||
<img src="/images/avatar_94.png" alt="<%= auth.name %>" class="rounded-md overflow-visible">
|
||||
</div>
|
||||
<div class="flex items-center pt-3 px-2 mx-2">
|
||||
<button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
|
||||
type="submit">Follow</button>
|
||||
<button
|
||||
class="bg-gray-600 border border-b-gray-400 py-2 px-5 rounded-md focus:outline-none focus:shadow-outline shadow-xl"
|
||||
type="submit"><i class="fa fa-ellipsis-v"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<h4 class="font-bold"><%= auth.name %></h4>
|
||||
<p class="text-sm text-gray-400"><%= auth.email %></p>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400 mt-3">
|
||||
<p>Joined <%= auth.createdAt %></p>
|
||||
<div class="flex">
|
||||
<div class="pr-5"><span class="text-white">12</span> Posts</div>
|
||||
<div class="pr-5"><span class="text-white">3</span> Following</div>
|
||||
<div class="pr-5"><span class="text-white">7</span> Followers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- dodaj -->
|
||||
<div class="p-4">
|
||||
<form action="/user/settings" method="POST" enctype="multipart/form-data">
|
||||
<input type="file" name="avatar" id="">
|
||||
<br><br>
|
||||
<textarea
|
||||
class="w-full h-36 p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900 text-sm"
|
||||
name="bio" id="body" cols="20" placeholder="A little bit about me"><%= auth.bio%></textarea>
|
||||
<button
|
||||
class="place-content-end bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline font-bold"
|
||||
type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('partials/_sidebar_menu.ejs') %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Reference in New Issue
Block a user