redesigned settings page

app/client/scripts/events.js

@@ -1054,22 +1054,6 @@ Template.room.events({
     }
 });
 
-                    if (YTPlayer !== undefined) {
-                        YTPlayer.setVolume(val.value);
-                        localStorage.setItem("volume", val.value);
-                    } else if (SCPlayer !== undefined) {
-                        //SCPlayer
-                        var volume = val.value / 100;
-                        SCPlayer.setVolume(volume);
-                        localStorage.setItem("volume", val.value);
-                    }
-                });
-            }
-        }
-        makeSlider();
-    });
-});
-
 Template.room.helpers({
     singleVideo: function() {
         return true;

app/client/templates/header.html

@@ -12,10 +12,10 @@
         </ul>
         <ul id="accountDrop" class="dropdown-content">
             {{#if currentUser}}
-                <li><a href="#!">Profile</a></li>
-                <li><a href="#!">Settings</a></li>
+                <li><a href="/u/{{currentUser.username}}">Profile</a></li>
+                <li><a href="/settings">Settings</a></li>
                 <li class="divider"></li>
-                <li><a href="#!">Logout</a></li>
+                <li class="logout"><a>Logout</a></li>
             {{else}}
                 <li><a href="/login">Login</a></li>
                 <li><a href="/register">Register</a></li>

app/client/templates/profile.html

@@ -1,88 +1,19 @@
 <template name="profile">
     {{> alerts}}
-    <div class="landing">
-      {{> header}}
-      <div class="row">
-        {{#if loaded}}
-            {{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}
-            <h1 id="profile-name">{{username}}</h1>
-
-            <div class="col-md-4">
-                <div class="panel panel-primary">
-                    <div class="panel-heading">Basic Info</div>
-                    <div class="panel-body">
-                        <ul>
-                            {{#if isUser}}
-                                <a href="#" id="cancel-edit" class="profile-action" style="display:none;">Cancel</a>
-                            {{/if}}
-                            <li class="user-stat" id="name">Name: {{real_name}} <i class="fa fa-pencil" id="edit-name" style="font-size: 14px; cursor: pointer;"></i></li>
-                            <div id="name-div" style="display: none">
-                                <input type="text" id="input-name"><button id="submit-name" class="btn btn-primary btn-sm">Submit</button>
-                            </div>
-                            {{#if isUser}}
-                                <a href="#" id="cancel-username" class="profile-action" style="display:none;">Cancel</a>
-                            {{/if}}
-                            <li class="user-stat" id="username">Username: {{username}} <i class="fa fa-pencil" id="edit-username" style="font-size: 14px; cursor: pointer;"></i></li>
-                            <div id="username-div" style="display: none">
-                                <input type="text" id="input-username"><button id="submit-username" class="btn btn-primary btn-sm">Submit</button>
-                            </div>
-                            <li class="user-stat">Joined: {{first_joined}}</li>
-                            {{#if isAdmin}}
-                              <a href="#" id="cancel-rank" class="profile-action" style="display:none;">Cancel</a>
-                              <li class="user-stat" id="rank">Rank: {{rank}} <i class="fa fa-pencil" id="edit-rank" style="font-size: 14px; cursor: pointer;"></i></li>
-                              <div class="user-stat" id="rank-div" style="display: none">
-                                Rank:
-                                <select id="select-rank">
-                                  <option value="default">Default</option>
-                                  <option value="moderator">Moderator</option>
-                                  <option value="admin">Admin</option>
-                                </select>
-                                <button id="submit-rank" class="btn btn-primary btn-sm">Submit</button>
-                              </div>
-                            {{else}}
-                              {{#if isUser}}
-                                <li class="user-stat">Rank: {{rank}}</li>
-                                {{/if}}
-                            {{/if}}
-                        </ul>
-                    </div>
-                </div>
+    {{> header}}
+    {{#if loaded}}
+        <!--{{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}-->
+        <h1 class="black-text thin">{{username}}</h1>
+        <div class="card blue-grey darken-1">
+            <div class="card-content white-text">
+                <span class="card-title">User Info</span>
+                <p>Name: {{real_name}}</p>
+                <p>Username: {{username}}</p>
+                <p>First Joined: {{first_joined}}</p>
+                <p>Rank: {{rank}}</p>
             </div>
-            <div class="col-md-4">
-                <div class="panel panel-success">
-                    <div class="panel-heading">Liked Songs</div>
-                    <div class="panel-body song-panel">
-                        <ul>
-                            {{#each likedSongs}}
-                                <li>
-                                    <p class="song-panel-room">{{room}}</p>
-                                    <h4>{{title}}</h4>
-                                    <h5>{{artist}}</h5>
-                                </li>
-                            {{/each}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="panel panel-danger">
-                    <div class="panel-heading">Disliked Songs</div>
-                    <div class="panel-body song-panel">
-                        <ul>
-                            {{#each dislikedSongs}}
-                                <li>
-                                    <p class="song-panel-room">{{room}}</p>
-                                    <h4>{{title}}</h4>
-                                    <h5>{{artist}}</h5>
-                                </li>
-                            {{/each}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        {{else}}
-            {{> loading}}
-        {{/if}}
-      </div>
-    </div>
+        </div>
+    {{else}}
+        {{> loading}}
+    {{/if}}
 </template>

app/client/templates/settings.html

@@ -1,30 +1,28 @@
 <template name="settings">
-    <div id="head"></div>
     {{> header}}
     <div class="row">
-        <h1 id="profile-name">{{username}}</h1>
-        <div class="col-md-4 col-md-offset-4">
-            <div class="panel panel-primary">
-                <div class="panel-heading">General Settings</div>
-                <div class="panel-body">
-                    <!--h3 class="text text-warning text-center">Unfortunately, there is currently nothing for you to edit.</h3-->
-                    <p class="settings-option">Liked & disliked songs</p>
-                    <div class="checkbox">
-                        <input class="checkbox-box" type="checkbox" id="showRating">
-                        <label for="showRating" class="settings-label">
-                            Show your likes/dislikes on your public profile
-                        </label>
-                    </div>
-                    <button class="btn btn-success btn-block" id="save-settings">Save</button>
-                    <p class="settings-option">Change Password</p>
-                    <input type="password" id="old-password" class="form-control settings-input" placeholder="Old password">
-                    <input type="password" id="new-password" class="form-control settings-input" placeholder="New password">
-                    <input type="password" id="confirm-password" class="form-control settings-input" placeholder="Re-enter new password">
-                    <button class="btn btn-warning btn-block" id="change-password">Change Password</button>
-                    <p class="settings-option">Delete Account</p>
-                    <button class="btn btn-danger btn-block" id="delete-account">Delete</button>
-                </div>
-            </div>
+        <h1 id="profile-name" class="black-text thin">Settings</h1>
+        <h4 class="thin">Liked & disliked songs</h4>
+        <p>
+            <input type="checkbox" id="showRating"/>
+            <label for="showRating">Show liked and disliked song on profile?</label>
+        </p>
+        <button class="btn" id="save-settings">Save</button>
+        <h4 class="thin">Change Password</h4>
+        <div class="input-field">
+            <input type="password" id="old-password" class="validate">
+            <label for="old-password">Old Password</label>
         </div>
+        <div class="input-field">
+            <input type="password" id="new-password" class="validate">
+            <label for="new-password">New Password</label>
+        </div>
+        <div class="input-field">
+            <input type="password" id="confirm-password" class="validate">
+            <label for="confirm-password">Re-enter New Password</label>
+        </div>
+        <button class="btn" id="change-password">Change Password</button>
+        <h4 class="thin">Delete Account</h4>
+        <button class="btn red darken-4" id="delete-account">Delete</button>
     </div>
 </template>