finish all new user settings UI

3 files changed, 103 insertions, 94 deletions

diff --git a/templates/user/settings/email.tmpl b/templates/user/settings/email.tmpl
index ec152c5d60..a9667dde91 100644
--- a/templates/user/settings/email.tmpl
+++ b/templates/user/settings/email.tmpl
@@ -1,60 +1,70 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="setting-wrapper" class="main-wrapper">
-    <div id="user-profile-setting" class="container clear">
-        {{template "user/settings/nav" .}}
-        <div class="grid-4-5 left">
-            <div class="setting-content">
-                {{template "ng/base/alert" .}}
-                <div id="user-email-setting-content">
-                    <div id="user-email-panel" class="panel panel-radius">
-                        <div class="panel-header">
-                             <strong>{{.i18n.Tr "settings.manage_emails"}}</strong>
-                        </div>
-                        <ul class="panel-body setting-list">
-                            <li>{{.i18n.Tr "settings.email_desc"}}</li>
-                            {{range .Emails}}
-                            <li class="email clear">
-                                <div class="email-content left">
-									<p><strong>{{.Email}}</strong> {{if .IsPrimary}} <span class="text-red">{{$.i18n.Tr "settings.primary"}}</span> {{end}}</p>
-							   </div>
-							   {{if not .IsPrimary}}
-							   {{if .IsActivated}}
-							   <form action="{{AppSubUrl}}/user/settings/email" method="post">
-                                    {{$.CsrfTokenHtml}}
-                                    <input name="_method" type="hidden" value="PRIMARY">
-                                    <input name="id" type="hidden" value="{{.Id}}">
-                                    <button class="right email-btn btn btn-small btn-green btn-radius">{{$.i18n.Tr "settings.primary_email"}}</button>
-                                </form>
-								{{end}}
-                                <form action="{{AppSubUrl}}/user/settings/email" method="post">
-                                    {{$.CsrfTokenHtml}}
-                                    <input name="_method" type="hidden" value="DELETE">
-                                    <input name="id" type="hidden" value="{{.Id}}">
-                                    <button class="right email-btn btn btn-small btn-red btn-radius" style="margin-right: 5px">{{$.i18n.Tr "settings.delete_email"}}</button>
-                                </form>
-							   {{end}}
-                            </li>
-                            {{end}}
-                        </ul>
-                        <div class="panel-header">
-                             <strong>{{.i18n.Tr "settings.add_new_email"}}</strong>
-                        </div>
-                        <form class="form form-align panel-body" id="add-email-form" action="{{AppSubUrl}}/user/settings/email" method="post">
-                            {{.CsrfTokenHtml}}                            
-                            <p class="field">
-                                <label class="req" for="email">{{.i18n.Tr "email"}}</label>
-                                <input class="ipt ipt-large ipt-radius" id="email" name="email" type="text" required />
-                            </p>
-                            <p class="field">
-                                <label></label>
-                                <button class="btn btn-green btn-large btn-radius" id="email-add-btn">{{.i18n.Tr "settings.add_email"}}</button>
-                            </p>
-                        </form>
-                    </div>                    
+{{template "base/head" .}}
+<div class="user settings emails">
+  <div class="ui container">
+    <div class="ui grid">
+      {{template "user/settings/navbar" .}}
+      <div class="twelve wide column content">
+        {{template "base/alert" .}}
+        <h4 class="ui top attached header">
+          {{.i18n.Tr "settings.manage_emails"}}
+        </h4>
+        <div class="ui attached segment">
+          <div class="ui email list">
+            <div class="item">
+              {{.i18n.Tr "settings.email_desc"}}
+            </div>
+            {{range .Emails}}
+            <div class="item ui grid">
+              <div class="column">
+                <strong>{{.Email}}</strong> 
+                {{if .IsPrimary}}<span class="text red">{{$.i18n.Tr "settings.primary"}}</span>{{end}}
+                {{if not .IsPrimary}}
+                <div class="ui right">
+                  <button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
+                    {{$.i18n.Tr "settings.delete_key"}}
+                  </button>
+                </div>
+                {{if .IsActivated}}
+                <div class="ui right">
+                  <form action="{{$.Link}}" method="post">
+                    {{$.CsrfTokenHtml}}
+                    <input name="_method" type="hidden" value="PRIMARY">
+                    <input name="id" type="hidden" value="{{.ID}}">
+                    <button class="ui green tiny button">{{$.i18n.Tr "settings.primary_email"}}</button>
+                  </form>
                 </div>
+                {{end}}
+                {{end}}
+              </div>
             </div>
+            {{end}}
+          </div>        
         </div>
+        <div class="ui attached bottom segment">
+          <form class="ui form" action="{{.Link}}" method="post">
+            {{.CsrfTokenHtml}}                            
+            <div class="required field {{if .Err_Email}}error{{end}}">
+              <label for="email">{{.i18n.Tr "settings.add_new_email"}}</label>
+              <input id="email" name="email" type="email" autofocus required>
+            </div>
+            <button class="ui green button">
+              {{.i18n.Tr "settings.add_email"}}
+            </button>
+          </form> 
+        </div>
+      </div>
     </div>
