andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend Revamp

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 14:46:16 +07:00
parent 79cebd205c
commit d8c1e133ac
14 changed files with 425 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/ChangePasswordRequired.js
View File

@@ -83,19 +83,19 @@ const ChangePasswordRequired = () => {
}
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-md mx-auto px-6 py-12">
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
<div className="mb-8 text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFEBEE] mb-4">
<AlertTriangle className="h-8 w-8 text-[#E07A5F]" />
<AlertTriangle className="h-8 w-8 text-orange-500" />
</div>
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Password Change Required
</h1>
<p className="text-lg text-[#6B708D]">
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Your password was reset by an administrator. Please create a new password to continue.
</p>
</div>
@@ -111,7 +111,7 @@ const ChangePasswordRequired = () => {
value={formData.currentPassword}
onChange={handleInputChange}
placeholder="Enter temporary password"
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
@@ -125,7 +125,7 @@ const ChangePasswordRequired = () => {
value={formData.newPassword}
onChange={handleInputChange}
placeholder="Enter new password (min. 6 characters)"
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
@@ -139,15 +139,15 @@ const ChangePasswordRequired = () => {
value={formData.confirmPassword}
onChange={handleInputChange}
placeholder="Re-enter new password"
className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
/>
</div>
<div className="bg-[#FFF3E0] border-l-4 border-[#E07A5F] p-4 rounded-lg">
<div className="bg-[#f1eef9] border-l-4 border-[#664fa3] p-4 rounded-lg">
<div className="flex items-start">
<Lock className="h-5 w-5 text-[#E07A5F] mr-2 mt-0.5 flex-shrink-0" />
<div className="text-sm text-[#6B708D]">
<p className="font-medium text-[#3D405B] mb-1">Password Requirements:</p>
<Lock className="h-5 w-5 text-[#664fa3] mr-2 mt-0.5 flex-shrink-0" />
<div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="font-medium text-[#422268] mb-1">Password Requirements:</p>
<ul className="list-disc list-inside space-y-1">
<li>At least 6 characters long</li>
<li>Both passwords must match</li>
@@ -159,17 +159,17 @@ const ChangePasswordRequired = () => {
<Button
type="submit"
disabled={loading}
className="w-full bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
>
{loading ? 'Changing Password...' : 'Change Password'}
<ArrowRight className="ml-2 h-5 w-5" />
</Button>
<div className="text-center pt-4 border-t border-[#EAE0D5]">
<div className="text-center pt-4 border-t border-[#ddd8eb]">
<button
type="button"
onClick={handleLogout}
className="text-[#6B708D] hover:text-[#E07A5F] text-sm underline"
className="text-[#664fa3] hover:text-[#ff9e77] text-sm underline"
>
Logout instead
</button>