From 12d8b2b1cbfcdb757be13a20dd41c84e486f8421 Mon Sep 17 00:00:00 2001
From: Matthew Ross <kiswa.com@gmail.com>
Date: Sun, 17 Jul 2016 21:19:38 -0400
Subject: [PATCH] Start separating settings sections into components

---
 src/app/settings/settings.component.html      | 68 +------------------
 src/app/settings/settings.component.ts        |  3 +-
 .../user-settings.component.html              | 68 +++++++++++++++++++
 .../user-settings/user-settings.component.ts  |  9 +++
 4 files changed, 80 insertions(+), 68 deletions(-)
 create mode 100644 src/app/settings/user-settings/user-settings.component.html
 create mode 100644 src/app/settings/user-settings/user-settings.component.ts

diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 2cf90d5..e378a04 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -2,73 +2,7 @@
 
 <div class="settings">
     <div class="half-page">
-        <section>
-            <h2>User Settings</h2>
-
-            <div class="half">
-                <h3>Change Password</h3>
-
-                <label for="currentPassword" class="hidden">Current Password</label>
-                <input type="password" id="currentPassword" placeholder="Current Password">
-
-                <label for="newPassword" class="hidden">Current Password</label>
-                <input type="password" id="newPassword" placeholder="New Password">
-
-                <label for="verifyPassword" class="hidden">Current Password</label>
-                <input type="password" id="verifyPassword" placeholder="Verify New Password">
-
-                <button>Change Password</button>
-                <button class="flat">Reset</button>
-
-                <h3 class="tall">All Boards Options</h3>
-                <label>
-                    Select default board:
-                    <select class="autosize">
-                        <option>None</option>
-                    </select>
-                </label>
-                <label>
-                    New tasks appear at column
-                    <select class="autosize">
-                        <option>bottom</option>
-                        <option>top</option>
-                    </select>
-                </label>
-                <label>
-                    Display tasks side-by-side in colums?
-                    <input type="checkbox">
-                </label>
-            </div>
-
-            <div class="half">
-                <h3>Change Username</h3>
-
-                <label for="username" class="hidden">New Username</label>
-                <input type="text" id="username" placeholder="New Username">
-
-                <button>Change Username</button>
-                <button class="flat">Reset</button>
-
-                <h3 class="tall">Change Email</h3>
-
-                <label for="email" class="hidden">New Email</label>
-                <input type="text" id="email" placeholder="New Email">
-
-                <button>Change Email</button>
-                <button class="flat">Reset</button>
-
-                <div class="hold-bottom">
-                    <label>
-                        Show animations?
-                        <input type="checkbox" checked>
-                    </label>
-                    <label>
-                        Show Assignee on task cards?
-                        <input type="checkbox" checked>
-                    </label>
-                </div>
-            </div>
-        </section>
+        <tb-user-settings></tb-user-settings>
 
         <section>
             <h2>User Administration</h2>
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index f1084c8..b22def4 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 
 import { TopNav } from '../shared/index';
+import { UserSettings } from './user-settings/user-settings.component';
 
 @Component({
     selector: 'tb-settings',
     templateUrl: 'app/settings/settings.component.html',
-    directives: [ TopNav ]
+    directives: [ TopNav, UserSettings ]
 })
 export class Settings {
 }
diff --git a/src/app/settings/user-settings/user-settings.component.html b/src/app/settings/user-settings/user-settings.component.html
new file mode 100644
index 0000000..f6b1d1d
--- /dev/null
+++ b/src/app/settings/user-settings/user-settings.component.html
@@ -0,0 +1,68 @@
+<section>
+    <h2>User Settings</h2>
+
+    <div class="half">
+        <h3>Change Password</h3>
+
+        <label for="currentPassword" class="hidden">Current Password</label>
+        <input type="password" id="currentPassword" placeholder="Current Password">
+
+        <label for="newPassword" class="hidden">Current Password</label>
+        <input type="password" id="newPassword" placeholder="New Password">
+
+        <label for="verifyPassword" class="hidden">Current Password</label>
+        <input type="password" id="verifyPassword" placeholder="Verify New Password">
+
+        <button>Change Password</button>
+        <button class="flat">Reset</button>
+
+        <h3 class="tall">All Boards Options</h3>
+        <label>
+            Select default board:
+            <select class="autosize">
+                <option>None</option>
+            </select>
+        </label>
+        <label>
+            New tasks appear at column
+            <select class="autosize">
+                <option>bottom</option>
+                <option>top</option>
+            </select>
+        </label>
+        <label>
+            Display tasks side-by-side in colums?
+            <input type="checkbox">
+        </label>
+    </div>
+
+    <div class="half">
+        <h3>Change Username</h3>
+
+        <label for="username" class="hidden">New Username</label>
+        <input type="text" id="username" placeholder="New Username">
+
+        <button>Change Username</button>
+        <button class="flat">Reset</button>
+
+        <h3 class="tall">Change Email</h3>
+
+        <label for="email" class="hidden">New Email</label>
+        <input type="text" id="email" placeholder="New Email">
+
+        <button>Change Email</button>
+        <button class="flat">Reset</button>
+
+        <div class="hold-bottom">
+            <label>
+                Show animations?
+                <input type="checkbox" checked>
+            </label>
+            <label>
+                Show Assignee on task cards?
+                <input type="checkbox" checked>
+            </label>
+        </div>
+    </div>
+</section>
+
diff --git a/src/app/settings/user-settings/user-settings.component.ts b/src/app/settings/user-settings/user-settings.component.ts
new file mode 100644
index 0000000..786ab72
--- /dev/null
+++ b/src/app/settings/user-settings/user-settings.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'tb-user-settings',
+    templateUrl: 'app/settings/user-settings/user-settings.component.html'
+})
+export class UserSettings {
+}
+