From bfb09cf59da569cc06c80724525894322115d8c4 Mon Sep 17 00:00:00 2001
From: Stian <Stian.ba@hotmail.com>
Date: Fri, 4 Jun 2021 00:06:18 +0200
Subject: [PATCH] Added links to users and color

---
 README.md                |  1 +
 app.py                   | 17 +++++---
 schema.sql               |  2 -
 static/components.js     | 37 ++++++++---------
 static/formcomponents.js |  9 +++--
 static/style.css         | 85 +++++++---------------------------------
 static/subcomponents.js  | 15 ++++---
 7 files changed, 59 insertions(+), 107 deletions(-)

diff --git a/README.md b/README.md
index 12aff0a..9de02d5 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ Start the application by running `app.py` in the `Exam_code` folder.
   * If a user tries to register and fails a specification e.g. password too short or etc., the server sends a JSON with all errors that the user must fix to register.
   * Users may be choose to delete their account and subsequently all information about this user will be deleted.
   * Users can change their username and Bio, Changes still gets checked for the same criteria as when a user is created.
+  * Users can change the color of elements in their own page.
 
 - Projects:
   * Users that register with a github username will automatically get all their public repos' information into the application. The app will update the information if their userpage is visited and it has been at least 10 minutes since last time the information was updated. This is done by using the github API.
diff --git a/app.py b/app.py
index 02a0189..a5cb9af 100644
--- a/app.py
+++ b/app.py
@@ -101,7 +101,13 @@ def users():
         username = request.form.get("username","").strip().lower()
         password = request.form.get("password","")
         bio = request.form.get("bio","").strip()
-        github = request.form.get("github","")
+        github = request.form.get("github","").strip() 
+        email = request.form.get("email","").strip()
+        twitter = request.form.get("twitter","").strip()
+
+        print(email)
+        print(twitter)
+       
 
         errors = validate_input(username, password)
         
@@ -113,7 +119,7 @@ def users():
             try:
                 # Insert user
                 hash = generate_password_hash(password)
-                query_db("INSERT INTO users (username, passwordhash, bio, github, timestamp) VALUES (?,?,?,?, datetime('now', 'localtime'))", get_db(), username, hash, bio, github)
+                query_db("INSERT INTO users (username, passwordhash, bio, github, twitter, email, timestamp) VALUES (?,?,?,?, ?, ?,datetime('now', 'localtime'))", get_db(), username, hash, bio, github, twitter, email)
                 userid = query_db("SELECT MAX(ID) FROM users", get_db(), one=True)[0]
             except sqlite3.IntegrityError:
                 errors.append("Username is already taken")
@@ -175,17 +181,19 @@ def user(userid):
             for error in validate_bio(bio):
                 errors.append(error)
 
+            color = request.form.get("color")
+
             if len(errors) == 0:
                 # Check if different username
                 if username != query_db("select username from users WHERE id=?", get_db(), session.get("userid"), one=True)[0]:
                     # Check if username is taken
                     taken = query_db("select count(username) FROM users WHERE username=?;", get_db(), username, one=True)
                     if taken[0] == 0:
-                        query_db("UPDATE users SET username=?, bio=? WHERE id = ?;", get_db(), username, bio, userid, one=True)
+                        query_db("UPDATE users SET username=?, bio=?, color=? WHERE id = ?;", get_db(), username, bio, color, userid, one=True)
                     else:
                         errors.append("Username is taken")
                 else:
-                    query_db("UPDATE users SET username=?, bio=? WHERE id = ?;", get_db(), username, bio, userid, one=True)
+                    query_db("UPDATE users SET bio=?, color=? WHERE id = ?;", get_db(), bio, color, userid, one=True)
 
             response["errors"] = errors        
             return json.dumps(response)
@@ -263,7 +271,6 @@ def serve(userid):
             github = user[1]
             repos = db_update(github)
             update_insert(repos, userid)
-            # TODO check if ovveride or not :/
             update_timestamp(userid)
 
         
