Skip to content

Commit

Permalink
Merge pull request #708 from itsonlyjeff/#414-page-that-explains-what…
Browse files Browse the repository at this point in the history 
…'s-verified-and-how-to-get-verified

Feature: page that explains what's verified and how to get verified
  • Loading branch information
@nunomaduro
nunomaduro authored Oct 21, 2024
2 parents 22d7f4d + 2e7ea79 commit c48c04f
Show file tree
Hide file tree
Showing 5 changed files with 337 additions and 2 deletions.
7 changes: 7 additions & 0 deletions resources/views/components/footer.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slat
>Support</a
>
</div>
<div class="pb-6">
<a
href="{{ route('verified') }}"
class="text-sm leading-6 dark:text-slate-400 text-slate-500 dark:hover:text-slate-200 hover:text-slate-950"
>Verified</a
>
</div>
<div class="pb-6">
<a
href="{{ route('brand.resources') }}"
Expand Down
4 changes: 2 additions & 2 deletions resources/views/profile/partials/verified-form.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<section>
<header>
<h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
<div class="items flex items-center space-x-3">
<a href="{{ route('verified') }}" class="items flex items-center space-x-3">
<h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">
{{ $user->is_verified ? __('Manage Verified Badge') : __('Get Verified') }}
</h2>
<x-icons.verified
:color="$user->is_verified ? $user->right_color : 'gray'"
class="size-6"
/>
</div>
</a>
</h2>

<div class="mt-2 text-sm text-slate-500">
Expand Down
228 changes: 228 additions & 0 deletions resources/views/verified.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
<x-about-layout>
<div class="relative flex justify-center">
<div
class="absolute -top-48 -z-10 size-[400px] -rotate-45 rounded-full bg-gradient-to-br from-indigo-300 via-rose-200 to-green-600 opacity-70 blur-3xl lg:size-[500px]"></div>
</div>

<nav
class="fixed top-0 z-20 flex w-full justify-end gap-2 border-b dark:border-slate-200/10 border-slate-900/10 dark:bg-slate-950/20 bg-slate-100/20 p-4 shadow-2xl backdrop-blur-md">
<a
href="{{ route('home.feed') }}"
wire:navigate
>
<x-primary-colorless-button
class="flex items-center justify-center gap-2 dark:border-white border-slate-900">
<x-heroicon-o-home class="h-4 w-4"/>
<span class="sr-only sm:not-sr-only">Feed</span>
</x-primary-colorless-button>
</a>
@auth
<a
href="{{ route('profile.show', ['username' => auth()->user()->username]) }}"
wire:navigate
>
<x-primary-button>Your Profile</x-primary-button>
</a>
@else
<a
href="{{ route('login') }}"
wire:navigate
>
<x-primary-button>Log In</x-primary-button>
</a>
<a
href="{{ route('register') }}"
wire:navigate
>
<x-primary-button>Register</x-primary-button>
</a>
@endauth
</nav>

<main class="my-8 flex w-full flex-1 flex-col items-center justify-center gap-8 overflow-x-hidden p-4 pb-12">
<section class="mt-24 flex flex-col items-center w-full">
<div class="relative">
<a
href="{{ route('about') }}"
wire:navigate
>
<x-pinkary-logo class="z-10 w-72"/>
<x-icons.verified
:color="'blue-500'"
class="ml-1 mt-0.5 h-10 w-10 absolute -top-4 -right-4"
/>
</a>
</div>


<div
class="mt-5 rounded-full bg-pink-500 bg-opacity-90 px-3 py-1.5 font-mona text-sm font-medium uppercase text-slate-900"
style="font-stretch: 120%"
>
Become a trusted user
</div>
</section>

@if(auth()->user())
<section class="mt-28 w-full max-w-2xl">
<div class="max-w-xl">
@include('profile.partials.verified-form', ['user' => auth()->user()])
</div>
</section>
@endif

<section class="mt-10 w-full max-w-2xl">
<div class="grid w-full gap-4 md:grid-cols-2">
<div
class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 transition-colors md:aspect-video">
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
<x-heroicon-o-wrench-screwdriver class="h-5 w-5"/>
</div>

<h3>Support the Project</h3>
<p class="dark:text-slate-400 text-slate-500 text-sm">By becoming verified, you directly support the
creator and help maintain and improve Pinkary.</p>
</div>

<div
class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
<x-heroicon-o-user-group class="h-5 w-5"/>
</div>

<h3>Community Recognition</h3>
<p class="dark:text-slate-400 text-slate-500 text-sm">A verification badge highlights your
commitment and support within the Pinkary community.</p>
</div>

<div
class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
<x-heroicon-o-heart class="h-5 w-5"/>
</div>

<h3>Help Pinkary Grow</h3>
<p class="dark:text-slate-400 text-slate-500 text-sm">Your verification contributes to Pinkary’s
development and future improvements.</p>
</div>

<div
class="rounded-2xl dark:border-t border-none dark:border-slate-800 dark:shadow-none shadow-sm dark:bg-slate-900 bg-slate-50 p-4 md:aspect-video">
<div
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full dark:bg-slate-950 bg-slate-200">
<x-heroicon-o-fire class="h-5 w-5"/>
</div>

