Add functional research bar

frontend/static/css/search.css

@@ -0,0 +1,17 @@
+#app img
+{
+	max-height: 100px;
+	max-width: 100px;
+}
+
+#app ul
+{
+	margin: 5px 0 0 0;
+	padding: 0 0 0 0;
+	list-style-type: none;
+}
+
+#app li
+{
+	margin: 10px 10px 0 0;
+}

frontend/static/js/views/Search.js

@@ -1,35 +1,57 @@
-import AbstractAuthentifiedView from "./AbstractAuthentifiedView.js";
+import AbstractView from "./AbstractView.js";
 import {client} from "../index.js";
 
-export default class extends AbstractAuthentifiedView {
+export default class extends AbstractView {
     constructor(params) {
         super(params, "Search");
     }
 
 	async postInit() {
-		let profiles = await client.profiles.all();
-		console.log(profiles);
-		let users = ["cramptéMan", "cacaMan", "chatteWomen"]
 
-		let list_users = document.getElementById('list_users');
+		let search = document.getElementById("form");
-		for (const user of users) {
+		search.addEventListener("input", this.users)
-			var new_user = document.createElement("li");
+
-			new_user.appendChild(document.createTextNode(user));
+		this.users();
-			list_users.appendChild(new_user);
+
-		}
-		console.log(list_users);
 	}
 
-	async leavePage() {
+	async users() {
+
+		let search = document.getElementById("form").value;
+		
+
+		let users = await client.profiles.all();
+		let list_users = document.getElementById('list_users');
+		list_users.innerHTML = "";
+
+		users.filter(user => user.username.startsWith(search) == true).forEach((user) => {
+			var new_user = document.createElement("li");
+
+			// username
+			let username = document.createElement("a");
+			username.href = `/profiles/${user.user_id}`;
+			username.appendChild(document.createTextNode(user.username));
+			new_user.appendChild(username);
+			
+			// break line
+			new_user.appendChild(document.createElement("br"));
+
+			// avatar
+			var img = document.createElement("img");
+			img.src = user.avatar_url;
+			new_user.appendChild(img);
+
+			list_users.appendChild(new_user);
+		});
+		console.log(list_users);
+
 	}
 
     async getHtml() {
         return `
-			<h1>Search</h1>
+			<link rel="stylesheet" href="/static/css/search.css">
 
-			<form id="form">
+			<input id="form" type="text" name="message" placeholder="userbozo"/>
-				<input type="text" name="message" placeholder="user name to crampte"/>
-			</form>
 
 			<div id="users">
 				<ul id="list_users">