diff --git a/schema.sql b/schema.sql
index 37bf1d7..ed24865 100644
--- a/schema.sql
+++ b/schema.sql
@@ -7,7 +7,6 @@ CREATE TABLE users(
     id INTEGER, 
     username VARCHAR(20) NOT NULL UNIQUE, 
     passwordhash VARCHAR(120) NOT NULL, 
-    token text,
     bio VARCHAR(250),
     color text,
     email text,
@@ -28,7 +27,6 @@ CREATE TABLE projects(
     website TEXT,
     link TEXT,
     private BOOLEAN,
-    override BOOLEAN,
     FOREIGN KEY(userid) REFERENCES users(id) ON DELETE CASCADE
 );
 
diff --git a/static/components.js b/static/components.js
index 03ff0f2..bd59395 100644
--- a/static/components.js
+++ b/static/components.js
@@ -1,12 +1,3 @@
-let state = {
-    user: Vue.reactive({
-            username: "",
-            userid: "",
-    })
-};
-
-
-
 let homeC = {
     template: /*html*/ ` 
     <navbar v-on:loggedout="this.get_data" v-on:updatedstate="this.get_following"></navbar>
@@ -198,7 +189,7 @@ let userC = {
     </div>
     
 
-        <div class="framed" id="user">
+        <div class="framed" id="user" :style="{'background-color':this.color}">
         
             <!-- <figure><img src="" alt="Profile_picture"></figure> -->
             <i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i>
@@ -214,7 +205,8 @@ let userC = {
                 
                 <div v-if="this.loggedInUser.username==$route.params.id.toLowerCase()"> 
                     <div v-if="this.showEditUser == true"> 
-                        <button @click="this.showEditUser = false;"> Cancel </button>
+                        <input type="color" v-model="this.color">
+                        <button @click="this.showEditUser = false; this.color=this.prevcolor;"> Cancel </button>
                         <button @click="this.editUser"> Save </button>
                     </div>
                     
@@ -223,8 +215,9 @@ let userC = {
                         <button @click="this.deleteUser"> DELETE ACCOUNT </button>
                     </div>
                 </div>
-                
-                
+                <a v-if="this.user.github != ''" :href="'http://www.github.com/' + this.user.github"><i class="fa fa-github"></i></a>
+                <a v-if="this.user.twitter != ''" :href="'http://www.twitter.com/' + this.user.twitter"><i class="fa fa-twitter"></i></a>
+                <a v-if="this.user.email != ''" :href="'mailto:' + this.user.email"><i class="fa fa-envelope"></i></a>
             </div>
         </div>
 
@@ -233,7 +226,7 @@ let userC = {
         <i v-if="this.loggedInUser.username==$route.params.id.toLowerCase()" class="fa fa-plus-square fa-2x" aria-hidden="true" @click="this.showpostform = !this.showpostform"></i>
         <postformc v-if="this.showpostform"  v-on:newpost="this.newPost" :projects="this.projects" :userid="this.loggedInUser.userid"></postformc>
 
-        <postc v-for="post, i in this.posts" v-on:deleted="this.deletePost" v-bind:editable="this.editable" :index="i" :date="post.date" :id="post.id" :projectid="post.projectid" :text="post.text" :type="post.type" :username="$route.params.id"></postc>
+        <postc :style="{'background-color':this.color}" v-for="post, i in this.posts" v-on:deleted="this.deletePost" v-bind:editable="this.editable" :index="i" :date="post.date" :id="post.id" :projectid="post.projectid" :text="post.text" :type="post.type" :username="$route.params.id"></postc>
         <i v-if="this.loaded==false" class="fa fa-spinner fa-spin"></i>
         <span v-if="this.loaded == true && this.posts.length == 0">User has yet to post</span>
 
@@ -243,11 +236,11 @@ let userC = {
         <i v-if="this.loggedInUser.username==$route.params.id.toLowerCase()" class="fa fa-plus-square fa-2x" aria-hidden="true" @click="this.showprojectform = !this.showprojectform"></i>
         <projectformc v-if="this.showprojectform" v-on:newProject="this.newProject" :userid="this.loggedInUser.userid"></projectformc>
 
-        <projectc v-for="project, i in this.projects" v-on:deleted="this.deleteProject" v-on:edited="this.edit" v-bind:index="i" v-bind:editable="this.editable" v-bind:name="project.name" v-bind:id="project.id" v-bind:created="project.created" v-bind:updated="project.updated" v-bind:description="project.description" v-bind:link="project.link" v-bind:private="project.private" :override="project.override"></projectc>
+        <projectc :style="{'background-color':this.color}" v-for="project, i in this.projects" v-on:deleted="this.deleteProject" v-on:edited="this.edit" v-bind:index="i" v-bind:editable="this.editable" v-bind:name="project.name" v-bind:id="project.id" v-bind:created="project.created" v-bind:updated="project.updated" v-bind:description="project.description" v-bind:link="project.link" v-bind:private="project.private" :override="project.override"></projectc>
         <i v-if="this.loaded==false" class="fa fa-spinner fa-spin"></i>
         <span v-if="this.loaded == true && this.projects.length == 0">User has no projects</span>
 
-        <div v-if="this.showedit">
+        <div v-if="this.showedit" :style="{'background-color':this.color}">
             <projectformc v-on:submit="this.updateEdit" v-bind:id="this.editinfo.id" v-bind:name="this.editinfo.name" v-bind:created="this.editinfo.created"  v-bind:description="this.editinfo.description" v-bind:link="this.editinfo.link" v-bind:private="this.editinfo.private"></projectformc>
         </div>
         <br>
@@ -270,6 +263,9 @@ let userC = {
             showEditUser: false,
             editbio: "",
             editUsername: "",
+            color: "#15181c",
+            prevcolor: "#15181c",
+            user: {github: "", twitter: "", email:""}
         }
     },
     created: async function() {
@@ -289,6 +285,7 @@ let userC = {
     },
     methods: {
         get_data: async function() {
+            // Get userid from params
             let response2 = await fetch("/api/userid/" + this.$route.params.id);
             if (response2.status == 200){
                 result = await response2.json();
@@ -320,6 +317,10 @@ let userC = {
             if (response1.status == 200){
                 let result = await response1.json();
                 this.bio = result.bio;
+                this.color = result.color;
+                this.user.github = result.github;
+                this.user.twitter = result.twitter;
+                this.user.email = result.email;
             }
         },
 
@@ -461,11 +462,10 @@ let userC = {
                 headers: {
                     "Content-Type": "application/x-www-form-urlencoded",
                 },
-                body: "bio=" + this.editbio + "&username=" + this.editUsername
+                body: "bio=" + this.editbio + "&username=" + this.editUsername + "&color=" + this.color
             });
             if (response.status == 200){
                 result = await response.json();
-                
                 if (result.errors.length != 0){
                     let text = ""
                     for (i in result.errors) {
@@ -478,6 +478,7 @@ let userC = {
                     this.bio = this.editbio;
                     this.$route.params.id = this.editUsername;
                     state.user.username = this.editUsername;
+                    this.prevcolor = this.color;
                 
                 }
             }
diff --git a/static/formcomponents.js b/static/formcomponents.js
index 4f908eb..f6ce160 100644
--- a/static/formcomponents.js
+++ b/static/formcomponents.js
@@ -236,7 +236,10 @@ let registerC = {
                 <label>Username: </label> <br> <input type="text" name="username" v-model="registerModel.username" /><br/>
                 <label>Password:</label> <br> <input type="password" name="password" v-model="registerModel.password"><br/>
                 <label>Bio: ({{ this.registerModel.bio.length }}/250)</label> <br> <textarea name="bio" v-model="registerModel.bio" maxlength="250"></textarea><br/><span style="z-index:999;"></span>
-                <label>Github username:</label> <br> <input type="text" name="bio" v-model="registerModel.github"><br/>
+                <h3>Optional:</h3>
+                <label>Github username:</label> <br> <input type="text" name="github" v-model="registerModel.github"><br/>
+                <label>E-mail:</label> <br> <input type="text" name="email" v-model="registerModel.email"><br/>
+                <label>Twitter username:</label> <br> <input type="text" name="twitter" v-model="registerModel.twitter"><br/>
                 <input type="submit" value="Register">
             </form>
         </div>
@@ -244,7 +247,7 @@ let registerC = {
 
     data: function() { 
         return {
-            registerModel: {username: "", password: "", bio: "", github: ""},
+            registerModel: {username: "", password: "", bio: "", github: "", twitter: "", email:""},
             errors: [],
         }
       },
@@ -259,7 +262,7 @@ let registerC = {
                 headers: {
                     "Content-Type": "application/x-www-form-urlencoded",
                 },
-                body: "username=" + this.registerModel.username + "&password=" + this.registerModel.password + "&github=" + this.registerModel.github + "&bio=" + this.registerModel.bio
+                body: "username=" + this.registerModel.username + "&password=" + this.registerModel.password + "&github=" + this.registerModel.github + "&bio=" + this.registerModel.bio + "&email=" + this.registerModel.email + "&twitter=" + this.registerModel.twitter
             });
             if (response.status == 200){
                 let result = await response.json();
diff --git a/static/style.css b/static/style.css
index abc0faa..d993c56 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,9 @@
+:root{
+  --backgroundcolor: rgb(0,0,0);
+  --elementcolor: rgb(21,24,28);
+  --bordercolor: rgb(47,51,54);
+}
+
 #app {
   height: 100%;
 }
@@ -6,7 +12,7 @@ body {
     margin: 0px;
     min-width: 600px;
     font-family: 'Ubuntu', sans-serif;
-    background-color: rgb(0, 0, 0);
+    background-color: var(--backgroundcolor);
     color: white;
 
     display: flex;
@@ -28,8 +34,8 @@ body {
 }
 
 input, textarea, select, button{
-  background-color: rgb(21,24,28);
-  border-color: rgb(47,51,54);
+  background-color: var(--elementcolor);
+  border-color: var(--bordercolor);
   color: white;
   border-radius: 15px;
   text-align: center;
@@ -62,7 +68,7 @@ input {
 }
 
 #searchlist {
-  border: 2px solid rgb(47,51,54);
+  border: 2px solid var(--bordercolor);
   margin-top: -2px;
   border-radius: 5px;
 }
@@ -73,7 +79,7 @@ input {
 }
 
 .navbar, #footer {
-    background-color: rgb(21,24,28);
+    background-color: var(--elementcolor);
     display: flex;
     justify-content: space-evenly;
     height: 2.8em;
@@ -104,9 +110,9 @@ a {
 
 .framed {
     display: flex;
-    border: solid 2px rgb(47,51,54);
+    border: solid 2px var(--bordercolor);
     padding: 10px;
-    background-color: rgb(7, 7, 7);
+    background-color: var(--elementcolor);
     color: white
 }
 
@@ -134,67 +140,4 @@ a {
   height: 5em;
   scrollbar-width: thin;
   overflow: scroll;
-}
-
-/* The switch - the box around the slider */
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-  
-  /* Hide default HTML checkbox */
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  /* The slider */
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-  
-  input:checked + .slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-  
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 34px;
-  }
-  
-  .slider.round:before {
-    border-radius: 50%;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/static/subcomponents.js b/static/subcomponents.js
index 2205e2c..67257f0 100644
--- a/static/subcomponents.js
+++ b/static/subcomponents.js
@@ -1,3 +1,10 @@
+let state = {
+    user: Vue.reactive({
+            username: "",
+            userid: "",
+    })
+};
+
 let navbarC = {
     template: /*html*/`
     <div class="navbar">
@@ -163,13 +170,6 @@ let projectC = {
                     </span>
 
                     <br>
-                    <div v-if="this.editable==true">                  
-                        <label class="switch" style="float: right;">
-                            <input type="checkbox" @click="this.checkbox" v-model="this.override">
-                            <span class="slider round"></span>
-                        </label>
-                    </div>
-
                     <div v-if="this.displayusername==true" style="float:right;">
                         Created by user: {{ this.username }}
                     </div>
@@ -179,7 +179,6 @@ let projectC = {
     `,
     data: function () {
         return {
-            override: this.overridet,
         }
     },