work on user settings

This commit is contained in:
Josh
2018-06-04 15:58:59 -04:00
parent 79949b4aa6
commit d9a95ffc18
22 changed files with 266 additions and 232 deletions

View File

@ -0,0 +1,86 @@
<div class="container mt-8">
<%= render "shared/components/subtitle", subtitle: "Settings", search: false %>
<div class="row">
<div class="col-lg-3 mb-4">
<div class="list-group list-group-transparent mb-0">
<%= link_to edit_user_path(@user, setting: "account"), id: "account", class: "list-group-item list-group-item-action setting-btn" do %>
<span class="icon mr-3"><i class="fe fe-user"></i></span>Account
<% end %>
<%= link_to edit_user_path(@user, setting: "image"), id: "image", class: "list-group-item list-group-item-action setting-btn" do %>
<span class="icon mr-3"><i class="fe fe-image"></i></span>Profile Image
<% end %>
<% if @user.social_uid.nil? %>
<%= link_to edit_user_path(@user, setting: "password"), id: "password", class: "list-group-item list-group-item-action setting-btn" do %>
<span class="icon mr-3"><i class="fe fe-lock"></i></span>Password
<% end %>
<% end %>
<%= link_to edit_user_path(@user, setting: "design"), id: "design", class: "list-group-item list-group-item-action setting-btn" do %>
<span class="icon mr-3"><i class="fe fe-edit-2"></i></span>Design
<% end %>
</div>
<% if @user.errors.any? %>
<h5 class="mt-8">Errors:</h5>
<ul>
<% @user.errors.full_messages.each do |err| %>
<li class="text-danger"><%= err %>.</li>
<% end %>
</ul>
<% end %>
<div class="mt-8">
<%= render 'shared/flash_messages' unless flash.empty? %>
</div>
</div>
<div class="col-lg-9">
<%= render "shared/settings/setting_view", setting_id: "account", setting_title: "Update your Account Info" %>
<%= render "shared/settings/setting_view", setting_id: "image", setting_title: "Change your Profile Image" %>
<% if @user.social_uid.nil? %>
<%= render "shared/settings/setting_view", setting_id: "password", setting_title: "Change your Password" %>
<% end %>
<%= render "shared/settings/setting_view", setting_id: "design", setting_title: "Customize GreenLight" %>
</div>
</div>
</div>
<script>
/*
// Helper for grabbing URL params.
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^]*)').exec(window.location.href);
if (results==null){
return null;
} else {
return results[1] || 0;
}
}
settingsViews = $('.setting-view');
$(document).ready(function(){
var setting = $.urlParam("setting");
/*if (!["account", "image", "password", "design"].includes(setting)){
var url = [location.protocol, '//', location.host, location.pathname].join('');
window.location.href = url + "?setting=account";
}
if (!["account", "image", "password", "design"].includes(setting)){ setting = "account"; }
$("#" + setting).addClass("active");
settingsViews.each(function(i, view){
if($(view).attr("id") != setting){
$(view).hide();
}
});
});*/
</script>

View File

@ -1,132 +0,0 @@
<div class="container mt-8">
<%= render "shared/components/subtitle", subtitle: "Settings", search: false %>
<div class="row">
<div class="col-lg-3 mb-4">
<div class="list-group list-group-transparent mb-0">
<button id="account" class="list-group-item list-group-item-action setting-btn active">
<span class="icon mr-3"><i class="fe fe-user"></i></span>Account
</button>
<button id="password" class="list-group-item list-group-item-action setting-btn">
<span class="icon mr-3"><i class="fe fe-lock"></i></span>Password
</button>
<button id="design" class="list-group-item list-group-item-action setting-btn">
<span class="icon mr-3"><i class="fe fe-edit-2"></i></span>Design
</button>
</div>
</div>
<div class="col-lg-9">
<div id="account" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Update your Account</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-6">
<label class="form-label">Fullname</label>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-user"></i>
</span>
<input type="text" class="form-control" value="<%= current_user.name %>" placeholder="Fullname">
</div>
</div>
<div class="col-6">
<label class="form-label">Email</label>
<div class="input-icon">
<span class="input-icon-addon">
<i class="fas fa-at"></i>
</span>
<input type="email" class="form-control" value="<%= current_user.email %>" placeholder="Email">
</div>
</div>
</div>
<br>
<label class="form-label">Account Provider</label>
<input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
<br>
<label class="form-label">Profile Image</label>
<span class="avatar avatar-xl" style="background-image: url(<%= current_user.image %>)"></span>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
<div id="password" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Change your Password</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-8">
<label class="form-label">Old Password</label>
<input type="password" class="form-control">
<br>
<label class="form-label">New Password</label>
<input type="password" class="form-control">
<br>
<label class="form-label">New Password Confirmation</label>
<input type="password" class="form-control">
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
<div id="design" class="setting-view card">
<div class="card-body p-6">
<div class="card-title text-primary">
<h4>Customize Greenlight</h4>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-6">
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-right">Update</a>
</div>
</div>
</div>
</div>
</div>
<script>
settingsButtons = $('.setting-btn');
settingsViews = $('.setting-view');
$(document).ready(function(){
settingsButtons.each(function(i, btn) {
if(i != 0){ $(settingsViews[i]).hide(); }
$(btn).click(function(){
$(btn).addClass("active");
settingsViews.each(function(i, view){
if($(view).attr("id") == $(btn).attr("id")){
$(view).show();
} else {
$(settingsButtons[i]).removeClass("active");
$(view).hide();
}
});
});
});
});
</script>