ほぼJSなしで完璧なReactフォームをつくる
import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else
Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #4 サインアップページの作成 - Qiita
←Nuxt.jsで認証認可入り掲示板APIのフロントエンド部分を構築する #3 個別記事ページの作成 サインアップ(登録)ページの作成 サインアップページ及びそのロジックを作っていきますが、難易度が一気に上がります。 一気にすべて理解しようとせず、少しずつコードを読み解いていってください。 まずはサインアップページを作ります。 <template> <v-app id="inspire"> <v-main> <v-container class="fill-height" fluid > <v-row align="center" justify="center" > <v-col cols="12" sm="8" md="4" > <form @submit.prevent="signUp"> <v-card class="elevation-12"> <v-toolbar color=
Vue3対応版のVee-Validate4がかなり変わっていた - くらげになりたい。
Vee-Validate3を使ってたけど、Vue3を利用しているので、 Vue3対応版のVee-Validate4を試してみたときに備忘録。 かなり変わっているので、びっくりする(*´ω｀*) 主な変更点 ValidationProviderなどで囲わなくなり、 Form、Fieldなどのコンポーネントが提供されるようになった. validationルールは提供されなり、 Yupなどを使い自分で定義が必要に フォームに全体のルールを設定できるようになり、 フィールドごとにルールが不要になった。 使い方 まずはインストール。 $ npm install vee-validate --save コンポーネント版 フィールドのバリデーション 基本的には、提供されるコンポーネントを<form>や<input>のように使う。 必須入力であっても、validationルールは自分で作る必要がある。 ・
【Laravel】メールアドレスを変更する方法を徹底解説【コピペでOK】
今回はLaravelでメールアドレスを変更する方法について、わかりやすく説明していきます。 また、なるべくコピペで実装できるようにコードをまるごと掲載していきます！ 今回実装するメールアドレス変更機能の流れは以下の通りです。 ①すでにログインしているユーザーが新しいメールアドレスを入力 ②入力したメールアドレスあてに確認メールを送信する ③メールのリンクをクリックするとメールアドレスの変更が完了する ※新しいメールアドレスを認証するまでは、以前のメールアドレスでログインさせる LaravelにはEmail Verificationというメールアドレスの確認機能が実装されていますが、Email Verificationを使用すると新しいメールアドレスを入力した際に古いメールアドレスは上書きされてしまいます。 今回実装したい機能のように、新しいメールアドレスを認証するまでは以前のメールアドレス
アジャイル開発とデータベース設計 - 変化に対応するシンプルな実装のために必要なこと - Agile Journey
はじめまして。そーだい（@soudai1025）です。私は普段は技術コンサルティングや受託開発を請け負う合同会社HaveFunTechの代表として、また、予防治療の自社サービスを展開する株式会社リンケージのCTOという二足の草鞋を履き、日々、さまざまなWebサービスの開発に携わっています。 これまでの開発経験のなかで、データベース設計に関わるさまざまな問題に遭遇してきましたが、本稿ではとくに、アジャイル開発時に発生しやすい問題とその対処についてお伝えしたいと思います。開発の現場で目にしやすい実装におけるアンチパターンを示しつつ、アジャイルという指針を維持しながら、対処となるデータベース設計についてご紹介します。 会員登録のアンチパターンと処方箋 イージーな実装とシンプルな実装 Userと言う名の罠 拡張と破綻 データベースは変化に弱い 仕様変更とテーブル変更 Addで変化に追従する 正規化
型を明確にしながらaxiosを使う - Qiita
この記事では、APIへの問い合わせ時にJSONの各項目の型を明確にしながらaxiosを利用してみます。 （get, postなどの基本的なメソッドに絞った内容です。） JSみたいに利用する JSと同じようにaxiosを利用すると、成功時のレスポンス・エラー時のレスポンスそれぞれがanyになります。 import axios from 'axios' axios.post( 'https://reqres.in/api/register', { email: 'eve.holt@reqres.in', password: 'pistol', } ) .then(res => { // res.dataはanyになる console.info('token: ' + res.data.token) }) .catch((e) => { if (e.response !== undefined)
Laravelでログインとトークン認証のAPIを作成してみる（API実装） | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
前回記事「Laravel…
TypeScriptで世界一型安全な型レベルSQL Interpreterを作っている話
こんにちは。DevOps芸人と化して久しいAndyです。 2020年の秋にTypeScript 4.1へTemplate Literal Typesが導入され、そのインパクトに俄かに一部の界隈がザワついたのは記憶に新しいかと思います。 今回は型プログラミングの可能性を大いに押し広げたTemplate Literal Typesを用いてSQL文を型レベルで解析し、その実行結果を型情報として導出するためのsqlptureというライブラリを作ったので紹介します。 Embedded content: https://github.com/andoshin11/sqlpture SQLの実行/検証対象はPostgreSQL v13です。 tl;dr SQL文を型レベルで解析・評価して返り値型を取得できるmini interpreterを作ったよ 型レベルのSQL validatorも作ってるよ 実際
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
Laravel API Tutorial: How to Build and Test a RESTful API | Toptal®
With the rise of mobile development and JavaScript frameworks, using a RESTful API is the best option to build a single interface between your data and your client. Laravel is a PHP framework developed with PHP developer productivity in mind. Written and maintained by Taylor Otwell, the framework is very opinionated and strives to save developer time by favoring convention over configuration. The
Laravel5.7のEmail Verificationを読む - Laravelコードリーディング - Qiita
本項のテーマ & 前置き Laravel5.7のコードを読んでいきます。 5.6 → 5.7でいくつかの機能が追加されました。そのうちの一つがEmail Verificationです。 早い話がユーザー登録時のメール確認ですね。以下の点をコード上で確認してみたいと思います。 ユーザー登録→確認メール送信 メール記載のURLをクリック→登録完了 メール確認済みかどうかのチェック この機能の使い方（コーディング方法など）についは以下の記事がわかりやすいかと思いますのでそちらを参考にしてください（無許可） 最新Laravel 5.7の便利な機能「正しいメールアドレスのみ登録させる機能：Email Verification」 Let's コードリーディング!! 確認メールを送るまで まずは登録時の処理がどう変わっているのか見ていきましょう。 登録処理はIlluminate\Foundation\A
twitterのoauthを使ってみる（emailも取得） - Qiita
twitterのoauthとは よくtwitterでログインというボタンを見ますが仕組み的にはtwitterが用意しているoauthのAPIを使用して実現しています。 このAPIは他にも色々情報をとれるので、今回はユーザID、ユーザ名、ツイート情報以外にメールアドレスも取得してみます。 twitterアカウントの用意 当たり前ですが、アカウントを用意します。 また、APIを使用する際は自分が作成した物をサイトやアプリを登録する必要があります。 登録時には電話番号を設定したアカウントでないと登録できないので電話番号を登録します。 尚、電話番号は前ゼロをとってください。 例） 090-****-**** なら 90-****-**** と登録します。 APIキーの発行 デベロッパー用のサイトが https://apps.twitter.com/ になります。ここでアプリ、サイトの登録を行います
laravel5.5でemeil認証＋ソーシャルアカウント認証 - Qiita
前提 見た目を作ることしかわからない自分が勉強がてらやってみてログってる中身です。 これをやったらマズイのよ、という点がありましたらご指摘いただけると幸いですmm やること ・laravelデフォルト認証（email+password）とソーシャルアカウント認証、両方を可能にする ・デフォルトなページ遷移（メール認証がAPIだったりSPAでは無い） ・データベースは１テーブルに収める イメージ id username email password facebook_id facebook_name 以下略SNS_id 以下略SNS_name ・以下はFacebook&Twitterを認証に追加で記載 環境 laravel5.5 インストール済み SQlite3を利用 参考 （WPJ）面倒なソーシャルログインをLaravelでサクッと実装！Socialiteが便利だ:https://www.
Phishing FrameworkのGoPhishを検証してみた！！ - セキュリティコンサルタントの日誌から
以前、ソーシャル・エンジニアリング系のコミュニティにてGoPhishというオープン・ソースのフィッシングフレームワークを教えてもらい、なかなか使えるという評判を聞いていました。最近やっと検証する機会ができたので、検証結果をまとめています。 なお、User Guideも用意されているのでその通りに使えば簡単に使うことができます。 インストール サイトからダウンロードするだけです。Windows用のバイナリもあり、実行するとサーバが立ち上がります。 getgophish.com その後、localhost:3333にアクセスすると管理コンソールが立ち上がりますので、以下のデフォルトアカウントでログインします。（管理コンソールのポート番号は設定で自由に変えられます。また、GitHubに乗っているアカウントは間違っているので注意が必要です。） ユーザ名：admin パスワード：gophish ログ
Why Zulip? Efficient communication with organized team chat.
Case Studies BUSINESS Efficient distributed team management at iDrift AS Easy communication for 1000 agents at GUT contact Managing hundreds of projects at End Point Dev More efficient communication than Slack at Semsee Open distributed communication at Atolio EDUCATION and RESEARCH Organized chat for 1000s of students at TUM Communication hub across 6 continents at UCSD Research collaboration at
Ancient Earth
This visualization is created and maintained by Ian Webster. See more of my work at ianww.com or email me at ian@dinosaurpictures.org. Click here to subscribe to occassional email updates when we add something interesting to this visualization such as new dinosaur or plate tectonic data. Plate tectonic and paleogeographic maps by C.R. Scotese, PALEOMAP Project. For more information visit: https://
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NetRICOH - ログイン名（E-mailアドレス）について -
https://laracasts.com/discuss/channels/laravel/require-a-user-to-be-active-email-verification-before-giving-a-password-grant-accesstoken-through-passport
Mailtrap
Swarm | Remember everywhere.