🔥 Daily Digest: Unlock xAI's New API and Explore 2000+ Free Resources for Web Developers

Daily Issue #62

• xAI API: Elon Musk's AI startup launches its game-changing API!

• 2000+ Free Dev Resources: Level up your skills with a treasure trove of tools.

• AI Job Tool: Fast-track applications with AI for dream jobs.

• CSS Hack: Use min() for perfect responsive width.

• Vue3 Tutorial: Easy "Forgot Password" with PrimeVue modal!

• Coding Toolbox: Automate jobs, animate text, and visualize data like a pro.

• xAI, Elon Musk’s AI startup, launches an API

• 2000+ FREE Resources For Web Developers _(sponsored)

• Get Hired Fast: Trending AI Tool to Find and Apply for Your Dream Job

• CSS min() All The Things

.element {
  width: min(200px, 50%);
}

• 100+ FREE Resources For Web Developers

  More news here →

Forgot Password Implementation in Vue3/Nuxt3

Objective: I needed to implement the "Forgot Password" functionality for my login page. When the "forget password" link is clicked, I want to open a modal that will ask the user to input their email address.

Upon submission, a call to the server (pinia user store) will be made. For this I chose to go with the PrimeVue <ConfirmPopup>.

const confirm = useConfirm();

const confirmForgotPassword = (event) => {
	confirm.require({
		target: event.currentTarget,
		group: 'forgot_password',
		message: 'Please confirm your email address to proceed.',
		icon: 'ti ti-exclamation-circle',
		rejectProps: {
			icon: 'ti ti-times',
			label: 'Cancel',
			outlined: true
		},
		acceptProps: {
			icon: 'ti ti-check',
			label: 'Confirm'
		},
		accept: forgotPassword,
		reject: () => {}
	});
}

const forgotPassword = async () => {
	if (!forgotPasswordEmail.value || !forgotPasswordEmail.value.includes('@')) {
		showMessage({ 
			type:'error', 
			message:'Please enter a valid email address.' 
		});

		return;
	}

	try {
		await userStore.sendRequestMagicLink({ email: forgotPasswordEmail.value, apiUrl: config.apiUrl });
		showMessage({ 
			type:'success', 
			message:'Please check your email for further instructions.' 
		});
	} catch (error) {
		showMessage({ 
			type:'error', 
			message:'Failed to send the request. Please try again.' 
		});
	}

The INPUT field HTML

<div class="form-row">
    <label for="password">Password</label>
    <Password v-model="password" aria-describedby="password-help" toggle-mask :feedback="false" />
    <div class="row justify-content-between">
        <small id="password-help">Password field is required</small>
        <small class="forgot-password"><a href="#" @click="confirmForgotPassword($event)">Forgot password?</a></small>
    </div>
</div>

And, the modal HTML

<ConfirmPopup group="forgot_password">
		<template #message="slotProps">
			<div class="mb-3 p-3">
				<label for="forgotEmail" class="form-label">Enter email:</label>
				<InputText id="forgotEmail" v-model="forgotPasswordEmail" class="form-control" placeholder="[email protected]" />
			</div>
		</template>
	</ConfirmPopup>

⭐️ The server-side implementation of “forgot password” will be coming in tomorrow’s issue!

More code snippets here →

• Auto_Jobs_Applier_AIHawk - a tool that automates the jobs application process

• khoshnus - A tool for bringing life to static text in an artistic way. With its elegant SVG animations, your text can now be revealed as if written by hand!

• d3 - open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics

• Files - A modern file manager that helps users organize their files and folders

More code libs here →

Midjourney

More AI prompts here →

📣 HELP SPREAD THE WORD

🚀 Spread the Code! Love what you read? Share the newsletter with your fellow devs - every recommendation helps power up the community.

💻 Sponsor the Dev Journey! Keep the bytes flowing and the newsletter growing by becoming a sponsor. Your support helps maintain this valuable resource.

💬 Tweet the Deets! Share the latest with your code crew - let’s make this viral, not just a bug!

If you have built anything that you’d like to share with the community, get with me on X @dailysandbox_ 😀