From 07cb5f98315fde40ea02000dd985c1f92e16b800 Mon Sep 17 00:00:00 2001
From: Agit Rubar Demir <61833677+agitrubard@users.noreply.github.com>
Date: Sat, 7 May 2022 21:25:49 +0300
Subject: [PATCH] Password Show Feature | SIS-191 (#89)

* TeacherPasswordOperationController/isPasswordChangeOperationEnabled Endpoint Has Been Fixed

* Push Path and PageNotFound user Has Been Fixed

* Show Password Feature Has Been Added to Teacher Change Password Page

* Show Password Feature Has Been Added to Officer Login Page

* Show Password Feature Has Been Added to Student Login Page

* Show Password Feature Has Been Added to Teacher Login Page

* Show Password Feature Has Been Added to Teacher Change Password Page

* Show Password Feature Has Been Added to Officer Login Page

* Show Password Feature Has Been Added to Student Login Page

* Show Password Feature Has Been Added to Teacher Login Page

* Push Page Path Has Been Fixed

* Show Password Feature Has Been Added to Student Change Password Page

* Show Password Feature Has Been Added to Officer Change Password Page
---
 .../change-password/[operationId]/index.js    | 102 +++++++++++++----
 pages/login/officer/index.js                  |  50 ++++++--
 .../change-password/[operationId]/index.js    | 103 +++++++++++++----
 pages/login/student/index.js                  |  53 +++++++--
 .../change-password/[operationId]/index.js    | 107 ++++++++++++++----
 pages/login/teacher/index.js                  |  53 +++++++--
 .../TeacherPasswordOperationController.js     |   2 +-
 7 files changed, 365 insertions(+), 105 deletions(-)

diff --git a/pages/login/officer/change-password/[operationId]/index.js b/pages/login/officer/change-password/[operationId]/index.js
index 4e143536..0f22541c 100644
--- a/pages/login/officer/change-password/[operationId]/index.js
+++ b/pages/login/officer/change-password/[operationId]/index.js
@@ -1,4 +1,4 @@
-import {FingerPrintIcon} from "@heroicons/react/outline";
+import {EyeIcon, EyeOffIcon, FingerPrintIcon} from "@heroicons/react/outline";
 import {useState} from "react";
 import {useRouter} from "next/router";
 import SISTitle from "../../../../../public/components/page-titles";
@@ -110,6 +110,18 @@ export default function OfficerChangePassword({isDataFound, operationId}) {
         }
     }
 
