Merge branch 'authentication' of github.com:Microverse-Fullstack-Prog…

…ram/rails-blog-app into authentication
Microverse-Fullstack-Program · Jul 13, 2023 · 543cc74 · 543cc74
2 parents 91bd07c + dffc9a0
commit 543cc74
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 7 deletions.
diff --git a/Gemfile b/Gemfile
@@ -77,4 +77,4 @@ group :test do
   gem 'webdrivers'
 end
 
-gem "devise", "~> 4.9"
+gem 'devise', '~> 4.9'
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -53,6 +53,7 @@
 
 a {
   text-decoration: none;
+  color: black;
 }
 
 .user-bio {
@@ -112,3 +113,131 @@ a {
   border-right: 3px solid black;
   border-radius: 5px;
 }
+
+/* style the authentification pages */
+.auth_pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: black;
+  font-size: large;
+  width: 50vw;
+  margin: 100px auto;
+  padding: 1rem;
+  background-color: #c4ddae;
+  border: 1px solid gray;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 40vw;
+  margin: auto auto;
+}
+
+form input {
+  width: 30vw;
+  padding: 0.5rem;
+}
+
+.shared {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0;
+  width: 30vw;
+  padding-bottom: 0.5rem;
+}
+
+.shared a {
+  color: black !important;
+}
+
+ul {
+  list-style: none;
+}
+
+.actions {
+  border: 1px solid #1e1d1d;
+  border-radius: 5px;
+  box-shadow: 1px 1px 1px 1px #1e1d1d;
+}
+
+.actions input {
+  cursor: pointer;
+  font-size: 16.5px;
+}
+
+.remember_me {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: 0.5rem;
+}
+
+.remember_me input {
+  width: 1rem;
+  height: 1rem;
+}
+
+.auth_links {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1rem;
+  width: 30vw;
+  margin: auto auto;
+}
+
+.auth_links a {
+  color: blue;
+  padding: 0.5rem;
+  box-shadow: #1e1d1d 1px 1px 1px 1px;
+}
+
+#error_explanation {
+  color: red;
+  font-size: large;
+}
+
+#error_explanation h2 {
+  font-size: large;
+  font-weight: normal;
+}
+
+.cancel_back {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 50vw;
+}
+
+.cancel_account {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cancel_back a {
+  color: rgb(104, 4, 235);
+  font-weight: bold;
+}
+
+.cancel_account .button_to {
+  width: 20vw;
+}
+
+.button_to button,
+.button_to button a {
+  cursor: pointer;
+  padding: 5px;
+  font-size: 15px;
+  color: blue;
+  border: none;
+}
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -1,2 +1,12 @@
 class ApplicationController < ActionController::Base
+  before_action :authenticate_user!
+  before_action :configure_permitted_parameters, if: :devise_controller?
+
+  protected
+
+  def configure_permitted_parameters
+    devise_parameter_sanitizer.permit(:sign_up, keys: %i[name email password password_confirmation])
+    devise_parameter_sanitizer.permit(:account_update,
+                                      keys: %i[name email password password_confirmation current_password])
+  end
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>RailsBlogApp</title>
+    <title>Rails Blog App</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -11,15 +11,19 @@
   </head>
 
   <body>
-    <% if notice %>
+    <p class="navbar-text float-right">
+    <% if user_signed_in? %>
+      Logged in as <strong><%= current_user.name %></strong>.
+      <%= link_to "Edit profile", edit_user_registration_path, class: "navbar-link" %> |
+      <%= link_to "Logout", destroy_user_session_path, data: { "turbo-method": :delete }, class: "navbar-link"  %>
+    <% end %>
+    </p>
+      <% if notice %>
       <p style="color: green" class="notice"><%= notice %></p>
     <% end %>
 
-    <% if alert %>
-      <p style="color: red" class="alert"><%= alert %></p>
-    <% end %>
 
     <%= yield %>
 
   </body>
-</html>
+</html>