<h3>Encourage Open-Source Contributions</h3>
<p class="dark:text-slate-400 text-slate-500 text-sm"> Supporting the creator promotes open-source
values and collaboration in projects like Pinkary.</p>
</div>
</div>
</section>

<section class="mt-10 w-full max-w-2xl">
<h2 class="text-lg font-medium dark:text-slate-400 text-slate-600">Frequently Asked Questions</h2>

<!-- 1 -->
<div x-data="accordion(1)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
<div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
<div class="flex items-center justify-between">
<span class="tracking-wide">What does verification mean on Pinkary?</span>
<span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</span>
</div>
</div>

<div x-ref="tab" :style="handleToggle()"
class="relative overflow-hidden transition-all duration-700 max-h-0">
<div class="px-6 pb-4 text-gray-600">
Verification on Pinkary gives you a badge next to your name, symbolizing your support for the platform’s development. It helps recognize your contribution as an engaged and supportive member of the community.
</div>
</div>
</div>
<!-- End 1 -->

<!-- 2 -->
<div x-data="accordion(2)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
<div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
<div class="flex items-center justify-between">
<span class="tracking-wide">How do I become verified on Pinkary?</span>
<span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</span>
</div>
</div>

<div x-ref="tab" :style="handleToggle()"
class="relative overflow-hidden transition-all duration-700 max-h-0">
<div class="px-6 pb-4 text-gray-600">
To get verified, connect your GitHub account to Pinkary, and sponsor the creator with at least $9/month via GitHub Sponsors. Once sponsored, the verification badge will appear automatically on your profile.
</div>
</div>
</div>
<!-- End 2 -->

<!-- 3 -->
<div x-data="accordion(3)" class="relative transition-all duration-700 border rounded-xl hover:shadow-2xl dark:bg-slate-900 bg-slate-50 mt-5">
<div @click="handleClick()" class="w-full p-4 text-left cursor-pointer">
<div class="flex items-center justify-between">
<span class="tracking-wide">Why should I get verified?</span>
<span :class="handleRotate()" class="transition-transform duration-500 transform fill-current ">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</span>
</div>
</div>

<div x-ref="tab" :style="handleToggle()"
class="relative overflow-hidden transition-all duration-700 max-h-0">
<div class="px-6 pb-4 text-gray-600">
By getting verified, you support the ongoing development of Pinkary, help improve the platform, and promote open-source contributions. The verification badge also highlights your commitment to the community.
</div>
</div>
</div>
<!-- End 3 -->
</section>


</main>

<script>
// Faq
document.addEventListener("alpine:init", () => {
Alpine.store("accordion", {
tab: 0
});
Alpine.data("accordion", (idx) => ({
init() {
this.idx = idx;
},
idx: -1,
handleClick() {
this.$store.accordion.tab =
this.$store.accordion.tab === this.idx ? 0 : this.idx;
},
handleRotate() {
return this.$store.accordion.tab === this.idx ? "-rotate-180" : "";
},
handleToggle() {
return this.$store.accordion.tab === this.idx
? `max-height: ${this.$refs.tab.scrollHeight}px`
: "";
}
}));
});
// end faq
</script>
</x-about-layout>
2 changes: 2 additions & 0 deletions routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
Route::view('/support', 'support')->name('support');
Route::view('/brand/resources', 'brand.resources')->name('brand.resources');

Route::view('/verified', 'verified')->name('verified');

Route::redirect('/sponsors', 'https://github.com/sponsors/nunomaduro/')->name('sponsors');

Route::get('/changelog', [ChangelogController::class, 'show'])->name('changelog');
Expand Down
98 changes: 98 additions & 0 deletions tests/Http/Verified/IndexTest.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<?php

declare(strict_types=1);

use App\Models\User;
use Illuminate\Support\Facades\Process;

it('guest', function () {
$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Pinkary')
->assertSee('Become a trusted user');
});

it('auth', function () {
$user = User::factory()->create();

$response = $this->actingAs($user)->get('/verified');

$response
->assertOk()
->assertSee('Pinkary')
->assertSee('Become a trusted user');
});

it('displays login button', function () {
$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Log In')
->assertDontSee('Your Profile');
});

it('displays "Your Profile" when logged in', function () {
$user = User::factory()->create();

$this->actingAs($user);

$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Your Profile')
->assertDontSee('Log In');
});

it('displays "Get Verified" when logged in and not verified', function () {
$user = User::factory()->create();

$this->actingAs($user);

$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Get Verified');
});

it('displays "Manage Verified Badge" when logged in and is verified', function () {
$user = User::factory()->create([
'is_verified' => true,
]);

$this->actingAs($user);

$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Manage Verified Badge');
});

it('displays terms of service and privacy policy', function () {
$response = $this->get('/verified');

$response
->assertOk()
->assertSee('Terms')
->assertSee('Privacy Policy')
->assertSee('Support')
->assertSee('Verified')
->assertSee('Brand');
});

it('displays the current version of the app', function () {
Process::fake([
'*' => Process::result(
output: "v1.0.0\n",
),
]);

$this->get('/verified')
->assertOk()
->assertSee('v1.0.0');
});

0 comments on commit c48c04f

Please sign in to comment.