+
+    const [isNewPasswordShow, setIsNewPasswordShow] = useState(false);
+    const showNewPassword = () => {
+        setIsNewPasswordShow(!isNewPasswordShow);
+    }
+
+
+    const [isNewPasswordRepeatShow, setIsNewPasswordRepeatShow] = useState(false);
+    const showNewPasswordRepeat = () => {
+        setIsNewPasswordRepeatShow(!isNewPasswordRepeatShow);
+    }
+
     return (
         <>
             <div className="bg-sis-gray h-screen">
@@ -139,38 +151,84 @@ export default function OfficerChangePassword({isDataFound, operationId}) {
                                         <div className="px-4 py-5 bg-white sm:p-6">
                                             <div className="grid grid-cols-1 gap-6">
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPassword}
-                                                        id="password"
-                                                        name="password"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPassword}
+                                                            id="password"
+                                                            name="password"
+                                                            type={isNewPasswordShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE (TEKRAR)
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPasswordRepeat}
-                                                        id="password-repeat"
-                                                        name="password-repeat"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPasswordRepeat}
+                                                            id="password-repeat"
+                                                            name="password-repeat"
+                                                            type={isNewPasswordRepeatShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
-
                                         </div>
+
                                         <div className="px-4 py-3 text-right sm:px-6">
                                             <div>
                                                 <button
diff --git a/pages/login/officer/index.js b/pages/login/officer/index.js
index 7d93f058..70b445e7 100644
--- a/pages/login/officer/index.js
+++ b/pages/login/officer/index.js
@@ -7,6 +7,7 @@ import FailNotification from "../../../public/notifications/fail";
 import SisOfficerStorage from "../../../public/storage/officer/SisOfficerStorage";
 import OfficerController from "../../../public/api/officer/OfficerController";
 import LoginController from "../../../public/api/login/LoginController";
+import {EyeIcon, EyeOffIcon} from "@heroicons/react/outline";
 
 export default function OfficerLogin() {
 
@@ -64,6 +65,12 @@ export default function OfficerLogin() {
         openFailLoginNotification();
     }
 
+
+    const [isPasswordShow, setIsPasswordShow] = useState(false);
+    const showPassword = () => {
+        setIsPasswordShow(!isPasswordShow);
+    }
+
     return (
         <div className="bg-sis-gray h-screen">
             <div className="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -111,19 +118,42 @@ export default function OfficerLogin() {
                                             </div>
 
                                             <div className="sm:col-span-1">
-                                                <label htmlFor="last-name"
+                                                <label htmlFor="password"
                                                        className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                     ŞİFRE
                                                 </label>
-                                                <input
-                                                    onChange={changePassword}
-                                                    id="password"
-                                                    name="password"
-                                                    type="password"
-                                                    autoComplete="current-password"
-                                                    required
-                                                    className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                />
+                                                <div className="relative w-full">
+                                                    <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                        {
+                                                            isPasswordShow
+                                                                ?
+                                                                <EyeIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                                :
+                                                                <EyeOffIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                        }
+                                                    </div>
+                                                    <input
+                                                        onChange={changePassword}
+                                                        id="password"
+                                                        name="password"
+                                                        type={isPasswordShow ? "text" : "password"}
+                                                        autoComplete="password"
+                                                        required
+                                                        className={
+                                                            isPasswordShow
+                                                                ?
+                                                                "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                :
+                                                                "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                        }
+                                                    />
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
diff --git a/pages/login/student/change-password/[operationId]/index.js b/pages/login/student/change-password/[operationId]/index.js
index 0430839e..e1c4c78f 100644
--- a/pages/login/student/change-password/[operationId]/index.js
+++ b/pages/login/student/change-password/[operationId]/index.js
@@ -1,4 +1,4 @@
-import {FingerPrintIcon} from "@heroicons/react/outline";
+import {EyeIcon, EyeOffIcon, FingerPrintIcon} from "@heroicons/react/outline";
 import {useState} from "react";
 import {useRouter} from "next/router";
 import SISTitle from "../../../../../public/components/page-titles";
@@ -111,6 +111,18 @@ export default function StudentForgotPassword({isDataFound, operationId}) {
         }
     }
 
+
+    const [isNewPasswordShow, setIsNewPasswordShow] = useState(false);
+    const showNewPassword = () => {
+        setIsNewPasswordShow(!isNewPasswordShow);
+    }
+
+
+    const [isNewPasswordRepeatShow, setIsNewPasswordRepeatShow] = useState(false);
+    const showNewPasswordRepeat = () => {
+        setIsNewPasswordRepeatShow(!isNewPasswordRepeatShow);
+    }
+
     return (
         <>
             <div className="bg-sis-gray h-screen">
@@ -140,40 +152,85 @@ export default function StudentForgotPassword({isDataFound, operationId}) {
                                         <div className="px-4 py-5 bg-white sm:p-6">
                                             <div className="grid grid-cols-1 gap-6">
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPassword}
-                                                        id="password"
-                                                        name="password"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPassword}
+                                                            id="password"
+                                                            name="password"
+                                                            type={isNewPasswordShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE (TEKRAR)
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPasswordRepeat}
-                                                        id="password-repeat"
-                                                        name="password-repeat"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPasswordRepeat}
+                                                            id="password-repeat"
+                                                            name="password-repeat"
+                                                            type={isNewPasswordRepeatShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
-
                                         </div>
-                                        <div className="px-4 py-3 text-right sm:px-6">
 
+                                        <div className="px-4 py-3 text-right sm:px-6">
                                             <div>
                                                 <button
                                                     type="submit"
diff --git a/pages/login/student/index.js b/pages/login/student/index.js
index 5d467317..cdb9fdc0 100644
--- a/pages/login/student/index.js
+++ b/pages/login/student/index.js
@@ -7,6 +7,7 @@ import FailNotification from "../../../public/notifications/fail";
 import {useRouter} from "next/router";
 import StudentController from "../../../public/api/student/StudentController";
 import LoginController from "../../../public/api/login/LoginController";
+import {EyeIcon, EyeOffIcon} from "@heroicons/react/outline";
 
 export default function StudentLogin() {
 
@@ -63,6 +64,12 @@ export default function StudentLogin() {
         openFailLoginNotification();
     }
 
+
+    const [isPasswordShow, setIsPasswordShow] = useState(false);
+    const showPassword = () => {
+        setIsPasswordShow(!isPasswordShow);
+    }
+
     return (
         <div className="bg-sis-gray h-screen">
             <div className="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -109,25 +116,47 @@ export default function StudentLogin() {
                                             </div>
 
                                             <div className="sm:col-span-1">
-                                                <label htmlFor="last-name"
+                                                <label htmlFor="password"
                                                        className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                     ŞİFRE
                                                 </label>
-                                                <input
-                                                    onChange={changePassword}
-                                                    id="password"
-                                                    name="password"
-                                                    type="password"
-                                                    autoComplete="current-password"
-                                                    required
-                                                    className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                />
+                                                <div className="relative w-full">
+                                                    <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                        {
+                                                            isPasswordShow
+                                                                ?
+                                                                <EyeIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                                :
+                                                                <EyeOffIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                        }
+                                                    </div>
+                                                    <input
+                                                        onChange={changePassword}
+                                                        id="password"
+                                                        name="password"
+                                                        type={isPasswordShow ? "text" : "password"}
+                                                        autoComplete="password"
+                                                        required
+                                                        className={
+                                                            isPasswordShow
+                                                                ?
+                                                                "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                :
+                                                                "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                        }
+                                                    />
+                                                </div>
                                             </div>
                                         </div>
-
                                     </div>
-                                    <div className="px-4 py-3 text-right sm:px-6">
 
+                                    <div className="px-4 py-3 text-right sm:px-6">
                                         <div>
                                             <button
                                                 type="submit"
diff --git a/pages/login/teacher/change-password/[operationId]/index.js b/pages/login/teacher/change-password/[operationId]/index.js
index 4c83152a..1b241bb8 100644
--- a/pages/login/teacher/change-password/[operationId]/index.js
+++ b/pages/login/teacher/change-password/[operationId]/index.js
@@ -1,4 +1,4 @@
-import {FingerPrintIcon} from "@heroicons/react/outline";
+import {EyeIcon, EyeOffIcon, FingerPrintIcon} from "@heroicons/react/outline";
 import {useState} from "react";
 import {useRouter} from "next/router";
 import SISTitle from "../../../../../public/components/page-titles";
@@ -24,7 +24,7 @@ export default function TeacherChangePassword({isDataFound, operationId}) {
 
     if (!isDataFound) {
         return (
-            <PageNotFound user=""/>
+            <PageNotFound user="teacher"/>
         )
     }
 
@@ -45,7 +45,7 @@ export default function TeacherChangePassword({isDataFound, operationId}) {
 
     function closeSuccessChangePasswordNotification() {
         setIsOpenSuccessChangePasswordNotification(false);
-        router.push("/login/officer");
+        router.push("/login/teacher");
     }
 
     function openSuccessChangePasswordNotification() {
@@ -110,6 +110,18 @@ export default function TeacherChangePassword({isDataFound, operationId}) {
         }
     }
 
+
+    const [isNewPasswordShow, setIsNewPasswordShow] = useState(false);
+    const showNewPassword = () => {
+        setIsNewPasswordShow(!isNewPasswordShow);
+    }
+
+
+    const [isNewPasswordRepeatShow, setIsNewPasswordRepeatShow] = useState(false);
+    const showNewPasswordRepeat = () => {
+        setIsNewPasswordRepeatShow(!isNewPasswordRepeatShow);
+    }
+
     return (
         <>
             <div className="bg-sis-gray h-screen">
@@ -139,40 +151,85 @@ export default function TeacherChangePassword({isDataFound, operationId}) {
                                         <div className="px-4 py-5 bg-white sm:p-6">
                                             <div className="grid grid-cols-1 gap-6">
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPassword}
-                                                        id="password"
-                                                        name="password"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPassword}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPassword}
+                                                            id="password"
+                                                            name="password"
+                                                            type={isNewPasswordShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                                 <div className="sm:col-span-1">
-                                                    <label htmlFor="first-name"
+                                                    <label htmlFor="password"
                                                            className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                         YENİ ŞİFRE (TEKRAR)
                                                     </label>
-                                                    <input
-                                                        onChange={changeNewPasswordRepeat}
-                                                        id="password-repeat"
-                                                        name="password-repeat"
-                                                        type="password"
-                                                        autoComplete="current-password"
-                                                        required
-                                                        className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                    />
+                                                    <div className="relative w-full">
+                                                        <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                            {
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    <EyeIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                                    :
+                                                                    <EyeOffIcon
+                                                                        className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                        onClick={showNewPasswordRepeat}
+                                                                        aria-hidden="true" htmlFor="password"/>
+                                                            }
+                                                        </div>
+                                                        <input
+                                                            onChange={changeNewPasswordRepeat}
+                                                            id="password-repeat"
+                                                            name="password-repeat"
+                                                            type={isNewPasswordRepeatShow ? "text" : "password"}
+                                                            autoComplete="password"
+                                                            required
+                                                            className={
+                                                                isNewPasswordRepeatShow
+                                                                    ?
+                                                                    "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                    :
+                                                                    "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                            }
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
-
                                         </div>
-                                        <div className="px-4 py-3 text-right sm:px-6">
 
+                                        <div className="px-4 py-3 text-right sm:px-6">
                                             <div>
                                                 <button
                                                     type="submit"
diff --git a/pages/login/teacher/index.js b/pages/login/teacher/index.js
index 69a1f8d3..738dc25d 100644
--- a/pages/login/teacher/index.js
+++ b/pages/login/teacher/index.js
@@ -7,6 +7,7 @@ import ProcessNotification from "../../../public/notifications/process";
 import FailNotification from "../../../public/notifications/fail";
 import TeacherController from "../../../public/api/teacher/TeacherController";
 import LoginController from "../../../public/api/login/LoginController";
+import {EyeIcon, EyeOffIcon} from "@heroicons/react/outline";
 
 export default function TeacherLogin() {
 
@@ -63,6 +64,12 @@ export default function TeacherLogin() {
         openFailLoginNotification();
     }
 
+
+    const [isPasswordShow, setIsPasswordShow] = useState(false);
+    const showPassword = () => {
+        setIsPasswordShow(!isPasswordShow);
+    }
+
     return (
         <div className="bg-sis-gray h-screen">
             <div className="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -110,25 +117,47 @@ export default function TeacherLogin() {
                                             </div>
 
                                             <div className="sm:col-span-1">
-                                                <label htmlFor="last-name"
+                                                <label htmlFor="password"
                                                        className="ml-0.5 text-xl text-sis-darkblue font-phenomenaBold">
                                                     ŞİFRE
                                                 </label>
-                                                <input
-                                                    onChange={changePassword}
-                                                    id="password"
-                                                    name="password"
-                                                    type="password"
-                                                    autoComplete="current-password"
-                                                    required
-                                                    className="font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
-                                                />
+                                                <div className="relative w-full">
+                                                    <div className="absolute inset-y-0 right-0 flex items-center px-2">
+                                                        {
+                                                            isPasswordShow
+                                                                ?
+                                                                <EyeIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                                :
+                                                                <EyeOffIcon
+                                                                    className="h-6 w-8 text-sis-yellow group-hover:text-sis-yellow cursor-pointer"
+                                                                    onClick={showPassword}
+                                                                    aria-hidden="true" htmlFor="password"/>
+                                                        }
+                                                    </div>
+                                                    <input
+                                                        onChange={changePassword}
+                                                        id="password"
+                                                        name="password"
+                                                        type={isPasswordShow ? "text" : "password"}
+                                                        autoComplete="password"
+                                                        required
+                                                        className={
+                                                            isPasswordShow
+                                                                ?
+                                                                "font-phenomenaRegular text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                                :
+                                                                "text-sis-yellow mt-1 focus:ring-sis-yellow focus:border-sis-yellow block w-full shadow-sm sm:text-xl border-gray-300 rounded-md focus:text-sis-darkblue"
+                                                        }
+                                                    />
+                                                </div>
                                             </div>
                                         </div>
-
                                     </div>
-                                    <div className="px-4 py-3 text-right sm:px-6">
 
+                                    <div className="px-4 py-3 text-right sm:px-6">
                                         <div>
                                             <button
                                                 type="submit"
diff --git a/public/api/teacher/password/TeacherPasswordOperationController.js b/public/api/teacher/password/TeacherPasswordOperationController.js
index ed92082b..fd688c6a 100644
--- a/public/api/teacher/password/TeacherPasswordOperationController.js
+++ b/public/api/teacher/password/TeacherPasswordOperationController.js
@@ -2,7 +2,7 @@
 const SIS_API_URL = process.env.NEXT_PUBLIC_SIS_API_URL;
 
 const isPasswordChangeOperationEnabled = async (operationId) => {
-    const apiResult = await fetch(`${SIS_API_URL}/teacher/password/operation/${operationId}`, {
+    const apiResult = await fetch(`${SIS_API_URL}/teacher/password/operation/enabled/${operationId}`, {
         headers: {'Content-Type': 'application/json'},
         method: 'GET'
     });