@authdog/react-elements 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +15 -15
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +4 -10
- package/dist/index.d.ts +4 -10
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/core/navbar.tsx +4 -12
- package/src/components/core/user-profile.tsx +64 -51
|
@@ -8,27 +8,38 @@ import { Badge } from "../../components/ui/badge"
|
|
|
8
8
|
import { PlusCircle, User, Shield, X, LucideProps } from "lucide-react"
|
|
9
9
|
|
|
10
10
|
export interface UserProfileProps {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
email: string;
|
|
14
|
-
image: string;
|
|
15
|
-
};
|
|
11
|
+
loading: boolean;
|
|
12
|
+
user: any;
|
|
16
13
|
emails?: { address: string; isPrimary?: boolean }[];
|
|
17
|
-
connectedAccounts?: { provider: string; email
|
|
14
|
+
// connectedAccounts?: { provider: string; email?: string }[];
|
|
15
|
+
handleAuthenticated?: () => void;
|
|
18
16
|
}
|
|
19
17
|
|
|
20
18
|
export const UserProfile = ({
|
|
19
|
+
loading,
|
|
21
20
|
user,
|
|
22
21
|
emails = [],
|
|
23
|
-
connectedAccounts = [
|
|
22
|
+
// connectedAccounts = [
|
|
23
|
+
// {
|
|
24
|
+
// provider: "Google OAuth2.0",
|
|
25
|
+
// email: "john@example.com",
|
|
26
|
+
// },
|
|
27
|
+
// ],
|
|
28
|
+
handleAuthenticated
|
|
24
29
|
}: UserProfileProps) => {
|
|
25
30
|
const [isMounted, setIsMounted] = useState(false)
|
|
26
31
|
const [activeTab, setActiveTab] = useState<"profile" | "security">("profile");
|
|
27
32
|
|
|
28
33
|
useEffect(() => {
|
|
29
|
-
setIsMounted(true)
|
|
34
|
+
setIsMounted(true);
|
|
30
35
|
}, []);
|
|
31
36
|
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
if (!loading && !user && handleAuthenticated) {
|
|
39
|
+
handleAuthenticated();
|
|
40
|
+
}
|
|
41
|
+
}, [loading, user, handleAuthenticated]);
|
|
42
|
+
|
|
32
43
|
const iconProps: LucideProps = {
|
|
33
44
|
className: "mr-2 h-4 w-4",
|
|
34
45
|
"aria-hidden": "true"
|
|
@@ -39,6 +50,14 @@ export const UserProfile = ({
|
|
|
39
50
|
return <Icon {...iconProps} />
|
|
40
51
|
}
|
|
41
52
|
|
|
53
|
+
if (!isMounted || loading) {
|
|
54
|
+
return <div>Loading...</div>
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (!user) {
|
|
58
|
+
return <div>No user</div>
|
|
59
|
+
}
|
|
60
|
+
|
|
42
61
|
return (
|
|
43
62
|
<div className="grid grid-cols-[16rem,1fr] h-screen bg-gray-100">
|
|
44
63
|
<div className="h-full border-r p-6 bg-white flex flex-col min-w-0">
|
|
@@ -57,7 +76,7 @@ export const UserProfile = ({
|
|
|
57
76
|
{renderIcon(User)}
|
|
58
77
|
Profile
|
|
59
78
|
</button>
|
|
60
|
-
<button
|
|
79
|
+
{/* <button
|
|
61
80
|
onClick={() => setActiveTab("security")}
|
|
62
81
|
className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${
|
|
63
82
|
activeTab === "security" ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"
|
|
@@ -65,7 +84,7 @@ export const UserProfile = ({
|
|
|
65
84
|
>
|
|
66
85
|
{renderIcon(Shield)}
|
|
67
86
|
Security
|
|
68
|
-
</button>
|
|
87
|
+
</button> */}
|
|
69
88
|
</nav>
|
|
70
89
|
</div>
|
|
71
90
|
|
|
@@ -74,9 +93,9 @@ export const UserProfile = ({
|
|
|
74
93
|
<h2 className="text-xl font-semibold">
|
|
75
94
|
{activeTab === "profile" ? "Profile details" : "Security settings"}
|
|
76
95
|
</h2>
|
|
77
|
-
<button className="text-gray-500 hover:text-gray-700">
|
|
96
|
+
{/* <button className="text-gray-500 hover:text-gray-700">
|
|
78
97
|
{renderIcon(X)}
|
|
79
|
-
</button>
|
|
98
|
+
</button> */}
|
|
80
99
|
</div>
|
|
81
100
|
|
|
82
101
|
{activeTab === "profile" ? (
|
|
@@ -87,14 +106,14 @@ export const UserProfile = ({
|
|
|
87
106
|
<div className="flex items-center justify-between">
|
|
88
107
|
<div className="flex items-center">
|
|
89
108
|
<Avatar className="h-12 w-12 mr-4 border">
|
|
90
|
-
<AvatarImage src={user.
|
|
91
|
-
<AvatarFallback>{user.
|
|
109
|
+
<AvatarImage src={user.images?.[0]?.value} alt="Profile picture" />
|
|
110
|
+
<AvatarFallback>{user.displayName?.split(" ").map((n: string) => n[0]).join("")}</AvatarFallback>
|
|
92
111
|
</Avatar>
|
|
93
|
-
<span className="font-medium">{user.
|
|
112
|
+
<span className="font-medium">{user.displayName}</span>
|
|
94
113
|
</div>
|
|
95
|
-
<Button variant="outline" size="sm">
|
|
114
|
+
{/* <Button variant="outline" size="sm">
|
|
96
115
|
Edit profile
|
|
97
|
-
</Button>
|
|
116
|
+
</Button> */}
|
|
98
117
|
</div>
|
|
99
118
|
</div>
|
|
100
119
|
|
|
@@ -102,7 +121,10 @@ export const UserProfile = ({
|
|
|
102
121
|
<div>
|
|
103
122
|
<h3 className="text-sm font-medium mb-4">Email addresses</h3>
|
|
104
123
|
<div className="space-y-3">
|
|
105
|
-
|
|
124
|
+
|
|
125
|
+
{/* {JSON.stringify(user)} */}
|
|
126
|
+
|
|
127
|
+
{/* {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (
|
|
106
128
|
<div className="flex items-center justify-between" key={email.address}>
|
|
107
129
|
<span>{email.address}</span>
|
|
108
130
|
{email.isPrimary && (
|
|
@@ -111,16 +133,29 @@ export const UserProfile = ({
|
|
|
111
133
|
</Badge>
|
|
112
134
|
)}
|
|
113
135
|
</div>
|
|
114
|
-
))}
|
|
115
|
-
|
|
136
|
+
))} */}
|
|
137
|
+
|
|
138
|
+
{
|
|
139
|
+
user.emails.map((email: any, idx: number) => (
|
|
140
|
+
<div className="flex items-center justify-between" key={email.value}>
|
|
141
|
+
<span>{email.value}</span>
|
|
142
|
+
{idx === 0 && (
|
|
143
|
+
<Badge variant="outline" className="text-xs bg-gray-100 text-gray-700 hover:bg-gray-100">
|
|
144
|
+
Primary
|
|
145
|
+
</Badge>
|
|
146
|
+
)}
|
|
147
|
+
</div>
|
|
148
|
+
))
|
|
149
|
+
}
|
|
150
|
+
{/* <Button variant="ghost" size="sm" className="flex items-center text-gray-700">
|
|
116
151
|
{renderIcon(PlusCircle)}
|
|
117
152
|
Add email address
|
|
118
|
-
</Button>
|
|
153
|
+
</Button> */}
|
|
119
154
|
</div>
|
|
120
155
|
</div>
|
|
121
156
|
|
|
122
157
|
{/* Phone Number Section */}
|
|
123
|
-
<div>
|
|
158
|
+
{/* <div>
|
|
124
159
|
<h3 className="text-sm font-medium mb-4">Phone number</h3>
|
|
125
160
|
<div className="space-y-3">
|
|
126
161
|
<div className="flex items-center justify-between">
|
|
@@ -134,49 +169,27 @@ export const UserProfile = ({
|
|
|
134
169
|
Add phone number
|
|
135
170
|
</Button>
|
|
136
171
|
</div>
|
|
137
|
-
</div>
|
|
172
|
+
</div> */}
|
|
138
173
|
|
|
139
174
|
{/* Connected Accounts Section */}
|
|
140
175
|
<div>
|
|
141
176
|
<h3 className="text-sm font-medium mb-4">Connected accounts</h3>
|
|
142
177
|
<div className="space-y-3">
|
|
143
|
-
|
|
144
|
-
<div className="flex items-center justify-between" key={acc.provider + acc.email}>
|
|
145
|
-
<div className="flex items-center">
|
|
146
|
-
<div className="mr-2">
|
|
147
|
-
<span>{acc.provider}</span>
|
|
148
|
-
</div>
|
|
149
|
-
<span>{acc.provider}</span>
|
|
150
|
-
</div>
|
|
151
|
-
<span className="text-sm text-gray-500">{acc.email}</span>
|
|
152
|
-
</div>
|
|
153
|
-
)) : (
|
|
154
|
-
<div className="flex items-center justify-between">
|
|
178
|
+
<div className="flex items-center justify-between" key={user.provider}>
|
|
155
179
|
<div className="flex items-center">
|
|
156
180
|
<div className="mr-2">
|
|
157
|
-
<
|
|
158
|
-
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
|
|
159
|
-
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
|
|
160
|
-
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
|
|
161
|
-
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
|
|
162
|
-
</svg>
|
|
181
|
+
<span>{user.provider}</span>
|
|
163
182
|
</div>
|
|
164
|
-
<span>Google</span>
|
|
165
183
|
</div>
|
|
166
|
-
<span className="text-sm text-gray-500">{user
|
|
184
|
+
<span className="text-sm text-gray-500">{user?.emails?.[0]?.value}</span>
|
|
167
185
|
</div>
|
|
168
|
-
)}
|
|
169
|
-
<Button variant="ghost" size="sm" className="flex items-center text-gray-700">
|
|
170
|
-
{renderIcon(PlusCircle)}
|
|
171
|
-
Connect account
|
|
172
|
-
</Button>
|
|
173
186
|
</div>
|
|
174
187
|
</div>
|
|
175
188
|
</div>
|
|
176
189
|
) : (
|
|
177
190
|
<div className="space-y-8">
|
|
178
191
|
{/* Security Settings */}
|
|
179
|
-
<div>
|
|
192
|
+
<div key="two-factor">
|
|
180
193
|
<h3 className="text-sm font-medium mb-4">Two-factor authentication</h3>
|
|
181
194
|
<div className="space-y-3">
|
|
182
195
|
<div className="flex items-center justify-between">
|
|
@@ -191,7 +204,7 @@ export const UserProfile = ({
|
|
|
191
204
|
</div>
|
|
192
205
|
</div>
|
|
193
206
|
|
|
194
|
-
<div>
|
|
207
|
+
<div key="password">
|
|
195
208
|
<h3 className="text-sm font-medium mb-4">Password</h3>
|
|
196
209
|
<div className="space-y-3">
|
|
197
210
|
<div className="flex items-center justify-between">
|
|
@@ -206,7 +219,7 @@ export const UserProfile = ({
|
|
|
206
219
|
</div>
|
|
207
220
|
</div>
|
|
208
221
|
|
|
209
|
-
<div>
|
|
222
|
+
<div key="sessions">
|
|
210
223
|
<h3 className="text-sm font-medium mb-4">Active sessions</h3>
|
|
211
224
|
<div className="space-y-3">
|
|
212
225
|
<div className="flex items-center justify-between">
|