Skip to content

add social logins #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 14, 2024
Merged

add social logins #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b8346c5
add social logins
milner-chen Mar 6, 2024
0402507
Merge main
Connor-Skudlarek Mar 14, 2024
01c0762
Add .env to ignore list
Connor-Skudlarek Mar 14, 2024
0219b7a
Rename for clarity
Connor-Skudlarek Mar 14, 2024
aa03a13
Fixed breaking changes from issue #27 and add AlternativeLogins to page
Connor-Skudlarek Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions components/LoginPage/AlternativeLogins.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
"use client";

const AlternativeLogins = () => {
const handleLogin = (e, social) => {
e.preventDefault();
console.log(`logging in with ${social}`);
};

return (
<div className="flex flex-col items-center justify-center dark:bg-gray-800">
<button
type="button"
className="relative mb-4 flex min-w-60 items-center justify-center rounded-lg bg-[#3b5998] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#3b5998]/90"
onClick={(e) => handleLogin(e, "facebook")}
>
<svg
className="absolute left-5 h-4 w-4"
aria-hidden="true"
focusable="false"
data-social="facebook-f"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 124.7v70.62H22.89V288h81.39v224h100.2V288z"
></path>
</svg>
Login with Facebook
</button>
<button
type="button"
className="relative mb-4 flex min-w-60 items-center justify-center rounded-lg bg-[#1da1f2] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#1da1f2]/90"
onClick={(e) => handleLogin(e, "twitter")}
>
<svg
className="absolute left-5 h-4 w-4"
aria-hidden="true"
focusable="false"
data-social="twitter"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"
></path>
</svg>
Login with Twitter
</button>
<button
type="button"
className="relative flex min-w-60 items-center justify-center rounded-lg bg-[#4285F4] py-4 pl-3.5 text-sm font-medium text-white hover:bg-[#4285F4]/90"
onClick={(e) => handleLogin(e, "google")}
>
<svg
className="absolute left-5 h-4 w-4"
aria-hidden="true"
focusable="false"
data-icon="google"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 488 512"
>
<path
fill="currentColor"
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
></path>
</svg>
Login with Google
</button>
</div>
);
};

export default AlternativeLogins;
141 changes: 74 additions & 67 deletions components/LoginPage/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,76 @@
export default function LoginForm() {
<form onSubmit={handleSubmit}>
<div className="relative mt-6">
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
autoComplete="email"
/>
<label
htmlFor="email"
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
>
Email Address
</label>
"use client";

export default function LoginForm({ handleSubmit }) {
return (
<div className="mx-5 mt-5 flex flex-col">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This missing from original form component. Added.

<form onSubmit={handleSubmit}>
<p className="mb-10 text-xl tracking-wide">Sign In</p>
<div className="relative mt-6">
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
className="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
autoComplete="email"
/>
<label
htmlFor="email"
className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
>
Email Address
</label>
</div>
<div className="relative mt-6">
<input
type="password"
name="password"
id="password"
required
autoComplete="current-password"
placeholder="Password"
className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
/>
<label
htmlFor="password"
className="pointer-events-none absolute left-0 top-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
>
Password
</label>
</div>
<div className="my-12 text-sm font-semibold text-gray-700 underline hover:text-black">
<a href="/#">Forgot password?</a>
</div>
<div className="flex items-center justify-between">
<label htmlFor="remember_me" className="block text-sm text-gray-900">
Remember me
</label>
<input
id="rememberMe"
name="rememberMe"
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</div>
<div className="my-12 flex justify-center">
<button
type="submit"
className="w-11/12 rounded-full bg-blue-800 p-1.5 text-white hover:bg-blue-900"
>
Sign in
</button>
</div>
<div className="flex text-center text-sm text-gray-500">
<p>Don't have an account yet?</p>
<a
href="/signup"
className="ml-1 font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none"
>
Create Account
</a>
.
</div>
</form>
</div>
<div className="relative mt-6">
<input
type="password"
name="password"
id="password"
required
autoComplete="current-password"
placeholder="Password"
className="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
/>
<label
htmlFor="password"
className="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800"
>
Password
</label>
</div>
<div className="text-sm my-12 font-semibold text-gray-700 hover:text-black underline">
<a href="/#">Forgot password?</a>
</div>
<div className="flex items-center justify-between">
<label htmlFor="remember_me" className="block text-sm text-gray-900">
Remember me
</label>
<input
id="rememberMe"
name="rememberMe"
type="checkbox"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
/>
</div>
<div className="my-12 flex justify-center">
<button
type="submit"
className="w-11/12 bg-blue-800 rounded-full p-1.5 text-white hover:bg-blue-900"
>
Sign in
</button>
</div>
<div className="flex text-center text-sm text-gray-500">
<p>Don't have an account yet?</p>
<a
href="/signup"
className="ml-1 font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none"
>
Create Account
</a>
.
</div>
</form>;
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The rest of this green is simply "Prettier" running. Nothing crazy.

}
11 changes: 6 additions & 5 deletions components/LoginPage/LoginPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useRouter, useSearchParams } from "next/navigation";
import { SECRET_ROUTE } from "lib/routes";
import { signIn, useUser } from "lib/auth";
import LoginForm from "./LoginForm";
import LoginSeparator from "./LoginSeparator";
import AlternativeLogins from "./AlternativeLogins";

export default function LoginPage() {
const router = useRouter();
Expand Down Expand Up @@ -34,11 +36,10 @@ export default function LoginPage() {

return (
<main className="flex">
<section className="flex flex-col py-12 px-16">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The flex-col is stacking all of the elements. Not the intended behavior.

<div className="text-xl tracking-wide mb-10">Sign In</div>

<div className="mt-5 mx-5"></div>
<LoginForm />
<section className="flex flex-row px-16 py-12">
<LoginForm handleSubmit={handleSubmit} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is part of fixing the breaking change.

<LoginSeparator />
<AlternativeLogins />
</section>
</main>
);
Expand Down
3 changes: 2 additions & 1 deletion gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
# env files
.env
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just getting the .env file out of the repo. Doesn't have any actual security credentials—so, just a proactive step to prevent security leak. ;)

.env*.local

# vercel
Expand Down