Add dotenv - Protect my secret data in .env file

app/assets/stylesheets/application.scss

@@ -19,3 +19,4 @@ body {
   background-color: $background;
 }
 @import "devise/index";
+@import "users/index";

app/assets/stylesheets/users/_edit.scss

@@ -0,0 +1,33 @@
+.profile-container {
+  margin: 0 1in;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: calc(100vh - 4.5em); // 4.5em is height of navbar
+
+  form {
+    flex-grow: 1;
+
+    .description {
+      width: 100%;
+      height: 5em;
+    }
+  }
+
+  .profile-pic {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 3em;
+
+    img {
+      max-width: 50vw;
+    }
+  }
+}
+
+.profile-form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  color: white;
+}

app/assets/stylesheets/users/_index.scss

@@ -0,0 +1,2 @@
+@import "show";
+@import "edit";

app/assets/stylesheets/users/_show.scss

@@ -0,0 +1,51 @@
+.user-container {
+  margin: 0 1in;
+  height: calc(100vh - 4.5em); //4.5em is height of navbar.
+  display:flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h2 {
+    font-size: 1.5em;
+  }
+  .profile {
+    background: #33333D;
+    display: flex;
+
+    .flex-end {
+      margin-left: auto;
+      display:flex;
+      align-items: center;
+
+      a:first-child {
+        margin-right: .5em;
+      }
+    }
+    .profile-pic {
+      display: flex;
+      align-items: center;
+      margin-right: 3em;
+      img {
+        width: 10em;
+      }
+    }
+
+    .profile-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      h1 {
+        margin: 0 0 .5em 0 ;
+      }
+      h2 {
+        margin: 0;
+      }
+      .italics {
+        font-style: italic;
+        color: white;
+      }
+    }
+  }
+
+  }
+

app/controllers/users_controller.rb

@@ -0,0 +1,39 @@
+class UsersController < ApplicationController
+  before_action :find_user, only: [:edit, :update, :show, :destroy]
+
+  def edit; end
+
+  def update
+    @user.update(user_params)
+    redirect_to user_edit_path(@user)
+  end
+
+  def create
+      # Untested Code
+    user = User.new(user_params)
+    authorize user # I don't know where to put this TODO: Test this method
+    if user.save
+      redirect_to user_path(user)
+    else
+      raise
+    end
+  end
+
+  def show; end
+
+  def destroy
+    @user.destroy
+    redirect_to root_path
+  end
+
+  private
+
+  def find_user
+    @user = User.find(params[:id])
+    #authorize @user
+  end
+
+  def user_params
+    params.require(:user).permit(:email, :first_name, :last_name, :description, :photo)
+  end
+end

app/models/user.rb

@@ -1,4 +1,5 @@
 class User < ApplicationRecord
+
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
   devise :database_authenticatable, :registerable,

app/views/shared/_navbar.html.erb

@@ -9,7 +9,24 @@
       <div><%= link_to "Settings", "#" %></div>
     </div>
     <div class="profile">
-      <%= image_tag "https://avatars2.githubusercontent.com/u/38472180?v=4", class: "img-circle"%>
+    <% if current_user.nil? %>
+      <%= link_to "Login", new_user_session_path  %>
+    <% else %>
+      <div class="dropdown">
+        <div data-toggle="dropdown">
+          <% if current_user&.photo.nil? %>
+            <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
+          <% else %>
+            <%#= cl_image_tag current_user.photo, class: "avatar dropdown-toggle img-circle"%>
+          <% end %>
+        </div>
+        <ul class="dropdown-menu dropdown-menu-right">
+          <!-- <li><a href="#">Profile</a></li> -->
+          <li><%= link_to "Profile", user_path(current_user) %></li>
+          <li><%= link_to "Logout", destroy_user_session_path %></li>
+        </ul>
+      </div>
+    <% end %>
     </div>
   </div>
 </div>

app/views/users/edit.html.erb

@@ -0,0 +1,32 @@
+<div class="profile-container">
+  <%= simple_form_for(@user) do |t| %>
+    <div class="profile-form">
+      <div>
+        <%= t.input :email  %>
+        <%= t.input :first_name %>
+        <%= t.input :last_name %>
+        <%= t.input :photo %>
+        <%= t.input :password %>
+
+        <%= t.submit :Save, class: "btn btn-primary save-btn form-control" %>
+        <p></p>
+        <%= link_to "View my profile", user_path(@user), class: "btn btn-primary save-btn form-control" %>
+      </div>
+
+
+      <div class="profile-pic">
+        <% if @user.photo.nil? %>
+          <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"%>
+        <% else %>
+          <%= cl_image_tag current_user.photo%>
+        <% end %>
+
+        <%= t.input_field :photo, onchange: 'this.form.submit();' %>
+        <%= t.input_field :photo, as: :hidden %>
+
+      </div>
+
+    </div>
+  <% end %>
+</div>
+

app/views/users/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Users#index</h1>
+<p>Find me in app/views/users/index.html.erb</p>

app/views/users/new.html.erb

@@ -0,0 +1,2 @@
+<h1>Users#index</h1>
+<p>Find me in app/views/users/new.html.erb</p>

app/views/users/show.html.erb

@@ -0,0 +1,26 @@
+
+
+
+<div class="user-container">
+  <div class="profile">
+    <div class="profile-pic">
+      <% if @user&.photo&.url.nil? %>
+        <%= image_tag "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png", class: "img-circle"%>
+      <% else %>
+        <%= cl_image_tag @user.photo, class: "img-circle"%>
+      <% end %>
+
+    </div>
+    <div class="profile-text">
+      <h1><%= @user.first_name %> <%= @user.last_name %></h1>
+      <h2 class="italics" ><%= @user.email %></h2>
+    </div>
+
+      <div class="flex-end">
+        <%= link_to "Edit Information", user_edit_path(@user), class: "btn btn-primary" %>
+        <%= link_to "Delete Account", user_path(@user), class: "btn btn-danger", method: :delete, data: {
+            confirm: "Are you sure?"
+          } %>
+      </div>
+
+  </div>