Skip to content

Commit

Permalink
Update copy and design for connected accounts form's
Browse files Browse the repository at this point in the history
  • Loading branch information
joelbutcher committed Nov 17, 2023
1 parent fc376e4 commit eb03f42
Show file tree
Hide file tree
Showing 11 changed files with 49 additions and 50 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,15 @@ export default function ConnectedAccountsForm({ className = '', hasPassword, pro
<h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>

<p className="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
You are free to connect any social accounts to your profile and may remove any connected accounts at any
time. If you feel any of your connected accounts have been compromised, you should disconnect them
immediately and change your password.
Connect your social media accounts to enable Sign In with OAuth.
</p>
</header>

<div className="mt-5 space-y-6">
<div className="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
</div>

<div className="space-y-6 mt-6">
{providers.map(provider => {
const connectedAccount = connectedAccounts
.filter(account => account.provider === provider.id)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,15 @@ export default function ConnectedAccountsForm({ className = '', hasPassword, pro
<h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>

<p className="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
You are free to connect any social accounts to your profile and may remove any connected accounts at
any time. If you feel any of your connected accounts have been compromised, you should disconnect
them immediately and change your password.
Connect your social media accounts to enable Sign In with OAuth.
</p>
</header>

<div className="mt-5 space-y-6">
<div className="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
</div>

<div className="space-y-6 mt-6">
{providers.map((provider) => {
const connectedAccount = connectedAccounts
.filter((account) => account.provider === provider.id)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import {computed, defineProps} from 'vue';
import {defineProps} from 'vue';
import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
import {Provider} from '@/types';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,15 @@ const closeModal = () => {
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>

<p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
You are free to connect any social accounts to your profile and may remove any connected accounts at any
time. If you feel any of your connected accounts have been compromised, you should disconnect them
immediately and change your password.
Connect your social media accounts to enable Sign In with OAuth.
</p>
</header>

<div class="mt-5 space-y-6">
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
</div>

<div class="space-y-6 mt-6">
<div v-for="provider in providers" :key="provider.id">
<ConnectedAccount :created-at="hasAccountForProvider(provider) ? getAccountForProvider(provider)?.created_at : ''" :provider="provider">
<template #action>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import {computed, defineProps} from 'vue';
import {defineProps} from 'vue';
import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
const props = defineProps({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,15 @@ const closeModal = () => {
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Connected Accounts</h2>
<p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
You are free to connect any social accounts to your profile and may remove any connected accounts at any
time. If you feel any of your connected accounts have been compromised, you should disconnect them
immediately and change your password.
Connect your social media accounts to enable Sign In with OAuth.
</p>
</header>
<div class="mt-5 space-y-6">
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.
</div>
<div class="space-y-6 mt-6">
<div v-for="provider in providers" :key="provider.id">
<ConnectedAccount :created-at="hasAccountForProvider(provider) ? getAccountForProvider(provider)?.created_at : ''" :provider="provider">
<template #action>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,17 @@
</h2>

<p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
{{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
</p>
</header>

<x-input-error :messages="$errors->get('socialstream')" class="mt-2" />

<div class="mt-5 space-y-6">
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
{{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
</div>

<div class="space-y-6 mt-6">
@foreach (JoelButcher\Socialstream\Socialstream::providers() as $provider)
@php
$account = null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,17 @@ public function removeAccount(string|int $id): void
</h2>

<p class="max-w-xl mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
{{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
</p>
</header>

<x-input-error :messages="$errors->get('socialstream')" class="mt-2" />

<div class="mt-5 space-y-6">
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
{{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
</div>

<div class="space-y-6 mt-6">
@foreach (JoelButcher\Socialstream\Socialstream::providers() as $provider)
@php
$account = null;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import {computed, defineProps} from 'vue';
import {defineProps} from 'vue';
import ProviderIcon from '@/Components/SocialstreamIcons/ProviderIcon.vue';
const props = defineProps({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,25 +65,16 @@ const closeModal = () => {
</template>

<template #description>
Manage and remove your connected accounts.
Connect your social media accounts to enable Sign In with OAuth.
</template>

<template #content>
<h3 class="text-lg font-medium text-gray-900"
v-if="$page.props.socialstream.connectedAccounts.length === 0">
You have no connected accounts.
</h3>
<h3 class="text-lg font-medium text-gray-900" v-else>
Your connected accounts.
</h3>

<div class="mt-3 ax-w-xl text-sm text-gray-600">
You are free to connect any social accounts to your profile and may remove any connected accounts at any
time. If you feel any of your connected accounts have been compromised, you should disconnect them
immediately and change your password.
</div>
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
If you feel any of your connected accounts have been compromised, you should disconnect them
immediately and change your password.
</div>

<div class="mt-5 space-y-6">
<div class="space-y-6 mt-6">
<div v-for="(provider) in $page.props.socialstream.providers" :key="provider">
<ConnectedAccount :provider="provider"
:created-at="getAccountForProvider(provider)?.created_at">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,15 @@
</x-slot>

<x-slot name="description">
{{ __('Manage and remove your connected accounts.') }}
{{ __('Connect your social media accounts to enable Sign In with OAuth.') }}
</x-slot>

<x-slot name="content">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
@if (count($this->accounts) == 0)
{{ __('You have no connected accounts.') }}
@else
{{ __('Your connected accounts.') }}
@endif
</h3>

<div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
{{ __('You are free to connect any social accounts to your profile and may remove any connected accounts at any time. If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
<div class="p-4 bg-red-500/10 dark:bg-red-500/5 text-red-500 border-l-4 border-red-600 dark:border-red-700 rounded font-medium text-sm">
{{ __('If you feel any of your connected accounts have been compromised, you should disconnect them immediately and change your password.') }}
</div>

<div class="mt-5 space-y-6">
<div class="space-y-6 mt-6">
@foreach ($this->providers as $provider)
@php
$account = null;
Expand Down

0 comments on commit eb03f42

Please sign in to comment.