src/directives/onboarding.html
<div class="container-fluid onboarding-container">
<div class="row ob-main">
<div ng-if="obStep === 1" class="ob ob1 col-xs-12">
<p><i class="fa fa-flag"></i></p>
<p>Hi, I'm YadaGuru and I'm here to get your college applications done.</p>
<button type="button" class="btn btn-primary btn-onboarding-desktop"
ng-click="advanceOb()">Create an Account</button>
<p class="intro-divider">or</p>
<button type="button" class="btn btn-primary login-btn btn-onboarding-desktop"
ui-sref="login" ng-click="endOnboarding()">Login</button>
</div>
<div ng-if="obStep === 2" class="ob ob2 col-xs-12">
<p><i class="fa fa-clock-o"></i></p>
<p>I'll send you text reminders about all the things you need to do.</p>
<div class="btn-container">
<button type="button" class="btn btn-primary btn-onboarding-desktop"
ng-click="rewindOb()">Back</button>
<button type="button" class="btn btn-primary btn-onboarding-desktop"
ng-click="advanceOb()">Next</button>
</div>
</div>
<div ng-if="obStep === 3" class="ob ob3 col-xs-12">
<p>To get started, please enter your mobile number.</p>
<form name="smsForm">
<div class="form-group">
<label class="sr-only" for="phone-number">phone Number</label>
<div class="input-group">
<input type="tel"
class="form-control"
id="phone-number"
ng-model="$parent.phoneNumber"
required
name="phoneNumber"
ui-mask-placeholder
ui-mask="(999) 999-9999"
ng-minlength="10" />
<span class="input-group-btn">
<button class="btn btn-primary"
type="button"
ng-class="{disabled: smsForm.$invalid}"
ng-disabled="smsForm.$invalid"
ng-click="submitMobile()">OK NEXT</button>
</span>
</div>
</div>
</form>
<div class="disclaimer">
By clicking this button you agree to allow YadaGuru to send you periodic
reminders about the college application process to your mobile phone.
Depending on your text plan, this may incur cost. YadaGuru is not responsible
for these costs. Please see our Privacy Policy for more information about
how we use your mobile number.
</div>
<button type="button" class="btn btn-primary btn-onboarding-desktop"
ng-click="rewindOb()">Back</button>
</div>
<div ng-if="obStep === 4" class="ob ob4 col-xs-12">
<p>
Enter the code we sent you here.
</p>
<form name="codesAddForm">
<div class="form-group">
<input type="text"
class="form-control"
placeholder="123456"
id="confirm-code"
name="confirmCode"
ng-model="$parent.confirmCode"
required>
</div>
<button type="submit"
class="btn btn-primary"
ng-class="{disabled: codesAddForm.$invalid}"
ng-disabled="codesAddForm.$invalid"
ng-click="submitCode()">OK NEXT
</button>
</form>
</div>
<div ng-if="obStep === 5" class="ob ob5 col-xs-12">
<p>Let's set up your first school. What's the name of a school that you're thinking of applying to?</p>
<div class="form-group">
<label class="sr-only" for="school-name">School Name</label>
<div class="input-group">
<input type="text" class="form-control" id="school-name" ng-model="$parent.schoolName" placeholder="School Name" />
<span class="input-group-btn">
<button class="btn btn-primary"
type="button"
ng-class="{disabled: !schoolName}"
ng-click="advanceOb(true)">OK NEXT</button>
</span>
</div>
</div>
</div>
<div ng-if="obStep === 6" class="ob ob6 col-xs-12">
<p>Cool. Now, what is the Regular Admissions application submission date of that school? </p>
<div class="form-group">
<label class="sr-only" for="school-name">Submission Date</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary"
type="button"
ng-click="openDatepicker($event)"
>
<i class="fa fa-calendar"></i>
</button>
</span>
<div class="datepicker-position">
<input
type="text"
class="form-control"
id="submission-date"
ng-model="$parent.submissionDate"
datepicker-popup="M/d/yyyy"
is-open="datepickerOpen"
min-date="minDate"
init-date="initDate"
placeholder="mm/dd/yyyy" />
</div>
<span class="input-group-btn">
<button class="btn btn-primary"
type="button"
ng-class="{disabled: !validateSubmissionDate()}"
ng-disabled="!validateSubmissionDate()"
ng-click="submitSchool()"
>
OK NEXT
</button>
</span>
</div>
</div>
<p class="info-text" ng-click="faqModal('faq-app-submission-date')" role="button">What's an Application Submission Date?</p>
<p class="info-text" ng-click="faqModal('faq-app-find')" role="button">Where do I find it?</p>
<p class="info-text" ng-click="faqModal('faq-regular-admissions')" role="button">What's 'Regular Admissions?'</p>
<p class="info-text" ng-click="faqModal('faq-rolling-admissions')" role="button">What About Rolling Admission?</p>
<p class="info-text" ng-click="faqModal('faq-early-action')" role="button">Do you do Early Action/Decision?</p>
</div>
<div ng-if="obStep === 7" class="ob ob7 col-xs-12">
<p class="small">
Yay!<br>
Your first school is setup.<br>
Reminder text messages will start coming soon.
</p>
<p>
<u>TIP: FROM NOW ON:</u>
</p>
<p class="big">
<span class="text-uppercase">Tap</span> the <span class="text-uppercase">School</span>
</p>
<img src="assets/images/school-help.png" alt="School card on the school menu" />
<p>
For <span class="text-uppercase">Reminders</span>
</p>
<ul class="onboarding-icon-help">
<li>
<i class="fa fa-plus" aria-hidden="true"></i>
<span class="sr-only">Press the plus icon</span>To <span class="text-uppercase">Add Schools</span>
</li>
<li>
<i class="fa fa-clock-o" aria-hidden="true"></i>
<span class="sr-only">Press the clock icon</span> To <span class="text-uppercase">See All Plans</span>
</li>
</ul>
<button
type="button"
class="btn btn-primary btn-onboarding-desktop"
ng-click="completeOnboarding()"
>
Got It
</button>
</div>
</div>
</div>