add devise

.gitignore

@@ -35,3 +35,5 @@
 /node_modules/*
 .idea/*
 .byebug_history
+
+/node_modules

Gemfile

@@ -6,6 +6,8 @@ ruby "3.1.2"
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
 gem "rails", "~> 7.0.4", ">= 7.0.4.2"
 
+gem "devise", "~> 4.9"
+
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem "sprockets-rails"
 
@@ -40,6 +42,9 @@ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", require: false
 
+# Error Logging
+gem "rollbar", "~> 3.4"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]
@@ -77,3 +82,5 @@ group :test do
 end
 
 gem "rollbar", "~> 3.4"
+
+gem "devise", "~> 4.9"

Gemfile.lock

@@ -70,6 +70,7 @@ GEM
       public_suffix (>= 2.0.2, < 6.0)
     airbrussh (1.4.1)
       sshkit (>= 1.6.1, != 1.7.0)
+    bcrypt (3.1.18)
     bcrypt_pbkdf (1.1.0)
     bindex (0.8.1)
     bootsnap (1.16.0)
@@ -109,6 +110,12 @@ GEM
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
+    devise (4.9.2)
+      bcrypt (~> 3.0)
+      orm_adapter (~> 0.1)
+      railties (>= 4.1.0)
+      responders
+      warden (~> 1.2.3)
     diff-lcs (1.5.0)
     ed25519 (1.3.0)
     erubi (1.12.0)
@@ -120,9 +127,11 @@ GEM
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
     ffi (1.15.5)
+    font-awesome-sass (6.4.0)
+      sassc (~> 2.0)
     globalid (1.1.0)
       activesupport (>= 5.0)
-    i18n (1.13.0)
+    i18n (1.14.0)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -136,6 +145,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.1.1)
+      railties (>= 6.0.0)
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -168,6 +179,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.15.2-x86_64-linux)
       racc (~> 1.4)
+    orm_adapter (0.5.0)
     pg (1.5.3)
     public_suffix (5.0.1)
     puma (5.6.5)
@@ -209,6 +221,9 @@ GEM
     regexp_parser (2.8.0)
     reline (0.3.4)
       io-console (~> 0.5)
+    responders (3.1.0)
+      actionpack (>= 5.2)
+      railties (>= 5.2)
     rexml (3.2.5)
     rollbar (3.4.0)
     rspec-core (3.12.2)
@@ -219,7 +234,7 @@ GEM
     rspec-mocks (3.12.5)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
-    rspec-rails (6.0.2)
+    rspec-rails (6.0.3)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
@@ -231,6 +246,8 @@ GEM
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
     selenium-webdriver (4.9.1)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -266,6 +283,8 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
+    warden (1.2.9)
+      rack (>= 2.0.9)
     web-console (4.2.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -297,12 +316,15 @@ DEPENDENCIES
   capistrano3-puma (~> 5.2.0)
   capybara
   debug
+  devise (~> 4.9)
   ed25519
   factory_bot_rails
   faker
+  font-awesome-sass (~> 6.4.0)
   image_processing (>= 1.2)
   importmap-rails
   jbuilder
+  jsbundling-rails (~> 1.1)
   pg (~> 1.1)
   puma (~> 5.0)
   rails (~> 7.0.4, >= 7.0.4.2)

Procfile.dev

@@ -1,3 +1,2 @@
 web: unset PORT && bin/rails server
-js: yarn build --watch
 css: bin/rails tailwindcss:watch

app/helpers/application_helper.rb

@@ -7,6 +7,14 @@ def active_nav_link(path)
     end
   end
 
+  def active_category_link(active_category, category)
+    if active_category == category
+      'block py-3 font-medium text-slate-800 dark:text-slate-100 border-b-2 border-sky-500'
+    else
+      'block py-3 font-medium text-slate-800 dark:text-slate-100'
+    end
+  end
+
   def active_locale_icon(locale)
     case locale
     when :da

app/models/user.rb

@@ -0,0 +1,6 @@
+class User < ApplicationRecord
+  # Include default devise modules. Others available are:
+  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
+  devise :database_authenticatable, :registerable,
+         :recoverable, :rememberable, :validatable
+end

app/views/articles/index.html.erb

@@ -22,18 +22,18 @@
             <% Article.categories.each do |category, value| %>
               <% if category.to_s != 'uncategorized' %>
                 <li class="px-3 -mb-px">
-                  <%= link_to category.to_s.titleize, articles_path(category: category, locale: I18n.locale), class: 'block py-3 font-medium text-slate-800 dark:text-slate-100 border-b-2 border-sky-500' %>
+                  <%= link_to category.to_s.titleize, articles_path(category: category, locale: I18n.locale), class: active_category_link(category, params[:category]), data: { 'turbo-frame': 'article_list'}  %>
                 </li>
               <% end %>
             <% end %>
           </ul>
 
           <!-- Articles list -->
-          <div>
+          <%= turbo_frame_tag 'article_list' do %>
             <% @articles.published.sort_by{ |e| e.published_at }.reverse.each do |article| %>
               <%= render 'articles/partials/article', article: article %>
             <% end %>
-          </div>
+          <% end %>
         </section>
         <!-- Projects -->
         <section>

app/views/articles/partials/_article.html.erb

@@ -1,6 +1,6 @@
 <article class="py-5 border-b border-slate-100 dark:border-slate-800">
   <div class="flex items-start">
-    <%= image_tag article.thumbnail, class: 'rounded w-16 h-16 sm:w-[88px] sm:h-[88px] object-cover mr-6', width: '88', height: '88', alt: article.headline %>
+    <%#= image_tag article.thumbnail, class: 'rounded w-16 h-16 sm:w-[88px] sm:h-[88px] object-cover mr-6', width: '88', height: '88', alt: article.headline %>
     <div>
       <div class="text-xs text-slate-500 uppercase mb-1"><span class="text-sky-500">—</span> <%= article.published_at.strftime("#{article.published_at.day.ordinalize} %B %Y") %></div>
       <h3 class="font-aspekta text-lg font-[650] mb-1">

app/views/articles/partials/_footer.html.erb

@@ -14,7 +14,7 @@
         </li>
         <li>
           <%= link_to 'https://youtube.com/zakecss', class: 'flex justify-center items-center text-sky-500 hover:text-sky-600 transition duration-150 ease-in-out', 'aria-label': 'YouTube', target: '_blank' do %>
-            <svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <svg class="w-8 h-8 fill-current" viewBox=" 0 0 32 32" xmlns="http://www.w3.org/2000/svg">
               <path d="M23.8 12.8c-.2-1.3-.8-2.2-2.2-2.4C19.4 10 16 10 16 10s-3.4 0-5.6.4c-1.4.2-2.1 1.1-2.2 2.4C8 14.1 8 16 8 16s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4 2.2.4 5.6.4 5.6.4s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4.2-1.3.2-3.2.2-3.2s0-1.9-.2-3.2ZM14 19v-6l5 3-5 3Z" />
             </svg>
           <% end %>
@@ -30,7 +30,7 @@
 
       <!-- Copyright -->
       <div class="text-sm text-slate-500 dark:text-slate-400 inline">
-        Copyright &copy; <%= link_to 'NikoDyring', 'https://github.com/nikodyring' %> | Built with
+        © 2023 <%= link_to 'NikoDyring.dev', 'https://github.com/nikodyring' %> - All rights reserved. | Built with
         <%= link_to 'https://rubyonrails.org/' do %>
           <%= image_tag(asset_path('ruby-on-rails.svg'), class: 'inline-block', width: 60, height: 30) %>
         <% end %>

app/views/articles/show.html.erb

@@ -49,7 +49,7 @@
           <p>
             When it comes to animations on the web, developers need to measure the animation's requirements with the right technology -- CSS or JavaScript.
           </p>
-          <%= image_tag @article.featured_image, class: 'w-full', width: '692', height: '390', alt: @article.headline %>
+          <%#= image_tag @article.featured_image, class: 'w-full', width: '692', height: '390', alt: @article.headline %>
           <div class="space-y-4">
             <p>
               Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. <strong class="font-medium text-slate-800 dark:text-slate-100">While CSS animation does have some limitations</strong>, most of the time it's more capable than we give it credit for! Not to mention, typically more performant.

app/views/devise/confirmations/new.html.erb

@@ -0,0 +1,16 @@
+<h2>Resend confirmation instructions</h2>
+
+<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Resend confirmation instructions" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/mailer/confirmation_instructions.html.erb

@@ -0,0 +1,5 @@
+<p>Welcome <%= @email %>!</p>
+
+<p>You can confirm your account email through the link below:</p>
+
+<p><%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>

app/views/devise/mailer/email_changed.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @email %>!</p>
+
+<% if @resource.try(:unconfirmed_email?) %>
+  <p>We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.</p>
+<% else %>
+  <p>We're contacting you to notify you that your email has been changed to <%= @resource.email %>.</p>
+<% end %>

app/views/devise/mailer/password_change.html.erb

@@ -0,0 +1,3 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>We're contacting you to notify you that your password has been changed.</p>

app/views/devise/mailer/reset_password_instructions.html.erb

@@ -0,0 +1,8 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Someone has requested a link to change your password. You can do this through the link below.</p>
+
+<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
+
+<p>If you didn't request this, please ignore this email.</p>
+<p>Your password won't change until you access the link above and create a new one.</p>

app/views/devise/mailer/unlock_instructions.html.erb

@@ -0,0 +1,7 @@
+<p>Hello <%= @resource.email %>!</p>
+
+<p>Your account has been locked due to an excessive number of unsuccessful sign in attempts.</p>
+
+<p>Click the link below to unlock your account:</p>
+
+<p><%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %></p>

app/views/devise/passwords/edit.html.erb

@@ -0,0 +1,25 @@
+<h2>Change your password</h2>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+  <%= f.hidden_field :reset_password_token %>
+
+  <div class="field">
+    <%= f.label :password, "New password" %><br />
+    <% if @minimum_password_length %>
+      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
+    <% end %>
+    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation, "Confirm new password" %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Change my password" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/passwords/new.html.erb

@@ -0,0 +1,16 @@
+<h2>Forgot your password?</h2>
+
+<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Send me reset password instructions" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>

app/views/devise/registrations/edit.html.erb

@@ -0,0 +1,43 @@
+<h2>Edit <%= resource_name.to_s.humanize %></h2>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
+    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
+    <%= f.password_field :password, autocomplete: "new-password" %>
+    <% if @minimum_password_length %>
+      <br />
+      <em><%= @minimum_password_length %> characters minimum</em>
+    <% end %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+    <%= f.password_field :current_password, autocomplete: "current-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Update" %>
+  </div>
+<% end %>
+
+<h3>Cancel my account</h3>
+
+<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
+
+<%= link_to "Back", :back %>

app/views/devise/registrations/new.html.erb

@@ -0,0 +1,29 @@
+<h2>Sign up</h2>
+
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+  <%= render "devise/shared/error_messages", resource: resource %>
+
+  <div class="field">
+    <%= f.label :email %><br />
+    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password %>
+    <% if @minimum_password_length %>
+    <em>(<%= @minimum_password_length %> characters minimum)</em>
+    <% end %><br />
+    <%= f.password_field :password, autocomplete: "new-password" %>
+  </div>
+
+  <div class="field">
+    <%= f.label :password_confirmation %><br />
+    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+  </div>
+
+  <div class="actions">
+    <%= f.submit "Sign up" %>
+  </div>
+<% end %>
+
+<%= render "devise/shared/links" %>