add button on profile to upload profile background (#48)

Co-authored-by: Aevann1 <randomname42029@gmail.com>
Reviewed-on: #48
Co-authored-by: Aevann <aevann@noreply.fsdfsd.net>
Co-committed-by: Aevann <aevann@noreply.fsdfsd.net>

files/classes/user.py

@@ -44,6 +44,7 @@ class User(Base):
 	username = Column(String)
 	namecolor = Column(String, default=DEFAULT_COLOR)
 	background = Column(String)
+	profile_background = Column(String)
 	customtitle = Column(String)
 	customtitleplain = deferred(Column(String))
 	titlecolor = Column(String, default=DEFAULT_COLOR)

files/routes/settings.py

@@ -73,6 +73,28 @@ def upload_custom_background(v):
 
 	return redirect('/settings/personal')
 
+@app.post('/settings/profile_background')
+@limiter.limit(DEFAULT_RATELIMIT_SLOWER)
+@auth_required
+@ratelimit_user()
+def upload_profile_background(v):
+	if g.is_tor: abort(403, "Image uploads are not allowed through TOR.")
+
+	file = request.files["file"]
+
+	name = f'/images/{time.time()}'.replace('.','') + '.webp'
+	file.save(name)
+	background = process_image(name, v)
+
+	if background:
+		if v.profile_background:
+			fpath = '/images/' + v.profile_background.split('/images/')[1]
+			if path.isfile(fpath): os.remove(fpath)
+		v.profile_background = background
+		g.db.add(v)
+		badge_grant(badge_id=193, user=v)
+	return redirect(f'/@{v.username}')
+
 @app.post("/settings/personal")
 @limiter.limit(DEFAULT_RATELIMIT_SLOWER)
 @auth_required

files/templates/settings/personal.html

@@ -71,7 +71,7 @@
 									{% if v.background and v.background.startswith('/images/') %}
 										{{v.background}}
 									{% else %}
-										Upload Custom Background
+										Upload custom site background
 									{% endif %}
 								</label>
 								<input autocomplete="off" id="upload-custom-background-file" accept="image/*", type="file" name="file" onchange="this.form.submit()" hidden>
@@ -80,7 +80,7 @@
 								<div class="d-flex mb-3">
 									<button type="button" class="btn btn-danger" onclick="postToastReload(this,'/settings/background', 'DELETE')">
 										<i class="fas fa-image-slash mr-1"></i>
-										Remove Current Background
+										Remove current background
 									</button>
 								</div>
 							{% endif %}

files/templates/userpage/userpage.html

@@ -2,6 +2,13 @@
 {% block pagetype %}userpage{% endblock %}
 {% block pagetitle %}@{{u.username}}'s profile{% endblock %}
 {% block head_final %}
+	{% if u.profile_background %}
+		<style>
+			body {
+				background-image: url('{{u.profile_background}}') !important;
+			}
+		</style>
+	{% endif %}
 	{% if u and u.profilecss and not request.values.get('nocss') %}
 		<link rel="stylesheet" href="/{{u.id}}/profilecss">
 	{% endif %}
@@ -190,6 +197,19 @@
 					<div class="actionbtns">
 						{% if v and v.id == u.id %}
 							<a href="/settings/personal" class="btn btn-secondary">Edit profile</a>
+
+							<form id="upload-profile-background" action="/settings/profile_background" method="post" enctype="multipart/form-data"> 
+								<input type="hidden" name="formkey" value="{{v|formkey}}">
+								<label class="format btn btn-primary" for="upload-profile-background-file" style="margin-bottom:0!important">
+									<i class="fas fa-image mr-1"></i> 
+									{% if v.profile_background %}
+										{{v.profile_background}}
+									{% else %}
+										Upload custom profile background
+									{% endif %}
+								</label>
+								<input autocomplete="off" id="upload-profile-background-file" accept="image/*", type="file" name="file" onchange="this.form.submit()" hidden>
+							</form>
 						{% endif %}
 
 						{% if FEATURES['USERS_PROFILE_SONG'] and u.song and v and (v.id == u.id or v.mute and not u.unmutable) %}
@@ -388,6 +408,19 @@
 				<div class="actionbtns">
 					{% if v and v.id == u.id %}
 						<a href="/settings/personal" class="btn btn-secondary ">Edit profile</a>
+
+						<form id="upload-profile-background-mobile" action="/settings/profile_background" method="post" enctype="multipart/form-data"> 
+							<input type="hidden" name="formkey" value="{{v|formkey}}">
+							<label class="format btn btn-primary" for="upload-profile-background-file-mobile" style="margin-bottom:0!important">
+								<i class="fas fa-image mr-1"></i> 
+								{% if v.profile_background %}
+									{{v.profile_background}}
+								{% else %}
+									Upload custom profile background
+								{% endif %}
+							</label>
+							<input autocomplete="off" id="upload-profile-background-file-mobile" accept="image/*", type="file" name="file" onchange="this.form.submit()" hidden>
+						</form>
 					{% endif %}
 
 					{% if FEATURES['USERS_PROFILE_SONG'] and u.song and v and (v.id == u.id or v.mute and not u.unmutable) %}

migrations/20221205-profile-background.sql

@@ -0,0 +1 @@
+alter table users add column profile_background varchar(30);

schema.sql

@@ -981,7 +981,8 @@ CREATE TABLE public.users (
     highres character varying(60),
     patron integer DEFAULT 0 NOT NULL,
     controversial boolean DEFAULT false NOT NULL,
-    background character varying(20),
+    background character varying(30),
+    profile_background character varying(30),
     verified character varying(100),
     cardview boolean NOT NULL,
     received_award_count integer DEFAULT 0 NOT NULL,
@@ -2720,4 +2721,3 @@ ALTER TABLE ONLY public.comment_option_votes
 --
 -- PostgreSQL database dump complete
 --
-