Skip to content

Commit

Permalink
Password Show Feature | SIS-191 (#89)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@agitrubard
agitrubard authored May 7, 2022
1 parent fca6491 commit 07cb5f9
Show file tree
Hide file tree
Showing 7 changed files with 365 additions and 105 deletions.
102 changes: 80 additions & 22 deletions pages/login/officer/change-password/[operationId]/index.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down
50 changes: 40 additions & 10 deletions pages/login/officer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 07cb5f9

Please sign in to comment.