kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
zadit
2025-01-25 00:17:06 +07:00
parent 469d786d49
commit a1b7d0b844
13 changed files with 542 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/CreateUserWithCoupon.js
View File

@@ -1,10 +1,7 @@
// LinktreePage.js
import React, { useState, useEffect } from 'react';
import styles from './LinktreePage.module.css'; // Import the module.css file
import API_BASE_URL from '../config.js';
function getAuthToken() {
return localStorage.getItem('auth');
}
import styles from './Join.module.css';
import { checkCoupon, createUserWithCoupon } from '../helpers/couponHelpers'; // Import the helper functions
const LinktreePage = ({ setModal }) => {
const queryParams = new URLSearchParams(window.location.search);
@@ -25,39 +22,22 @@ const LinktreePage = ({ setModal }) => {
// Detect query params on component mount
useEffect(() => {
const code = queryParams.get('couponCode');
console.log(code)
if (code) {
setCouponStatus(200);
setCouponStatus('Coupon is valid');
setCouponCode(code);
setIsUsingCoupon(true); // Automatically switch to the coupon input state
setIsUsingCoupon(true); // Automatically switch to the coupon input state
}
}, [queryParams]);
// Handle coupon validation
const handleCheckCoupon = async (e) => {
e.preventDefault();
try {
const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${getAuthToken()}`,
},
});
if (response.ok) {
const data = await response.json();
setCouponStatus('Coupon is valid');
setCouponDetails(data.coupon);
} else {
setCouponStatus('Coupon not found or expired');
setCouponDetails(null);
}
} catch (error) {
setCouponStatus('Error checking coupon.');
setCouponDetails(null);
}
const { status, coupon } = await checkCoupon(couponCode);
setCouponStatus(status);
setCouponDetails(coupon);
};
// Handle user creation with coupon
const handleCreateUserWithCoupon = async (e) => {
e.preventDefault();
@@ -66,55 +46,38 @@ const LinktreePage = ({ setModal }) => {
return;
}
try {
const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${getAuthToken()}`,
},
body: JSON.stringify({
username,
email,
password,
couponCode,
}),
});
setLoading(true);
const { success, token, message } = await createUserWithCoupon(username, email, password, couponCode);
if (response.ok) {
const data = await response.json();
setCouponStatus('User created successfully with coupon');
setCouponDetails(null);
if (success) {
setCouponStatus('User created successfully with coupon');
localStorage.setItem('auth', token);
localStorage.setItem('auth', data.token);
// Clean the URL by removing query parameters and hash
const cleanUrl = window.location.origin + window.location.pathname;
window.history.replaceState(null, '', cleanUrl);
// Clean the URL by removing query parameters and hash
const cleanUrl = window.location.origin + window.location.pathname;
// Replace the current URL with the cleaned one
window.history.replaceState(null, '', cleanUrl);
// Reload the page with the cleaned URL (no query params or hash)
window.location.reload();
} else {
const errorData = await response.json();
setCouponStatus(errorData.message || 'Error creating user');
setModal('join', { couponCode })
}
} catch (error) {
setCouponStatus('Error creating user.');
setModal('join', { couponCode })
// Reload the page with the cleaned URL (no query params or hash)
window.location.reload();
} else {
setCouponStatus(message || 'Error creating user');
setModal('join', { couponCode });
}
setLoading(false);
};
return (
<div className={styles.linktreePage}>
<div className={styles.dashboardContainer}>
<div className={styles.mainHeading}>Gunakan Kupon</div>
<div className={styles.subHeadingTransparent}>
Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
</div>
<div className={styles.LoginForm}>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
<label htmlFor="username" className={styles.usernameLabel}>---- Daftar -------------------------------</label>
<input
type="text"
placeholder="Username"
@@ -130,7 +93,7 @@ const LinktreePage = ({ setModal }) => {
onChange={(e) => setEmail(e.target.value)}
className={!error ? styles.usernameInput : styles.usernameInputError}
/>
<button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
<button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
<span>➜</span>
</button>
</div>
@@ -139,7 +102,6 @@ const LinktreePage = ({ setModal }) => {
<span>
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
<label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----------------- &nbsp; </label>
</span>
<input

115
src/pages/Dashboard.js
View File

@@ -6,11 +6,13 @@ import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
import { getMyTransactions } from "../helpers/transactionHelpers";
import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
import { getLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
import { getUserCoupons } from "../helpers/couponHelpers";
import { ThreeDots } from "react-loader-spinner";
import Header from '../components/Header';
import CircularDiagram from "./CircularDiagram";
import API_BASE_URL from '../config';
import DailyCharts from '../components/DailyCharts';
import Coupon from '../components/Coupon';
const LinktreePage = ({ user, setModal }) => {
const navigate = useNavigate();
@@ -29,6 +31,7 @@ const LinktreePage = ({ user, setModal }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedItemId, setSelectedItemId] = useState(0);
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
const [coupons, setCoupons] = useState(null);
useEffect(() => {
@@ -55,11 +58,22 @@ const LinktreePage = ({ user, setModal }) => {
// Remove cafeId from the query parameter
searchParams.delete('cafeId');
}
// Update the URL with the modified query params
window.history.replaceState(null, '', `${url.pathname}?${searchParams.toString()}`);
}, [selectedItemId]);
// Detect query params on component mount
useEffect(() => {
handleGetkCoupons();
}, []);
// Handle manual coupon code check
const handleGetkCoupons = async () => {
const result = await getUserCoupons();
setCoupons(result.coupons);
console.log(result)
};
// Handle user transactions
const handleMyTransactions = async () => {
@@ -169,15 +183,15 @@ const LinktreePage = ({ user, setModal }) => {
// Strong contrasting colors for visibility on white background
"#333333", // Dark Gray (great contrast for legibility)
"#555555", // Medium Gray (slightly lighter, still legible)
// Subtle accent colors (not too bright, but distinct)
"#4B9F8D", // Muted Teal (offers a soft contrast)
"#7F7F7F", // Slate Gray (elegant and balanced)
// Softer neutral colors (for less emphasis)
"#B0B0B0", // Light Gray (gentle tone for subtle slices)
"#D3D3D3", // Silver Gray (light, but still visible on white background)
// A touch of color for balance (but still muted)
"#9C6E5C", // Muted Brown (earthy, grounded tone)
"#A1A1A1", // Silver (neutral highlight)
@@ -202,19 +216,19 @@ const LinktreePage = ({ user, setModal }) => {
if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
value: item.username || item.itemName || item.name,
percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
value: item.username || item.itemName || item.name,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are availabled
// Function to combine items of all cafes for the selected tenant
console.log(selectedItems)
console.log(segments)
// Check if items and items.items are defined before proceeding
const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
// Check if items and items.items are defined before proceeding
const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
// Sort the merged array by date if it's not empty
const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
// Sort the merged array by date if it's not empty
const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
@@ -681,7 +695,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
<div className={styles.dashboardBody}>
<button className={styles.goCafeButton} style={{ visibility: (selectedItems?.cafeId || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai</button>
<h3 style={{color: 'black'}}>terlaku</h3>
<h3 style={{ color: 'black' }}>terlaku</h3>
<div
style={{
display: "flex",
@@ -711,7 +725,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
>
★
</div>
<h5 style={{ margin: 0, textAlign: "left" , color: 'black'}}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
<h5 style={{ margin: 0, textAlign: "left", color: 'black' }}>{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% &nbsp; {item.value} </h5>
</div>
))}
{segments.length < 1 &&
@@ -748,6 +762,15 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
</div>
<h3>penambahan stok</h3>
<DailyCharts Data={selectedItems?.report?.materialsPurchased || sortedMaterials} />
{coupons && coupons.map((coupon) => {
return <Coupon
code={coupon?.code || null}
value={coupon?.discountValue}
period={coupon?.discountPeriods}
expiration={coupon?.discountEndDate}
/>
})}
<button onClick={()=>setModal('claim-coupon')}></button>
<div style={{ height: '24vh' }}></div>
</div>
@@ -844,38 +867,38 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
<div className={styles.dashboardLine}></div>
<div className={styles.dashboardContainer}>
{API_BASE_URL == 'https://test.api.kedaimaster.com' ?
<div className={styles.mainHeading}>
KEDAIMASTER CREDITS
<div className={styles.swipeContainer}>
<div className={styles.swipeCreditsContent}>
{['AI - MUHAMMAD AINUL FIKRI',
'BACKEND - ZADIT TAQWA W.',
'FRONTEND - M. PASHA A. P.' ,
'FRONTEND - NAUFAL DANIYAL P.',
'FRONTEND - ZADIT TAQWA W.',
'UI/UX - KEVIN DWI WIJAYA',
'UI/UX - LUNA CHELISA A.',
'UI/UX - MAULINA AYU E.',
'UI/UX - NUR ARINDA P.',
'UI/UX - NAURA IZZATI B.',].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
<div className={styles.mainHeading}>
KEDAIMASTER CREDITS
<div className={styles.swipeContainer}>
<div className={styles.swipeCreditsContent}>
{['AI - MUHAMMAD AINUL FIKRI',
'BACKEND - ZADIT TAQWA W.',
'FRONTEND - M. PASHA A. P.',
'FRONTEND - NAUFAL DANIYAL P.',
'FRONTEND - ZADIT TAQWA W.',
'UI/UX - KEVIN DWI WIJAYA',
'UI/UX - LUNA CHELISA A.',
'UI/UX - MAULINA AYU E.',
'UI/UX - NUR ARINDA P.',
'UI/UX - NAURA IZZATI B.',].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
</div>
</div>
gratis 3 bulan pertama
</div>
gratis 3 bulan pertama
</div>
:
<div className={styles.mainHeading}>
COBA KEDAIMASTER
<div className={styles.swipeContainer}>
<div className={styles.swipeContent}>
{['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
:
<div className={styles.mainHeading}>
COBA KEDAIMASTER
<div className={styles.swipeContainer}>
<div className={styles.swipeContent}>
{['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
<div key={index} className={styles.swipeItem}>{item}</div>
))}
</div>
</div>
Gratis 3 bulan pertama
</div>
Gratis 3 bulan pertama
</div>
}
<div className={styles.subHeading}>
Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
@@ -883,8 +906,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
{getLocalStorage('auth') == null && (
<div className={styles.LoginForm}>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- masuk -------------------------------</label>
<div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
<label htmlFor="username" className={styles.usernameLabel}>---- Masuk -------------------------------</label>
<input
id="username"
placeholder="username"
@@ -893,14 +916,14 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={() => {setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
<button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
<span>➜</span>
</button>
</div>
<div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword? styles.reverseForm : ''}`}>
<div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : styles.idleForm}`}>
<span>
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
<label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- Kembali </label>
<label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----- &nbsp; </label>
<label onClick={() => setModal('reset-password', { username: username })} className={styles.usernameLabel}>
lupa password? -
@@ -947,7 +970,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
onError={(e) => e.target.src = '/fallback-image.png'}
/>
</div>
<a style={{left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize:'13px', position: 'fixed'}}>©2025 KEDIRITECHNOPARK.COM</a>
<a style={{ left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize: '13px', position: 'fixed' }}>©2025 KEDIRITECHNOPARK.COM</a>
</div>
</div>
</div>

131
src/pages/Join.js
View File

@@ -1,14 +1,13 @@
// LinktreePage.js
import React, { useState, useEffect } from 'react';
import styles from './Join.module.css'; // Import the module.css file
import API_BASE_URL from '../config.js';
import { checkCoupon, logCouponForUser } from '../helpers/couponHelpers'; // Import the new helper
import Coupon from '../components/Coupon';
function getAuthToken() {
return localStorage.getItem('auth');
}
const LinktreePage = ({ data, setModal }) => {
const queryParams = new URLSearchParams(window.location.search);
const [isOnlyClaimCoupon, setIsOnlyClaimCoupon] = useState(false);
const [isUsingCoupon, setIsUsingCoupon] = useState(false);
const [couponCode, setCouponCode] = useState('');
const [couponStatus, setCouponStatus] = useState(0);
@@ -16,9 +15,15 @@ const LinktreePage = ({ data, setModal }) => {
// Detect query params on component mount
useEffect(() => {
if(couponCode != '') return;
if (couponCode !== '') return;
const modal = queryParams.get('modal');
const code = queryParams.get('couponCode');
console.log(code)
if (modal == 'claim-coupon') {
setIsOnlyClaimCoupon(true)
setIsUsingCoupon(true); // Automatically switch to the coupon input state
}
if (code) {
setCouponCode(code);
setIsUsingCoupon(true); // Automatically switch to the coupon input state
@@ -28,27 +33,14 @@ const LinktreePage = ({ data, setModal }) => {
// Handle manual coupon code check
const handleCheckCoupon = async (code = couponCode) => {
try {
const response = await fetch(`${API_BASE_URL}/coupon/check/${code}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${getAuthToken()}`,
},
});
const result = await checkCoupon(code); // Call the helper
setCouponStatus(result.coupon ? 200 : 404);
setCouponDetails(result.coupon);
};
if (response.ok) {
const data = await response.json();
setCouponStatus(200);
setCouponDetails(data.coupon);
} else {
setCouponStatus(404);
setCouponDetails(null);
}
} catch (error) {
setCouponStatus(404);
setCouponDetails(null);
}
// Handle manual coupon code check
const handleLogCouponForUser = async (code = couponCode) => {
const result = await logCouponForUser(code); // Call the helper
};
// Listen for query parameter changes (using the `location` object)
@@ -74,7 +66,7 @@ const LinktreePage = ({ data, setModal }) => {
{!isUsingCoupon ? (
<div className={styles.dashboardContainer}>
<div className={styles.mainHeading}>Nikmati Kemudahan Mengelola Kafe</div>
<div className={styles.subHeading}>
<div className={styles.subHeadingTransparent}>
Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
</div>
<form className={styles.linktreeForm}>
@@ -108,16 +100,13 @@ const LinktreePage = ({ data, setModal }) => {
Gunakan kupon
</a>
</div>
<div className={styles.footerImage}>
<img src="./laporan.png" alt="Linktree visual" />
</div>
</div>
</div>
) : (
<div className={styles.dashboardContainer}>
<div className={styles.mainHeading}>Daftar Menggunakan Kupon</div>
<div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Kupon' : 'Daftar Menggunakan Kupon'}</div>
<div className={styles.subHeading}>
Kupon tidak hanya dapat digunakan untuk pembuatan akun penyewa, tetapi juga dapat digunakan untuk memperpanjang masa berlangganan.
Kupon dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan.
</div>
{couponStatus === 0 ? (
<form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
@@ -144,21 +133,29 @@ const LinktreePage = ({ data, setModal }) => {
period={couponDetails?.discountPeriods}
expiration={couponDetails?.expirationDate}
/>
{couponStatus == 200 &&
<form className={styles.linktreeForm}>
<label htmlFor="username" className={styles.usernameLabel}>
--------------------------------------------
</label>
<button
type="submit"
className={styles.claimButton}
style={{ width: '266px' }}
onClick={() => setModal('create_user', { codeStatus: 200, couponCode })}
>
<span>Buat akun dengan kupon ini</span>
</button>
</form>
}
{couponStatus === 200 &&
<div className={styles.linktreeForm}>
<label htmlFor="username" className={styles.usernameLabel}>
--------------------------------------------
</label>
<button
className={styles.claimButton}
style={{ width: '266px' }}
onClick={() => {
if (!isOnlyClaimCoupon) {
// If it's only claiming a coupon, trigger claim logic
setModal('create_user', { codeStatus: 200, couponCode });
} else {
// Otherwise, handle the coupon for user creation
handleLogCouponForUser();
}
}}
>
<span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}</span>
</button>
</div>
}
</>
)}
<div className={styles.footer}>
@@ -171,31 +168,23 @@ const LinktreePage = ({ data, setModal }) => {
>
Pelajari lebih lanjut
</a>
<a
onClick={() => {
// Get the current URL query parameters
const url = new URL(window.location.href);
// Remove the couponCode query parameter
url.searchParams.delete('couponCode');
url.searchParams.delete('codeStatus');
// Update the browser's URL, but keep 'modal=join' intact
window.history.pushState({}, '', url.toString());
// Reset the states and force the component to reset
setIsUsingCoupon(couponStatus == 0 ? false : true);
setCouponCode('');
setCouponDetails(null);
setCouponStatus(0);
}}
className={styles.footerLink}
>
Kembali
</a>
</div>
<div className={styles.footerImage}>
<img src="./laporan.png" alt="Linktree visual" />
{(!isOnlyClaimCoupon || couponStatus != 0) &&
<a
onClick={() => {
const url = new URL(window.location.href);
url.searchParams.delete('couponCode');
url.searchParams.delete('codeStatus');
window.history.pushState({}, '', url.toString());
setIsUsingCoupon(couponStatus === 0 ? false : true);
setCouponCode('');
setCouponDetails(null);
setCouponStatus(0);
}}
className={styles.footerLink}
>
Kembali
</a>
}
</div>
</div>
</div>

137
src/pages/Join.module.css
View File

@@ -6,6 +6,7 @@
flex-direction: column;
justify-content: center;
background-color: rgb(232 204 88);
overflow: hidden;
}
@@ -72,6 +73,15 @@
margin-bottom: 1.5rem;
}
.subHeadingTransparent {
font-weight: 400;
line-height: 1.5rem;
font-size: 14px;
font-family: 'poppins';
color: transparent;
margin-bottom: -2.5rem;
}
/* Form */
.linktreeForm {
display: flex;
@@ -127,6 +137,7 @@
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 14px;
}
.footerLink {
@@ -159,3 +170,129 @@
margin-top: -50px;
margin-bottom: 30px;
}
.LoginForm {
display: inline-flex;
position: relative;
height: 237px;
}
/* Form */
.FormUsername {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
left: 0vw;
}
.FormUsername.animateForm {
animation: FormUsernameProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
}
.FormUsername.reverseForm {
animation: FormUsernameReverse 0.5s forwards;
/* Reverse animation when inputtingPassword is false */
}
@keyframes FormUsernameProgress {
0% {
left: 0vw;
}
100% {
left: -100vw;
}
}
@keyframes FormUsernameReverse {
0% {
left: -100vw;
}
100% {
left: 0vw;
}
}
.FormPassword {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
left: 100vw;
}
.FormPassword.animateForm {
animation: FormPasswordProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
}
.FormPassword.reverseForm {
animation: FormPasswordReverse 0.5s forwards;
/* Reverse animation when inputtingPassword is false */
}
@keyframes FormPasswordProgress {
0% {
left: 100vw;
}
100% {
left: 0vw;
}
}
@keyframes FormPasswordReverse {
0% {
left: 0vw;
}
99.9% {
left: 100vw;
visibility: hidden;
}
100% {
left: 0vw;
visibility: hidden;
}
}
.usernameLabel {
font-size: 0.875rem;
color: #444;
margin-bottom: 5px;
position: relative;
}
.usernameInputError {
width: 250px;
height: 55px;
padding-left: 10px;
font-size: 1rem;
background-color: #f0f0f0;
border-radius: 5px;
border: 2px solid red;
/* Red border when error is true */
margin-top: 5px;
margin-bottom: 15px;
/* Apply keyframe animation for border color transition */
animation: borderTransition 2s ease-in-out forwards;
}
/* Keyframe animation for border color transition */
@keyframes borderTransition {
0% {
border-color: red;
/* Initial red border */
}
100% {
border-color: transparent;
/* Transition to transparent */
}
}

8
src/pages/LinktreePage.module.css
View File

@@ -208,6 +208,11 @@
left: 100vw;
}
.FormPassword.idleForm {
left: 0vw;
visibility: hidden;
}
.FormPassword.animateForm {
animation: FormPasswordProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
@@ -338,9 +343,10 @@
padding: 12px 30px;
border-radius: 30px;
text-align: center;
font-size: 0.875rem;
font-size: 0.8rem;
margin-top: 1.5rem;
cursor: pointer;
max-width: 200px;
}
.footerImage {