update 0.0.1

application/config/config.php

@@ -32,15 +32,15 @@ $sport = $_SERVER['SERVER_PORT'];
 // $config['base_url'] = 'http://'.$_SERVER['SERVER_NAME'];
 
 // Memeriksa alamat server dan mengatur $config['base_url'] sesuai dengan kondisi
-if ($sname === '192.168.100.51') {
+if ($sname == '192.168.100.51') {
     if ($_SERVER['SERVER_PORT'] == 80) {
         $config['base_url'] = 'http://'.$sname.'/ci/';
     } else {
         $config['base_url'] = 'https://'.$$sname.'/ci/';
     }
-}elseif ($sname === 'localhost') {
+}elseif ($sname == 'localhost') {
     $config['base_url'] = 'https://localhost/ci/';
-} elseif ($sname === 'ci.is') {
+} elseif ($sname == 'ci.is') {
     // Default base URL jika alamat server tidak cocok dengan yang diharapkan
     if ($sport == 80) {
         $config['base_url'] = 'http://ci.is/';

application/controllers/Account.php

@@ -4,13 +4,28 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 class Account extends CI_Controller {
 
 
+    public function __construct()
+    {
+        parent::__construct();
+        $this->load->library('session');
+        $this->load->library('form_validation');
+
+        // Memeriksa status login pengguna
+        if (!$this->session->userdata('email')) {
+            // Jika pengguna belum login, alihkan ke halaman login atau tindakan lainnya
+            $this->session->set_flashdata('message', '<div class="alert alert-danger text-white" role="alert">Silahkan login terlebih dahulu !</div>');
+            redirect('auth');
+        }
+    }
+
+
 	public function index()
 
 	{
 		$data['title']		= 'My Account';
 		$data['user']		= $this->db->get_where('users_account', ['email' => $this->session->userdata('email')])->row_array();
 
-		$this->load->view('partials/01header', $data);
+		$this->load->view('partials/01header-for-account', $data);
 		$this->load->view('account', $data);
 	}
 
@@ -20,10 +35,32 @@ class Account extends CI_Controller {
     {
         $data['title']		= 'Security';
         $data['user']		= $this->db->get_where('users_account', ['email' => $this->session->userdata('email')])->row_array();
+        // $data['passJs']		= '<script src="'.base_url().'src/js/password.js"></script>';
 
         $this->load->view('partials/01header', $data);
         $this->load->view('security', $data);
     }
 
 
+    public function updatePassword()
+
+    {
+        $password   = $this->input->post('password');
+        $password1  = $this->input->post('password1');
+        $password2  = $this->input->post('password2');
+        
+        $this->form_validation->set_rules('password', 'Current Password', 'required|trim');
+        $this->form_validation->set_rules('password1', 'New Password', 'required|trim|min_length[3]');
+        $this->form_validation->set_rules('password2', 'Confirm New Password', 'required|trim|min_length[3]|matches[password1]');
+
+        $data       = password_hash($password1, PASSWORD_DEFAULT);
+
+        $this->db->where('email', $this->session->userdata('email'));
+        $this->db->update('users_account', ['password' => $data]);
+        
+        $this->session->set_flashdata('message', '<div class="alert alert-success text-white" role="alert">Password has been changed !</div>');
+        redirect('account/security');
+    }
+
+
 }

application/views/account.php

@@ -9,10 +9,35 @@
               <div class="grid gap-6 mb-8 md:grid-cols-2">
               <div
                 class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"
+                style="justify-content: center; align-items: center;"
               >
                 <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
                   Your Profile
                 </h4>
+                <div class="relative">
+                  <form action="" method="post">
+                    <img
+                      class="profile-image"
+                      style="width: 150px; height: 150px;"
+                      src="<?= base_url('src/user/image/') . $user['image']; ?>"
+                      alt="Profile Picture"
+                      aria-hidden="true"
+                    />
+                    <label
+                      for="profile-image"
+                      class="profile-label"
+                    >
+                    <i class="fas fa-camera text-white"></i>
+                    </label>
+                    <input id="profile-image" type="file" class="profile-input" accept="image/*">
+                    <button
+                      type="submit"
+                      class="mx-auto px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+                    >
+                      Save Changes
+                    </button>
+                  </form>
+                </div>
               </div>
             </div>
           </div>

application/views/partials/01header-for-account.php

@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en">
+  <head>
+    <link href="https://dyzulk.me/dist/img/favicon.png" rel="icon" sizes=”32×32″ type="image/png">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><?=$title;?> - App Dashboard</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="<?=base_url();?>src/css/tailwind.output.css" />
+    <script
+      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
+      defer
+    ></script>
+    <script src="<?=base_url();?>src/js/init-alpine.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
+      defer
+    ></script>
+    <script src="<?=base_url();?>src/js/charts-lines.js" defer></script>
+    <script src="<?=base_url();?>src/js/charts-pie.js" defer></script>
+    
+    <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dyzcdn/fontawesome-pro-5.15.4@main/css/all.css">
+    <script src="https://cdn.jsdelivr.net/gh/dyzcdn/fontawesome-pro-5.15.4@main/js/pro.js"></script>
+
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.28/dist/sweetalert2.all.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.28/dist/sweetalert2.min.css">
+
+    <style>
+      /* Gaya untuk tag <img> */
+      img.profile-image {
+        width: 150px;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 50%;
+        display: block;
+        margin: 0 auto;
+      }
+
+      /* Gaya untuk tag <label> */
+      label.profile-label {
+        display: block;
+        text-align: center;
+        padding: 8px 16px;
+        background-color: #7e3af2; /* Ganti warna sesuai preferensi Anda */
+        color: white;
+        border-radius: 9999px;
+        cursor: pointer;
+        margin-top: 16px;
+        margin-left: auto;
+        margin-right: auto;
+        width: fit-content;
+      }
+
+      /* Gaya untuk tag <input> */
+      input.profile-input {
+        display: none;
+      }
+    </style>
+
+
+    
+  </head>
+  <body>
+    <div
+      class="flex h-screen bg-gray-50 dark:bg-gray-900"
+      :class="{ 'overflow-hidden': isSideMenuOpen }"
+    >
+    <!-- Query Menu -->
+    <?php
+    $role_id    = $this->session->userdata('role_id');
+    $queryMenu  = "  SELECT `user_menu`.`id`, `title`, `url`, `icon`
+                       FROM `user_menu` JOIN `user_access_menu`
+                       ON `user_menu`.`id` = `user_access_menu`.`menu_id`
+                       WHERE `user_access_menu`.`role_id` = $role_id
+                        ORDER BY `user_access_menu`.`menu_id` ASC
+                    ";
+    $menu       = $this->db->query($queryMenu)->result_array();
+    ?>
+      <!-- Desktop sidebar -->
+      <aside
+        class="z-20 hidden w-64 overflow-y-auto bg-white dark:bg-gray-800 md:block flex-shrink-0"
+      >
+        <div class="py-4 text-gray-500 dark:text-gray-400">
+          <a
+            class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
+            href="#"
+          >
+            DyzPanel
+          </a>
+          <ul class="mt-6"></ul>
+          <?php foreach ($menu as $m) : ?>
+          <ul>
+            <li class="relative px-6 py-3">
+              <?php if ($title == $m['title']) : ?>
+                <span class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
+                <?php endif; ?>
+                <a
+                href="<?=base_url($m['url']);?>"
+                <?php if ($title == $m['title']) : ?>
+                  class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
+                <?php else : ?>
+                  class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                <?php endif; ?>>
+                <i class="<?=$m['icon'];?>"></i>
+                <span class="ml-4"><?=$m['title'];?></span>
+              </a>
+            </li>
+          </ul>
+          <?php endforeach; ?>
+          <div class="px-6 my-6">
+            <a href="<?=base_url('auth/logout');?>"
+              class="flex items-center justify-between w-full px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+            >
+              Log Out
+              <i class="ml-4 fad fa-power-off"></i>
+            </a>
+          </div>
+        </div>
+      </aside>
+      <!-- Mobile sidebar -->
+      <!-- Backdrop -->
+      <div
+        x-show="isSideMenuOpen"
+        x-transition:enter="transition ease-in-out duration-150"
+        x-transition:enter-start="opacity-0"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in-out duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0"
+        class="fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
+      ></div>
+      <aside
+        class="fixed inset-y-0 z-20 flex-shrink-0 w-64 mt-16 overflow-y-auto bg-white dark:bg-gray-800 md:hidden"
+        x-show="isSideMenuOpen"
+        x-transition:enter="transition ease-in-out duration-150"
+        x-transition:enter-start="opacity-0 transform -translate-x-20"
+        x-transition:enter-end="opacity-100"
+        x-transition:leave="transition ease-in-out duration-150"
+        x-transition:leave-start="opacity-100"
+        x-transition:leave-end="opacity-0 transform -translate-x-20"
+        @click.away="closeSideMenu"
+        @keydown.escape="closeSideMenu"
+      >
+        <div class="py-4 text-gray-500 dark:text-gray-400">
+          <a
+            class="ml-6 text-lg font-bold text-gray-800 dark:text-gray-200"
+            href="#"
+          >
+            DyzPanel
+          </a>
+          <ul class="mt-6"></ul>
+          <?php foreach ($menu as $m) : ?>
+          <ul>
+            <li class="relative px-6 py-3">
+              <?php if ($title == $m['title']) : ?>
+              <span
+                class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
+                aria-hidden="true"
+              ></span>
+              <?php endif; ?>
+              <a
+                <?php if ($title == $m['title']) : ?>
+                class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
+                <?php else : ?>
+                class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
+                <?php endif; ?>
+                href="<?=base_url($m['url']);?>"
+              >
+                <i class="<?=$m['icon'];?>"></i>
+                <span class="ml-4"><?=$m['title'];?></span>
+              </a>
+            </li>
+          </ul>
+          <?php endforeach; ?>
+          <div class="px-6 my-6">
+            <a href="<?=base_url('auth/logout');?>"
+              class="flex items-center justify-between px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+            >
+              Log Out
+              <i class="ml-4 fad fa-power-off"></i>
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="flex flex-col flex-1 w-full">
+        <header class="z-10 py-4 bg-white shadow-md dark:bg-gray-800">
+          <div
+            class="container flex items-center justify-between h-full px-6 mx-auto text-purple-600 dark:text-purple-300"
+          >
+            <!-- Mobile hamburger -->
+            <button
+              class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-purple"
+              @click="toggleSideMenu"
+              aria-label="Menu"
+            >
+              <svg
+                class="w-6 h-6"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>
+            <!-- Search input -->
+            <div class="flex justify-center flex-1 lg:mr-32">
+              <div
+                class="relative w-full max-w-xl mr-6 focus-within:text-purple-500"
+              >
+                <div class="absolute inset-y-0 flex items-center pl-2">
+                  <svg
+                    class="w-4 h-4"
+                    aria-hidden="true"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+                      clip-rule="evenodd"
+                    ></path>
+                  </svg>
+                </div>
+                <input
+                  class="w-full pl-8 pr-2 text-sm text-gray-700 placeholder-gray-600 bg-gray-100 border-0 rounded-md dark:placeholder-gray-500 dark:focus:shadow-outline-gray dark:focus:placeholder-gray-600 dark:bg-gray-700 dark:text-gray-200 focus:placeholder-gray-500 focus:bg-white focus:border-purple-300 focus:outline-none focus:shadow-outline-purple form-input"
+                  type="text"
+                  placeholder="Search for projects"
+                  aria-label="Search"
+                />
+              </div>
+            </div>
+            <ul class="flex items-center flex-shrink-0 space-x-6">
+              <!-- Theme toggler -->
+              <li class="flex">
+                <button
+                  class="rounded-md focus:outline-none focus:shadow-outline-purple"
+                  @click="toggleTheme"
+                  aria-label="Toggle color mode"
+                >
+                  <template x-if="!dark">
+                    <svg
+                      class="w-5 h-5"
+                      aria-hidden="true"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
+                      ></path>
+                    </svg>
+                  </template>
+                  <template x-if="dark">
+                    <svg
+                      class="w-5 h-5"
+                      aria-hidden="true"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                        clip-rule="evenodd"
+                      ></path>
+                    </svg>
+                  </template>
+                </button>
+              </li>
+              <!-- Notifications menu -->
+              <li class="relative">
+                <button
+                  class="relative align-middle rounded-md focus:outline-none focus:shadow-outline-purple"
+                  @click="toggleNotificationsMenu"
+                  @keydown.escape="closeNotificationsMenu"
+                  aria-label="Notifications"
+                  aria-haspopup="true"
+                >
+                  <svg
+                    class="w-5 h-5"
+                    aria-hidden="true"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
+                    ></path>
+                  </svg>
+                  <!-- Notification badge -->
+                  <span
+                    aria-hidden="true"
+                    class="absolute top-0 right-0 inline-block w-3 h-3 transform translate-x-1 -translate-y-1 bg-red-600 border-2 border-white rounded-full dark:border-gray-800"
+                  ></span>
+                </button>
+                <template x-if="isNotificationsMenuOpen">
+                  <ul
+                    x-transition:leave="transition ease-in duration-150"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    @click.away="closeNotificationsMenu"
+                    @keydown.escape="closeNotificationsMenu"
+                    class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:text-gray-300 dark:border-gray-700 dark:bg-gray-700"
+                  >
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="#"
+                      >
+                        <span>Messages</span>
+                        <span
+                          class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
+                        >
+                          13
+                        </span>
+                      </a>
+                    </li>
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="#"
+                      >
+                        <span>Sales</span>
+                        <span
+                          class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-600 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-600"
+                        >
+                          2
+                        </span>
+                      </a>
+                    </li>
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center justify-between w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="#"
+                      >
+                        <span>Alerts</span>
+                      </a>
+                    </li>
+                  </ul>
+                </template>
+              </li>
+              <!-- Profile menu -->
+              <li class="relative">
+                <button
+                  class="align-middle rounded-full focus:shadow-outline-purple focus:outline-none"
+                  @click="toggleProfileMenu"
+                  @keydown.escape="closeProfileMenu"
+                  aria-label="Account"
+                  aria-haspopup="true"
+                >
+                  <img
+                    class="object-cover w-8 h-8 rounded-full"
+                    src="<?=base_url('src/user/image/'); echo $user['image'];?>"
+                    alt="Your Avatar"
+                    aria-hidden="true"
+                  />
+                </button>
+                <template x-if="isProfileMenuOpen">
+                  <ul
+                    x-transition:leave="transition ease-in duration-150"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    @click.away="closeProfileMenu"
+                    @keydown.escape="closeProfileMenu"
+                    class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
+                    aria-label="submenu"
+                  >
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="<?=base_url('account');?>"
+                      >
+                        <i class="w-4 h-4 mr-3 far fa-user"></i>
+                        <span>Profile</span>
+                      </a>
+                    </li>
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="<?=base_url('account/security');?>"
+                      >
+                        <i class="w-4 h-4 mr-3 fas fa-lock-alt"></i>
+                        <span>Security</span>
+                      </a>
+                    </li>
+                    <li class="flex">
+                      <a
+                        class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                        href="<?=base_url('auth/logout');?>"
+                      >
+                        <svg
+                          class="w-4 h-4 mr-3"
+                          aria-hidden="true"
+                          fill="none"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+                          ></path>
+                        </svg>
+                        <span>Log out</span>
+                      </a>
+                    </li>
+                  </ul>
+                </template>
+              </li>
+            </ul>
+          </div>
+        </header>

application/views/partials/01header.php

@@ -33,6 +33,11 @@
     <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.28/dist/sweetalert2.all.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.28/dist/sweetalert2.min.css">
+
+    <!-- Password.js -->
+    <?php if (!empty($passJs)) : ?>
+<?=$passJs;?>
+    <?php endif; ?>
     
   </head>
   <body>

application/views/security.php

@@ -13,9 +13,88 @@
                 <h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
                   Update your Password
                 </h4>
+                <form action="<?=base_url('account/updatePassword');?>" method="post">
+                  <label class="block text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                      Type your current password
+                    </span>
+                    <input
+                      id="current-password"
+                      name="password"
+                      class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                      type="password" />
+                  </label>
+
+                  <!-- Type your new password -->
+                  <label class="block mt-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                      Type your new password
+                    </span>
+                    <input
+                      id="new-password"
+                      name="password1"
+                      class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                      type="password" />
+                    <span id="new-password-message" class="text-xs text-gray-600 dark:text-gray-400"></span>
+                  </label>
+
+                  <!-- Type your new password again -->
+                  <label class="block mt-4 text-sm">
+                    <span class="text-gray-700 dark:text-gray-400">
+                      Type your new password again
+                    </span>
+                    <input
+                      id="confirm-password"
+                      name="password2"
+                      class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                      type="password" />
+                    <span id="confirm-password-message" class="text-xs text-gray-600 dark:text-gray-400"></span>
+                  </label>
+                  <div class="mb-4 mt-6">
+                    <button
+                      type="submit"
+                      class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+                    >
+                      Save Changes
+                    </button>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
+          <script>
+              const newPasswordInput = document.getElementById("new-password");
+              const confirmPasswordInput = document.getElementById("confirm-password");
+              const newPasswordMessage = document.getElementById("new-password-message");
+              const confirmPasswordMessage = document.getElementById("confirm-password-message");
+
+              newPasswordInput.addEventListener("input", () => {
+                  const newPassword = newPasswordInput.value;
+                  if (newPassword.length <= 3) {
+                      newPasswordMessage.textContent = "Your password must be at least 3 characters long.";
+                      newPasswordMessage.style.color = "#dc2626";
+                  } else if (newPassword.length > 3 && newPassword.length < 6) {
+                      newPasswordMessage.textContent = "Your password is too short.";
+                      newPasswordMessage.style.color = "orange";
+                  } else if (newPassword.length >= 6) {
+                      newPasswordMessage.textContent = "Your password is strong.";
+                      newPasswordMessage.style.color = "#16a34a";
+                  }
+              });
+
+              confirmPasswordInput.addEventListener("input", () => {
+                  const newPassword = newPasswordInput.value;
+                  const confirmPassword = confirmPasswordInput.value;
+
+                  if (confirmPassword !== newPassword) {
+                      confirmPasswordMessage.textContent = "Passwords do not match.";
+                      confirmPasswordMessage.style.color = "#dc2626";
+                  } else {
+                      confirmPasswordMessage.textContent = "Password match";
+                      confirmPasswordMessage.style.color = "#16a34a";
+                  }
+              });
+          </script>
         </main>
       </div>
     </div>

src/js/password.js

@@ -0,0 +1,26 @@
+const newPasswordInput = document.getElementById('new-password');
+const confirmPasswordInput = document.getElementById('confirm-password');
+const newPasswordMessage = document.getElementById('new-password-message');
+const confirmMessage = document.getElementById('confirm-password-message');
+
+// Event listener untuk memeriksa perubahan pada input password baru
+newPasswordInput.addEventListener('input', function () {
+  const newPassword = newPasswordInput.value;
+
+  if (newPassword.length < 6) {
+    newPasswordMessage.textContent = 'Your password is too short.';
+  } else {
+    newPasswordMessage.textContent = 'Your password is strong.';
+  }
+});
+
+// Event listener untuk memeriksa perubahan pada input password konfirmasi
+confirmPasswordInput.addEventListener('input', function () {
+  const confirmPassword = confirmPasswordInput.value;
+  
+  if (confirmPassword.length < 3) {
+    confirmMessage.textContent = 'Your password must be at least 3 characters long.';
+  } else {
+    confirmMessage.textContent = '';
+  }
+});