+  </div>
+</div>
+
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+    <i class="trash icon"></i>
+    {{.i18n.Tr "settings.email_deletion"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "settings.email_deletion_desc"}}</p>
+  </div>
+  {{template "base/delete_modal_actions" .}}
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/password.tmpl b/templates/user/settings/password.tmpl
index 4f2f63e4b9..d56952b19f 100644
--- a/templates/user/settings/password.tmpl
+++ b/templates/user/settings/password.tmpl
@@ -1,37 +1,36 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div id="setting-wrapper" class="main-wrapper">
-    <div id="user-profile-setting" class="container clear">
-        {{template "user/settings/nav" .}}
-        <div class="grid-4-5 left">
-            <div class="setting-content">
-                {{template "ng/base/alert" .}}
-                <div id="setting-content">
-                    <div id="user-profile-setting-content" class="panel panel-radius">
-                        <p class="panel-header"><strong>{{.i18n.Tr "settings.change_password"}}</strong></p>
-                        <form class="form form-align panel-body" id="user-profile-form" action="{{AppSubUrl}}/user/settings/password" method="post">
-                            {{.CsrfTokenHtml}}
-                            <p class="field">
-                                <label class="req" for="old-password">{{.i18n.Tr "settings.old_password"}}</label>
-                                <input class="ipt ipt-large ipt-radius {{if .Err_OldPassword}}ipt-error{{end}}" id="old-password" name="old_password" type="password" required />
-                            </p>
-                            <p class="field">
-                                <label class="req" for="password">{{.i18n.Tr "settings.new_password"}}</label>
-                                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" required />
-                            </p>
-                            <p class="field">
-                                <label class="req" for="retype">{{.i18n.Tr "re_type"}}</label>
-                                <input class="ipt ipt-large ipt-radius {{if .Err_Retype}}ipt-error{{end}}" id="retype" name="retype" type="password" required />
-                            </p>
-                            <p class="field">
-                                <span class="form-label"></span>
-                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.change_password"}}</button>
-                            </p>
-                        </form>
-                    </div>
-                </div>
+{{template "base/head" .}}
+<div class="user settings password">
+  <div class="ui container">
+    <div class="ui grid">
+      {{template "user/settings/navbar" .}}
+      <div class="twelve wide column content">
+        {{template "base/alert" .}}
+        <h4 class="ui top attached header">
+          {{.i18n.Tr "settings.change_password"}}
+        </h4>
+        <div class="ui attached segment">
+          <form class="ui form" action="{{.Link}}" method="post">
+            {{.CsrfTokenHtml}}
+            <div class="required field {{if .Err_OldPassword}}error{{end}}">
+              <label for="old_password">{{.i18n.Tr "settings.old_password"}}</label>
+              <input id="old_password" name="old_password" type="password" autofocus required>
             </div>
+            <div class="required field {{if .Err_Password}}error{{end}}">
+              <label for="password">{{.i18n.Tr "settings.new_password"}}</label>
+              <input id="password" name="password" type="password" required>
+            </div>
+            <div class="required field {{if .Err_Password}}error{{end}}">
+              <label for="retype">{{.i18n.Tr "settings.retype_new_password"}}</label>
+              <input id="retype" name="retype" type="password" required>
+            </div>
+
+            <div class="field">
+               <button class="ui green button">{{$.i18n.Tr "settings.change_password"}}</button>
+            </div>
+            </form>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
index 5438feae35..9805b9025a 100644
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -37,12 +37,12 @@
               <input id="location" name="location"  value="{{.SignedUser.Location}}">
             </div>
             <div class="required field {{if or DisableGravatar .SignedUser.UseCustomAvatar}}hide{{end}} {{if .Err_Gravatar}}error{{end}}">
-                <label for="gravatar">Gravatar {{.i18n.Tr "email"}}</label>
-                <input id="gravatar" name="gravatar" value="{{.SignedUser.AvatarEmail}}" />
+              <label for="gravatar">Gravatar {{.i18n.Tr "email"}}</label>
+              <input id="gravatar" name="gravatar" value="{{.SignedUser.AvatarEmail}}" />
             </div>
 
             <div class="field">
-               <button class="ui green button">{{$.i18n.Tr "settings.update_profile"}}</button>
+              <button class="ui green button">{{$.i18n.Tr "settings.update_profile"}}</button>
             </div>
           </form>
 
@@ -58,12 +58,12 @@
               </div>
             </div>
             <div class="inline field">
-                <label for="avatar">{{.i18n.Tr "settings.choose_new_avatar"}}</label>
-                <input name="avatar" type="file" >
+              <label for="avatar">{{.i18n.Tr "settings.choose_new_avatar"}}</label>
+              <input name="avatar" type="file" >
             </div>
 
             <div class="field">
-               <button class="ui green button">{{$.i18n.Tr "settings.update_avatar"}}</button>
+              <button class="ui green button">{{$.i18n.Tr "settings.update_avatar"}}</button>
             </div>
           </form>
         </div>